[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-tanstack-with-tanstack-virtual":3,"mdc--5jok06-key":52,"related-repo-tanstack-with-tanstack-virtual":1482,"related-org-tanstack-with-tanstack-virtual":1566},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":23,"repoUrl":24,"updatedAt":25,"license":26,"forks":27,"topics":28,"repo":47,"sourceUrl":50,"mdContent":51},"with-tanstack-virtual","virtualize Vue table rows and columns","Virtualize Vue Table final row or column models with reactive counts and scroll targets, stable keys, measurement, spacer geometry, sticky CSS, grid\u002Fflex widths, and infinite server data.\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,22],{"name":13,"slug":14,"type":15},"Performance","performance","tag",{"name":17,"slug":18,"type":15},"Vue","vue",{"name":20,"slug":21,"type":15},"UI Components","ui-components",{"name":9,"slug":8,"type":15},28175,"https:\u002F\u002Fgithub.com\u002FTanStack\u002Ftable","2026-07-30T05:26:01.387619",null,3539,[29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,18],"datagrid","datagrids","datatable","filtering","grid","grouping","hooks","javascript","pagination","react","reactjs","solid","solidjs","sorting","svelte","sveltejs","table","typescript",{"repoUrl":24,"stars":23,"forks":27,"topics":48,"description":49},[29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,18],"🤖 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\u002Fwith-tanstack-virtual","---\nname: with-tanstack-virtual\ndescription: >\n  Virtualize Vue Table final row or column models with reactive counts and scroll targets, stable keys, measurement, spacer geometry, sticky CSS, grid\u002Fflex widths, and infinite server data.\nmetadata:\n  type: composition\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\u002Fvirtualization.md'\n  - 'TanStack\u002Ftable:examples\u002Fvue\u002Fvirtualized-rows'\n  - 'TanStack\u002Ftable:examples\u002Fvue\u002Fvirtualized-columns'\n  - 'TanStack\u002Ftable:examples\u002Fvue\u002Fvirtualized-infinite-scrolling'\n---\n\nThis skill builds on `@tanstack\u002Ftable-core#core`, `getting-started`, and `table-state`. Virtual consumes final Table models; it is not registered in `tableFeatures`.\n\n## Setup\n\n```ts\nimport { computed, ref } from 'vue'\nimport { useVirtualizer } from '@tanstack\u002Fvue-virtual'\n\nconst scrollElement = ref\u003CHTMLElement | null>(null)\nconst rows = computed(() => table.getRowModel().rows)\nconst rowVirtualizer = useVirtualizer(\n  computed(() => ({\n    count: rows.value.length,\n    getScrollElement: () => scrollElement.value,\n    estimateSize: () => 34,\n    getItemKey: (index) => rows.value[index]!.id,\n    overscan: 5,\n  })),\n)\nconst virtualRows = computed(() => rowVirtualizer.value.getVirtualItems())\nconst totalSize = computed(() => rowVirtualizer.value.getTotalSize())\n```\n\n## Core Patterns\n\n### Derive from current visible models\n\nRows come from `table.getRowModel().rows`; columns come from `table.getVisibleLeafColumns()`. Use computed options so counts and scroll targets update.\n\n### Implement the geometry\n\nGive the scroll container a bounded height and positioning context, create a spacer using `getTotalSize()`, and translate\u002Fmeasure virtual items. Follow the grid\u002Fflex examples for dynamic row heights and sticky headers.\n\n### Coordinate infinite fetching\n\nFetch near the last virtual item only while `totalFetched \u003C serverRowCount` and no request is active. Manual sorting means the server must return the sorted order and a sort change normally resets pages.\n\n## Common Mistakes\n\n### HIGH Passing a plain options snapshot\n\nWrong:\n\n```ts\nuseVirtualizer({ count: rows.value.length, getScrollElement })\n```\n\nCorrect:\n\n```ts\nuseVirtualizer(computed(() => ({ count: rows.value.length, getScrollElement })))\n```\n\nComputed options keep the virtual range synchronized with Vue’s current model.\n\nSource: `examples\u002Fvue\u002Fvirtualized-rows\u002Fsrc\u002FApp.vue`\n\n### HIGH Virtualizing source arrays\n\nWrong:\n\n```ts\nconst rows = computed(() => data.value)\n```\n\nCorrect:\n\n```ts\nconst rows = computed(() => table.getRowModel().rows)\n```\n\nSource arrays do not represent Table’s current filtering, sorting, expansion, or pagination.\n\nSource: `docs\u002Fframework\u002Fvue\u002Fguide\u002Fvirtualization.md`\n\n### HIGH Assuming Virtual provides CSS\n\nWrong:\n\n```vue\n\u003Cdiv v-for=\"item in virtualRows\" :key=\"item.key\">{{ rows[item.index].id }}\u003C\u002Fdiv>\n```\n\nCorrect:\n\n```vue\n\u003Cdiv :style=\"{ height: `${totalSize}px`, position: 'relative' }\">\u003Cdiv style=\"position:absolute\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n```\n\nVirtual provides measurements, not spacer layout, transforms, sticky positioning, or Table column widths.\n\nSource: `examples\u002Fvue\u002Fvirtualized-columns\u002Fsrc\u002FApp.vue`\n\n## API Discovery\n\nInspect installed `@tanstack\u002Fvue-table\u002Fdist\u002F` and `@tanstack\u002Fvue-virtual\u002Fdist\u002F`; use the maintained Vue examples for exact row, column, and infinite layout combinations.\n",{"data":53,"body":67},{"name":4,"description":6,"metadata":54,"requires":58,"sources":62},{"type":55,"library":56,"framework":18,"library_version":57},"composition","@tanstack\u002Fvue-table","9.0.0-beta.59",[59,60,61],"@tanstack\u002Ftable-core#core","getting-started","table-state",[63,64,65,66],"TanStack\u002Ftable:docs\u002Fframework\u002Fvue\u002Fguide\u002Fvirtualization.md","TanStack\u002Ftable:examples\u002Fvue\u002Fvirtualized-rows","TanStack\u002Ftable:examples\u002Fvue\u002Fvirtualized-columns","TanStack\u002Ftable:examples\u002Fvue\u002Fvirtualized-infinite-scrolling",{"type":68,"children":69},"root",[70,108,115,756,762,769,790,796,809,815,828,834,840,845,916,921,1009,1014,1025,1031,1035,1087,1091,1153,1158,1168,1174,1178,1289,1293,1435,1440,1450,1456,1477],{"type":71,"tag":72,"props":73,"children":74},"element","p",{},[75,78,84,86,91,93,98,100,106],{"type":76,"value":77},"text","This skill builds on ",{"type":71,"tag":79,"props":80,"children":82},"code",{"className":81},[],[83],{"type":76,"value":59},{"type":76,"value":85},", ",{"type":71,"tag":79,"props":87,"children":89},{"className":88},[],[90],{"type":76,"value":60},{"type":76,"value":92},", and ",{"type":71,"tag":79,"props":94,"children":96},{"className":95},[],[97],{"type":76,"value":61},{"type":76,"value":99},". Virtual consumes final Table models; it is not registered in ",{"type":71,"tag":79,"props":101,"children":103},{"className":102},[],[104],{"type":76,"value":105},"tableFeatures",{"type":76,"value":107},".",{"type":71,"tag":109,"props":110,"children":112},"h2",{"id":111},"setup",[113],{"type":76,"value":114},"Setup",{"type":71,"tag":116,"props":117,"children":122},"pre",{"className":118,"code":119,"language":120,"meta":121,"style":121},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { computed, ref } from 'vue'\nimport { useVirtualizer } from '@tanstack\u002Fvue-virtual'\n\nconst scrollElement = ref\u003CHTMLElement | null>(null)\nconst rows = computed(() => table.getRowModel().rows)\nconst rowVirtualizer = useVirtualizer(\n  computed(() => ({\n    count: rows.value.length,\n    getScrollElement: () => scrollElement.value,\n    estimateSize: () => 34,\n    getItemKey: (index) => rows.value[index]!.id,\n    overscan: 5,\n  })),\n)\nconst virtualRows = computed(() => rowVirtualizer.value.getVirtualItems())\nconst totalSize = computed(() => rowVirtualizer.value.getTotalSize())\n","ts","",[123],{"type":71,"tag":79,"props":124,"children":125},{"__ignoreMap":121},[126,185,223,233,299,361,387,418,461,500,531,590,612,630,638,698],{"type":71,"tag":127,"props":128,"children":131},"span",{"class":129,"line":130},"line",1,[132,138,144,150,155,160,165,170,175,180],{"type":71,"tag":127,"props":133,"children":135},{"style":134},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[136],{"type":76,"value":137},"import",{"type":71,"tag":127,"props":139,"children":141},{"style":140},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[142],{"type":76,"value":143}," {",{"type":71,"tag":127,"props":145,"children":147},{"style":146},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[148],{"type":76,"value":149}," computed",{"type":71,"tag":127,"props":151,"children":152},{"style":140},[153],{"type":76,"value":154},",",{"type":71,"tag":127,"props":156,"children":157},{"style":146},[158],{"type":76,"value":159}," ref",{"type":71,"tag":127,"props":161,"children":162},{"style":140},[163],{"type":76,"value":164}," }",{"type":71,"tag":127,"props":166,"children":167},{"style":134},[168],{"type":76,"value":169}," from",{"type":71,"tag":127,"props":171,"children":172},{"style":140},[173],{"type":76,"value":174}," '",{"type":71,"tag":127,"props":176,"children":178},{"style":177},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[179],{"type":76,"value":18},{"type":71,"tag":127,"props":181,"children":182},{"style":140},[183],{"type":76,"value":184},"'\n",{"type":71,"tag":127,"props":186,"children":188},{"class":129,"line":187},2,[189,193,197,202,206,210,214,219],{"type":71,"tag":127,"props":190,"children":191},{"style":134},[192],{"type":76,"value":137},{"type":71,"tag":127,"props":194,"children":195},{"style":140},[196],{"type":76,"value":143},{"type":71,"tag":127,"props":198,"children":199},{"style":146},[200],{"type":76,"value":201}," useVirtualizer",{"type":71,"tag":127,"props":203,"children":204},{"style":140},[205],{"type":76,"value":164},{"type":71,"tag":127,"props":207,"children":208},{"style":134},[209],{"type":76,"value":169},{"type":71,"tag":127,"props":211,"children":212},{"style":140},[213],{"type":76,"value":174},{"type":71,"tag":127,"props":215,"children":216},{"style":177},[217],{"type":76,"value":218},"@tanstack\u002Fvue-virtual",{"type":71,"tag":127,"props":220,"children":221},{"style":140},[222],{"type":76,"value":184},{"type":71,"tag":127,"props":224,"children":226},{"class":129,"line":225},3,[227],{"type":71,"tag":127,"props":228,"children":230},{"emptyLinePlaceholder":229},true,[231],{"type":76,"value":232},"\n",{"type":71,"tag":127,"props":234,"children":236},{"class":129,"line":235},4,[237,243,248,253,258,263,269,274,279,284,289,294],{"type":71,"tag":127,"props":238,"children":240},{"style":239},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[241],{"type":76,"value":242},"const",{"type":71,"tag":127,"props":244,"children":245},{"style":146},[246],{"type":76,"value":247}," scrollElement ",{"type":71,"tag":127,"props":249,"children":250},{"style":140},[251],{"type":76,"value":252},"=",{"type":71,"tag":127,"props":254,"children":256},{"style":255},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[257],{"type":76,"value":159},{"type":71,"tag":127,"props":259,"children":260},{"style":140},[261],{"type":76,"value":262},"\u003C",{"type":71,"tag":127,"props":264,"children":266},{"style":265},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[267],{"type":76,"value":268},"HTMLElement",{"type":71,"tag":127,"props":270,"children":271},{"style":140},[272],{"type":76,"value":273}," |",{"type":71,"tag":127,"props":275,"children":276},{"style":265},[277],{"type":76,"value":278}," null",{"type":71,"tag":127,"props":280,"children":281},{"style":140},[282],{"type":76,"value":283},">",{"type":71,"tag":127,"props":285,"children":286},{"style":146},[287],{"type":76,"value":288},"(",{"type":71,"tag":127,"props":290,"children":291},{"style":140},[292],{"type":76,"value":293},"null",{"type":71,"tag":127,"props":295,"children":296},{"style":146},[297],{"type":76,"value":298},")\n",{"type":71,"tag":127,"props":300,"children":302},{"class":129,"line":301},5,[303,307,312,316,320,324,329,334,339,343,348,352,356],{"type":71,"tag":127,"props":304,"children":305},{"style":239},[306],{"type":76,"value":242},{"type":71,"tag":127,"props":308,"children":309},{"style":146},[310],{"type":76,"value":311}," rows ",{"type":71,"tag":127,"props":313,"children":314},{"style":140},[315],{"type":76,"value":252},{"type":71,"tag":127,"props":317,"children":318},{"style":255},[319],{"type":76,"value":149},{"type":71,"tag":127,"props":321,"children":322},{"style":146},[323],{"type":76,"value":288},{"type":71,"tag":127,"props":325,"children":326},{"style":140},[327],{"type":76,"value":328},"()",{"type":71,"tag":127,"props":330,"children":331},{"style":239},[332],{"type":76,"value":333}," =>",{"type":71,"tag":127,"props":335,"children":336},{"style":146},[337],{"type":76,"value":338}," table",{"type":71,"tag":127,"props":340,"children":341},{"style":140},[342],{"type":76,"value":107},{"type":71,"tag":127,"props":344,"children":345},{"style":255},[346],{"type":76,"value":347},"getRowModel",{"type":71,"tag":127,"props":349,"children":350},{"style":146},[351],{"type":76,"value":328},{"type":71,"tag":127,"props":353,"children":354},{"style":140},[355],{"type":76,"value":107},{"type":71,"tag":127,"props":357,"children":358},{"style":146},[359],{"type":76,"value":360},"rows)\n",{"type":71,"tag":127,"props":362,"children":364},{"class":129,"line":363},6,[365,369,374,378,382],{"type":71,"tag":127,"props":366,"children":367},{"style":239},[368],{"type":76,"value":242},{"type":71,"tag":127,"props":370,"children":371},{"style":146},[372],{"type":76,"value":373}," rowVirtualizer ",{"type":71,"tag":127,"props":375,"children":376},{"style":140},[377],{"type":76,"value":252},{"type":71,"tag":127,"props":379,"children":380},{"style":255},[381],{"type":76,"value":201},{"type":71,"tag":127,"props":383,"children":384},{"style":146},[385],{"type":76,"value":386},"(\n",{"type":71,"tag":127,"props":388,"children":390},{"class":129,"line":389},7,[391,396,400,404,408,413],{"type":71,"tag":127,"props":392,"children":393},{"style":255},[394],{"type":76,"value":395},"  computed",{"type":71,"tag":127,"props":397,"children":398},{"style":146},[399],{"type":76,"value":288},{"type":71,"tag":127,"props":401,"children":402},{"style":140},[403],{"type":76,"value":328},{"type":71,"tag":127,"props":405,"children":406},{"style":239},[407],{"type":76,"value":333},{"type":71,"tag":127,"props":409,"children":410},{"style":146},[411],{"type":76,"value":412}," (",{"type":71,"tag":127,"props":414,"children":415},{"style":140},[416],{"type":76,"value":417},"{\n",{"type":71,"tag":127,"props":419,"children":421},{"class":129,"line":420},8,[422,428,433,438,442,447,451,456],{"type":71,"tag":127,"props":423,"children":425},{"style":424},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[426],{"type":76,"value":427},"    count",{"type":71,"tag":127,"props":429,"children":430},{"style":140},[431],{"type":76,"value":432},":",{"type":71,"tag":127,"props":434,"children":435},{"style":146},[436],{"type":76,"value":437}," rows",{"type":71,"tag":127,"props":439,"children":440},{"style":140},[441],{"type":76,"value":107},{"type":71,"tag":127,"props":443,"children":444},{"style":146},[445],{"type":76,"value":446},"value",{"type":71,"tag":127,"props":448,"children":449},{"style":140},[450],{"type":76,"value":107},{"type":71,"tag":127,"props":452,"children":453},{"style":146},[454],{"type":76,"value":455},"length",{"type":71,"tag":127,"props":457,"children":458},{"style":140},[459],{"type":76,"value":460},",\n",{"type":71,"tag":127,"props":462,"children":464},{"class":129,"line":463},9,[465,470,474,479,483,488,492,496],{"type":71,"tag":127,"props":466,"children":467},{"style":255},[468],{"type":76,"value":469},"    getScrollElement",{"type":71,"tag":127,"props":471,"children":472},{"style":140},[473],{"type":76,"value":432},{"type":71,"tag":127,"props":475,"children":476},{"style":140},[477],{"type":76,"value":478}," ()",{"type":71,"tag":127,"props":480,"children":481},{"style":239},[482],{"type":76,"value":333},{"type":71,"tag":127,"props":484,"children":485},{"style":146},[486],{"type":76,"value":487}," scrollElement",{"type":71,"tag":127,"props":489,"children":490},{"style":140},[491],{"type":76,"value":107},{"type":71,"tag":127,"props":493,"children":494},{"style":146},[495],{"type":76,"value":446},{"type":71,"tag":127,"props":497,"children":498},{"style":140},[499],{"type":76,"value":460},{"type":71,"tag":127,"props":501,"children":503},{"class":129,"line":502},10,[504,509,513,517,521,527],{"type":71,"tag":127,"props":505,"children":506},{"style":255},[507],{"type":76,"value":508},"    estimateSize",{"type":71,"tag":127,"props":510,"children":511},{"style":140},[512],{"type":76,"value":432},{"type":71,"tag":127,"props":514,"children":515},{"style":140},[516],{"type":76,"value":478},{"type":71,"tag":127,"props":518,"children":519},{"style":239},[520],{"type":76,"value":333},{"type":71,"tag":127,"props":522,"children":524},{"style":523},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[525],{"type":76,"value":526}," 34",{"type":71,"tag":127,"props":528,"children":529},{"style":140},[530],{"type":76,"value":460},{"type":71,"tag":127,"props":532,"children":534},{"class":129,"line":533},11,[535,540,544,548,554,559,563,567,571,576,581,586],{"type":71,"tag":127,"props":536,"children":537},{"style":255},[538],{"type":76,"value":539},"    getItemKey",{"type":71,"tag":127,"props":541,"children":542},{"style":140},[543],{"type":76,"value":432},{"type":71,"tag":127,"props":545,"children":546},{"style":140},[547],{"type":76,"value":412},{"type":71,"tag":127,"props":549,"children":551},{"style":550},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[552],{"type":76,"value":553},"index",{"type":71,"tag":127,"props":555,"children":556},{"style":140},[557],{"type":76,"value":558},")",{"type":71,"tag":127,"props":560,"children":561},{"style":239},[562],{"type":76,"value":333},{"type":71,"tag":127,"props":564,"children":565},{"style":146},[566],{"type":76,"value":437},{"type":71,"tag":127,"props":568,"children":569},{"style":140},[570],{"type":76,"value":107},{"type":71,"tag":127,"props":572,"children":573},{"style":146},[574],{"type":76,"value":575},"value[index]",{"type":71,"tag":127,"props":577,"children":578},{"style":140},[579],{"type":76,"value":580},"!.",{"type":71,"tag":127,"props":582,"children":583},{"style":146},[584],{"type":76,"value":585},"id",{"type":71,"tag":127,"props":587,"children":588},{"style":140},[589],{"type":76,"value":460},{"type":71,"tag":127,"props":591,"children":593},{"class":129,"line":592},12,[594,599,603,608],{"type":71,"tag":127,"props":595,"children":596},{"style":424},[597],{"type":76,"value":598},"    overscan",{"type":71,"tag":127,"props":600,"children":601},{"style":140},[602],{"type":76,"value":432},{"type":71,"tag":127,"props":604,"children":605},{"style":523},[606],{"type":76,"value":607}," 5",{"type":71,"tag":127,"props":609,"children":610},{"style":140},[611],{"type":76,"value":460},{"type":71,"tag":127,"props":613,"children":615},{"class":129,"line":614},13,[616,621,626],{"type":71,"tag":127,"props":617,"children":618},{"style":140},[619],{"type":76,"value":620},"  }",{"type":71,"tag":127,"props":622,"children":623},{"style":146},[624],{"type":76,"value":625},"))",{"type":71,"tag":127,"props":627,"children":628},{"style":140},[629],{"type":76,"value":460},{"type":71,"tag":127,"props":631,"children":633},{"class":129,"line":632},14,[634],{"type":71,"tag":127,"props":635,"children":636},{"style":146},[637],{"type":76,"value":298},{"type":71,"tag":127,"props":639,"children":641},{"class":129,"line":640},15,[642,646,651,655,659,663,667,671,676,680,684,688,693],{"type":71,"tag":127,"props":643,"children":644},{"style":239},[645],{"type":76,"value":242},{"type":71,"tag":127,"props":647,"children":648},{"style":146},[649],{"type":76,"value":650}," virtualRows ",{"type":71,"tag":127,"props":652,"children":653},{"style":140},[654],{"type":76,"value":252},{"type":71,"tag":127,"props":656,"children":657},{"style":255},[658],{"type":76,"value":149},{"type":71,"tag":127,"props":660,"children":661},{"style":146},[662],{"type":76,"value":288},{"type":71,"tag":127,"props":664,"children":665},{"style":140},[666],{"type":76,"value":328},{"type":71,"tag":127,"props":668,"children":669},{"style":239},[670],{"type":76,"value":333},{"type":71,"tag":127,"props":672,"children":673},{"style":146},[674],{"type":76,"value":675}," rowVirtualizer",{"type":71,"tag":127,"props":677,"children":678},{"style":140},[679],{"type":76,"value":107},{"type":71,"tag":127,"props":681,"children":682},{"style":146},[683],{"type":76,"value":446},{"type":71,"tag":127,"props":685,"children":686},{"style":140},[687],{"type":76,"value":107},{"type":71,"tag":127,"props":689,"children":690},{"style":255},[691],{"type":76,"value":692},"getVirtualItems",{"type":71,"tag":127,"props":694,"children":695},{"style":146},[696],{"type":76,"value":697},"())\n",{"type":71,"tag":127,"props":699,"children":701},{"class":129,"line":700},16,[702,706,711,715,719,723,727,731,735,739,743,747,752],{"type":71,"tag":127,"props":703,"children":704},{"style":239},[705],{"type":76,"value":242},{"type":71,"tag":127,"props":707,"children":708},{"style":146},[709],{"type":76,"value":710}," totalSize ",{"type":71,"tag":127,"props":712,"children":713},{"style":140},[714],{"type":76,"value":252},{"type":71,"tag":127,"props":716,"children":717},{"style":255},[718],{"type":76,"value":149},{"type":71,"tag":127,"props":720,"children":721},{"style":146},[722],{"type":76,"value":288},{"type":71,"tag":127,"props":724,"children":725},{"style":140},[726],{"type":76,"value":328},{"type":71,"tag":127,"props":728,"children":729},{"style":239},[730],{"type":76,"value":333},{"type":71,"tag":127,"props":732,"children":733},{"style":146},[734],{"type":76,"value":675},{"type":71,"tag":127,"props":736,"children":737},{"style":140},[738],{"type":76,"value":107},{"type":71,"tag":127,"props":740,"children":741},{"style":146},[742],{"type":76,"value":446},{"type":71,"tag":127,"props":744,"children":745},{"style":140},[746],{"type":76,"value":107},{"type":71,"tag":127,"props":748,"children":749},{"style":255},[750],{"type":76,"value":751},"getTotalSize",{"type":71,"tag":127,"props":753,"children":754},{"style":146},[755],{"type":76,"value":697},{"type":71,"tag":109,"props":757,"children":759},{"id":758},"core-patterns",[760],{"type":76,"value":761},"Core Patterns",{"type":71,"tag":763,"props":764,"children":766},"h3",{"id":765},"derive-from-current-visible-models",[767],{"type":76,"value":768},"Derive from current visible models",{"type":71,"tag":72,"props":770,"children":771},{},[772,774,780,782,788],{"type":76,"value":773},"Rows come from ",{"type":71,"tag":79,"props":775,"children":777},{"className":776},[],[778],{"type":76,"value":779},"table.getRowModel().rows",{"type":76,"value":781},"; columns come from ",{"type":71,"tag":79,"props":783,"children":785},{"className":784},[],[786],{"type":76,"value":787},"table.getVisibleLeafColumns()",{"type":76,"value":789},". Use computed options so counts and scroll targets update.",{"type":71,"tag":763,"props":791,"children":793},{"id":792},"implement-the-geometry",[794],{"type":76,"value":795},"Implement the geometry",{"type":71,"tag":72,"props":797,"children":798},{},[799,801,807],{"type":76,"value":800},"Give the scroll container a bounded height and positioning context, create a spacer using ",{"type":71,"tag":79,"props":802,"children":804},{"className":803},[],[805],{"type":76,"value":806},"getTotalSize()",{"type":76,"value":808},", and translate\u002Fmeasure virtual items. Follow the grid\u002Fflex examples for dynamic row heights and sticky headers.",{"type":71,"tag":763,"props":810,"children":812},{"id":811},"coordinate-infinite-fetching",[813],{"type":76,"value":814},"Coordinate infinite fetching",{"type":71,"tag":72,"props":816,"children":817},{},[818,820,826],{"type":76,"value":819},"Fetch near the last virtual item only while ",{"type":71,"tag":79,"props":821,"children":823},{"className":822},[],[824],{"type":76,"value":825},"totalFetched \u003C serverRowCount",{"type":76,"value":827}," and no request is active. Manual sorting means the server must return the sorted order and a sort change normally resets pages.",{"type":71,"tag":109,"props":829,"children":831},{"id":830},"common-mistakes",[832],{"type":76,"value":833},"Common Mistakes",{"type":71,"tag":763,"props":835,"children":837},{"id":836},"high-passing-a-plain-options-snapshot",[838],{"type":76,"value":839},"HIGH Passing a plain options snapshot",{"type":71,"tag":72,"props":841,"children":842},{},[843],{"type":76,"value":844},"Wrong:",{"type":71,"tag":116,"props":846,"children":848},{"className":118,"code":847,"language":120,"meta":121,"style":121},"useVirtualizer({ count: rows.value.length, getScrollElement })\n",[849],{"type":71,"tag":79,"props":850,"children":851},{"__ignoreMap":121},[852],{"type":71,"tag":127,"props":853,"children":854},{"class":129,"line":130},[855,860,864,869,874,878,882,886,890,894,898,902,907,912],{"type":71,"tag":127,"props":856,"children":857},{"style":255},[858],{"type":76,"value":859},"useVirtualizer",{"type":71,"tag":127,"props":861,"children":862},{"style":146},[863],{"type":76,"value":288},{"type":71,"tag":127,"props":865,"children":866},{"style":140},[867],{"type":76,"value":868},"{",{"type":71,"tag":127,"props":870,"children":871},{"style":424},[872],{"type":76,"value":873}," count",{"type":71,"tag":127,"props":875,"children":876},{"style":140},[877],{"type":76,"value":432},{"type":71,"tag":127,"props":879,"children":880},{"style":146},[881],{"type":76,"value":437},{"type":71,"tag":127,"props":883,"children":884},{"style":140},[885],{"type":76,"value":107},{"type":71,"tag":127,"props":887,"children":888},{"style":146},[889],{"type":76,"value":446},{"type":71,"tag":127,"props":891,"children":892},{"style":140},[893],{"type":76,"value":107},{"type":71,"tag":127,"props":895,"children":896},{"style":146},[897],{"type":76,"value":455},{"type":71,"tag":127,"props":899,"children":900},{"style":140},[901],{"type":76,"value":154},{"type":71,"tag":127,"props":903,"children":904},{"style":146},[905],{"type":76,"value":906}," getScrollElement ",{"type":71,"tag":127,"props":908,"children":909},{"style":140},[910],{"type":76,"value":911},"}",{"type":71,"tag":127,"props":913,"children":914},{"style":146},[915],{"type":76,"value":298},{"type":71,"tag":72,"props":917,"children":918},{},[919],{"type":76,"value":920},"Correct:",{"type":71,"tag":116,"props":922,"children":924},{"className":118,"code":923,"language":120,"meta":121,"style":121},"useVirtualizer(computed(() => ({ count: rows.value.length, getScrollElement })))\n",[925],{"type":71,"tag":79,"props":926,"children":927},{"__ignoreMap":121},[928],{"type":71,"tag":127,"props":929,"children":930},{"class":129,"line":130},[931,935,939,944,948,952,956,960,964,968,972,976,980,984,988,992,996,1000,1004],{"type":71,"tag":127,"props":932,"children":933},{"style":255},[934],{"type":76,"value":859},{"type":71,"tag":127,"props":936,"children":937},{"style":146},[938],{"type":76,"value":288},{"type":71,"tag":127,"props":940,"children":941},{"style":255},[942],{"type":76,"value":943},"computed",{"type":71,"tag":127,"props":945,"children":946},{"style":146},[947],{"type":76,"value":288},{"type":71,"tag":127,"props":949,"children":950},{"style":140},[951],{"type":76,"value":328},{"type":71,"tag":127,"props":953,"children":954},{"style":239},[955],{"type":76,"value":333},{"type":71,"tag":127,"props":957,"children":958},{"style":146},[959],{"type":76,"value":412},{"type":71,"tag":127,"props":961,"children":962},{"style":140},[963],{"type":76,"value":868},{"type":71,"tag":127,"props":965,"children":966},{"style":424},[967],{"type":76,"value":873},{"type":71,"tag":127,"props":969,"children":970},{"style":140},[971],{"type":76,"value":432},{"type":71,"tag":127,"props":973,"children":974},{"style":146},[975],{"type":76,"value":437},{"type":71,"tag":127,"props":977,"children":978},{"style":140},[979],{"type":76,"value":107},{"type":71,"tag":127,"props":981,"children":982},{"style":146},[983],{"type":76,"value":446},{"type":71,"tag":127,"props":985,"children":986},{"style":140},[987],{"type":76,"value":107},{"type":71,"tag":127,"props":989,"children":990},{"style":146},[991],{"type":76,"value":455},{"type":71,"tag":127,"props":993,"children":994},{"style":140},[995],{"type":76,"value":154},{"type":71,"tag":127,"props":997,"children":998},{"style":146},[999],{"type":76,"value":906},{"type":71,"tag":127,"props":1001,"children":1002},{"style":140},[1003],{"type":76,"value":911},{"type":71,"tag":127,"props":1005,"children":1006},{"style":146},[1007],{"type":76,"value":1008},")))\n",{"type":71,"tag":72,"props":1010,"children":1011},{},[1012],{"type":76,"value":1013},"Computed options keep the virtual range synchronized with Vue’s current model.",{"type":71,"tag":72,"props":1015,"children":1016},{},[1017,1019],{"type":76,"value":1018},"Source: ",{"type":71,"tag":79,"props":1020,"children":1022},{"className":1021},[],[1023],{"type":76,"value":1024},"examples\u002Fvue\u002Fvirtualized-rows\u002Fsrc\u002FApp.vue",{"type":71,"tag":763,"props":1026,"children":1028},{"id":1027},"high-virtualizing-source-arrays",[1029],{"type":76,"value":1030},"HIGH Virtualizing source arrays",{"type":71,"tag":72,"props":1032,"children":1033},{},[1034],{"type":76,"value":844},{"type":71,"tag":116,"props":1036,"children":1038},{"className":118,"code":1037,"language":120,"meta":121,"style":121},"const rows = computed(() => data.value)\n",[1039],{"type":71,"tag":79,"props":1040,"children":1041},{"__ignoreMap":121},[1042],{"type":71,"tag":127,"props":1043,"children":1044},{"class":129,"line":130},[1045,1049,1053,1057,1061,1065,1069,1073,1078,1082],{"type":71,"tag":127,"props":1046,"children":1047},{"style":239},[1048],{"type":76,"value":242},{"type":71,"tag":127,"props":1050,"children":1051},{"style":146},[1052],{"type":76,"value":311},{"type":71,"tag":127,"props":1054,"children":1055},{"style":140},[1056],{"type":76,"value":252},{"type":71,"tag":127,"props":1058,"children":1059},{"style":255},[1060],{"type":76,"value":149},{"type":71,"tag":127,"props":1062,"children":1063},{"style":146},[1064],{"type":76,"value":288},{"type":71,"tag":127,"props":1066,"children":1067},{"style":140},[1068],{"type":76,"value":328},{"type":71,"tag":127,"props":1070,"children":1071},{"style":239},[1072],{"type":76,"value":333},{"type":71,"tag":127,"props":1074,"children":1075},{"style":146},[1076],{"type":76,"value":1077}," data",{"type":71,"tag":127,"props":1079,"children":1080},{"style":140},[1081],{"type":76,"value":107},{"type":71,"tag":127,"props":1083,"children":1084},{"style":146},[1085],{"type":76,"value":1086},"value)\n",{"type":71,"tag":72,"props":1088,"children":1089},{},[1090],{"type":76,"value":920},{"type":71,"tag":116,"props":1092,"children":1094},{"className":118,"code":1093,"language":120,"meta":121,"style":121},"const rows = computed(() => table.getRowModel().rows)\n",[1095],{"type":71,"tag":79,"props":1096,"children":1097},{"__ignoreMap":121},[1098],{"type":71,"tag":127,"props":1099,"children":1100},{"class":129,"line":130},[1101,1105,1109,1113,1117,1121,1125,1129,1133,1137,1141,1145,1149],{"type":71,"tag":127,"props":1102,"children":1103},{"style":239},[1104],{"type":76,"value":242},{"type":71,"tag":127,"props":1106,"children":1107},{"style":146},[1108],{"type":76,"value":311},{"type":71,"tag":127,"props":1110,"children":1111},{"style":140},[1112],{"type":76,"value":252},{"type":71,"tag":127,"props":1114,"children":1115},{"style":255},[1116],{"type":76,"value":149},{"type":71,"tag":127,"props":1118,"children":1119},{"style":146},[1120],{"type":76,"value":288},{"type":71,"tag":127,"props":1122,"children":1123},{"style":140},[1124],{"type":76,"value":328},{"type":71,"tag":127,"props":1126,"children":1127},{"style":239},[1128],{"type":76,"value":333},{"type":71,"tag":127,"props":1130,"children":1131},{"style":146},[1132],{"type":76,"value":338},{"type":71,"tag":127,"props":1134,"children":1135},{"style":140},[1136],{"type":76,"value":107},{"type":71,"tag":127,"props":1138,"children":1139},{"style":255},[1140],{"type":76,"value":347},{"type":71,"tag":127,"props":1142,"children":1143},{"style":146},[1144],{"type":76,"value":328},{"type":71,"tag":127,"props":1146,"children":1147},{"style":140},[1148],{"type":76,"value":107},{"type":71,"tag":127,"props":1150,"children":1151},{"style":146},[1152],{"type":76,"value":360},{"type":71,"tag":72,"props":1154,"children":1155},{},[1156],{"type":76,"value":1157},"Source arrays do not represent Table’s current filtering, sorting, expansion, or pagination.",{"type":71,"tag":72,"props":1159,"children":1160},{},[1161,1162],{"type":76,"value":1018},{"type":71,"tag":79,"props":1163,"children":1165},{"className":1164},[],[1166],{"type":76,"value":1167},"docs\u002Fframework\u002Fvue\u002Fguide\u002Fvirtualization.md",{"type":71,"tag":763,"props":1169,"children":1171},{"id":1170},"high-assuming-virtual-provides-css",[1172],{"type":76,"value":1173},"HIGH Assuming Virtual provides CSS",{"type":71,"tag":72,"props":1175,"children":1176},{},[1177],{"type":76,"value":844},{"type":71,"tag":116,"props":1179,"children":1182},{"className":1180,"code":1181,"language":18,"meta":121,"style":121},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv v-for=\"item in virtualRows\" :key=\"item.key\">{{ rows[item.index].id }}\u003C\u002Fdiv>\n",[1183],{"type":71,"tag":79,"props":1184,"children":1185},{"__ignoreMap":121},[1186],{"type":71,"tag":127,"props":1187,"children":1188},{"class":129,"line":130},[1189,1193,1198,1203,1207,1212,1217,1222,1227,1231,1236,1241,1245,1249,1254,1258,1262,1266,1270,1275,1280,1284],{"type":71,"tag":127,"props":1190,"children":1191},{"style":140},[1192],{"type":76,"value":262},{"type":71,"tag":127,"props":1194,"children":1195},{"style":424},[1196],{"type":76,"value":1197},"div",{"type":71,"tag":127,"props":1199,"children":1200},{"style":134},[1201],{"type":76,"value":1202}," v-for",{"type":71,"tag":127,"props":1204,"children":1205},{"style":140},[1206],{"type":76,"value":252},{"type":71,"tag":127,"props":1208,"children":1209},{"style":140},[1210],{"type":76,"value":1211},"\"",{"type":71,"tag":127,"props":1213,"children":1214},{"style":146},[1215],{"type":76,"value":1216},"item ",{"type":71,"tag":127,"props":1218,"children":1219},{"style":140},[1220],{"type":76,"value":1221},"in",{"type":71,"tag":127,"props":1223,"children":1224},{"style":146},[1225],{"type":76,"value":1226}," virtualRows",{"type":71,"tag":127,"props":1228,"children":1229},{"style":140},[1230],{"type":76,"value":1211},{"type":71,"tag":127,"props":1232,"children":1233},{"style":140},[1234],{"type":76,"value":1235}," :",{"type":71,"tag":127,"props":1237,"children":1238},{"style":239},[1239],{"type":76,"value":1240},"key",{"type":71,"tag":127,"props":1242,"children":1243},{"style":140},[1244],{"type":76,"value":252},{"type":71,"tag":127,"props":1246,"children":1247},{"style":140},[1248],{"type":76,"value":1211},{"type":71,"tag":127,"props":1250,"children":1251},{"style":146},[1252],{"type":76,"value":1253},"item",{"type":71,"tag":127,"props":1255,"children":1256},{"style":140},[1257],{"type":76,"value":107},{"type":71,"tag":127,"props":1259,"children":1260},{"style":146},[1261],{"type":76,"value":1240},{"type":71,"tag":127,"props":1263,"children":1264},{"style":140},[1265],{"type":76,"value":1211},{"type":71,"tag":127,"props":1267,"children":1268},{"style":140},[1269],{"type":76,"value":283},{"type":71,"tag":127,"props":1271,"children":1272},{"style":146},[1273],{"type":76,"value":1274},"{{ rows[item.index].id }}",{"type":71,"tag":127,"props":1276,"children":1277},{"style":140},[1278],{"type":76,"value":1279},"\u003C\u002F",{"type":71,"tag":127,"props":1281,"children":1282},{"style":424},[1283],{"type":76,"value":1197},{"type":71,"tag":127,"props":1285,"children":1286},{"style":140},[1287],{"type":76,"value":1288},">\n",{"type":71,"tag":72,"props":1290,"children":1291},{},[1292],{"type":76,"value":920},{"type":71,"tag":116,"props":1294,"children":1296},{"className":1180,"code":1295,"language":18,"meta":121,"style":121},"\u003Cdiv :style=\"{ height: `${totalSize}px`, position: 'relative' }\">\u003Cdiv style=\"position:absolute\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n",[1297],{"type":71,"tag":79,"props":1298,"children":1299},{"__ignoreMap":121},[1300],{"type":71,"tag":127,"props":1301,"children":1302},{"class":129,"line":130},[1303,1307,1311,1315,1320,1324,1328,1332,1337,1341,1346,1351,1355,1360,1365,1369,1374,1378,1382,1387,1392,1396,1400,1404,1409,1413,1417,1422,1427,1431],{"type":71,"tag":127,"props":1304,"children":1305},{"style":140},[1306],{"type":76,"value":262},{"type":71,"tag":127,"props":1308,"children":1309},{"style":424},[1310],{"type":76,"value":1197},{"type":71,"tag":127,"props":1312,"children":1313},{"style":140},[1314],{"type":76,"value":1235},{"type":71,"tag":127,"props":1316,"children":1317},{"style":239},[1318],{"type":76,"value":1319},"style",{"type":71,"tag":127,"props":1321,"children":1322},{"style":140},[1323],{"type":76,"value":252},{"type":71,"tag":127,"props":1325,"children":1326},{"style":140},[1327],{"type":76,"value":1211},{"type":71,"tag":127,"props":1329,"children":1330},{"style":140},[1331],{"type":76,"value":868},{"type":71,"tag":127,"props":1333,"children":1334},{"style":424},[1335],{"type":76,"value":1336}," height",{"type":71,"tag":127,"props":1338,"children":1339},{"style":140},[1340],{"type":76,"value":432},{"type":71,"tag":127,"props":1342,"children":1343},{"style":140},[1344],{"type":76,"value":1345}," `${",{"type":71,"tag":127,"props":1347,"children":1348},{"style":146},[1349],{"type":76,"value":1350},"totalSize",{"type":71,"tag":127,"props":1352,"children":1353},{"style":140},[1354],{"type":76,"value":911},{"type":71,"tag":127,"props":1356,"children":1357},{"style":177},[1358],{"type":76,"value":1359},"px",{"type":71,"tag":127,"props":1361,"children":1362},{"style":140},[1363],{"type":76,"value":1364},"`",{"type":71,"tag":127,"props":1366,"children":1367},{"style":140},[1368],{"type":76,"value":154},{"type":71,"tag":127,"props":1370,"children":1371},{"style":424},[1372],{"type":76,"value":1373}," position",{"type":71,"tag":127,"props":1375,"children":1376},{"style":140},[1377],{"type":76,"value":432},{"type":71,"tag":127,"props":1379,"children":1380},{"style":140},[1381],{"type":76,"value":174},{"type":71,"tag":127,"props":1383,"children":1384},{"style":177},[1385],{"type":76,"value":1386},"relative",{"type":71,"tag":127,"props":1388,"children":1389},{"style":140},[1390],{"type":76,"value":1391},"'",{"type":71,"tag":127,"props":1393,"children":1394},{"style":140},[1395],{"type":76,"value":164},{"type":71,"tag":127,"props":1397,"children":1398},{"style":140},[1399],{"type":76,"value":1211},{"type":71,"tag":127,"props":1401,"children":1402},{"style":140},[1403],{"type":76,"value":283},{"type":71,"tag":127,"props":1405,"children":1406},{"style":146},[1407],{"type":76,"value":1408},"\u003Cdiv style=\"position:absolute\">",{"type":71,"tag":127,"props":1410,"children":1411},{"style":140},[1412],{"type":76,"value":1279},{"type":71,"tag":127,"props":1414,"children":1415},{"style":424},[1416],{"type":76,"value":1197},{"type":71,"tag":127,"props":1418,"children":1419},{"style":140},[1420],{"type":76,"value":1421},">\u003C",{"type":71,"tag":127,"props":1423,"children":1424},{"style":146},[1425],{"type":76,"value":1426},"\u002F",{"type":71,"tag":127,"props":1428,"children":1429},{"style":424},[1430],{"type":76,"value":1197},{"type":71,"tag":127,"props":1432,"children":1433},{"style":140},[1434],{"type":76,"value":1288},{"type":71,"tag":72,"props":1436,"children":1437},{},[1438],{"type":76,"value":1439},"Virtual provides measurements, not spacer layout, transforms, sticky positioning, or Table column widths.",{"type":71,"tag":72,"props":1441,"children":1442},{},[1443,1444],{"type":76,"value":1018},{"type":71,"tag":79,"props":1445,"children":1447},{"className":1446},[],[1448],{"type":76,"value":1449},"examples\u002Fvue\u002Fvirtualized-columns\u002Fsrc\u002FApp.vue",{"type":71,"tag":109,"props":1451,"children":1453},{"id":1452},"api-discovery",[1454],{"type":76,"value":1455},"API Discovery",{"type":71,"tag":72,"props":1457,"children":1458},{},[1459,1461,1467,1469,1475],{"type":76,"value":1460},"Inspect installed ",{"type":71,"tag":79,"props":1462,"children":1464},{"className":1463},[],[1465],{"type":76,"value":1466},"@tanstack\u002Fvue-table\u002Fdist\u002F",{"type":76,"value":1468}," and ",{"type":71,"tag":79,"props":1470,"children":1472},{"className":1471},[],[1473],{"type":76,"value":1474},"@tanstack\u002Fvue-virtual\u002Fdist\u002F",{"type":76,"value":1476},"; use the maintained Vue examples for exact row, column, and infinite layout combinations.",{"type":71,"tag":1319,"props":1478,"children":1479},{},[1480],{"type":76,"value":1481},"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":1483,"total":1565},[1484,1498,1510,1520,1533,1545,1555],{"slug":1485,"name":1485,"fn":1486,"description":1487,"org":1488,"tags":1489,"stars":23,"repoUrl":24,"updatedAt":1497},"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},[1490,1493,1496],{"name":1491,"slug":1492,"type":15},"Data Analysis","data-analysis",{"name":1494,"slug":1495,"type":15},"Frontend","frontend",{"name":9,"slug":8,"type":15},"2026-07-30T05:25:59.429787",{"slug":1499,"name":1499,"fn":1500,"description":1501,"org":1502,"tags":1503,"stars":23,"repoUrl":24,"updatedAt":1509},"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},[1504,1507,1508],{"name":1505,"slug":1506,"type":15},"Debugging","debugging",{"name":1494,"slug":1495,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:26:05.418735",{"slug":1511,"name":1511,"fn":1512,"description":1513,"org":1514,"tags":1515,"stars":23,"repoUrl":24,"updatedAt":1519},"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},[1516,1517,1518],{"name":1491,"slug":1492,"type":15},{"name":9,"slug":8,"type":15},{"name":20,"slug":21,"type":15},"2026-07-30T05:25:38.403427",{"slug":1521,"name":1521,"fn":1522,"description":1523,"org":1524,"tags":1525,"stars":23,"repoUrl":24,"updatedAt":1532},"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},[1526,1529,1530,1531],{"name":1527,"slug":1528,"type":15},"Data Pipeline","data-pipeline",{"name":1494,"slug":1495,"type":15},{"name":13,"slug":14,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:25:45.400104",{"slug":1534,"name":1534,"fn":1535,"description":1536,"org":1537,"tags":1538,"stars":23,"repoUrl":24,"updatedAt":1544},"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},[1539,1542,1543],{"name":1540,"slug":1541,"type":15},"Data Visualization","data-visualization",{"name":1494,"slug":1495,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:25:41.397257",{"slug":1546,"name":1546,"fn":1547,"description":1548,"org":1549,"tags":1550,"stars":23,"repoUrl":24,"updatedAt":1554},"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},[1551,1552,1553],{"name":1491,"slug":1492,"type":15},{"name":1494,"slug":1495,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:25:53.391632",{"slug":1556,"name":1556,"fn":1557,"description":1558,"org":1559,"tags":1560,"stars":23,"repoUrl":24,"updatedAt":1564},"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},[1561,1562,1563],{"name":1494,"slug":1495,"type":15},{"name":9,"slug":8,"type":15},{"name":20,"slug":21,"type":15},"2026-07-30T05:26:03.37801",30,{"items":1567,"total":1665},[1568,1574,1580,1586,1593,1599,1605,1611,1624,1634,1645,1655],{"slug":1485,"name":1485,"fn":1486,"description":1487,"org":1569,"tags":1570,"stars":23,"repoUrl":24,"updatedAt":1497},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1571,1572,1573],{"name":1491,"slug":1492,"type":15},{"name":1494,"slug":1495,"type":15},{"name":9,"slug":8,"type":15},{"slug":1499,"name":1499,"fn":1500,"description":1501,"org":1575,"tags":1576,"stars":23,"repoUrl":24,"updatedAt":1509},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1577,1578,1579],{"name":1505,"slug":1506,"type":15},{"name":1494,"slug":1495,"type":15},{"name":9,"slug":8,"type":15},{"slug":1511,"name":1511,"fn":1512,"description":1513,"org":1581,"tags":1582,"stars":23,"repoUrl":24,"updatedAt":1519},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1583,1584,1585],{"name":1491,"slug":1492,"type":15},{"name":9,"slug":8,"type":15},{"name":20,"slug":21,"type":15},{"slug":1521,"name":1521,"fn":1522,"description":1523,"org":1587,"tags":1588,"stars":23,"repoUrl":24,"updatedAt":1532},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1589,1590,1591,1592],{"name":1527,"slug":1528,"type":15},{"name":1494,"slug":1495,"type":15},{"name":13,"slug":14,"type":15},{"name":9,"slug":8,"type":15},{"slug":1534,"name":1534,"fn":1535,"description":1536,"org":1594,"tags":1595,"stars":23,"repoUrl":24,"updatedAt":1544},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1596,1597,1598],{"name":1540,"slug":1541,"type":15},{"name":1494,"slug":1495,"type":15},{"name":9,"slug":8,"type":15},{"slug":1546,"name":1546,"fn":1547,"description":1548,"org":1600,"tags":1601,"stars":23,"repoUrl":24,"updatedAt":1554},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1602,1603,1604],{"name":1491,"slug":1492,"type":15},{"name":1494,"slug":1495,"type":15},{"name":9,"slug":8,"type":15},{"slug":1556,"name":1556,"fn":1557,"description":1558,"org":1606,"tags":1607,"stars":23,"repoUrl":24,"updatedAt":1564},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1608,1609,1610],{"name":1494,"slug":1495,"type":15},{"name":9,"slug":8,"type":15},{"name":20,"slug":21,"type":15},{"slug":1612,"name":1612,"fn":1613,"description":1614,"org":1615,"tags":1616,"stars":23,"repoUrl":24,"updatedAt":1623},"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},[1617,1620,1621,1622],{"name":1618,"slug":1619,"type":15},"CSS","css",{"name":1494,"slug":1495,"type":15},{"name":9,"slug":8,"type":15},{"name":20,"slug":21,"type":15},"2026-07-30T05:25:55.377366",{"slug":1625,"name":1625,"fn":1626,"description":1627,"org":1628,"tags":1629,"stars":23,"repoUrl":24,"updatedAt":1633},"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},[1630,1631,1632],{"name":1494,"slug":1495,"type":15},{"name":9,"slug":8,"type":15},{"name":20,"slug":21,"type":15},"2026-07-30T05:25:51.400011",{"slug":1635,"name":1635,"fn":1636,"description":1637,"org":1638,"tags":1639,"stars":23,"repoUrl":24,"updatedAt":1644},"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},[1640,1641,1642,1643],{"name":1618,"slug":1619,"type":15},{"name":1494,"slug":1495,"type":15},{"name":9,"slug":8,"type":15},{"name":20,"slug":21,"type":15},"2026-07-30T05:25:48.703799",{"slug":1646,"name":1646,"fn":1647,"description":1648,"org":1649,"tags":1650,"stars":23,"repoUrl":24,"updatedAt":1654},"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},[1651,1652,1653],{"name":1494,"slug":1495,"type":15},{"name":9,"slug":8,"type":15},{"name":20,"slug":21,"type":15},"2026-07-30T05:25:47.367943",{"slug":1656,"name":1656,"fn":1657,"description":1658,"org":1659,"tags":1660,"stars":23,"repoUrl":24,"updatedAt":1664},"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},[1661,1662,1663],{"name":1491,"slug":1492,"type":15},{"name":1494,"slug":1495,"type":15},{"name":20,"slug":21,"type":15},"2026-07-30T05:25:52.366295",125]