[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-tanstack-row-selection":3,"mdc-3hansw-key":50,"related-repo-tanstack-row-selection":1629,"related-org-tanstack-row-selection":1713},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":20,"repoUrl":21,"updatedAt":22,"license":23,"forks":24,"topics":25,"repo":45,"sourceUrl":48,"mdContent":49},"row-selection","manage row selection state","Maintain rowSelection ID state with stable getRowId, single, multi, subrow, and Shift-range rules, selected row models, handler anchors, and manual-pagination semantics. Load when implementing getToggleSelectedHandler, enableRowRangeSelection, selectChildren, or selected IDs that outlive loaded Row objects.\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,17],{"name":13,"slug":14,"type":15},"UI Components","ui-components","tag",{"name":9,"slug":8,"type":15},{"name":18,"slug":19,"type":15},"Frontend","frontend",28175,"https:\u002F\u002Fgithub.com\u002FTanStack\u002Ftable","2026-07-30T05:25:57.554408",null,3539,[26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44],"datagrid","datagrids","datatable","filtering","grid","grouping","hooks","javascript","pagination","react","reactjs","solid","solidjs","sorting","svelte","sveltejs","table","typescript","vue",{"repoUrl":21,"stars":20,"forks":24,"topics":46,"description":47},[26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44],"🤖 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\u002Ftable-core\u002Fskills\u002Frow-selection","---\nname: row-selection\ndescription: >\n  Maintain rowSelection ID state with stable getRowId, single, multi, subrow, and Shift-range rules, selected row models, handler anchors, and manual-pagination semantics. Load when implementing getToggleSelectedHandler, enableRowRangeSelection, selectChildren, or selected IDs that outlive loaded Row objects.\nmetadata:\n  {\n    type: sub-skill,\n    library: '@tanstack\u002Ftable-core',\n    library_version: '9.0.0-beta.59',\n  }\nrequires: ['core', 'table-features']\nsources:\n  - 'TanStack\u002Ftable:docs\u002Fframework\u002Freact\u002Fguide\u002Frow-selection.md'\n  - 'TanStack\u002Ftable:packages\u002Ftable-core\u002Fsrc\u002Ffeatures\u002Frow-selection'\n  - 'TanStack\u002Ftable:examples\u002Freact\u002Frow-selection'\n---\n\nThis skill builds on `core` and `table-features`. Selection is independent ID state; selected row models can only materialize loaded rows.\n\n## Setup\n\n```ts\nimport {\n  rowSelectionFeature,\n  tableFeatures,\n  type Row,\n} from '@tanstack\u002Ftable-core'\n\ntype Person = { id: string; name: string }\nexport const features = tableFeatures({ rowSelectionFeature })\nexport const options = {\n  getRowId: (row: Person) => row.id,\n  enableSubRowSelection: false,\n}\n```\n\n## Core Patterns\n\n```ts\nconst selectedIds = table.getSelectedRowIds()\nconst loadedSelectedRows = table.getSelectedRowModel().rows\n```\n\nUse IDs for database-wide intent and row models for currently loaded objects.\n\n### Inclusive Shift ranges through the row handler\n\n```ts\nexport function getSelectionHandler(row: Row\u003Ctypeof features, Person>) {\n  return row.getToggleSelectedHandler()\n}\n```\n\nThe handler establishes a table-local anchor on ordinary interactions and applies the checked value to the inclusive current display-order range on Shift interactions. Range behavior is enabled by default; set `enableRowRangeSelection: false` to preserve non-range handler behavior. Direct `row.toggleSelected()` and `table.setRowSelection()` calls do not move that anchor.\n\nPass the original checkbox click event to this handler. DOM `change` events often omit modifier keys, so use the framework's click binding for row checkboxes unless its change event exposes the original click through `nativeEvent` (as React does).\n\n### Limit a range to explicitly displayed rows\n\n```ts\nexport function getDisplayedRowsOnlyHandler(row: Row\u003Ctypeof features, Person>) {\n  return row.getToggleSelectedHandler({ selectChildren: false })\n}\n```\n\nThe default `selectChildren: true` recursively changes selectable descendants of parents encountered in the range. Set it to `false` when collapsed descendants outside the display-order interval must remain unchanged.\n\n## Common Mistakes\n\n### [HIGH] Expecting selection to clean itself\n\nWrong: `data = data.filter(row => row.id !== deletedId)`\n\nCorrect: `data = data.filter(row => row.id !== deletedId); table.setRowSelection(old => { const next = { ...old }; delete next[deletedId]; return next })`\n\nSelection is independent state and can retain IDs after data removal.\n\nSource: `https:\u002F\u002Fgithub.com\u002FTanStack\u002Ftable\u002Fissues\u002F5850`\n\n### [HIGH] Selecting mutable indexes\n\nWrong: `const options = { getRowId: (_row: Person, index: number) => String(index) }`\n\nCorrect: `const options = { getRowId: (row: Person) => row.id }`\n\nStable application IDs preserve identity as row order and pages change.\n\nSource: `docs\u002Fframework\u002Freact\u002Fguide\u002Frow-selection.md#useful-row-ids`\n\n### [HIGH] Treating loaded model as global selection\n\nWrong: `const allSelectedRecords = table.getSelectedRowModel().rows`\n\nCorrect: `const allSelectedIds = table.getSelectedRowIds()`\n\nUnder manual pagination, unloaded selected IDs have no `Row` object in the current model.\n\nSource: `docs\u002Fframework\u002Freact\u002Fguide\u002Frow-selection.md#note-if-you-are-using-manualpagination`\n\n### [HIGH] Bypassing the range-selection handler\n\nWrong:\n\n```ts\nconst onChange = (event: { target: { checked: boolean } }) =>\n  row.toggleSelected(event.target.checked)\n```\n\nCorrect:\n\n```ts\nconst onChange = row.getToggleSelectedHandler()\n```\n\nOnly successful interactions through `getToggleSelectedHandler()` establish or advance the Shift-range anchor. The handler also supports custom range-event detection through `isRowRangeSelectionEvent`.\n\nSource: `docs\u002Fframework\u002Freact\u002Fguide\u002Frow-selection.md#shift-range-selection`\n\n### [HIGH] Binding a DOM change event that drops Shift\n\nWrong:\n\n```ts\ncheckbox.addEventListener('change', row.getToggleSelectedHandler())\n```\n\nCorrect:\n\n```ts\ncheckbox.addEventListener('click', row.getToggleSelectedHandler())\n```\n\nThe range modifier must be present on the event passed to the handler. Raw DOM `change` events do not reliably expose click modifier keys.\n\nSource: `docs\u002Fframework\u002Fsvelte\u002Fguide\u002Frow-selection.md#shift-range-selection`\n\n### [MEDIUM] Expecting ranges across unloaded server pages\n\nWrong:\n\n```ts\nconst options = {\n  manualPagination: true,\n  enableRowRangeSelection: true,\n}\n\u002F\u002F Shift cannot select rows absent from data.\n```\n\nCorrect:\n\n```ts\nconst options = {\n  manualPagination: true,\n  getRowId: (row: Person) => row.id,\n}\n```\n\nClient-side ranges can cross pages because display order is pre-pagination. Manual\u002Fserver pagination cannot include rows absent from the loaded `data`; select database-wide IDs in application state when that behavior is required.\n\nSource: `docs\u002Fframework\u002Freact\u002Fguide\u002Frow-selection.md#shift-range-selection`, `https:\u002F\u002Fgithub.com\u002FTanStack\u002Ftable\u002Fissues\u002F4781`\n\n## API Discovery\n\nInspect `node_modules\u002F@tanstack\u002Ftable-core\u002Fdist\u002Ffeatures\u002Frow-selection\u002F` for state, row-model variants, and selection enablement callbacks.\n",{"data":51,"body":63},{"name":4,"description":6,"metadata":52,"requires":56,"sources":59},{"type":53,"library":54,"library_version":55},"sub-skill","@tanstack\u002Ftable-core","9.0.0-beta.59",[57,58],"core","table-features",[60,61,62],"TanStack\u002Ftable:docs\u002Fframework\u002Freact\u002Fguide\u002Frow-selection.md","TanStack\u002Ftable:packages\u002Ftable-core\u002Fsrc\u002Ffeatures\u002Frow-selection","TanStack\u002Ftable:examples\u002Freact\u002Frow-selection",{"type":64,"children":65},"root",[66,89,96,447,453,539,544,551,651,679,700,706,825,846,852,863,874,885,890,901,911,921,931,936,946,956,966,976,989,999,1009,1014,1135,1140,1178,1198,1208,1218,1222,1284,1288,1347,1359,1369,1380,1384,1467,1471,1574,1587,1604,1610,1623],{"type":67,"tag":68,"props":69,"children":70},"element","p",{},[71,74,80,82,87],{"type":72,"value":73},"text","This skill builds on ",{"type":67,"tag":75,"props":76,"children":78},"code",{"className":77},[],[79],{"type":72,"value":57},{"type":72,"value":81}," and ",{"type":67,"tag":75,"props":83,"children":85},{"className":84},[],[86],{"type":72,"value":58},{"type":72,"value":88},". Selection is independent ID state; selected row models can only materialize loaded rows.",{"type":67,"tag":90,"props":91,"children":93},"h2",{"id":92},"setup",[94],{"type":72,"value":95},"Setup",{"type":67,"tag":97,"props":98,"children":103},"pre",{"className":99,"code":100,"language":101,"meta":102,"style":102},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import {\n  rowSelectionFeature,\n  tableFeatures,\n  type Row,\n} from '@tanstack\u002Ftable-core'\n\ntype Person = { id: string; name: string }\nexport const features = tableFeatures({ rowSelectionFeature })\nexport const options = {\n  getRowId: (row: Person) => row.id,\n  enableSubRowSelection: false,\n}\n","ts","",[104],{"type":67,"tag":75,"props":105,"children":106},{"__ignoreMap":102},[107,125,140,153,171,200,210,275,329,354,415,438],{"type":67,"tag":108,"props":109,"children":112},"span",{"class":110,"line":111},"line",1,[113,119],{"type":67,"tag":108,"props":114,"children":116},{"style":115},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[117],{"type":72,"value":118},"import",{"type":67,"tag":108,"props":120,"children":122},{"style":121},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[123],{"type":72,"value":124}," {\n",{"type":67,"tag":108,"props":126,"children":128},{"class":110,"line":127},2,[129,135],{"type":67,"tag":108,"props":130,"children":132},{"style":131},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[133],{"type":72,"value":134},"  rowSelectionFeature",{"type":67,"tag":108,"props":136,"children":137},{"style":121},[138],{"type":72,"value":139},",\n",{"type":67,"tag":108,"props":141,"children":143},{"class":110,"line":142},3,[144,149],{"type":67,"tag":108,"props":145,"children":146},{"style":131},[147],{"type":72,"value":148},"  tableFeatures",{"type":67,"tag":108,"props":150,"children":151},{"style":121},[152],{"type":72,"value":139},{"type":67,"tag":108,"props":154,"children":156},{"class":110,"line":155},4,[157,162,167],{"type":67,"tag":108,"props":158,"children":159},{"style":115},[160],{"type":72,"value":161},"  type",{"type":67,"tag":108,"props":163,"children":164},{"style":131},[165],{"type":72,"value":166}," Row",{"type":67,"tag":108,"props":168,"children":169},{"style":121},[170],{"type":72,"value":139},{"type":67,"tag":108,"props":172,"children":174},{"class":110,"line":173},5,[175,180,185,190,195],{"type":67,"tag":108,"props":176,"children":177},{"style":121},[178],{"type":72,"value":179},"}",{"type":67,"tag":108,"props":181,"children":182},{"style":115},[183],{"type":72,"value":184}," from",{"type":67,"tag":108,"props":186,"children":187},{"style":121},[188],{"type":72,"value":189}," '",{"type":67,"tag":108,"props":191,"children":193},{"style":192},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[194],{"type":72,"value":54},{"type":67,"tag":108,"props":196,"children":197},{"style":121},[198],{"type":72,"value":199},"'\n",{"type":67,"tag":108,"props":201,"children":203},{"class":110,"line":202},6,[204],{"type":67,"tag":108,"props":205,"children":207},{"emptyLinePlaceholder":206},true,[208],{"type":72,"value":209},"\n",{"type":67,"tag":108,"props":211,"children":213},{"class":110,"line":212},7,[214,220,226,231,236,242,247,252,257,262,266,270],{"type":67,"tag":108,"props":215,"children":217},{"style":216},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[218],{"type":72,"value":219},"type",{"type":67,"tag":108,"props":221,"children":223},{"style":222},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[224],{"type":72,"value":225}," Person",{"type":67,"tag":108,"props":227,"children":228},{"style":121},[229],{"type":72,"value":230}," =",{"type":67,"tag":108,"props":232,"children":233},{"style":121},[234],{"type":72,"value":235}," {",{"type":67,"tag":108,"props":237,"children":239},{"style":238},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[240],{"type":72,"value":241}," id",{"type":67,"tag":108,"props":243,"children":244},{"style":121},[245],{"type":72,"value":246},":",{"type":67,"tag":108,"props":248,"children":249},{"style":222},[250],{"type":72,"value":251}," string",{"type":67,"tag":108,"props":253,"children":254},{"style":121},[255],{"type":72,"value":256},";",{"type":67,"tag":108,"props":258,"children":259},{"style":238},[260],{"type":72,"value":261}," name",{"type":67,"tag":108,"props":263,"children":264},{"style":121},[265],{"type":72,"value":246},{"type":67,"tag":108,"props":267,"children":268},{"style":222},[269],{"type":72,"value":251},{"type":67,"tag":108,"props":271,"children":272},{"style":121},[273],{"type":72,"value":274}," }\n",{"type":67,"tag":108,"props":276,"children":278},{"class":110,"line":277},8,[279,284,289,294,299,305,310,315,320,324],{"type":67,"tag":108,"props":280,"children":281},{"style":115},[282],{"type":72,"value":283},"export",{"type":67,"tag":108,"props":285,"children":286},{"style":216},[287],{"type":72,"value":288}," const",{"type":67,"tag":108,"props":290,"children":291},{"style":131},[292],{"type":72,"value":293}," features ",{"type":67,"tag":108,"props":295,"children":296},{"style":121},[297],{"type":72,"value":298},"=",{"type":67,"tag":108,"props":300,"children":302},{"style":301},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[303],{"type":72,"value":304}," tableFeatures",{"type":67,"tag":108,"props":306,"children":307},{"style":131},[308],{"type":72,"value":309},"(",{"type":67,"tag":108,"props":311,"children":312},{"style":121},[313],{"type":72,"value":314},"{",{"type":67,"tag":108,"props":316,"children":317},{"style":131},[318],{"type":72,"value":319}," rowSelectionFeature ",{"type":67,"tag":108,"props":321,"children":322},{"style":121},[323],{"type":72,"value":179},{"type":67,"tag":108,"props":325,"children":326},{"style":131},[327],{"type":72,"value":328},")\n",{"type":67,"tag":108,"props":330,"children":332},{"class":110,"line":331},9,[333,337,341,346,350],{"type":67,"tag":108,"props":334,"children":335},{"style":115},[336],{"type":72,"value":283},{"type":67,"tag":108,"props":338,"children":339},{"style":216},[340],{"type":72,"value":288},{"type":67,"tag":108,"props":342,"children":343},{"style":131},[344],{"type":72,"value":345}," options ",{"type":67,"tag":108,"props":347,"children":348},{"style":121},[349],{"type":72,"value":298},{"type":67,"tag":108,"props":351,"children":352},{"style":121},[353],{"type":72,"value":124},{"type":67,"tag":108,"props":355,"children":357},{"class":110,"line":356},10,[358,363,367,372,378,382,386,391,396,401,406,411],{"type":67,"tag":108,"props":359,"children":360},{"style":301},[361],{"type":72,"value":362},"  getRowId",{"type":67,"tag":108,"props":364,"children":365},{"style":121},[366],{"type":72,"value":246},{"type":67,"tag":108,"props":368,"children":369},{"style":121},[370],{"type":72,"value":371}," (",{"type":67,"tag":108,"props":373,"children":375},{"style":374},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[376],{"type":72,"value":377},"row",{"type":67,"tag":108,"props":379,"children":380},{"style":121},[381],{"type":72,"value":246},{"type":67,"tag":108,"props":383,"children":384},{"style":222},[385],{"type":72,"value":225},{"type":67,"tag":108,"props":387,"children":388},{"style":121},[389],{"type":72,"value":390},")",{"type":67,"tag":108,"props":392,"children":393},{"style":216},[394],{"type":72,"value":395}," =>",{"type":67,"tag":108,"props":397,"children":398},{"style":131},[399],{"type":72,"value":400}," row",{"type":67,"tag":108,"props":402,"children":403},{"style":121},[404],{"type":72,"value":405},".",{"type":67,"tag":108,"props":407,"children":408},{"style":131},[409],{"type":72,"value":410},"id",{"type":67,"tag":108,"props":412,"children":413},{"style":121},[414],{"type":72,"value":139},{"type":67,"tag":108,"props":416,"children":418},{"class":110,"line":417},11,[419,424,428,434],{"type":67,"tag":108,"props":420,"children":421},{"style":238},[422],{"type":72,"value":423},"  enableSubRowSelection",{"type":67,"tag":108,"props":425,"children":426},{"style":121},[427],{"type":72,"value":246},{"type":67,"tag":108,"props":429,"children":431},{"style":430},"--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC",[432],{"type":72,"value":433}," false",{"type":67,"tag":108,"props":435,"children":436},{"style":121},[437],{"type":72,"value":139},{"type":67,"tag":108,"props":439,"children":441},{"class":110,"line":440},12,[442],{"type":67,"tag":108,"props":443,"children":444},{"style":121},[445],{"type":72,"value":446},"}\n",{"type":67,"tag":90,"props":448,"children":450},{"id":449},"core-patterns",[451],{"type":72,"value":452},"Core Patterns",{"type":67,"tag":97,"props":454,"children":456},{"className":99,"code":455,"language":101,"meta":102,"style":102},"const selectedIds = table.getSelectedRowIds()\nconst loadedSelectedRows = table.getSelectedRowModel().rows\n",[457],{"type":67,"tag":75,"props":458,"children":459},{"__ignoreMap":102},[460,496],{"type":67,"tag":108,"props":461,"children":462},{"class":110,"line":111},[463,468,473,477,482,486,491],{"type":67,"tag":108,"props":464,"children":465},{"style":216},[466],{"type":72,"value":467},"const",{"type":67,"tag":108,"props":469,"children":470},{"style":131},[471],{"type":72,"value":472}," selectedIds ",{"type":67,"tag":108,"props":474,"children":475},{"style":121},[476],{"type":72,"value":298},{"type":67,"tag":108,"props":478,"children":479},{"style":131},[480],{"type":72,"value":481}," table",{"type":67,"tag":108,"props":483,"children":484},{"style":121},[485],{"type":72,"value":405},{"type":67,"tag":108,"props":487,"children":488},{"style":301},[489],{"type":72,"value":490},"getSelectedRowIds",{"type":67,"tag":108,"props":492,"children":493},{"style":131},[494],{"type":72,"value":495},"()\n",{"type":67,"tag":108,"props":497,"children":498},{"class":110,"line":127},[499,503,508,512,516,520,525,530,534],{"type":67,"tag":108,"props":500,"children":501},{"style":216},[502],{"type":72,"value":467},{"type":67,"tag":108,"props":504,"children":505},{"style":131},[506],{"type":72,"value":507}," loadedSelectedRows ",{"type":67,"tag":108,"props":509,"children":510},{"style":121},[511],{"type":72,"value":298},{"type":67,"tag":108,"props":513,"children":514},{"style":131},[515],{"type":72,"value":481},{"type":67,"tag":108,"props":517,"children":518},{"style":121},[519],{"type":72,"value":405},{"type":67,"tag":108,"props":521,"children":522},{"style":301},[523],{"type":72,"value":524},"getSelectedRowModel",{"type":67,"tag":108,"props":526,"children":527},{"style":131},[528],{"type":72,"value":529},"()",{"type":67,"tag":108,"props":531,"children":532},{"style":121},[533],{"type":72,"value":405},{"type":67,"tag":108,"props":535,"children":536},{"style":131},[537],{"type":72,"value":538},"rows\n",{"type":67,"tag":68,"props":540,"children":541},{},[542],{"type":72,"value":543},"Use IDs for database-wide intent and row models for currently loaded objects.",{"type":67,"tag":545,"props":546,"children":548},"h3",{"id":547},"inclusive-shift-ranges-through-the-row-handler",[549],{"type":72,"value":550},"Inclusive Shift ranges through the row handler",{"type":67,"tag":97,"props":552,"children":554},{"className":99,"code":553,"language":101,"meta":102,"style":102},"export function getSelectionHandler(row: Row\u003Ctypeof features, Person>) {\n  return row.getToggleSelectedHandler()\n}\n",[555],{"type":67,"tag":75,"props":556,"children":557},{"__ignoreMap":102},[558,619,644],{"type":67,"tag":108,"props":559,"children":560},{"class":110,"line":111},[561,565,570,575,579,583,587,591,596,601,606,610,615],{"type":67,"tag":108,"props":562,"children":563},{"style":115},[564],{"type":72,"value":283},{"type":67,"tag":108,"props":566,"children":567},{"style":216},[568],{"type":72,"value":569}," function",{"type":67,"tag":108,"props":571,"children":572},{"style":301},[573],{"type":72,"value":574}," getSelectionHandler",{"type":67,"tag":108,"props":576,"children":577},{"style":121},[578],{"type":72,"value":309},{"type":67,"tag":108,"props":580,"children":581},{"style":374},[582],{"type":72,"value":377},{"type":67,"tag":108,"props":584,"children":585},{"style":121},[586],{"type":72,"value":246},{"type":67,"tag":108,"props":588,"children":589},{"style":222},[590],{"type":72,"value":166},{"type":67,"tag":108,"props":592,"children":593},{"style":121},[594],{"type":72,"value":595},"\u003Ctypeof",{"type":67,"tag":108,"props":597,"children":598},{"style":131},[599],{"type":72,"value":600}," features",{"type":67,"tag":108,"props":602,"children":603},{"style":121},[604],{"type":72,"value":605},",",{"type":67,"tag":108,"props":607,"children":608},{"style":222},[609],{"type":72,"value":225},{"type":67,"tag":108,"props":611,"children":612},{"style":121},[613],{"type":72,"value":614},">)",{"type":67,"tag":108,"props":616,"children":617},{"style":121},[618],{"type":72,"value":124},{"type":67,"tag":108,"props":620,"children":621},{"class":110,"line":127},[622,627,631,635,640],{"type":67,"tag":108,"props":623,"children":624},{"style":115},[625],{"type":72,"value":626},"  return",{"type":67,"tag":108,"props":628,"children":629},{"style":131},[630],{"type":72,"value":400},{"type":67,"tag":108,"props":632,"children":633},{"style":121},[634],{"type":72,"value":405},{"type":67,"tag":108,"props":636,"children":637},{"style":301},[638],{"type":72,"value":639},"getToggleSelectedHandler",{"type":67,"tag":108,"props":641,"children":642},{"style":238},[643],{"type":72,"value":495},{"type":67,"tag":108,"props":645,"children":646},{"class":110,"line":142},[647],{"type":67,"tag":108,"props":648,"children":649},{"style":121},[650],{"type":72,"value":446},{"type":67,"tag":68,"props":652,"children":653},{},[654,656,662,664,670,671,677],{"type":72,"value":655},"The handler establishes a table-local anchor on ordinary interactions and applies the checked value to the inclusive current display-order range on Shift interactions. Range behavior is enabled by default; set ",{"type":67,"tag":75,"props":657,"children":659},{"className":658},[],[660],{"type":72,"value":661},"enableRowRangeSelection: false",{"type":72,"value":663}," to preserve non-range handler behavior. Direct ",{"type":67,"tag":75,"props":665,"children":667},{"className":666},[],[668],{"type":72,"value":669},"row.toggleSelected()",{"type":72,"value":81},{"type":67,"tag":75,"props":672,"children":674},{"className":673},[],[675],{"type":72,"value":676},"table.setRowSelection()",{"type":72,"value":678}," calls do not move that anchor.",{"type":67,"tag":68,"props":680,"children":681},{},[682,684,690,692,698],{"type":72,"value":683},"Pass the original checkbox click event to this handler. DOM ",{"type":67,"tag":75,"props":685,"children":687},{"className":686},[],[688],{"type":72,"value":689},"change",{"type":72,"value":691}," events often omit modifier keys, so use the framework's click binding for row checkboxes unless its change event exposes the original click through ",{"type":67,"tag":75,"props":693,"children":695},{"className":694},[],[696],{"type":72,"value":697},"nativeEvent",{"type":72,"value":699}," (as React does).",{"type":67,"tag":545,"props":701,"children":703},{"id":702},"limit-a-range-to-explicitly-displayed-rows",[704],{"type":72,"value":705},"Limit a range to explicitly displayed rows",{"type":67,"tag":97,"props":707,"children":709},{"className":99,"code":708,"language":101,"meta":102,"style":102},"export function getDisplayedRowsOnlyHandler(row: Row\u003Ctypeof features, Person>) {\n  return row.getToggleSelectedHandler({ selectChildren: false })\n}\n",[710],{"type":67,"tag":75,"props":711,"children":712},{"__ignoreMap":102},[713,769,818],{"type":67,"tag":108,"props":714,"children":715},{"class":110,"line":111},[716,720,724,729,733,737,741,745,749,753,757,761,765],{"type":67,"tag":108,"props":717,"children":718},{"style":115},[719],{"type":72,"value":283},{"type":67,"tag":108,"props":721,"children":722},{"style":216},[723],{"type":72,"value":569},{"type":67,"tag":108,"props":725,"children":726},{"style":301},[727],{"type":72,"value":728}," getDisplayedRowsOnlyHandler",{"type":67,"tag":108,"props":730,"children":731},{"style":121},[732],{"type":72,"value":309},{"type":67,"tag":108,"props":734,"children":735},{"style":374},[736],{"type":72,"value":377},{"type":67,"tag":108,"props":738,"children":739},{"style":121},[740],{"type":72,"value":246},{"type":67,"tag":108,"props":742,"children":743},{"style":222},[744],{"type":72,"value":166},{"type":67,"tag":108,"props":746,"children":747},{"style":121},[748],{"type":72,"value":595},{"type":67,"tag":108,"props":750,"children":751},{"style":131},[752],{"type":72,"value":600},{"type":67,"tag":108,"props":754,"children":755},{"style":121},[756],{"type":72,"value":605},{"type":67,"tag":108,"props":758,"children":759},{"style":222},[760],{"type":72,"value":225},{"type":67,"tag":108,"props":762,"children":763},{"style":121},[764],{"type":72,"value":614},{"type":67,"tag":108,"props":766,"children":767},{"style":121},[768],{"type":72,"value":124},{"type":67,"tag":108,"props":770,"children":771},{"class":110,"line":127},[772,776,780,784,788,792,796,801,805,809,814],{"type":67,"tag":108,"props":773,"children":774},{"style":115},[775],{"type":72,"value":626},{"type":67,"tag":108,"props":777,"children":778},{"style":131},[779],{"type":72,"value":400},{"type":67,"tag":108,"props":781,"children":782},{"style":121},[783],{"type":72,"value":405},{"type":67,"tag":108,"props":785,"children":786},{"style":301},[787],{"type":72,"value":639},{"type":67,"tag":108,"props":789,"children":790},{"style":238},[791],{"type":72,"value":309},{"type":67,"tag":108,"props":793,"children":794},{"style":121},[795],{"type":72,"value":314},{"type":67,"tag":108,"props":797,"children":798},{"style":238},[799],{"type":72,"value":800}," selectChildren",{"type":67,"tag":108,"props":802,"children":803},{"style":121},[804],{"type":72,"value":246},{"type":67,"tag":108,"props":806,"children":807},{"style":430},[808],{"type":72,"value":433},{"type":67,"tag":108,"props":810,"children":811},{"style":121},[812],{"type":72,"value":813}," }",{"type":67,"tag":108,"props":815,"children":816},{"style":238},[817],{"type":72,"value":328},{"type":67,"tag":108,"props":819,"children":820},{"class":110,"line":142},[821],{"type":67,"tag":108,"props":822,"children":823},{"style":121},[824],{"type":72,"value":446},{"type":67,"tag":68,"props":826,"children":827},{},[828,830,836,838,844],{"type":72,"value":829},"The default ",{"type":67,"tag":75,"props":831,"children":833},{"className":832},[],[834],{"type":72,"value":835},"selectChildren: true",{"type":72,"value":837}," recursively changes selectable descendants of parents encountered in the range. Set it to ",{"type":67,"tag":75,"props":839,"children":841},{"className":840},[],[842],{"type":72,"value":843},"false",{"type":72,"value":845}," when collapsed descendants outside the display-order interval must remain unchanged.",{"type":67,"tag":90,"props":847,"children":849},{"id":848},"common-mistakes",[850],{"type":72,"value":851},"Common Mistakes",{"type":67,"tag":545,"props":853,"children":855},{"id":854},"high-expecting-selection-to-clean-itself",[856,861],{"type":67,"tag":108,"props":857,"children":858},{},[859],{"type":72,"value":860},"HIGH",{"type":72,"value":862}," Expecting selection to clean itself",{"type":67,"tag":68,"props":864,"children":865},{},[866,868],{"type":72,"value":867},"Wrong: ",{"type":67,"tag":75,"props":869,"children":871},{"className":870},[],[872],{"type":72,"value":873},"data = data.filter(row => row.id !== deletedId)",{"type":67,"tag":68,"props":875,"children":876},{},[877,879],{"type":72,"value":878},"Correct: ",{"type":67,"tag":75,"props":880,"children":882},{"className":881},[],[883],{"type":72,"value":884},"data = data.filter(row => row.id !== deletedId); table.setRowSelection(old => { const next = { ...old }; delete next[deletedId]; return next })",{"type":67,"tag":68,"props":886,"children":887},{},[888],{"type":72,"value":889},"Selection is independent state and can retain IDs after data removal.",{"type":67,"tag":68,"props":891,"children":892},{},[893,895],{"type":72,"value":894},"Source: ",{"type":67,"tag":75,"props":896,"children":898},{"className":897},[],[899],{"type":72,"value":900},"https:\u002F\u002Fgithub.com\u002FTanStack\u002Ftable\u002Fissues\u002F5850",{"type":67,"tag":545,"props":902,"children":904},{"id":903},"high-selecting-mutable-indexes",[905,909],{"type":67,"tag":108,"props":906,"children":907},{},[908],{"type":72,"value":860},{"type":72,"value":910}," Selecting mutable indexes",{"type":67,"tag":68,"props":912,"children":913},{},[914,915],{"type":72,"value":867},{"type":67,"tag":75,"props":916,"children":918},{"className":917},[],[919],{"type":72,"value":920},"const options = { getRowId: (_row: Person, index: number) => String(index) }",{"type":67,"tag":68,"props":922,"children":923},{},[924,925],{"type":72,"value":878},{"type":67,"tag":75,"props":926,"children":928},{"className":927},[],[929],{"type":72,"value":930},"const options = { getRowId: (row: Person) => row.id }",{"type":67,"tag":68,"props":932,"children":933},{},[934],{"type":72,"value":935},"Stable application IDs preserve identity as row order and pages change.",{"type":67,"tag":68,"props":937,"children":938},{},[939,940],{"type":72,"value":894},{"type":67,"tag":75,"props":941,"children":943},{"className":942},[],[944],{"type":72,"value":945},"docs\u002Fframework\u002Freact\u002Fguide\u002Frow-selection.md#useful-row-ids",{"type":67,"tag":545,"props":947,"children":949},{"id":948},"high-treating-loaded-model-as-global-selection",[950,954],{"type":67,"tag":108,"props":951,"children":952},{},[953],{"type":72,"value":860},{"type":72,"value":955}," Treating loaded model as global selection",{"type":67,"tag":68,"props":957,"children":958},{},[959,960],{"type":72,"value":867},{"type":67,"tag":75,"props":961,"children":963},{"className":962},[],[964],{"type":72,"value":965},"const allSelectedRecords = table.getSelectedRowModel().rows",{"type":67,"tag":68,"props":967,"children":968},{},[969,970],{"type":72,"value":878},{"type":67,"tag":75,"props":971,"children":973},{"className":972},[],[974],{"type":72,"value":975},"const allSelectedIds = table.getSelectedRowIds()",{"type":67,"tag":68,"props":977,"children":978},{},[979,981,987],{"type":72,"value":980},"Under manual pagination, unloaded selected IDs have no ",{"type":67,"tag":75,"props":982,"children":984},{"className":983},[],[985],{"type":72,"value":986},"Row",{"type":72,"value":988}," object in the current model.",{"type":67,"tag":68,"props":990,"children":991},{},[992,993],{"type":72,"value":894},{"type":67,"tag":75,"props":994,"children":996},{"className":995},[],[997],{"type":72,"value":998},"docs\u002Fframework\u002Freact\u002Fguide\u002Frow-selection.md#note-if-you-are-using-manualpagination",{"type":67,"tag":545,"props":1000,"children":1002},{"id":1001},"high-bypassing-the-range-selection-handler",[1003,1007],{"type":67,"tag":108,"props":1004,"children":1005},{},[1006],{"type":72,"value":860},{"type":72,"value":1008}," Bypassing the range-selection handler",{"type":67,"tag":68,"props":1010,"children":1011},{},[1012],{"type":72,"value":1013},"Wrong:",{"type":67,"tag":97,"props":1015,"children":1017},{"className":99,"code":1016,"language":101,"meta":102,"style":102},"const onChange = (event: { target: { checked: boolean } }) =>\n  row.toggleSelected(event.target.checked)\n",[1018],{"type":67,"tag":75,"props":1019,"children":1020},{"__ignoreMap":102},[1021,1095],{"type":67,"tag":108,"props":1022,"children":1023},{"class":110,"line":111},[1024,1028,1033,1037,1041,1046,1050,1054,1059,1063,1067,1072,1076,1081,1085,1090],{"type":67,"tag":108,"props":1025,"children":1026},{"style":216},[1027],{"type":72,"value":467},{"type":67,"tag":108,"props":1029,"children":1030},{"style":131},[1031],{"type":72,"value":1032}," onChange ",{"type":67,"tag":108,"props":1034,"children":1035},{"style":121},[1036],{"type":72,"value":298},{"type":67,"tag":108,"props":1038,"children":1039},{"style":121},[1040],{"type":72,"value":371},{"type":67,"tag":108,"props":1042,"children":1043},{"style":374},[1044],{"type":72,"value":1045},"event",{"type":67,"tag":108,"props":1047,"children":1048},{"style":121},[1049],{"type":72,"value":246},{"type":67,"tag":108,"props":1051,"children":1052},{"style":121},[1053],{"type":72,"value":235},{"type":67,"tag":108,"props":1055,"children":1056},{"style":238},[1057],{"type":72,"value":1058}," target",{"type":67,"tag":108,"props":1060,"children":1061},{"style":121},[1062],{"type":72,"value":246},{"type":67,"tag":108,"props":1064,"children":1065},{"style":121},[1066],{"type":72,"value":235},{"type":67,"tag":108,"props":1068,"children":1069},{"style":238},[1070],{"type":72,"value":1071}," checked",{"type":67,"tag":108,"props":1073,"children":1074},{"style":121},[1075],{"type":72,"value":246},{"type":67,"tag":108,"props":1077,"children":1078},{"style":222},[1079],{"type":72,"value":1080}," boolean",{"type":67,"tag":108,"props":1082,"children":1083},{"style":121},[1084],{"type":72,"value":813},{"type":67,"tag":108,"props":1086,"children":1087},{"style":121},[1088],{"type":72,"value":1089}," })",{"type":67,"tag":108,"props":1091,"children":1092},{"style":216},[1093],{"type":72,"value":1094}," =>\n",{"type":67,"tag":108,"props":1096,"children":1097},{"class":110,"line":127},[1098,1103,1107,1112,1117,1121,1126,1130],{"type":67,"tag":108,"props":1099,"children":1100},{"style":131},[1101],{"type":72,"value":1102},"  row",{"type":67,"tag":108,"props":1104,"children":1105},{"style":121},[1106],{"type":72,"value":405},{"type":67,"tag":108,"props":1108,"children":1109},{"style":301},[1110],{"type":72,"value":1111},"toggleSelected",{"type":67,"tag":108,"props":1113,"children":1114},{"style":131},[1115],{"type":72,"value":1116},"(event",{"type":67,"tag":108,"props":1118,"children":1119},{"style":121},[1120],{"type":72,"value":405},{"type":67,"tag":108,"props":1122,"children":1123},{"style":131},[1124],{"type":72,"value":1125},"target",{"type":67,"tag":108,"props":1127,"children":1128},{"style":121},[1129],{"type":72,"value":405},{"type":67,"tag":108,"props":1131,"children":1132},{"style":131},[1133],{"type":72,"value":1134},"checked)\n",{"type":67,"tag":68,"props":1136,"children":1137},{},[1138],{"type":72,"value":1139},"Correct:",{"type":67,"tag":97,"props":1141,"children":1143},{"className":99,"code":1142,"language":101,"meta":102,"style":102},"const onChange = row.getToggleSelectedHandler()\n",[1144],{"type":67,"tag":75,"props":1145,"children":1146},{"__ignoreMap":102},[1147],{"type":67,"tag":108,"props":1148,"children":1149},{"class":110,"line":111},[1150,1154,1158,1162,1166,1170,1174],{"type":67,"tag":108,"props":1151,"children":1152},{"style":216},[1153],{"type":72,"value":467},{"type":67,"tag":108,"props":1155,"children":1156},{"style":131},[1157],{"type":72,"value":1032},{"type":67,"tag":108,"props":1159,"children":1160},{"style":121},[1161],{"type":72,"value":298},{"type":67,"tag":108,"props":1163,"children":1164},{"style":131},[1165],{"type":72,"value":400},{"type":67,"tag":108,"props":1167,"children":1168},{"style":121},[1169],{"type":72,"value":405},{"type":67,"tag":108,"props":1171,"children":1172},{"style":301},[1173],{"type":72,"value":639},{"type":67,"tag":108,"props":1175,"children":1176},{"style":131},[1177],{"type":72,"value":495},{"type":67,"tag":68,"props":1179,"children":1180},{},[1181,1183,1189,1191,1197],{"type":72,"value":1182},"Only successful interactions through ",{"type":67,"tag":75,"props":1184,"children":1186},{"className":1185},[],[1187],{"type":72,"value":1188},"getToggleSelectedHandler()",{"type":72,"value":1190}," establish or advance the Shift-range anchor. The handler also supports custom range-event detection through ",{"type":67,"tag":75,"props":1192,"children":1194},{"className":1193},[],[1195],{"type":72,"value":1196},"isRowRangeSelectionEvent",{"type":72,"value":405},{"type":67,"tag":68,"props":1199,"children":1200},{},[1201,1202],{"type":72,"value":894},{"type":67,"tag":75,"props":1203,"children":1205},{"className":1204},[],[1206],{"type":72,"value":1207},"docs\u002Fframework\u002Freact\u002Fguide\u002Frow-selection.md#shift-range-selection",{"type":67,"tag":545,"props":1209,"children":1211},{"id":1210},"high-binding-a-dom-change-event-that-drops-shift",[1212,1216],{"type":67,"tag":108,"props":1213,"children":1214},{},[1215],{"type":72,"value":860},{"type":72,"value":1217}," Binding a DOM change event that drops Shift",{"type":67,"tag":68,"props":1219,"children":1220},{},[1221],{"type":72,"value":1013},{"type":67,"tag":97,"props":1223,"children":1225},{"className":99,"code":1224,"language":101,"meta":102,"style":102},"checkbox.addEventListener('change', row.getToggleSelectedHandler())\n",[1226],{"type":67,"tag":75,"props":1227,"children":1228},{"__ignoreMap":102},[1229],{"type":67,"tag":108,"props":1230,"children":1231},{"class":110,"line":111},[1232,1237,1241,1246,1250,1255,1259,1263,1267,1271,1275,1279],{"type":67,"tag":108,"props":1233,"children":1234},{"style":131},[1235],{"type":72,"value":1236},"checkbox",{"type":67,"tag":108,"props":1238,"children":1239},{"style":121},[1240],{"type":72,"value":405},{"type":67,"tag":108,"props":1242,"children":1243},{"style":301},[1244],{"type":72,"value":1245},"addEventListener",{"type":67,"tag":108,"props":1247,"children":1248},{"style":131},[1249],{"type":72,"value":309},{"type":67,"tag":108,"props":1251,"children":1252},{"style":121},[1253],{"type":72,"value":1254},"'",{"type":67,"tag":108,"props":1256,"children":1257},{"style":192},[1258],{"type":72,"value":689},{"type":67,"tag":108,"props":1260,"children":1261},{"style":121},[1262],{"type":72,"value":1254},{"type":67,"tag":108,"props":1264,"children":1265},{"style":121},[1266],{"type":72,"value":605},{"type":67,"tag":108,"props":1268,"children":1269},{"style":131},[1270],{"type":72,"value":400},{"type":67,"tag":108,"props":1272,"children":1273},{"style":121},[1274],{"type":72,"value":405},{"type":67,"tag":108,"props":1276,"children":1277},{"style":301},[1278],{"type":72,"value":639},{"type":67,"tag":108,"props":1280,"children":1281},{"style":131},[1282],{"type":72,"value":1283},"())\n",{"type":67,"tag":68,"props":1285,"children":1286},{},[1287],{"type":72,"value":1139},{"type":67,"tag":97,"props":1289,"children":1291},{"className":99,"code":1290,"language":101,"meta":102,"style":102},"checkbox.addEventListener('click', row.getToggleSelectedHandler())\n",[1292],{"type":67,"tag":75,"props":1293,"children":1294},{"__ignoreMap":102},[1295],{"type":67,"tag":108,"props":1296,"children":1297},{"class":110,"line":111},[1298,1302,1306,1310,1314,1318,1323,1327,1331,1335,1339,1343],{"type":67,"tag":108,"props":1299,"children":1300},{"style":131},[1301],{"type":72,"value":1236},{"type":67,"tag":108,"props":1303,"children":1304},{"style":121},[1305],{"type":72,"value":405},{"type":67,"tag":108,"props":1307,"children":1308},{"style":301},[1309],{"type":72,"value":1245},{"type":67,"tag":108,"props":1311,"children":1312},{"style":131},[1313],{"type":72,"value":309},{"type":67,"tag":108,"props":1315,"children":1316},{"style":121},[1317],{"type":72,"value":1254},{"type":67,"tag":108,"props":1319,"children":1320},{"style":192},[1321],{"type":72,"value":1322},"click",{"type":67,"tag":108,"props":1324,"children":1325},{"style":121},[1326],{"type":72,"value":1254},{"type":67,"tag":108,"props":1328,"children":1329},{"style":121},[1330],{"type":72,"value":605},{"type":67,"tag":108,"props":1332,"children":1333},{"style":131},[1334],{"type":72,"value":400},{"type":67,"tag":108,"props":1336,"children":1337},{"style":121},[1338],{"type":72,"value":405},{"type":67,"tag":108,"props":1340,"children":1341},{"style":301},[1342],{"type":72,"value":639},{"type":67,"tag":108,"props":1344,"children":1345},{"style":131},[1346],{"type":72,"value":1283},{"type":67,"tag":68,"props":1348,"children":1349},{},[1350,1352,1357],{"type":72,"value":1351},"The range modifier must be present on the event passed to the handler. Raw DOM ",{"type":67,"tag":75,"props":1353,"children":1355},{"className":1354},[],[1356],{"type":72,"value":689},{"type":72,"value":1358}," events do not reliably expose click modifier keys.",{"type":67,"tag":68,"props":1360,"children":1361},{},[1362,1363],{"type":72,"value":894},{"type":67,"tag":75,"props":1364,"children":1366},{"className":1365},[],[1367],{"type":72,"value":1368},"docs\u002Fframework\u002Fsvelte\u002Fguide\u002Frow-selection.md#shift-range-selection",{"type":67,"tag":545,"props":1370,"children":1372},{"id":1371},"medium-expecting-ranges-across-unloaded-server-pages",[1373,1378],{"type":67,"tag":108,"props":1374,"children":1375},{},[1376],{"type":72,"value":1377},"MEDIUM",{"type":72,"value":1379}," Expecting ranges across unloaded server pages",{"type":67,"tag":68,"props":1381,"children":1382},{},[1383],{"type":72,"value":1013},{"type":67,"tag":97,"props":1385,"children":1387},{"className":99,"code":1386,"language":101,"meta":102,"style":102},"const options = {\n  manualPagination: true,\n  enableRowRangeSelection: true,\n}\n\u002F\u002F Shift cannot select rows absent from data.\n",[1388],{"type":67,"tag":75,"props":1389,"children":1390},{"__ignoreMap":102},[1391,1410,1431,1451,1458],{"type":67,"tag":108,"props":1392,"children":1393},{"class":110,"line":111},[1394,1398,1402,1406],{"type":67,"tag":108,"props":1395,"children":1396},{"style":216},[1397],{"type":72,"value":467},{"type":67,"tag":108,"props":1399,"children":1400},{"style":131},[1401],{"type":72,"value":345},{"type":67,"tag":108,"props":1403,"children":1404},{"style":121},[1405],{"type":72,"value":298},{"type":67,"tag":108,"props":1407,"children":1408},{"style":121},[1409],{"type":72,"value":124},{"type":67,"tag":108,"props":1411,"children":1412},{"class":110,"line":127},[1413,1418,1422,1427],{"type":67,"tag":108,"props":1414,"children":1415},{"style":238},[1416],{"type":72,"value":1417},"  manualPagination",{"type":67,"tag":108,"props":1419,"children":1420},{"style":121},[1421],{"type":72,"value":246},{"type":67,"tag":108,"props":1423,"children":1424},{"style":430},[1425],{"type":72,"value":1426}," true",{"type":67,"tag":108,"props":1428,"children":1429},{"style":121},[1430],{"type":72,"value":139},{"type":67,"tag":108,"props":1432,"children":1433},{"class":110,"line":142},[1434,1439,1443,1447],{"type":67,"tag":108,"props":1435,"children":1436},{"style":238},[1437],{"type":72,"value":1438},"  enableRowRangeSelection",{"type":67,"tag":108,"props":1440,"children":1441},{"style":121},[1442],{"type":72,"value":246},{"type":67,"tag":108,"props":1444,"children":1445},{"style":430},[1446],{"type":72,"value":1426},{"type":67,"tag":108,"props":1448,"children":1449},{"style":121},[1450],{"type":72,"value":139},{"type":67,"tag":108,"props":1452,"children":1453},{"class":110,"line":155},[1454],{"type":67,"tag":108,"props":1455,"children":1456},{"style":121},[1457],{"type":72,"value":446},{"type":67,"tag":108,"props":1459,"children":1460},{"class":110,"line":173},[1461],{"type":67,"tag":108,"props":1462,"children":1464},{"style":1463},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[1465],{"type":72,"value":1466},"\u002F\u002F Shift cannot select rows absent from data.\n",{"type":67,"tag":68,"props":1468,"children":1469},{},[1470],{"type":72,"value":1139},{"type":67,"tag":97,"props":1472,"children":1474},{"className":99,"code":1473,"language":101,"meta":102,"style":102},"const options = {\n  manualPagination: true,\n  getRowId: (row: Person) => row.id,\n}\n",[1475],{"type":67,"tag":75,"props":1476,"children":1477},{"__ignoreMap":102},[1478,1497,1516,1567],{"type":67,"tag":108,"props":1479,"children":1480},{"class":110,"line":111},[1481,1485,1489,1493],{"type":67,"tag":108,"props":1482,"children":1483},{"style":216},[1484],{"type":72,"value":467},{"type":67,"tag":108,"props":1486,"children":1487},{"style":131},[1488],{"type":72,"value":345},{"type":67,"tag":108,"props":1490,"children":1491},{"style":121},[1492],{"type":72,"value":298},{"type":67,"tag":108,"props":1494,"children":1495},{"style":121},[1496],{"type":72,"value":124},{"type":67,"tag":108,"props":1498,"children":1499},{"class":110,"line":127},[1500,1504,1508,1512],{"type":67,"tag":108,"props":1501,"children":1502},{"style":238},[1503],{"type":72,"value":1417},{"type":67,"tag":108,"props":1505,"children":1506},{"style":121},[1507],{"type":72,"value":246},{"type":67,"tag":108,"props":1509,"children":1510},{"style":430},[1511],{"type":72,"value":1426},{"type":67,"tag":108,"props":1513,"children":1514},{"style":121},[1515],{"type":72,"value":139},{"type":67,"tag":108,"props":1517,"children":1518},{"class":110,"line":142},[1519,1523,1527,1531,1535,1539,1543,1547,1551,1555,1559,1563],{"type":67,"tag":108,"props":1520,"children":1521},{"style":301},[1522],{"type":72,"value":362},{"type":67,"tag":108,"props":1524,"children":1525},{"style":121},[1526],{"type":72,"value":246},{"type":67,"tag":108,"props":1528,"children":1529},{"style":121},[1530],{"type":72,"value":371},{"type":67,"tag":108,"props":1532,"children":1533},{"style":374},[1534],{"type":72,"value":377},{"type":67,"tag":108,"props":1536,"children":1537},{"style":121},[1538],{"type":72,"value":246},{"type":67,"tag":108,"props":1540,"children":1541},{"style":222},[1542],{"type":72,"value":225},{"type":67,"tag":108,"props":1544,"children":1545},{"style":121},[1546],{"type":72,"value":390},{"type":67,"tag":108,"props":1548,"children":1549},{"style":216},[1550],{"type":72,"value":395},{"type":67,"tag":108,"props":1552,"children":1553},{"style":131},[1554],{"type":72,"value":400},{"type":67,"tag":108,"props":1556,"children":1557},{"style":121},[1558],{"type":72,"value":405},{"type":67,"tag":108,"props":1560,"children":1561},{"style":131},[1562],{"type":72,"value":410},{"type":67,"tag":108,"props":1564,"children":1565},{"style":121},[1566],{"type":72,"value":139},{"type":67,"tag":108,"props":1568,"children":1569},{"class":110,"line":155},[1570],{"type":67,"tag":108,"props":1571,"children":1572},{"style":121},[1573],{"type":72,"value":446},{"type":67,"tag":68,"props":1575,"children":1576},{},[1577,1579,1585],{"type":72,"value":1578},"Client-side ranges can cross pages because display order is pre-pagination. Manual\u002Fserver pagination cannot include rows absent from the loaded ",{"type":67,"tag":75,"props":1580,"children":1582},{"className":1581},[],[1583],{"type":72,"value":1584},"data",{"type":72,"value":1586},"; select database-wide IDs in application state when that behavior is required.",{"type":67,"tag":68,"props":1588,"children":1589},{},[1590,1591,1596,1598],{"type":72,"value":894},{"type":67,"tag":75,"props":1592,"children":1594},{"className":1593},[],[1595],{"type":72,"value":1207},{"type":72,"value":1597},", ",{"type":67,"tag":75,"props":1599,"children":1601},{"className":1600},[],[1602],{"type":72,"value":1603},"https:\u002F\u002Fgithub.com\u002FTanStack\u002Ftable\u002Fissues\u002F4781",{"type":67,"tag":90,"props":1605,"children":1607},{"id":1606},"api-discovery",[1608],{"type":72,"value":1609},"API Discovery",{"type":67,"tag":68,"props":1611,"children":1612},{},[1613,1615,1621],{"type":72,"value":1614},"Inspect ",{"type":67,"tag":75,"props":1616,"children":1618},{"className":1617},[],[1619],{"type":72,"value":1620},"node_modules\u002F@tanstack\u002Ftable-core\u002Fdist\u002Ffeatures\u002Frow-selection\u002F",{"type":72,"value":1622}," for state, row-model variants, and selection enablement callbacks.",{"type":67,"tag":1624,"props":1625,"children":1626},"style",{},[1627],{"type":72,"value":1628},"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":1630,"total":1712},[1631,1643,1655,1665,1680,1692,1702],{"slug":1632,"name":1632,"fn":1633,"description":1634,"org":1635,"tags":1636,"stars":20,"repoUrl":21,"updatedAt":1642},"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},[1637,1640,1641],{"name":1638,"slug":1639,"type":15},"Data Analysis","data-analysis",{"name":18,"slug":19,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:25:59.429787",{"slug":1644,"name":1644,"fn":1645,"description":1646,"org":1647,"tags":1648,"stars":20,"repoUrl":21,"updatedAt":1654},"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},[1649,1652,1653],{"name":1650,"slug":1651,"type":15},"Debugging","debugging",{"name":18,"slug":19,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:26:05.418735",{"slug":1656,"name":1656,"fn":1657,"description":1658,"org":1659,"tags":1660,"stars":20,"repoUrl":21,"updatedAt":1664},"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},[1661,1662,1663],{"name":1638,"slug":1639,"type":15},{"name":9,"slug":8,"type":15},{"name":13,"slug":14,"type":15},"2026-07-30T05:25:38.403427",{"slug":1666,"name":1666,"fn":1667,"description":1668,"org":1669,"tags":1670,"stars":20,"repoUrl":21,"updatedAt":1679},"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},[1671,1674,1675,1678],{"name":1672,"slug":1673,"type":15},"Data Pipeline","data-pipeline",{"name":18,"slug":19,"type":15},{"name":1676,"slug":1677,"type":15},"Performance","performance",{"name":9,"slug":8,"type":15},"2026-07-30T05:25:45.400104",{"slug":1681,"name":1681,"fn":1682,"description":1683,"org":1684,"tags":1685,"stars":20,"repoUrl":21,"updatedAt":1691},"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},[1686,1689,1690],{"name":1687,"slug":1688,"type":15},"Data Visualization","data-visualization",{"name":18,"slug":19,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:25:41.397257",{"slug":1693,"name":1693,"fn":1694,"description":1695,"org":1696,"tags":1697,"stars":20,"repoUrl":21,"updatedAt":1701},"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},[1698,1699,1700],{"name":1638,"slug":1639,"type":15},{"name":18,"slug":19,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:25:53.391632",{"slug":1703,"name":1703,"fn":1704,"description":1705,"org":1706,"tags":1707,"stars":20,"repoUrl":21,"updatedAt":1711},"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},[1708,1709,1710],{"name":18,"slug":19,"type":15},{"name":9,"slug":8,"type":15},{"name":13,"slug":14,"type":15},"2026-07-30T05:26:03.37801",30,{"items":1714,"total":1811},[1715,1721,1727,1733,1740,1746,1752,1758,1771,1781,1792,1802],{"slug":1632,"name":1632,"fn":1633,"description":1634,"org":1716,"tags":1717,"stars":20,"repoUrl":21,"updatedAt":1642},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1718,1719,1720],{"name":1638,"slug":1639,"type":15},{"name":18,"slug":19,"type":15},{"name":9,"slug":8,"type":15},{"slug":1644,"name":1644,"fn":1645,"description":1646,"org":1722,"tags":1723,"stars":20,"repoUrl":21,"updatedAt":1654},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1724,1725,1726],{"name":1650,"slug":1651,"type":15},{"name":18,"slug":19,"type":15},{"name":9,"slug":8,"type":15},{"slug":1656,"name":1656,"fn":1657,"description":1658,"org":1728,"tags":1729,"stars":20,"repoUrl":21,"updatedAt":1664},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1730,1731,1732],{"name":1638,"slug":1639,"type":15},{"name":9,"slug":8,"type":15},{"name":13,"slug":14,"type":15},{"slug":1666,"name":1666,"fn":1667,"description":1668,"org":1734,"tags":1735,"stars":20,"repoUrl":21,"updatedAt":1679},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1736,1737,1738,1739],{"name":1672,"slug":1673,"type":15},{"name":18,"slug":19,"type":15},{"name":1676,"slug":1677,"type":15},{"name":9,"slug":8,"type":15},{"slug":1681,"name":1681,"fn":1682,"description":1683,"org":1741,"tags":1742,"stars":20,"repoUrl":21,"updatedAt":1691},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1743,1744,1745],{"name":1687,"slug":1688,"type":15},{"name":18,"slug":19,"type":15},{"name":9,"slug":8,"type":15},{"slug":1693,"name":1693,"fn":1694,"description":1695,"org":1747,"tags":1748,"stars":20,"repoUrl":21,"updatedAt":1701},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1749,1750,1751],{"name":1638,"slug":1639,"type":15},{"name":18,"slug":19,"type":15},{"name":9,"slug":8,"type":15},{"slug":1703,"name":1703,"fn":1704,"description":1705,"org":1753,"tags":1754,"stars":20,"repoUrl":21,"updatedAt":1711},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1755,1756,1757],{"name":18,"slug":19,"type":15},{"name":9,"slug":8,"type":15},{"name":13,"slug":14,"type":15},{"slug":1759,"name":1759,"fn":1760,"description":1761,"org":1762,"tags":1763,"stars":20,"repoUrl":21,"updatedAt":1770},"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},[1764,1767,1768,1769],{"name":1765,"slug":1766,"type":15},"CSS","css",{"name":18,"slug":19,"type":15},{"name":9,"slug":8,"type":15},{"name":13,"slug":14,"type":15},"2026-07-30T05:25:55.377366",{"slug":1772,"name":1772,"fn":1773,"description":1774,"org":1775,"tags":1776,"stars":20,"repoUrl":21,"updatedAt":1780},"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},[1777,1778,1779],{"name":18,"slug":19,"type":15},{"name":9,"slug":8,"type":15},{"name":13,"slug":14,"type":15},"2026-07-30T05:25:51.400011",{"slug":1782,"name":1782,"fn":1783,"description":1784,"org":1785,"tags":1786,"stars":20,"repoUrl":21,"updatedAt":1791},"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},[1787,1788,1789,1790],{"name":1765,"slug":1766,"type":15},{"name":18,"slug":19,"type":15},{"name":9,"slug":8,"type":15},{"name":13,"slug":14,"type":15},"2026-07-30T05:25:48.703799",{"slug":1793,"name":1793,"fn":1794,"description":1795,"org":1796,"tags":1797,"stars":20,"repoUrl":21,"updatedAt":1801},"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},[1798,1799,1800],{"name":18,"slug":19,"type":15},{"name":9,"slug":8,"type":15},{"name":13,"slug":14,"type":15},"2026-07-30T05:25:47.367943",{"slug":57,"name":57,"fn":1803,"description":1804,"org":1805,"tags":1806,"stars":20,"repoUrl":21,"updatedAt":1810},"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},[1807,1808,1809],{"name":1638,"slug":1639,"type":15},{"name":18,"slug":19,"type":15},{"name":13,"slug":14,"type":15},"2026-07-30T05:25:52.366295",125]