[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-tanstack-create-table-hook":3,"mdc--430lpz-key":51,"related-org-tanstack-create-table-hook":1681,"related-repo-tanstack-create-table-hook":1819},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":22,"repoUrl":23,"updatedAt":24,"license":25,"forks":26,"topics":27,"repo":46,"sourceUrl":49,"mdContent":50},"create-table-hook","create reusable Vue table hooks","Create a reusable Vue useAppTable\u002FcreateAppColumnHelper with shared features\u002Fdefaults, reactive per-table options, optional component registries, dynamic App wrappers, typed context hooks, and explicit types that break circular inference.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},"tanstack","TanStack","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Ftanstack.png",[12,16,19],{"name":13,"slug":14,"type":15},"Vue","vue","tag",{"name":17,"slug":18,"type":15},"UI Components","ui-components",{"name":20,"slug":21,"type":15},"Frontend","frontend",28175,"https:\u002F\u002Fgithub.com\u002FTanStack\u002Ftable","2026-07-30T05:25:40.438707",null,3539,[28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,14],"datagrid","datagrids","datatable","filtering","grid","grouping","hooks","javascript","pagination","react","reactjs","solid","solidjs","sorting","svelte","sveltejs","table","typescript",{"repoUrl":23,"stars":22,"forks":26,"topics":47,"description":48},[28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,14],"🤖 Headless UI for building powerful tables & datagrids for TS\u002FJS -  React-Table, Vue-Table, Solid-Table, Svelte-Table","https:\u002F\u002Fgithub.com\u002FTanStack\u002Ftable\u002Ftree\u002FHEAD\u002Fpackages\u002Fvue-table\u002Fskills\u002Fcreate-table-hook","---\nname: create-table-hook\ndescription: >\n  Create a reusable Vue useAppTable\u002FcreateAppColumnHelper with shared features\u002Fdefaults, reactive per-table options, optional component registries, dynamic App wrappers, typed context hooks, and explicit types that break circular inference.\nmetadata:\n  type: framework\n  library: '@tanstack\u002Fvue-table'\n  framework: vue\n  library_version: '9.0.0-beta.59'\nrequires:\n  - '@tanstack\u002Ftable-core#core'\n  - getting-started\n  - table-state\nsources:\n  - 'TanStack\u002Ftable:docs\u002Fframework\u002Fvue\u002Fguide\u002Fcomposable-tables.md'\n  - 'TanStack\u002Ftable:examples\u002Fvue\u002Fcomposable-tables'\n  - 'TanStack\u002Ftable:packages\u002Fvue-table\u002Fsrc\u002FcreateTableHook.ts'\n---\n\nThis skill builds on `@tanstack\u002Ftable-core#core`, `getting-started`, and `table-state`. Use it for recurring app conventions; use `useTable` for a one-off.\n\n## Setup\n\n```ts\nimport {\n  createTableHook,\n  rowSortingFeature,\n  tableFeatures,\n} from '@tanstack\u002Fvue-table'\nimport type { RowData, VueTable } from '@tanstack\u002Fvue-table'\n\nconst features = tableFeatures({ rowSortingFeature })\nconst hook = createTableHook({ features })\nexport const useAppTable = hook.useAppTable\nexport const createAppColumnHelper = hook.createAppColumnHelper\nexport const useTableContext: \u003CTData extends RowData = RowData>() => VueTable\u003C\n  typeof features,\n  TData\n> = hook.useTableContext\n```\n\nThe explicit exported context-hook types are important when registered components import the hook module that also imports those components.\n\n## Core Patterns\n\n### Keep per-table values reactive\n\n```ts\nconst helper = createAppColumnHelper\u003CPerson>()\nconst columns = helper.columns([helper.accessor('name', { header: 'Name' })])\nconst table = useAppTable({ columns, data })\n```\n\nPass refs\u002Fcomputed options through unchanged.\n\n### Wrap registered component context\n\nRender through `table.AppTable`, `table.AppCell`, or `table.AppHeader`; inside registered components call the corresponding typed context hook instead of prop drilling.\n\n## Common Mistakes\n\n### HIGH Creating circular inferred exports\n\nWrong:\n\n```ts\nexport const { useAppTable, useTableContext } = createTableHook({\n  tableComponents: { Pager },\n})\n```\n\nCorrect:\n\n```ts\nconst hook = createTableHook({ tableComponents: { Pager } })\nexport const useTableContext: \u003CTData extends RowData = RowData>() => VueTable\u003C\n  typeof features,\n  TData\n> = hook.useTableContext\n```\n\nWhen `Pager` imports `useTableContext`, inferred destructured exports can form a circular inference\u002Fimport chain.\n\nSource: `docs\u002Fframework\u002Fvue\u002Fguide\u002Fcomposable-tables.md`\n\n### HIGH Flattening reactive table options\n\nWrong:\n\n```ts\nuseAppTable({ columns, data: data.value })\n```\n\nCorrect:\n\n```ts\nuseAppTable({ columns, data })\n```\n\nThe app hook preserves the adapter’s `MaybeRef` option contract.\n\nSource: `packages\u002Fvue-table\u002Fsrc\u002FcreateTableHook.ts`\n\n### HIGH Using context without App wrappers\n\nWrong:\n\n```ts\nconst table = useTableContext()\n```\n\nCorrect:\n\n```vue\n\u003Ccomponent :is=\"table.AppTable\">\u003CPager \u002F>\u003C\u002Fcomponent>\n```\n\nThe typed context exists only below the corresponding dynamic wrapper.\n\nSource: `packages\u002Fvue-table\u002Fsrc\u002FcreateTableHook.ts`\n\n### MEDIUM Treating Subscribe children as slots\n\nWrong:\n\n```tsx\n\u003Ctable.Subscribe>\n  {(atoms) => \u003CPager page={atoms.pagination.get()} \u002F>}\n\u003C\u002Ftable.Subscribe>\n```\n\nCorrect:\n\n```tsx\n\u003Ctable.Subscribe\n  children={(atoms) => \u003CPager page={atoms.pagination.get()} \u002F>}\n\u002F>\n```\n\nVue’s adapter expects an explicit `children` prop in JSX.\n\nSource: `packages\u002Fvue-table\u002Fsrc\u002FuseTable.ts`\n\n## API Discovery\n\nInspect `node_modules\u002F@tanstack\u002Fvue-table\u002Fdist\u002FcreateTableHook.d.ts` for the returned helpers, wrapper props, registry types, and context contracts.\n",{"data":52,"body":65},{"name":4,"description":6,"metadata":53,"requires":57,"sources":61},{"type":54,"library":55,"framework":14,"library_version":56},"framework","@tanstack\u002Fvue-table","9.0.0-beta.59",[58,59,60],"@tanstack\u002Ftable-core#core","getting-started","table-state",[62,63,64],"TanStack\u002Ftable:docs\u002Fframework\u002Fvue\u002Fguide\u002Fcomposable-tables.md","TanStack\u002Ftable:examples\u002Fvue\u002Fcomposable-tables","TanStack\u002Ftable:packages\u002Fvue-table\u002Fsrc\u002FcreateTableHook.ts",{"type":66,"children":67},"root",[68,106,113,563,568,574,581,781,786,792,820,826,832,837,930,935,1102,1123,1134,1140,1144,1205,1209,1251,1264,1274,1280,1284,1314,1318,1397,1402,1411,1417,1421,1533,1537,1633,1646,1656,1662,1675],{"type":69,"tag":70,"props":71,"children":72},"element","p",{},[73,76,82,84,89,91,96,98,104],{"type":74,"value":75},"text","This skill builds on ",{"type":69,"tag":77,"props":78,"children":80},"code",{"className":79},[],[81],{"type":74,"value":58},{"type":74,"value":83},", ",{"type":69,"tag":77,"props":85,"children":87},{"className":86},[],[88],{"type":74,"value":59},{"type":74,"value":90},", and ",{"type":69,"tag":77,"props":92,"children":94},{"className":93},[],[95],{"type":74,"value":60},{"type":74,"value":97},". Use it for recurring app conventions; use ",{"type":69,"tag":77,"props":99,"children":101},{"className":100},[],[102],{"type":74,"value":103},"useTable",{"type":74,"value":105}," for a one-off.",{"type":69,"tag":107,"props":108,"children":110},"h2",{"id":109},"setup",[111],{"type":74,"value":112},"Setup",{"type":69,"tag":114,"props":115,"children":120},"pre",{"className":116,"code":117,"language":118,"meta":119,"style":119},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import {\n  createTableHook,\n  rowSortingFeature,\n  tableFeatures,\n} from '@tanstack\u002Fvue-table'\nimport type { RowData, VueTable } from '@tanstack\u002Fvue-table'\n\nconst features = tableFeatures({ rowSortingFeature })\nconst hook = createTableHook({ features })\nexport const useAppTable = hook.useAppTable\nexport const createAppColumnHelper = hook.createAppColumnHelper\nexport const useTableContext: \u003CTData extends RowData = RowData>() => VueTable\u003C\n  typeof features,\n  TData\n> = hook.useTableContext\n","ts","",[121],{"type":69,"tag":77,"props":122,"children":123},{"__ignoreMap":119},[124,142,157,170,183,212,266,276,326,368,406,440,510,528,537],{"type":69,"tag":125,"props":126,"children":129},"span",{"class":127,"line":128},"line",1,[130,136],{"type":69,"tag":125,"props":131,"children":133},{"style":132},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[134],{"type":74,"value":135},"import",{"type":69,"tag":125,"props":137,"children":139},{"style":138},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[140],{"type":74,"value":141}," {\n",{"type":69,"tag":125,"props":143,"children":145},{"class":127,"line":144},2,[146,152],{"type":69,"tag":125,"props":147,"children":149},{"style":148},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[150],{"type":74,"value":151},"  createTableHook",{"type":69,"tag":125,"props":153,"children":154},{"style":138},[155],{"type":74,"value":156},",\n",{"type":69,"tag":125,"props":158,"children":160},{"class":127,"line":159},3,[161,166],{"type":69,"tag":125,"props":162,"children":163},{"style":148},[164],{"type":74,"value":165},"  rowSortingFeature",{"type":69,"tag":125,"props":167,"children":168},{"style":138},[169],{"type":74,"value":156},{"type":69,"tag":125,"props":171,"children":173},{"class":127,"line":172},4,[174,179],{"type":69,"tag":125,"props":175,"children":176},{"style":148},[177],{"type":74,"value":178},"  tableFeatures",{"type":69,"tag":125,"props":180,"children":181},{"style":138},[182],{"type":74,"value":156},{"type":69,"tag":125,"props":184,"children":186},{"class":127,"line":185},5,[187,192,197,202,207],{"type":69,"tag":125,"props":188,"children":189},{"style":138},[190],{"type":74,"value":191},"}",{"type":69,"tag":125,"props":193,"children":194},{"style":132},[195],{"type":74,"value":196}," from",{"type":69,"tag":125,"props":198,"children":199},{"style":138},[200],{"type":74,"value":201}," '",{"type":69,"tag":125,"props":203,"children":205},{"style":204},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[206],{"type":74,"value":55},{"type":69,"tag":125,"props":208,"children":209},{"style":138},[210],{"type":74,"value":211},"'\n",{"type":69,"tag":125,"props":213,"children":215},{"class":127,"line":214},6,[216,220,225,230,235,240,245,250,254,258,262],{"type":69,"tag":125,"props":217,"children":218},{"style":132},[219],{"type":74,"value":135},{"type":69,"tag":125,"props":221,"children":222},{"style":132},[223],{"type":74,"value":224}," type",{"type":69,"tag":125,"props":226,"children":227},{"style":138},[228],{"type":74,"value":229}," {",{"type":69,"tag":125,"props":231,"children":232},{"style":148},[233],{"type":74,"value":234}," RowData",{"type":69,"tag":125,"props":236,"children":237},{"style":138},[238],{"type":74,"value":239},",",{"type":69,"tag":125,"props":241,"children":242},{"style":148},[243],{"type":74,"value":244}," VueTable",{"type":69,"tag":125,"props":246,"children":247},{"style":138},[248],{"type":74,"value":249}," }",{"type":69,"tag":125,"props":251,"children":252},{"style":132},[253],{"type":74,"value":196},{"type":69,"tag":125,"props":255,"children":256},{"style":138},[257],{"type":74,"value":201},{"type":69,"tag":125,"props":259,"children":260},{"style":204},[261],{"type":74,"value":55},{"type":69,"tag":125,"props":263,"children":264},{"style":138},[265],{"type":74,"value":211},{"type":69,"tag":125,"props":267,"children":269},{"class":127,"line":268},7,[270],{"type":69,"tag":125,"props":271,"children":273},{"emptyLinePlaceholder":272},true,[274],{"type":74,"value":275},"\n",{"type":69,"tag":125,"props":277,"children":279},{"class":127,"line":278},8,[280,286,291,296,302,307,312,317,321],{"type":69,"tag":125,"props":281,"children":283},{"style":282},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[284],{"type":74,"value":285},"const",{"type":69,"tag":125,"props":287,"children":288},{"style":148},[289],{"type":74,"value":290}," features ",{"type":69,"tag":125,"props":292,"children":293},{"style":138},[294],{"type":74,"value":295},"=",{"type":69,"tag":125,"props":297,"children":299},{"style":298},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[300],{"type":74,"value":301}," tableFeatures",{"type":69,"tag":125,"props":303,"children":304},{"style":148},[305],{"type":74,"value":306},"(",{"type":69,"tag":125,"props":308,"children":309},{"style":138},[310],{"type":74,"value":311},"{",{"type":69,"tag":125,"props":313,"children":314},{"style":148},[315],{"type":74,"value":316}," rowSortingFeature ",{"type":69,"tag":125,"props":318,"children":319},{"style":138},[320],{"type":74,"value":191},{"type":69,"tag":125,"props":322,"children":323},{"style":148},[324],{"type":74,"value":325},")\n",{"type":69,"tag":125,"props":327,"children":329},{"class":127,"line":328},9,[330,334,339,343,348,352,356,360,364],{"type":69,"tag":125,"props":331,"children":332},{"style":282},[333],{"type":74,"value":285},{"type":69,"tag":125,"props":335,"children":336},{"style":148},[337],{"type":74,"value":338}," hook ",{"type":69,"tag":125,"props":340,"children":341},{"style":138},[342],{"type":74,"value":295},{"type":69,"tag":125,"props":344,"children":345},{"style":298},[346],{"type":74,"value":347}," createTableHook",{"type":69,"tag":125,"props":349,"children":350},{"style":148},[351],{"type":74,"value":306},{"type":69,"tag":125,"props":353,"children":354},{"style":138},[355],{"type":74,"value":311},{"type":69,"tag":125,"props":357,"children":358},{"style":148},[359],{"type":74,"value":290},{"type":69,"tag":125,"props":361,"children":362},{"style":138},[363],{"type":74,"value":191},{"type":69,"tag":125,"props":365,"children":366},{"style":148},[367],{"type":74,"value":325},{"type":69,"tag":125,"props":369,"children":371},{"class":127,"line":370},10,[372,377,382,387,391,396,401],{"type":69,"tag":125,"props":373,"children":374},{"style":132},[375],{"type":74,"value":376},"export",{"type":69,"tag":125,"props":378,"children":379},{"style":282},[380],{"type":74,"value":381}," const",{"type":69,"tag":125,"props":383,"children":384},{"style":148},[385],{"type":74,"value":386}," useAppTable ",{"type":69,"tag":125,"props":388,"children":389},{"style":138},[390],{"type":74,"value":295},{"type":69,"tag":125,"props":392,"children":393},{"style":148},[394],{"type":74,"value":395}," hook",{"type":69,"tag":125,"props":397,"children":398},{"style":138},[399],{"type":74,"value":400},".",{"type":69,"tag":125,"props":402,"children":403},{"style":148},[404],{"type":74,"value":405},"useAppTable\n",{"type":69,"tag":125,"props":407,"children":409},{"class":127,"line":408},11,[410,414,418,423,427,431,435],{"type":69,"tag":125,"props":411,"children":412},{"style":132},[413],{"type":74,"value":376},{"type":69,"tag":125,"props":415,"children":416},{"style":282},[417],{"type":74,"value":381},{"type":69,"tag":125,"props":419,"children":420},{"style":148},[421],{"type":74,"value":422}," createAppColumnHelper ",{"type":69,"tag":125,"props":424,"children":425},{"style":138},[426],{"type":74,"value":295},{"type":69,"tag":125,"props":428,"children":429},{"style":148},[430],{"type":74,"value":395},{"type":69,"tag":125,"props":432,"children":433},{"style":138},[434],{"type":74,"value":400},{"type":69,"tag":125,"props":436,"children":437},{"style":148},[438],{"type":74,"value":439},"createAppColumnHelper\n",{"type":69,"tag":125,"props":441,"children":443},{"class":127,"line":442},12,[444,448,452,457,462,467,473,478,482,487,491,496,501,505],{"type":69,"tag":125,"props":445,"children":446},{"style":132},[447],{"type":74,"value":376},{"type":69,"tag":125,"props":449,"children":450},{"style":282},[451],{"type":74,"value":381},{"type":69,"tag":125,"props":453,"children":454},{"style":148},[455],{"type":74,"value":456}," useTableContext",{"type":69,"tag":125,"props":458,"children":459},{"style":138},[460],{"type":74,"value":461},":",{"type":69,"tag":125,"props":463,"children":464},{"style":138},[465],{"type":74,"value":466}," \u003C",{"type":69,"tag":125,"props":468,"children":470},{"style":469},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[471],{"type":74,"value":472},"TData",{"type":69,"tag":125,"props":474,"children":475},{"style":282},[476],{"type":74,"value":477}," extends",{"type":69,"tag":125,"props":479,"children":480},{"style":469},[481],{"type":74,"value":234},{"type":69,"tag":125,"props":483,"children":484},{"style":138},[485],{"type":74,"value":486}," =",{"type":69,"tag":125,"props":488,"children":489},{"style":469},[490],{"type":74,"value":234},{"type":69,"tag":125,"props":492,"children":493},{"style":138},[494],{"type":74,"value":495},">()",{"type":69,"tag":125,"props":497,"children":498},{"style":282},[499],{"type":74,"value":500}," =>",{"type":69,"tag":125,"props":502,"children":503},{"style":469},[504],{"type":74,"value":244},{"type":69,"tag":125,"props":506,"children":507},{"style":138},[508],{"type":74,"value":509},"\u003C\n",{"type":69,"tag":125,"props":511,"children":513},{"class":127,"line":512},13,[514,519,524],{"type":69,"tag":125,"props":515,"children":516},{"style":138},[517],{"type":74,"value":518},"  typeof",{"type":69,"tag":125,"props":520,"children":521},{"style":148},[522],{"type":74,"value":523}," features",{"type":69,"tag":125,"props":525,"children":526},{"style":138},[527],{"type":74,"value":156},{"type":69,"tag":125,"props":529,"children":531},{"class":127,"line":530},14,[532],{"type":69,"tag":125,"props":533,"children":534},{"style":469},[535],{"type":74,"value":536},"  TData\n",{"type":69,"tag":125,"props":538,"children":540},{"class":127,"line":539},15,[541,546,550,554,558],{"type":69,"tag":125,"props":542,"children":543},{"style":138},[544],{"type":74,"value":545},">",{"type":69,"tag":125,"props":547,"children":548},{"style":138},[549],{"type":74,"value":486},{"type":69,"tag":125,"props":551,"children":552},{"style":148},[553],{"type":74,"value":395},{"type":69,"tag":125,"props":555,"children":556},{"style":138},[557],{"type":74,"value":400},{"type":69,"tag":125,"props":559,"children":560},{"style":148},[561],{"type":74,"value":562},"useTableContext\n",{"type":69,"tag":70,"props":564,"children":565},{},[566],{"type":74,"value":567},"The explicit exported context-hook types are important when registered components import the hook module that also imports those components.",{"type":69,"tag":107,"props":569,"children":571},{"id":570},"core-patterns",[572],{"type":74,"value":573},"Core Patterns",{"type":69,"tag":575,"props":576,"children":578},"h3",{"id":577},"keep-per-table-values-reactive",[579],{"type":74,"value":580},"Keep per-table values reactive",{"type":69,"tag":114,"props":582,"children":584},{"className":116,"code":583,"language":118,"meta":119,"style":119},"const helper = createAppColumnHelper\u003CPerson>()\nconst columns = helper.columns([helper.accessor('name', { header: 'Name' })])\nconst table = useAppTable({ columns, data })\n",[585],{"type":69,"tag":77,"props":586,"children":587},{"__ignoreMap":119},[588,628,730],{"type":69,"tag":125,"props":589,"children":590},{"class":127,"line":128},[591,595,600,604,609,614,619,623],{"type":69,"tag":125,"props":592,"children":593},{"style":282},[594],{"type":74,"value":285},{"type":69,"tag":125,"props":596,"children":597},{"style":148},[598],{"type":74,"value":599}," helper ",{"type":69,"tag":125,"props":601,"children":602},{"style":138},[603],{"type":74,"value":295},{"type":69,"tag":125,"props":605,"children":606},{"style":298},[607],{"type":74,"value":608}," createAppColumnHelper",{"type":69,"tag":125,"props":610,"children":611},{"style":138},[612],{"type":74,"value":613},"\u003C",{"type":69,"tag":125,"props":615,"children":616},{"style":469},[617],{"type":74,"value":618},"Person",{"type":69,"tag":125,"props":620,"children":621},{"style":138},[622],{"type":74,"value":545},{"type":69,"tag":125,"props":624,"children":625},{"style":148},[626],{"type":74,"value":627},"()\n",{"type":69,"tag":125,"props":629,"children":630},{"class":127,"line":144},[631,635,640,644,649,653,658,663,667,672,676,681,686,690,694,698,704,708,712,717,721,725],{"type":69,"tag":125,"props":632,"children":633},{"style":282},[634],{"type":74,"value":285},{"type":69,"tag":125,"props":636,"children":637},{"style":148},[638],{"type":74,"value":639}," columns ",{"type":69,"tag":125,"props":641,"children":642},{"style":138},[643],{"type":74,"value":295},{"type":69,"tag":125,"props":645,"children":646},{"style":148},[647],{"type":74,"value":648}," helper",{"type":69,"tag":125,"props":650,"children":651},{"style":138},[652],{"type":74,"value":400},{"type":69,"tag":125,"props":654,"children":655},{"style":298},[656],{"type":74,"value":657},"columns",{"type":69,"tag":125,"props":659,"children":660},{"style":148},[661],{"type":74,"value":662},"([helper",{"type":69,"tag":125,"props":664,"children":665},{"style":138},[666],{"type":74,"value":400},{"type":69,"tag":125,"props":668,"children":669},{"style":298},[670],{"type":74,"value":671},"accessor",{"type":69,"tag":125,"props":673,"children":674},{"style":148},[675],{"type":74,"value":306},{"type":69,"tag":125,"props":677,"children":678},{"style":138},[679],{"type":74,"value":680},"'",{"type":69,"tag":125,"props":682,"children":683},{"style":204},[684],{"type":74,"value":685},"name",{"type":69,"tag":125,"props":687,"children":688},{"style":138},[689],{"type":74,"value":680},{"type":69,"tag":125,"props":691,"children":692},{"style":138},[693],{"type":74,"value":239},{"type":69,"tag":125,"props":695,"children":696},{"style":138},[697],{"type":74,"value":229},{"type":69,"tag":125,"props":699,"children":701},{"style":700},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[702],{"type":74,"value":703}," header",{"type":69,"tag":125,"props":705,"children":706},{"style":138},[707],{"type":74,"value":461},{"type":69,"tag":125,"props":709,"children":710},{"style":138},[711],{"type":74,"value":201},{"type":69,"tag":125,"props":713,"children":714},{"style":204},[715],{"type":74,"value":716},"Name",{"type":69,"tag":125,"props":718,"children":719},{"style":138},[720],{"type":74,"value":680},{"type":69,"tag":125,"props":722,"children":723},{"style":138},[724],{"type":74,"value":249},{"type":69,"tag":125,"props":726,"children":727},{"style":148},[728],{"type":74,"value":729},")])\n",{"type":69,"tag":125,"props":731,"children":732},{"class":127,"line":159},[733,737,742,746,751,755,759,764,768,773,777],{"type":69,"tag":125,"props":734,"children":735},{"style":282},[736],{"type":74,"value":285},{"type":69,"tag":125,"props":738,"children":739},{"style":148},[740],{"type":74,"value":741}," table ",{"type":69,"tag":125,"props":743,"children":744},{"style":138},[745],{"type":74,"value":295},{"type":69,"tag":125,"props":747,"children":748},{"style":298},[749],{"type":74,"value":750}," useAppTable",{"type":69,"tag":125,"props":752,"children":753},{"style":148},[754],{"type":74,"value":306},{"type":69,"tag":125,"props":756,"children":757},{"style":138},[758],{"type":74,"value":311},{"type":69,"tag":125,"props":760,"children":761},{"style":148},[762],{"type":74,"value":763}," columns",{"type":69,"tag":125,"props":765,"children":766},{"style":138},[767],{"type":74,"value":239},{"type":69,"tag":125,"props":769,"children":770},{"style":148},[771],{"type":74,"value":772}," data ",{"type":69,"tag":125,"props":774,"children":775},{"style":138},[776],{"type":74,"value":191},{"type":69,"tag":125,"props":778,"children":779},{"style":148},[780],{"type":74,"value":325},{"type":69,"tag":70,"props":782,"children":783},{},[784],{"type":74,"value":785},"Pass refs\u002Fcomputed options through unchanged.",{"type":69,"tag":575,"props":787,"children":789},{"id":788},"wrap-registered-component-context",[790],{"type":74,"value":791},"Wrap registered component context",{"type":69,"tag":70,"props":793,"children":794},{},[795,797,803,804,810,812,818],{"type":74,"value":796},"Render through ",{"type":69,"tag":77,"props":798,"children":800},{"className":799},[],[801],{"type":74,"value":802},"table.AppTable",{"type":74,"value":83},{"type":69,"tag":77,"props":805,"children":807},{"className":806},[],[808],{"type":74,"value":809},"table.AppCell",{"type":74,"value":811},", or ",{"type":69,"tag":77,"props":813,"children":815},{"className":814},[],[816],{"type":74,"value":817},"table.AppHeader",{"type":74,"value":819},"; inside registered components call the corresponding typed context hook instead of prop drilling.",{"type":69,"tag":107,"props":821,"children":823},{"id":822},"common-mistakes",[824],{"type":74,"value":825},"Common Mistakes",{"type":69,"tag":575,"props":827,"children":829},{"id":828},"high-creating-circular-inferred-exports",[830],{"type":74,"value":831},"HIGH Creating circular inferred exports",{"type":69,"tag":70,"props":833,"children":834},{},[835],{"type":74,"value":836},"Wrong:",{"type":69,"tag":114,"props":838,"children":840},{"className":116,"code":839,"language":118,"meta":119,"style":119},"export const { useAppTable, useTableContext } = createTableHook({\n  tableComponents: { Pager },\n})\n",[841],{"type":69,"tag":77,"props":842,"children":843},{"__ignoreMap":119},[844,893,919],{"type":69,"tag":125,"props":845,"children":846},{"class":127,"line":128},[847,851,855,859,863,867,872,876,880,884,888],{"type":69,"tag":125,"props":848,"children":849},{"style":132},[850],{"type":74,"value":376},{"type":69,"tag":125,"props":852,"children":853},{"style":282},[854],{"type":74,"value":381},{"type":69,"tag":125,"props":856,"children":857},{"style":138},[858],{"type":74,"value":229},{"type":69,"tag":125,"props":860,"children":861},{"style":148},[862],{"type":74,"value":750},{"type":69,"tag":125,"props":864,"children":865},{"style":138},[866],{"type":74,"value":239},{"type":69,"tag":125,"props":868,"children":869},{"style":148},[870],{"type":74,"value":871}," useTableContext ",{"type":69,"tag":125,"props":873,"children":874},{"style":138},[875],{"type":74,"value":191},{"type":69,"tag":125,"props":877,"children":878},{"style":138},[879],{"type":74,"value":486},{"type":69,"tag":125,"props":881,"children":882},{"style":298},[883],{"type":74,"value":347},{"type":69,"tag":125,"props":885,"children":886},{"style":148},[887],{"type":74,"value":306},{"type":69,"tag":125,"props":889,"children":890},{"style":138},[891],{"type":74,"value":892},"{\n",{"type":69,"tag":125,"props":894,"children":895},{"class":127,"line":144},[896,901,905,909,914],{"type":69,"tag":125,"props":897,"children":898},{"style":700},[899],{"type":74,"value":900},"  tableComponents",{"type":69,"tag":125,"props":902,"children":903},{"style":138},[904],{"type":74,"value":461},{"type":69,"tag":125,"props":906,"children":907},{"style":138},[908],{"type":74,"value":229},{"type":69,"tag":125,"props":910,"children":911},{"style":148},[912],{"type":74,"value":913}," Pager ",{"type":69,"tag":125,"props":915,"children":916},{"style":138},[917],{"type":74,"value":918},"},\n",{"type":69,"tag":125,"props":920,"children":921},{"class":127,"line":159},[922,926],{"type":69,"tag":125,"props":923,"children":924},{"style":138},[925],{"type":74,"value":191},{"type":69,"tag":125,"props":927,"children":928},{"style":148},[929],{"type":74,"value":325},{"type":69,"tag":70,"props":931,"children":932},{},[933],{"type":74,"value":934},"Correct:",{"type":69,"tag":114,"props":936,"children":938},{"className":116,"code":937,"language":118,"meta":119,"style":119},"const hook = createTableHook({ tableComponents: { Pager } })\nexport const useTableContext: \u003CTData extends RowData = RowData>() => VueTable\u003C\n  typeof features,\n  TData\n> = hook.useTableContext\n",[939],{"type":69,"tag":77,"props":940,"children":941},{"__ignoreMap":119},[942,998,1057,1072,1079],{"type":69,"tag":125,"props":943,"children":944},{"class":127,"line":128},[945,949,953,957,961,965,969,974,978,982,986,990,994],{"type":69,"tag":125,"props":946,"children":947},{"style":282},[948],{"type":74,"value":285},{"type":69,"tag":125,"props":950,"children":951},{"style":148},[952],{"type":74,"value":338},{"type":69,"tag":125,"props":954,"children":955},{"style":138},[956],{"type":74,"value":295},{"type":69,"tag":125,"props":958,"children":959},{"style":298},[960],{"type":74,"value":347},{"type":69,"tag":125,"props":962,"children":963},{"style":148},[964],{"type":74,"value":306},{"type":69,"tag":125,"props":966,"children":967},{"style":138},[968],{"type":74,"value":311},{"type":69,"tag":125,"props":970,"children":971},{"style":700},[972],{"type":74,"value":973}," tableComponents",{"type":69,"tag":125,"props":975,"children":976},{"style":138},[977],{"type":74,"value":461},{"type":69,"tag":125,"props":979,"children":980},{"style":138},[981],{"type":74,"value":229},{"type":69,"tag":125,"props":983,"children":984},{"style":148},[985],{"type":74,"value":913},{"type":69,"tag":125,"props":987,"children":988},{"style":138},[989],{"type":74,"value":191},{"type":69,"tag":125,"props":991,"children":992},{"style":138},[993],{"type":74,"value":249},{"type":69,"tag":125,"props":995,"children":996},{"style":148},[997],{"type":74,"value":325},{"type":69,"tag":125,"props":999,"children":1000},{"class":127,"line":144},[1001,1005,1009,1013,1017,1021,1025,1029,1033,1037,1041,1045,1049,1053],{"type":69,"tag":125,"props":1002,"children":1003},{"style":132},[1004],{"type":74,"value":376},{"type":69,"tag":125,"props":1006,"children":1007},{"style":282},[1008],{"type":74,"value":381},{"type":69,"tag":125,"props":1010,"children":1011},{"style":148},[1012],{"type":74,"value":456},{"type":69,"tag":125,"props":1014,"children":1015},{"style":138},[1016],{"type":74,"value":461},{"type":69,"tag":125,"props":1018,"children":1019},{"style":138},[1020],{"type":74,"value":466},{"type":69,"tag":125,"props":1022,"children":1023},{"style":469},[1024],{"type":74,"value":472},{"type":69,"tag":125,"props":1026,"children":1027},{"style":282},[1028],{"type":74,"value":477},{"type":69,"tag":125,"props":1030,"children":1031},{"style":469},[1032],{"type":74,"value":234},{"type":69,"tag":125,"props":1034,"children":1035},{"style":138},[1036],{"type":74,"value":486},{"type":69,"tag":125,"props":1038,"children":1039},{"style":469},[1040],{"type":74,"value":234},{"type":69,"tag":125,"props":1042,"children":1043},{"style":138},[1044],{"type":74,"value":495},{"type":69,"tag":125,"props":1046,"children":1047},{"style":282},[1048],{"type":74,"value":500},{"type":69,"tag":125,"props":1050,"children":1051},{"style":469},[1052],{"type":74,"value":244},{"type":69,"tag":125,"props":1054,"children":1055},{"style":138},[1056],{"type":74,"value":509},{"type":69,"tag":125,"props":1058,"children":1059},{"class":127,"line":159},[1060,1064,1068],{"type":69,"tag":125,"props":1061,"children":1062},{"style":138},[1063],{"type":74,"value":518},{"type":69,"tag":125,"props":1065,"children":1066},{"style":148},[1067],{"type":74,"value":523},{"type":69,"tag":125,"props":1069,"children":1070},{"style":138},[1071],{"type":74,"value":156},{"type":69,"tag":125,"props":1073,"children":1074},{"class":127,"line":172},[1075],{"type":69,"tag":125,"props":1076,"children":1077},{"style":469},[1078],{"type":74,"value":536},{"type":69,"tag":125,"props":1080,"children":1081},{"class":127,"line":185},[1082,1086,1090,1094,1098],{"type":69,"tag":125,"props":1083,"children":1084},{"style":138},[1085],{"type":74,"value":545},{"type":69,"tag":125,"props":1087,"children":1088},{"style":138},[1089],{"type":74,"value":486},{"type":69,"tag":125,"props":1091,"children":1092},{"style":148},[1093],{"type":74,"value":395},{"type":69,"tag":125,"props":1095,"children":1096},{"style":138},[1097],{"type":74,"value":400},{"type":69,"tag":125,"props":1099,"children":1100},{"style":148},[1101],{"type":74,"value":562},{"type":69,"tag":70,"props":1103,"children":1104},{},[1105,1107,1113,1115,1121],{"type":74,"value":1106},"When ",{"type":69,"tag":77,"props":1108,"children":1110},{"className":1109},[],[1111],{"type":74,"value":1112},"Pager",{"type":74,"value":1114}," imports ",{"type":69,"tag":77,"props":1116,"children":1118},{"className":1117},[],[1119],{"type":74,"value":1120},"useTableContext",{"type":74,"value":1122},", inferred destructured exports can form a circular inference\u002Fimport chain.",{"type":69,"tag":70,"props":1124,"children":1125},{},[1126,1128],{"type":74,"value":1127},"Source: ",{"type":69,"tag":77,"props":1129,"children":1131},{"className":1130},[],[1132],{"type":74,"value":1133},"docs\u002Fframework\u002Fvue\u002Fguide\u002Fcomposable-tables.md",{"type":69,"tag":575,"props":1135,"children":1137},{"id":1136},"high-flattening-reactive-table-options",[1138],{"type":74,"value":1139},"HIGH Flattening reactive table options",{"type":69,"tag":70,"props":1141,"children":1142},{},[1143],{"type":74,"value":836},{"type":69,"tag":114,"props":1145,"children":1147},{"className":116,"code":1146,"language":118,"meta":119,"style":119},"useAppTable({ columns, data: data.value })\n",[1148],{"type":69,"tag":77,"props":1149,"children":1150},{"__ignoreMap":119},[1151],{"type":69,"tag":125,"props":1152,"children":1153},{"class":127,"line":128},[1154,1159,1163,1167,1171,1175,1180,1184,1188,1192,1197,1201],{"type":69,"tag":125,"props":1155,"children":1156},{"style":298},[1157],{"type":74,"value":1158},"useAppTable",{"type":69,"tag":125,"props":1160,"children":1161},{"style":148},[1162],{"type":74,"value":306},{"type":69,"tag":125,"props":1164,"children":1165},{"style":138},[1166],{"type":74,"value":311},{"type":69,"tag":125,"props":1168,"children":1169},{"style":148},[1170],{"type":74,"value":763},{"type":69,"tag":125,"props":1172,"children":1173},{"style":138},[1174],{"type":74,"value":239},{"type":69,"tag":125,"props":1176,"children":1177},{"style":700},[1178],{"type":74,"value":1179}," data",{"type":69,"tag":125,"props":1181,"children":1182},{"style":138},[1183],{"type":74,"value":461},{"type":69,"tag":125,"props":1185,"children":1186},{"style":148},[1187],{"type":74,"value":1179},{"type":69,"tag":125,"props":1189,"children":1190},{"style":138},[1191],{"type":74,"value":400},{"type":69,"tag":125,"props":1193,"children":1194},{"style":148},[1195],{"type":74,"value":1196},"value ",{"type":69,"tag":125,"props":1198,"children":1199},{"style":138},[1200],{"type":74,"value":191},{"type":69,"tag":125,"props":1202,"children":1203},{"style":148},[1204],{"type":74,"value":325},{"type":69,"tag":70,"props":1206,"children":1207},{},[1208],{"type":74,"value":934},{"type":69,"tag":114,"props":1210,"children":1212},{"className":116,"code":1211,"language":118,"meta":119,"style":119},"useAppTable({ columns, data })\n",[1213],{"type":69,"tag":77,"props":1214,"children":1215},{"__ignoreMap":119},[1216],{"type":69,"tag":125,"props":1217,"children":1218},{"class":127,"line":128},[1219,1223,1227,1231,1235,1239,1243,1247],{"type":69,"tag":125,"props":1220,"children":1221},{"style":298},[1222],{"type":74,"value":1158},{"type":69,"tag":125,"props":1224,"children":1225},{"style":148},[1226],{"type":74,"value":306},{"type":69,"tag":125,"props":1228,"children":1229},{"style":138},[1230],{"type":74,"value":311},{"type":69,"tag":125,"props":1232,"children":1233},{"style":148},[1234],{"type":74,"value":763},{"type":69,"tag":125,"props":1236,"children":1237},{"style":138},[1238],{"type":74,"value":239},{"type":69,"tag":125,"props":1240,"children":1241},{"style":148},[1242],{"type":74,"value":772},{"type":69,"tag":125,"props":1244,"children":1245},{"style":138},[1246],{"type":74,"value":191},{"type":69,"tag":125,"props":1248,"children":1249},{"style":148},[1250],{"type":74,"value":325},{"type":69,"tag":70,"props":1252,"children":1253},{},[1254,1256,1262],{"type":74,"value":1255},"The app hook preserves the adapter’s ",{"type":69,"tag":77,"props":1257,"children":1259},{"className":1258},[],[1260],{"type":74,"value":1261},"MaybeRef",{"type":74,"value":1263}," option contract.",{"type":69,"tag":70,"props":1265,"children":1266},{},[1267,1268],{"type":74,"value":1127},{"type":69,"tag":77,"props":1269,"children":1271},{"className":1270},[],[1272],{"type":74,"value":1273},"packages\u002Fvue-table\u002Fsrc\u002FcreateTableHook.ts",{"type":69,"tag":575,"props":1275,"children":1277},{"id":1276},"high-using-context-without-app-wrappers",[1278],{"type":74,"value":1279},"HIGH Using context without App wrappers",{"type":69,"tag":70,"props":1281,"children":1282},{},[1283],{"type":74,"value":836},{"type":69,"tag":114,"props":1285,"children":1287},{"className":116,"code":1286,"language":118,"meta":119,"style":119},"const table = useTableContext()\n",[1288],{"type":69,"tag":77,"props":1289,"children":1290},{"__ignoreMap":119},[1291],{"type":69,"tag":125,"props":1292,"children":1293},{"class":127,"line":128},[1294,1298,1302,1306,1310],{"type":69,"tag":125,"props":1295,"children":1296},{"style":282},[1297],{"type":74,"value":285},{"type":69,"tag":125,"props":1299,"children":1300},{"style":148},[1301],{"type":74,"value":741},{"type":69,"tag":125,"props":1303,"children":1304},{"style":138},[1305],{"type":74,"value":295},{"type":69,"tag":125,"props":1307,"children":1308},{"style":298},[1309],{"type":74,"value":456},{"type":69,"tag":125,"props":1311,"children":1312},{"style":148},[1313],{"type":74,"value":627},{"type":69,"tag":70,"props":1315,"children":1316},{},[1317],{"type":74,"value":934},{"type":69,"tag":114,"props":1319,"children":1322},{"className":1320,"code":1321,"language":14,"meta":119,"style":119},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ccomponent :is=\"table.AppTable\">\u003CPager \u002F>\u003C\u002Fcomponent>\n",[1323],{"type":69,"tag":77,"props":1324,"children":1325},{"__ignoreMap":119},[1326],{"type":69,"tag":125,"props":1327,"children":1328},{"class":127,"line":128},[1329,1333,1338,1343,1348,1352,1357,1361,1365,1370,1374,1378,1383,1388,1392],{"type":69,"tag":125,"props":1330,"children":1331},{"style":138},[1332],{"type":74,"value":613},{"type":69,"tag":125,"props":1334,"children":1335},{"style":700},[1336],{"type":74,"value":1337},"component",{"type":69,"tag":125,"props":1339,"children":1340},{"style":138},[1341],{"type":74,"value":1342}," :",{"type":69,"tag":125,"props":1344,"children":1345},{"style":282},[1346],{"type":74,"value":1347},"is",{"type":69,"tag":125,"props":1349,"children":1350},{"style":138},[1351],{"type":74,"value":295},{"type":69,"tag":125,"props":1353,"children":1354},{"style":138},[1355],{"type":74,"value":1356},"\"",{"type":69,"tag":125,"props":1358,"children":1359},{"style":148},[1360],{"type":74,"value":44},{"type":69,"tag":125,"props":1362,"children":1363},{"style":138},[1364],{"type":74,"value":400},{"type":69,"tag":125,"props":1366,"children":1367},{"style":148},[1368],{"type":74,"value":1369},"AppTable",{"type":69,"tag":125,"props":1371,"children":1372},{"style":138},[1373],{"type":74,"value":1356},{"type":69,"tag":125,"props":1375,"children":1376},{"style":138},[1377],{"type":74,"value":545},{"type":69,"tag":125,"props":1379,"children":1380},{"style":148},[1381],{"type":74,"value":1382},"\u003CPager \u002F>",{"type":69,"tag":125,"props":1384,"children":1385},{"style":138},[1386],{"type":74,"value":1387},"\u003C\u002F",{"type":69,"tag":125,"props":1389,"children":1390},{"style":700},[1391],{"type":74,"value":1337},{"type":69,"tag":125,"props":1393,"children":1394},{"style":138},[1395],{"type":74,"value":1396},">\n",{"type":69,"tag":70,"props":1398,"children":1399},{},[1400],{"type":74,"value":1401},"The typed context exists only below the corresponding dynamic wrapper.",{"type":69,"tag":70,"props":1403,"children":1404},{},[1405,1406],{"type":74,"value":1127},{"type":69,"tag":77,"props":1407,"children":1409},{"className":1408},[],[1410],{"type":74,"value":1273},{"type":69,"tag":575,"props":1412,"children":1414},{"id":1413},"medium-treating-subscribe-children-as-slots",[1415],{"type":74,"value":1416},"MEDIUM Treating Subscribe children as slots",{"type":69,"tag":70,"props":1418,"children":1419},{},[1420],{"type":74,"value":836},{"type":69,"tag":114,"props":1422,"children":1426},{"className":1423,"code":1424,"language":1425,"meta":119,"style":119},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctable.Subscribe>\n  {(atoms) => \u003CPager page={atoms.pagination.get()} \u002F>}\n\u003C\u002Ftable.Subscribe>\n","tsx",[1427],{"type":69,"tag":77,"props":1428,"children":1429},{"__ignoreMap":119},[1430,1446,1518],{"type":69,"tag":125,"props":1431,"children":1432},{"class":127,"line":128},[1433,1437,1442],{"type":69,"tag":125,"props":1434,"children":1435},{"style":138},[1436],{"type":74,"value":613},{"type":69,"tag":125,"props":1438,"children":1439},{"style":469},[1440],{"type":74,"value":1441},"table.Subscribe",{"type":69,"tag":125,"props":1443,"children":1444},{"style":138},[1445],{"type":74,"value":1396},{"type":69,"tag":125,"props":1447,"children":1448},{"class":127,"line":144},[1449,1454,1460,1465,1469,1473,1477,1482,1487,1491,1495,1499,1503,1508,1513],{"type":69,"tag":125,"props":1450,"children":1451},{"style":138},[1452],{"type":74,"value":1453},"  {(",{"type":69,"tag":125,"props":1455,"children":1457},{"style":1456},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[1458],{"type":74,"value":1459},"atoms",{"type":69,"tag":125,"props":1461,"children":1462},{"style":138},[1463],{"type":74,"value":1464},")",{"type":69,"tag":125,"props":1466,"children":1467},{"style":282},[1468],{"type":74,"value":500},{"type":69,"tag":125,"props":1470,"children":1471},{"style":138},[1472],{"type":74,"value":466},{"type":69,"tag":125,"props":1474,"children":1475},{"style":469},[1476],{"type":74,"value":1112},{"type":69,"tag":125,"props":1478,"children":1479},{"style":282},[1480],{"type":74,"value":1481}," page",{"type":69,"tag":125,"props":1483,"children":1484},{"style":138},[1485],{"type":74,"value":1486},"={",{"type":69,"tag":125,"props":1488,"children":1489},{"style":148},[1490],{"type":74,"value":1459},{"type":69,"tag":125,"props":1492,"children":1493},{"style":138},[1494],{"type":74,"value":400},{"type":69,"tag":125,"props":1496,"children":1497},{"style":148},[1498],{"type":74,"value":36},{"type":69,"tag":125,"props":1500,"children":1501},{"style":138},[1502],{"type":74,"value":400},{"type":69,"tag":125,"props":1504,"children":1505},{"style":298},[1506],{"type":74,"value":1507},"get",{"type":69,"tag":125,"props":1509,"children":1510},{"style":148},[1511],{"type":74,"value":1512},"()",{"type":69,"tag":125,"props":1514,"children":1515},{"style":138},[1516],{"type":74,"value":1517},"} \u002F>}\n",{"type":69,"tag":125,"props":1519,"children":1520},{"class":127,"line":159},[1521,1525,1529],{"type":69,"tag":125,"props":1522,"children":1523},{"style":138},[1524],{"type":74,"value":1387},{"type":69,"tag":125,"props":1526,"children":1527},{"style":469},[1528],{"type":74,"value":1441},{"type":69,"tag":125,"props":1530,"children":1531},{"style":138},[1532],{"type":74,"value":1396},{"type":69,"tag":70,"props":1534,"children":1535},{},[1536],{"type":74,"value":934},{"type":69,"tag":114,"props":1538,"children":1540},{"className":1423,"code":1539,"language":1425,"meta":119,"style":119},"\u003Ctable.Subscribe\n  children={(atoms) => \u003CPager page={atoms.pagination.get()} \u002F>}\n\u002F>\n",[1541],{"type":69,"tag":77,"props":1542,"children":1543},{"__ignoreMap":119},[1544,1556,1625],{"type":69,"tag":125,"props":1545,"children":1546},{"class":127,"line":128},[1547,1551],{"type":69,"tag":125,"props":1548,"children":1549},{"style":138},[1550],{"type":74,"value":613},{"type":69,"tag":125,"props":1552,"children":1553},{"style":469},[1554],{"type":74,"value":1555},"table.Subscribe\n",{"type":69,"tag":125,"props":1557,"children":1558},{"class":127,"line":144},[1559,1564,1569,1573,1577,1581,1585,1589,1593,1597,1601,1605,1609,1613,1617,1621],{"type":69,"tag":125,"props":1560,"children":1561},{"style":282},[1562],{"type":74,"value":1563},"  children",{"type":69,"tag":125,"props":1565,"children":1566},{"style":138},[1567],{"type":74,"value":1568},"={(",{"type":69,"tag":125,"props":1570,"children":1571},{"style":1456},[1572],{"type":74,"value":1459},{"type":69,"tag":125,"props":1574,"children":1575},{"style":138},[1576],{"type":74,"value":1464},{"type":69,"tag":125,"props":1578,"children":1579},{"style":282},[1580],{"type":74,"value":500},{"type":69,"tag":125,"props":1582,"children":1583},{"style":138},[1584],{"type":74,"value":466},{"type":69,"tag":125,"props":1586,"children":1587},{"style":469},[1588],{"type":74,"value":1112},{"type":69,"tag":125,"props":1590,"children":1591},{"style":282},[1592],{"type":74,"value":1481},{"type":69,"tag":125,"props":1594,"children":1595},{"style":138},[1596],{"type":74,"value":1486},{"type":69,"tag":125,"props":1598,"children":1599},{"style":148},[1600],{"type":74,"value":1459},{"type":69,"tag":125,"props":1602,"children":1603},{"style":138},[1604],{"type":74,"value":400},{"type":69,"tag":125,"props":1606,"children":1607},{"style":148},[1608],{"type":74,"value":36},{"type":69,"tag":125,"props":1610,"children":1611},{"style":138},[1612],{"type":74,"value":400},{"type":69,"tag":125,"props":1614,"children":1615},{"style":298},[1616],{"type":74,"value":1507},{"type":69,"tag":125,"props":1618,"children":1619},{"style":148},[1620],{"type":74,"value":1512},{"type":69,"tag":125,"props":1622,"children":1623},{"style":138},[1624],{"type":74,"value":1517},{"type":69,"tag":125,"props":1626,"children":1627},{"class":127,"line":159},[1628],{"type":69,"tag":125,"props":1629,"children":1630},{"style":138},[1631],{"type":74,"value":1632},"\u002F>\n",{"type":69,"tag":70,"props":1634,"children":1635},{},[1636,1638,1644],{"type":74,"value":1637},"Vue’s adapter expects an explicit ",{"type":69,"tag":77,"props":1639,"children":1641},{"className":1640},[],[1642],{"type":74,"value":1643},"children",{"type":74,"value":1645}," prop in JSX.",{"type":69,"tag":70,"props":1647,"children":1648},{},[1649,1650],{"type":74,"value":1127},{"type":69,"tag":77,"props":1651,"children":1653},{"className":1652},[],[1654],{"type":74,"value":1655},"packages\u002Fvue-table\u002Fsrc\u002FuseTable.ts",{"type":69,"tag":107,"props":1657,"children":1659},{"id":1658},"api-discovery",[1660],{"type":74,"value":1661},"API Discovery",{"type":69,"tag":70,"props":1663,"children":1664},{},[1665,1667,1673],{"type":74,"value":1666},"Inspect ",{"type":69,"tag":77,"props":1668,"children":1670},{"className":1669},[],[1671],{"type":74,"value":1672},"node_modules\u002F@tanstack\u002Fvue-table\u002Fdist\u002FcreateTableHook.d.ts",{"type":74,"value":1674}," for the returned helpers, wrapper props, registry types, and context contracts.",{"type":69,"tag":1676,"props":1677,"children":1678},"style",{},[1679],{"type":74,"value":1680},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":1682,"total":1818},[1683,1695,1707,1717,1732,1744,1754,1764,1777,1787,1798,1808],{"slug":1684,"name":1684,"fn":1685,"description":1686,"org":1687,"tags":1688,"stars":22,"repoUrl":23,"updatedAt":1694},"aggregation","perform data aggregation in TanStack Table","Aggregate TanStack Table columns independently of grouping, including grand totals, caller-selected row totals, multiple keyed aggregations, custom context-based definitions, grouped merges, manual values, and worker constraints.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1689,1692,1693],{"name":1690,"slug":1691,"type":15},"Data Analysis","data-analysis",{"name":20,"slug":21,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:25:59.429787",{"slug":1696,"name":1696,"fn":1697,"description":1698,"org":1699,"tags":1700,"stars":22,"repoUrl":23,"updatedAt":1706},"api-not-found","diagnose TanStack Table API errors","Diagnose missing TanStack Table v9 exports, options, state slices, and instance methods. Load before inventing an API when code sees a type error, undefined feature method, absent object key, adapter mismatch, or v8-shaped example.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1701,1704,1705],{"name":1702,"slug":1703,"type":15},"Debugging","debugging",{"name":20,"slug":21,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:26:05.418735",{"slug":1708,"name":1708,"fn":1709,"description":1710,"org":1711,"tags":1712,"stars":22,"repoUrl":23,"updatedAt":1716},"cell-selection","select rectangular cell ranges in tables","Select rectangular cell ranges with cellSelectionFeature: two-corner range state keyed by row and column id, mousedown\u002Fmouseenter handlers, selection edges, render-order resolution under pinning, and autoResetCellSelection. Load when ranges widen unexpectedly after sorting or column reordering, when a drag re-renders the whole table, or when building copy-to-clipboard from a selection.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1713,1714,1715],{"name":1690,"slug":1691,"type":15},{"name":9,"slug":8,"type":15},{"name":17,"slug":18,"type":15},"2026-07-30T05:25:38.403427",{"slug":1718,"name":1718,"fn":1719,"description":1720,"org":1721,"tags":1722,"stars":22,"repoUrl":23,"updatedAt":1731},"client-vs-server","manage TanStack Table data pipelines","Choose client or server ownership for filtering, grouping, sorting, expanding, and pagination in TanStack Table v9. Load for manual* flags, mixed pipelines, server counts, or deciding which dataset each row-model stage receives.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1723,1726,1727,1730],{"name":1724,"slug":1725,"type":15},"Data Pipeline","data-pipeline",{"name":20,"slug":21,"type":15},{"name":1728,"slug":1729,"type":15},"Performance","performance",{"name":9,"slug":8,"type":15},"2026-07-30T05:25:45.400104",{"slug":1733,"name":1733,"fn":1734,"description":1735,"org":1736,"tags":1737,"stars":22,"repoUrl":23,"updatedAt":1743},"column-faceting","build faceted filter UIs","Build faceted filter UIs with columnFacetingFeature, facetedRowModel, facetedUniqueValues, and facetedMinMaxValues. Load for facet counts, numeric ranges, own-filter exclusion, or server-page facet completeness.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1738,1741,1742],{"name":1739,"slug":1740,"type":15},"Data Visualization","data-visualization",{"name":20,"slug":21,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:25:41.397257",{"slug":1745,"name":1745,"fn":1746,"description":1747,"org":1748,"tags":1749,"stars":22,"repoUrl":23,"updatedAt":1753},"column-filtering","implement column filtering in TanStack Table","Filter columns with columnFilteringFeature, filteredRowModel, filterFns, filterMeta, nested-row direction, and manualFiltering. Load for accessor compatibility, controlled filter updaters, fuzzy metadata, or client\u002Fserver ownership.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1750,1751,1752],{"name":1690,"slug":1691,"type":15},{"name":20,"slug":21,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:25:53.391632",{"slug":1755,"name":1755,"fn":1756,"description":1757,"org":1758,"tags":1759,"stars":22,"repoUrl":23,"updatedAt":1763},"column-ordering","manage TanStack Table column ordering","Control TanStack Table v9 leaf columnOrder with stable IDs while accounting for pinning regions, visibility, and groupedColumnMode precedence. Load for drag-and-drop columns or rendered order that differs from state.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1760,1761,1762],{"name":20,"slug":21,"type":15},{"name":9,"slug":8,"type":15},{"name":17,"slug":18,"type":15},"2026-07-30T05:26:03.37801",{"slug":1765,"name":1765,"fn":1766,"description":1767,"org":1768,"tags":1769,"stars":22,"repoUrl":23,"updatedAt":1776},"column-pinning","configure column pinning in TanStack Table","Pin columns into logical start, center, and end regions with columnPinningFeature and renderer-owned sticky CSS. Load for RTL offsets, z-index, backgrounds, overflow, widths, gaps, or overlaps.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1770,1773,1774,1775],{"name":1771,"slug":1772,"type":15},"CSS","css",{"name":20,"slug":21,"type":15},{"name":9,"slug":8,"type":15},{"name":17,"slug":18,"type":15},"2026-07-30T05:25:55.377366",{"slug":1778,"name":1778,"fn":1779,"description":1780,"org":1781,"tags":1782,"stars":22,"repoUrl":23,"updatedAt":1786},"column-resizing","implement column resizing in TanStack Table","Wire columnResizingFeature, header.getResizeHandler, resize mode and direction, pointer or touch events, and performant CSS-variable updates. Load when resize state changes but widths do not, or large tables resize slowly.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1783,1784,1785],{"name":20,"slug":21,"type":15},{"name":9,"slug":8,"type":15},{"name":17,"slug":18,"type":15},"2026-07-30T05:25:51.400011",{"slug":1788,"name":1788,"fn":1789,"description":1790,"org":1791,"tags":1792,"stars":22,"repoUrl":23,"updatedAt":1797},"column-sizing","configure column sizing in TanStack Table","Use columnSizingFeature numeric size, minSize, maxSize, getSize, getStart, getAfter, and total-size APIs in table, grid, or flex CSS. Load for auto or percentage misconceptions and sizing\u002Fpinning layout mismatch.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1793,1794,1795,1796],{"name":1771,"slug":1772,"type":15},{"name":20,"slug":21,"type":15},{"name":9,"slug":8,"type":15},{"name":17,"slug":18,"type":15},"2026-07-30T05:25:48.703799",{"slug":1799,"name":1799,"fn":1800,"description":1801,"org":1802,"tags":1803,"stars":22,"repoUrl":23,"updatedAt":1807},"column-visibility","manage column visibility in TanStack Table","Hide columns with columnVisibilityFeature while rendering visibility-aware header, column, and cell collections. Load when hidden columns remain in the DOM, false-versus-absent state is confused, or enableHiding is misunderstood.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1804,1805,1806],{"name":20,"slug":21,"type":15},{"name":9,"slug":8,"type":15},{"name":17,"slug":18,"type":15},"2026-07-30T05:25:47.367943",{"slug":1809,"name":1809,"fn":1810,"description":1811,"org":1812,"tags":1813,"stars":22,"repoUrl":23,"updatedAt":1817},"core","build data grids with TanStack Table","Use TanStack Table v9 as a headless data-grid state and row-processing engine. Load for first-table architecture, stable data and columns, row numbering with getDisplayIndex, semantic rendering, framework adapter choice, or deciding what Table owns versus the renderer.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1814,1815,1816],{"name":1690,"slug":1691,"type":15},{"name":20,"slug":21,"type":15},{"name":17,"slug":18,"type":15},"2026-07-30T05:25:52.366295",125,{"items":1820,"total":1864},[1821,1827,1833,1839,1846,1852,1858],{"slug":1684,"name":1684,"fn":1685,"description":1686,"org":1822,"tags":1823,"stars":22,"repoUrl":23,"updatedAt":1694},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1824,1825,1826],{"name":1690,"slug":1691,"type":15},{"name":20,"slug":21,"type":15},{"name":9,"slug":8,"type":15},{"slug":1696,"name":1696,"fn":1697,"description":1698,"org":1828,"tags":1829,"stars":22,"repoUrl":23,"updatedAt":1706},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1830,1831,1832],{"name":1702,"slug":1703,"type":15},{"name":20,"slug":21,"type":15},{"name":9,"slug":8,"type":15},{"slug":1708,"name":1708,"fn":1709,"description":1710,"org":1834,"tags":1835,"stars":22,"repoUrl":23,"updatedAt":1716},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1836,1837,1838],{"name":1690,"slug":1691,"type":15},{"name":9,"slug":8,"type":15},{"name":17,"slug":18,"type":15},{"slug":1718,"name":1718,"fn":1719,"description":1720,"org":1840,"tags":1841,"stars":22,"repoUrl":23,"updatedAt":1731},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1842,1843,1844,1845],{"name":1724,"slug":1725,"type":15},{"name":20,"slug":21,"type":15},{"name":1728,"slug":1729,"type":15},{"name":9,"slug":8,"type":15},{"slug":1733,"name":1733,"fn":1734,"description":1735,"org":1847,"tags":1848,"stars":22,"repoUrl":23,"updatedAt":1743},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1849,1850,1851],{"name":1739,"slug":1740,"type":15},{"name":20,"slug":21,"type":15},{"name":9,"slug":8,"type":15},{"slug":1745,"name":1745,"fn":1746,"description":1747,"org":1853,"tags":1854,"stars":22,"repoUrl":23,"updatedAt":1753},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1855,1856,1857],{"name":1690,"slug":1691,"type":15},{"name":20,"slug":21,"type":15},{"name":9,"slug":8,"type":15},{"slug":1755,"name":1755,"fn":1756,"description":1757,"org":1859,"tags":1860,"stars":22,"repoUrl":23,"updatedAt":1763},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1861,1862,1863],{"name":20,"slug":21,"type":15},{"name":9,"slug":8,"type":15},{"name":17,"slug":18,"type":15},30]