[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-tanstack-grouping":3,"mdc-9k7kcc-key":49,"related-org-tanstack-grouping":962,"related-repo-tanstack-grouping":1097},{"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":44,"sourceUrl":47,"mdContent":48},"grouping","group and aggregate data in TanStack Table","Group rows with columnGroupingFeature, groupedRowModel, groupedColumnMode, and manualGrouping. Load for grouped or placeholder cells and grouping interactions with expansion or pagination.\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},"Data Analysis","data-analysis","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:44.370878",null,3539,[26,27,28,29,30,4,31,32,33,34,35,36,37,38,39,40,41,42,43],"datagrid","datagrids","datatable","filtering","grid","hooks","javascript","pagination","react","reactjs","solid","solidjs","sorting","svelte","sveltejs","table","typescript","vue",{"repoUrl":21,"stars":20,"forks":24,"topics":45,"description":46},[26,27,28,29,30,4,31,32,33,34,35,36,37,38,39,40,41,42,43],"🤖 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\u002Fgrouping","---\nname: grouping\ndescription: >\n  Group rows with columnGroupingFeature, groupedRowModel, groupedColumnMode, and manualGrouping. Load for grouped or placeholder cells and grouping interactions with expansion or pagination.\nmetadata:\n  {\n    type: sub-skill,\n    library: '@tanstack\u002Ftable-core',\n    library_version: '9.0.0-beta.59',\n  }\nrequires: ['core', 'table-features', 'client-vs-server']\nsources:\n  - 'TanStack\u002Ftable:docs\u002Fframework\u002Freact\u002Fguide\u002Fgrouping.md'\n  - 'TanStack\u002Ftable:packages\u002Ftable-core\u002Fsrc\u002Ffeatures\u002Fcolumn-grouping'\n  - 'TanStack\u002Ftable:examples\u002Freact\u002Fgrouping'\n---\n\nThis skill builds on `core`, `table-features`, and `client-vs-server`. Grouping creates row structure and the renderer chooses grouped-cell UI. Load the separate `aggregation` skill when grouped rows should also calculate values.\n\n## Setup\n\n```ts\nimport {\n  columnGroupingFeature,\n  createGroupedRowModel,\n  tableFeatures,\n} from '@tanstack\u002Ftable-core'\n\nexport const features = tableFeatures({\n  columnGroupingFeature,\n  groupedRowModel: createGroupedRowModel(),\n})\n```\n\n## Core Patterns\n\n```ts\nconst options = { groupedColumnMode: 'reorder' as const }\nconst mode = cell.getIsGrouped()\n  ? 'grouped'\n  : cell.getIsPlaceholder()\n    ? 'placeholder'\n    : 'value'\n```\n\nRender these cell modes deliberately.\n\n## Common Mistakes\n\n### [HIGH] Registering processing without grouping\n\nWrong: `tableFeatures({ groupedRowModel: createGroupedRowModel() })`\n\nCorrect: `tableFeatures({ columnGroupingFeature, groupedRowModel: createGroupedRowModel() })`\n\nThe grouped row-model slot requires `columnGroupingFeature`.\n\nSource: `packages\u002Ftable-core\u002Fsrc\u002Ftypes\u002FTableFeatures.ts#FeatureSlotPrereqs`\n\n### [HIGH] Treating rendered rows as underlying records\n\nWrong: `const leafCount = table.getRowModel().flatRows.filter(row => !row.subRows.length).length`\n\nCorrect:\n\n```ts\nconst countLeafRows = (rows: typeof groupRow.subRows): number =>\n  rows.reduce(\n    (count, row) =>\n      count + (row.subRows.length ? countLeafRows(row.subRows) : 1),\n    0,\n  )\nconst leafCount = countLeafRows(groupRow.subRows)\n```\n\nCount descendants from one group row rather than the flattened render model,\nwhere group rows and expanded rows may both appear. The current\n`table.getRowModel().rows` is render order, while original dataset counts come\nfrom the data owner.\n\nSource: `docs\u002Fframework\u002Freact\u002Fguide\u002Fgrouping.md`\n\n### [HIGH] Rendering every cell identically\n\nWrong: `render(cell.getValue())`\n\nCorrect: `render(cell.getIsPlaceholder() ? null : cell.getValue())`\n\nPlaceholder cells do not represent ordinary leaf values. Group rows should\nonly render their grouped cell when aggregation is not enabled.\n\nSource: `examples\u002Freact\u002Fgrouping\u002Fsrc\u002Fmain.tsx`\n\n## API Discovery\n\nInspect `node_modules\u002F@tanstack\u002Ftable-core\u002Fdist\u002Ffeatures\u002Fcolumn-grouping\u002F` for\ngrouping. Load the `aggregation` skill when totals, multiple aggregations,\ngrouped aggregate values, or custom definitions are part of the task.\n",{"data":50,"body":63},{"name":4,"description":6,"metadata":51,"requires":55,"sources":59},{"type":52,"library":53,"library_version":54},"sub-skill","@tanstack\u002Ftable-core","9.0.0-beta.59",[56,57,58],"core","table-features","client-vs-server",[60,61,62],"TanStack\u002Ftable:docs\u002Fframework\u002Freact\u002Fguide\u002Fgrouping.md","TanStack\u002Ftable:packages\u002Ftable-core\u002Fsrc\u002Ffeatures\u002Fcolumn-grouping","TanStack\u002Ftable:examples\u002Freact\u002Fgrouping",{"type":64,"children":65},"root",[66,104,111,315,321,511,516,522,534,545,556,568,579,589,599,604,862,875,885,895,905,915,920,930,936,956],{"type":67,"tag":68,"props":69,"children":70},"element","p",{},[71,74,80,82,87,89,94,96,102],{"type":72,"value":73},"text","This skill builds on ",{"type":67,"tag":75,"props":76,"children":78},"code",{"className":77},[],[79],{"type":72,"value":56},{"type":72,"value":81},", ",{"type":67,"tag":75,"props":83,"children":85},{"className":84},[],[86],{"type":72,"value":57},{"type":72,"value":88},", and ",{"type":67,"tag":75,"props":90,"children":92},{"className":91},[],[93],{"type":72,"value":58},{"type":72,"value":95},". Grouping creates row structure and the renderer chooses grouped-cell UI. Load the separate ",{"type":67,"tag":75,"props":97,"children":99},{"className":98},[],[100],{"type":72,"value":101},"aggregation",{"type":72,"value":103}," skill when grouped rows should also calculate values.",{"type":67,"tag":105,"props":106,"children":108},"h2",{"id":107},"setup",[109],{"type":72,"value":110},"Setup",{"type":67,"tag":112,"props":113,"children":118},"pre",{"className":114,"code":115,"language":116,"meta":117,"style":117},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import {\n  columnGroupingFeature,\n  createGroupedRowModel,\n  tableFeatures,\n} from '@tanstack\u002Ftable-core'\n\nexport const features = tableFeatures({\n  columnGroupingFeature,\n  groupedRowModel: createGroupedRowModel(),\n})\n","ts","",[119],{"type":67,"tag":75,"props":120,"children":121},{"__ignoreMap":117},[122,140,155,168,181,210,220,261,273,302],{"type":67,"tag":123,"props":124,"children":127},"span",{"class":125,"line":126},"line",1,[128,134],{"type":67,"tag":123,"props":129,"children":131},{"style":130},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[132],{"type":72,"value":133},"import",{"type":67,"tag":123,"props":135,"children":137},{"style":136},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[138],{"type":72,"value":139}," {\n",{"type":67,"tag":123,"props":141,"children":143},{"class":125,"line":142},2,[144,150],{"type":67,"tag":123,"props":145,"children":147},{"style":146},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[148],{"type":72,"value":149},"  columnGroupingFeature",{"type":67,"tag":123,"props":151,"children":152},{"style":136},[153],{"type":72,"value":154},",\n",{"type":67,"tag":123,"props":156,"children":158},{"class":125,"line":157},3,[159,164],{"type":67,"tag":123,"props":160,"children":161},{"style":146},[162],{"type":72,"value":163},"  createGroupedRowModel",{"type":67,"tag":123,"props":165,"children":166},{"style":136},[167],{"type":72,"value":154},{"type":67,"tag":123,"props":169,"children":171},{"class":125,"line":170},4,[172,177],{"type":67,"tag":123,"props":173,"children":174},{"style":146},[175],{"type":72,"value":176},"  tableFeatures",{"type":67,"tag":123,"props":178,"children":179},{"style":136},[180],{"type":72,"value":154},{"type":67,"tag":123,"props":182,"children":184},{"class":125,"line":183},5,[185,190,195,200,205],{"type":67,"tag":123,"props":186,"children":187},{"style":136},[188],{"type":72,"value":189},"}",{"type":67,"tag":123,"props":191,"children":192},{"style":130},[193],{"type":72,"value":194}," from",{"type":67,"tag":123,"props":196,"children":197},{"style":136},[198],{"type":72,"value":199}," '",{"type":67,"tag":123,"props":201,"children":203},{"style":202},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[204],{"type":72,"value":53},{"type":67,"tag":123,"props":206,"children":207},{"style":136},[208],{"type":72,"value":209},"'\n",{"type":67,"tag":123,"props":211,"children":213},{"class":125,"line":212},6,[214],{"type":67,"tag":123,"props":215,"children":217},{"emptyLinePlaceholder":216},true,[218],{"type":72,"value":219},"\n",{"type":67,"tag":123,"props":221,"children":223},{"class":125,"line":222},7,[224,229,235,240,245,251,256],{"type":67,"tag":123,"props":225,"children":226},{"style":130},[227],{"type":72,"value":228},"export",{"type":67,"tag":123,"props":230,"children":232},{"style":231},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[233],{"type":72,"value":234}," const",{"type":67,"tag":123,"props":236,"children":237},{"style":146},[238],{"type":72,"value":239}," features ",{"type":67,"tag":123,"props":241,"children":242},{"style":136},[243],{"type":72,"value":244},"=",{"type":67,"tag":123,"props":246,"children":248},{"style":247},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[249],{"type":72,"value":250}," tableFeatures",{"type":67,"tag":123,"props":252,"children":253},{"style":146},[254],{"type":72,"value":255},"(",{"type":67,"tag":123,"props":257,"children":258},{"style":136},[259],{"type":72,"value":260},"{\n",{"type":67,"tag":123,"props":262,"children":264},{"class":125,"line":263},8,[265,269],{"type":67,"tag":123,"props":266,"children":267},{"style":146},[268],{"type":72,"value":149},{"type":67,"tag":123,"props":270,"children":271},{"style":136},[272],{"type":72,"value":154},{"type":67,"tag":123,"props":274,"children":276},{"class":125,"line":275},9,[277,283,288,293,298],{"type":67,"tag":123,"props":278,"children":280},{"style":279},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[281],{"type":72,"value":282},"  groupedRowModel",{"type":67,"tag":123,"props":284,"children":285},{"style":136},[286],{"type":72,"value":287},":",{"type":67,"tag":123,"props":289,"children":290},{"style":247},[291],{"type":72,"value":292}," createGroupedRowModel",{"type":67,"tag":123,"props":294,"children":295},{"style":146},[296],{"type":72,"value":297},"()",{"type":67,"tag":123,"props":299,"children":300},{"style":136},[301],{"type":72,"value":154},{"type":67,"tag":123,"props":303,"children":305},{"class":125,"line":304},10,[306,310],{"type":67,"tag":123,"props":307,"children":308},{"style":136},[309],{"type":72,"value":189},{"type":67,"tag":123,"props":311,"children":312},{"style":146},[313],{"type":72,"value":314},")\n",{"type":67,"tag":105,"props":316,"children":318},{"id":317},"core-patterns",[319],{"type":72,"value":320},"Core Patterns",{"type":67,"tag":112,"props":322,"children":324},{"className":114,"code":323,"language":116,"meta":117,"style":117},"const options = { groupedColumnMode: 'reorder' as const }\nconst mode = cell.getIsGrouped()\n  ? 'grouped'\n  : cell.getIsPlaceholder()\n    ? 'placeholder'\n    : 'value'\n",[325],{"type":67,"tag":75,"props":326,"children":327},{"__ignoreMap":117},[328,387,423,444,469,490],{"type":67,"tag":123,"props":329,"children":330},{"class":125,"line":126},[331,336,341,345,350,355,359,363,368,373,378,382],{"type":67,"tag":123,"props":332,"children":333},{"style":231},[334],{"type":72,"value":335},"const",{"type":67,"tag":123,"props":337,"children":338},{"style":146},[339],{"type":72,"value":340}," options ",{"type":67,"tag":123,"props":342,"children":343},{"style":136},[344],{"type":72,"value":244},{"type":67,"tag":123,"props":346,"children":347},{"style":136},[348],{"type":72,"value":349}," {",{"type":67,"tag":123,"props":351,"children":352},{"style":279},[353],{"type":72,"value":354}," groupedColumnMode",{"type":67,"tag":123,"props":356,"children":357},{"style":136},[358],{"type":72,"value":287},{"type":67,"tag":123,"props":360,"children":361},{"style":136},[362],{"type":72,"value":199},{"type":67,"tag":123,"props":364,"children":365},{"style":202},[366],{"type":72,"value":367},"reorder",{"type":67,"tag":123,"props":369,"children":370},{"style":136},[371],{"type":72,"value":372},"'",{"type":67,"tag":123,"props":374,"children":375},{"style":130},[376],{"type":72,"value":377}," as",{"type":67,"tag":123,"props":379,"children":380},{"style":231},[381],{"type":72,"value":234},{"type":67,"tag":123,"props":383,"children":384},{"style":136},[385],{"type":72,"value":386}," }\n",{"type":67,"tag":123,"props":388,"children":389},{"class":125,"line":142},[390,394,399,403,408,413,418],{"type":67,"tag":123,"props":391,"children":392},{"style":231},[393],{"type":72,"value":335},{"type":67,"tag":123,"props":395,"children":396},{"style":146},[397],{"type":72,"value":398}," mode ",{"type":67,"tag":123,"props":400,"children":401},{"style":136},[402],{"type":72,"value":244},{"type":67,"tag":123,"props":404,"children":405},{"style":146},[406],{"type":72,"value":407}," cell",{"type":67,"tag":123,"props":409,"children":410},{"style":136},[411],{"type":72,"value":412},".",{"type":67,"tag":123,"props":414,"children":415},{"style":247},[416],{"type":72,"value":417},"getIsGrouped",{"type":67,"tag":123,"props":419,"children":420},{"style":146},[421],{"type":72,"value":422},"()\n",{"type":67,"tag":123,"props":424,"children":425},{"class":125,"line":157},[426,431,435,440],{"type":67,"tag":123,"props":427,"children":428},{"style":136},[429],{"type":72,"value":430},"  ?",{"type":67,"tag":123,"props":432,"children":433},{"style":136},[434],{"type":72,"value":199},{"type":67,"tag":123,"props":436,"children":437},{"style":202},[438],{"type":72,"value":439},"grouped",{"type":67,"tag":123,"props":441,"children":442},{"style":136},[443],{"type":72,"value":209},{"type":67,"tag":123,"props":445,"children":446},{"class":125,"line":170},[447,452,456,460,465],{"type":67,"tag":123,"props":448,"children":449},{"style":136},[450],{"type":72,"value":451},"  :",{"type":67,"tag":123,"props":453,"children":454},{"style":146},[455],{"type":72,"value":407},{"type":67,"tag":123,"props":457,"children":458},{"style":136},[459],{"type":72,"value":412},{"type":67,"tag":123,"props":461,"children":462},{"style":247},[463],{"type":72,"value":464},"getIsPlaceholder",{"type":67,"tag":123,"props":466,"children":467},{"style":146},[468],{"type":72,"value":422},{"type":67,"tag":123,"props":470,"children":471},{"class":125,"line":183},[472,477,481,486],{"type":67,"tag":123,"props":473,"children":474},{"style":136},[475],{"type":72,"value":476},"    ?",{"type":67,"tag":123,"props":478,"children":479},{"style":136},[480],{"type":72,"value":199},{"type":67,"tag":123,"props":482,"children":483},{"style":202},[484],{"type":72,"value":485},"placeholder",{"type":67,"tag":123,"props":487,"children":488},{"style":136},[489],{"type":72,"value":209},{"type":67,"tag":123,"props":491,"children":492},{"class":125,"line":212},[493,498,502,507],{"type":67,"tag":123,"props":494,"children":495},{"style":136},[496],{"type":72,"value":497},"    :",{"type":67,"tag":123,"props":499,"children":500},{"style":136},[501],{"type":72,"value":199},{"type":67,"tag":123,"props":503,"children":504},{"style":202},[505],{"type":72,"value":506},"value",{"type":67,"tag":123,"props":508,"children":509},{"style":136},[510],{"type":72,"value":209},{"type":67,"tag":68,"props":512,"children":513},{},[514],{"type":72,"value":515},"Render these cell modes deliberately.",{"type":67,"tag":105,"props":517,"children":519},{"id":518},"common-mistakes",[520],{"type":72,"value":521},"Common Mistakes",{"type":67,"tag":523,"props":524,"children":526},"h3",{"id":525},"high-registering-processing-without-grouping",[527,532],{"type":67,"tag":123,"props":528,"children":529},{},[530],{"type":72,"value":531},"HIGH",{"type":72,"value":533}," Registering processing without grouping",{"type":67,"tag":68,"props":535,"children":536},{},[537,539],{"type":72,"value":538},"Wrong: ",{"type":67,"tag":75,"props":540,"children":542},{"className":541},[],[543],{"type":72,"value":544},"tableFeatures({ groupedRowModel: createGroupedRowModel() })",{"type":67,"tag":68,"props":546,"children":547},{},[548,550],{"type":72,"value":549},"Correct: ",{"type":67,"tag":75,"props":551,"children":553},{"className":552},[],[554],{"type":72,"value":555},"tableFeatures({ columnGroupingFeature, groupedRowModel: createGroupedRowModel() })",{"type":67,"tag":68,"props":557,"children":558},{},[559,561,567],{"type":72,"value":560},"The grouped row-model slot requires ",{"type":67,"tag":75,"props":562,"children":564},{"className":563},[],[565],{"type":72,"value":566},"columnGroupingFeature",{"type":72,"value":412},{"type":67,"tag":68,"props":569,"children":570},{},[571,573],{"type":72,"value":572},"Source: ",{"type":67,"tag":75,"props":574,"children":576},{"className":575},[],[577],{"type":72,"value":578},"packages\u002Ftable-core\u002Fsrc\u002Ftypes\u002FTableFeatures.ts#FeatureSlotPrereqs",{"type":67,"tag":523,"props":580,"children":582},{"id":581},"high-treating-rendered-rows-as-underlying-records",[583,587],{"type":67,"tag":123,"props":584,"children":585},{},[586],{"type":72,"value":531},{"type":72,"value":588}," Treating rendered rows as underlying records",{"type":67,"tag":68,"props":590,"children":591},{},[592,593],{"type":72,"value":538},{"type":67,"tag":75,"props":594,"children":596},{"className":595},[],[597],{"type":72,"value":598},"const leafCount = table.getRowModel().flatRows.filter(row => !row.subRows.length).length",{"type":67,"tag":68,"props":600,"children":601},{},[602],{"type":72,"value":603},"Correct:",{"type":67,"tag":112,"props":605,"children":607},{"className":114,"code":606,"language":116,"meta":117,"style":117},"const countLeafRows = (rows: typeof groupRow.subRows): number =>\n  rows.reduce(\n    (count, row) =>\n      count + (row.subRows.length ? countLeafRows(row.subRows) : 1),\n    0,\n  )\nconst leafCount = countLeafRows(groupRow.subRows)\n",[608],{"type":67,"tag":75,"props":609,"children":610},{"__ignoreMap":117},[611,677,699,731,808,820,828],{"type":67,"tag":123,"props":612,"children":613},{"class":125,"line":126},[614,618,623,627,632,638,642,647,652,656,661,666,672],{"type":67,"tag":123,"props":615,"children":616},{"style":231},[617],{"type":72,"value":335},{"type":67,"tag":123,"props":619,"children":620},{"style":146},[621],{"type":72,"value":622}," countLeafRows ",{"type":67,"tag":123,"props":624,"children":625},{"style":136},[626],{"type":72,"value":244},{"type":67,"tag":123,"props":628,"children":629},{"style":136},[630],{"type":72,"value":631}," (",{"type":67,"tag":123,"props":633,"children":635},{"style":634},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[636],{"type":72,"value":637},"rows",{"type":67,"tag":123,"props":639,"children":640},{"style":136},[641],{"type":72,"value":287},{"type":67,"tag":123,"props":643,"children":644},{"style":136},[645],{"type":72,"value":646}," typeof",{"type":67,"tag":123,"props":648,"children":649},{"style":146},[650],{"type":72,"value":651}," groupRow",{"type":67,"tag":123,"props":653,"children":654},{"style":136},[655],{"type":72,"value":412},{"type":67,"tag":123,"props":657,"children":658},{"style":146},[659],{"type":72,"value":660},"subRows",{"type":67,"tag":123,"props":662,"children":663},{"style":136},[664],{"type":72,"value":665},"):",{"type":67,"tag":123,"props":667,"children":669},{"style":668},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[670],{"type":72,"value":671}," number",{"type":67,"tag":123,"props":673,"children":674},{"style":231},[675],{"type":72,"value":676}," =>\n",{"type":67,"tag":123,"props":678,"children":679},{"class":125,"line":142},[680,685,689,694],{"type":67,"tag":123,"props":681,"children":682},{"style":146},[683],{"type":72,"value":684},"  rows",{"type":67,"tag":123,"props":686,"children":687},{"style":136},[688],{"type":72,"value":412},{"type":67,"tag":123,"props":690,"children":691},{"style":247},[692],{"type":72,"value":693},"reduce",{"type":67,"tag":123,"props":695,"children":696},{"style":146},[697],{"type":72,"value":698},"(\n",{"type":67,"tag":123,"props":700,"children":701},{"class":125,"line":157},[702,707,712,717,722,727],{"type":67,"tag":123,"props":703,"children":704},{"style":136},[705],{"type":72,"value":706},"    (",{"type":67,"tag":123,"props":708,"children":709},{"style":634},[710],{"type":72,"value":711},"count",{"type":67,"tag":123,"props":713,"children":714},{"style":136},[715],{"type":72,"value":716},",",{"type":67,"tag":123,"props":718,"children":719},{"style":634},[720],{"type":72,"value":721}," row",{"type":67,"tag":123,"props":723,"children":724},{"style":136},[725],{"type":72,"value":726},")",{"type":67,"tag":123,"props":728,"children":729},{"style":231},[730],{"type":72,"value":676},{"type":67,"tag":123,"props":732,"children":733},{"class":125,"line":170},[734,739,744,749,753,757,761,766,771,776,781,785,790,794,800,804],{"type":67,"tag":123,"props":735,"children":736},{"style":146},[737],{"type":72,"value":738},"      count ",{"type":67,"tag":123,"props":740,"children":741},{"style":136},[742],{"type":72,"value":743},"+",{"type":67,"tag":123,"props":745,"children":746},{"style":146},[747],{"type":72,"value":748}," (row",{"type":67,"tag":123,"props":750,"children":751},{"style":136},[752],{"type":72,"value":412},{"type":67,"tag":123,"props":754,"children":755},{"style":146},[756],{"type":72,"value":660},{"type":67,"tag":123,"props":758,"children":759},{"style":136},[760],{"type":72,"value":412},{"type":67,"tag":123,"props":762,"children":763},{"style":146},[764],{"type":72,"value":765},"length ",{"type":67,"tag":123,"props":767,"children":768},{"style":136},[769],{"type":72,"value":770},"?",{"type":67,"tag":123,"props":772,"children":773},{"style":247},[774],{"type":72,"value":775}," countLeafRows",{"type":67,"tag":123,"props":777,"children":778},{"style":146},[779],{"type":72,"value":780},"(row",{"type":67,"tag":123,"props":782,"children":783},{"style":136},[784],{"type":72,"value":412},{"type":67,"tag":123,"props":786,"children":787},{"style":146},[788],{"type":72,"value":789},"subRows) ",{"type":67,"tag":123,"props":791,"children":792},{"style":136},[793],{"type":72,"value":287},{"type":67,"tag":123,"props":795,"children":797},{"style":796},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[798],{"type":72,"value":799}," 1",{"type":67,"tag":123,"props":801,"children":802},{"style":146},[803],{"type":72,"value":726},{"type":67,"tag":123,"props":805,"children":806},{"style":136},[807],{"type":72,"value":154},{"type":67,"tag":123,"props":809,"children":810},{"class":125,"line":183},[811,816],{"type":67,"tag":123,"props":812,"children":813},{"style":796},[814],{"type":72,"value":815},"    0",{"type":67,"tag":123,"props":817,"children":818},{"style":136},[819],{"type":72,"value":154},{"type":67,"tag":123,"props":821,"children":822},{"class":125,"line":212},[823],{"type":67,"tag":123,"props":824,"children":825},{"style":146},[826],{"type":72,"value":827},"  )\n",{"type":67,"tag":123,"props":829,"children":830},{"class":125,"line":222},[831,835,840,844,848,853,857],{"type":67,"tag":123,"props":832,"children":833},{"style":231},[834],{"type":72,"value":335},{"type":67,"tag":123,"props":836,"children":837},{"style":146},[838],{"type":72,"value":839}," leafCount ",{"type":67,"tag":123,"props":841,"children":842},{"style":136},[843],{"type":72,"value":244},{"type":67,"tag":123,"props":845,"children":846},{"style":247},[847],{"type":72,"value":775},{"type":67,"tag":123,"props":849,"children":850},{"style":146},[851],{"type":72,"value":852},"(groupRow",{"type":67,"tag":123,"props":854,"children":855},{"style":136},[856],{"type":72,"value":412},{"type":67,"tag":123,"props":858,"children":859},{"style":146},[860],{"type":72,"value":861},"subRows)\n",{"type":67,"tag":68,"props":863,"children":864},{},[865,867,873],{"type":72,"value":866},"Count descendants from one group row rather than the flattened render model,\nwhere group rows and expanded rows may both appear. The current\n",{"type":67,"tag":75,"props":868,"children":870},{"className":869},[],[871],{"type":72,"value":872},"table.getRowModel().rows",{"type":72,"value":874}," is render order, while original dataset counts come\nfrom the data owner.",{"type":67,"tag":68,"props":876,"children":877},{},[878,879],{"type":72,"value":572},{"type":67,"tag":75,"props":880,"children":882},{"className":881},[],[883],{"type":72,"value":884},"docs\u002Fframework\u002Freact\u002Fguide\u002Fgrouping.md",{"type":67,"tag":523,"props":886,"children":888},{"id":887},"high-rendering-every-cell-identically",[889,893],{"type":67,"tag":123,"props":890,"children":891},{},[892],{"type":72,"value":531},{"type":72,"value":894}," Rendering every cell identically",{"type":67,"tag":68,"props":896,"children":897},{},[898,899],{"type":72,"value":538},{"type":67,"tag":75,"props":900,"children":902},{"className":901},[],[903],{"type":72,"value":904},"render(cell.getValue())",{"type":67,"tag":68,"props":906,"children":907},{},[908,909],{"type":72,"value":549},{"type":67,"tag":75,"props":910,"children":912},{"className":911},[],[913],{"type":72,"value":914},"render(cell.getIsPlaceholder() ? null : cell.getValue())",{"type":67,"tag":68,"props":916,"children":917},{},[918],{"type":72,"value":919},"Placeholder cells do not represent ordinary leaf values. Group rows should\nonly render their grouped cell when aggregation is not enabled.",{"type":67,"tag":68,"props":921,"children":922},{},[923,924],{"type":72,"value":572},{"type":67,"tag":75,"props":925,"children":927},{"className":926},[],[928],{"type":72,"value":929},"examples\u002Freact\u002Fgrouping\u002Fsrc\u002Fmain.tsx",{"type":67,"tag":105,"props":931,"children":933},{"id":932},"api-discovery",[934],{"type":72,"value":935},"API Discovery",{"type":67,"tag":68,"props":937,"children":938},{},[939,941,947,949,954],{"type":72,"value":940},"Inspect ",{"type":67,"tag":75,"props":942,"children":944},{"className":943},[],[945],{"type":72,"value":946},"node_modules\u002F@tanstack\u002Ftable-core\u002Fdist\u002Ffeatures\u002Fcolumn-grouping\u002F",{"type":72,"value":948}," for\ngrouping. Load the ",{"type":67,"tag":75,"props":950,"children":952},{"className":951},[],[953],{"type":72,"value":101},{"type":72,"value":955}," skill when totals, multiple aggregations,\ngrouped aggregate values, or custom definitions are part of the task.",{"type":67,"tag":957,"props":958,"children":959},"style",{},[960],{"type":72,"value":961},"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":963,"total":1096},[964,973,985,997,1011,1023,1033,1043,1056,1066,1077,1087],{"slug":101,"name":101,"fn":965,"description":966,"org":967,"tags":968,"stars":20,"repoUrl":21,"updatedAt":972},"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},[969,970,971],{"name":13,"slug":14,"type":15},{"name":18,"slug":19,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:25:59.429787",{"slug":974,"name":974,"fn":975,"description":976,"org":977,"tags":978,"stars":20,"repoUrl":21,"updatedAt":984},"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},[979,982,983],{"name":980,"slug":981,"type":15},"Debugging","debugging",{"name":18,"slug":19,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:26:05.418735",{"slug":986,"name":986,"fn":987,"description":988,"org":989,"tags":990,"stars":20,"repoUrl":21,"updatedAt":996},"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},[991,992,993],{"name":13,"slug":14,"type":15},{"name":9,"slug":8,"type":15},{"name":994,"slug":995,"type":15},"UI Components","ui-components","2026-07-30T05:25:38.403427",{"slug":58,"name":58,"fn":998,"description":999,"org":1000,"tags":1001,"stars":20,"repoUrl":21,"updatedAt":1010},"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},[1002,1005,1006,1009],{"name":1003,"slug":1004,"type":15},"Data Pipeline","data-pipeline",{"name":18,"slug":19,"type":15},{"name":1007,"slug":1008,"type":15},"Performance","performance",{"name":9,"slug":8,"type":15},"2026-07-30T05:25:45.400104",{"slug":1012,"name":1012,"fn":1013,"description":1014,"org":1015,"tags":1016,"stars":20,"repoUrl":21,"updatedAt":1022},"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},[1017,1020,1021],{"name":1018,"slug":1019,"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":1024,"name":1024,"fn":1025,"description":1026,"org":1027,"tags":1028,"stars":20,"repoUrl":21,"updatedAt":1032},"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},[1029,1030,1031],{"name":13,"slug":14,"type":15},{"name":18,"slug":19,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:25:53.391632",{"slug":1034,"name":1034,"fn":1035,"description":1036,"org":1037,"tags":1038,"stars":20,"repoUrl":21,"updatedAt":1042},"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},[1039,1040,1041],{"name":18,"slug":19,"type":15},{"name":9,"slug":8,"type":15},{"name":994,"slug":995,"type":15},"2026-07-30T05:26:03.37801",{"slug":1044,"name":1044,"fn":1045,"description":1046,"org":1047,"tags":1048,"stars":20,"repoUrl":21,"updatedAt":1055},"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},[1049,1052,1053,1054],{"name":1050,"slug":1051,"type":15},"CSS","css",{"name":18,"slug":19,"type":15},{"name":9,"slug":8,"type":15},{"name":994,"slug":995,"type":15},"2026-07-30T05:25:55.377366",{"slug":1057,"name":1057,"fn":1058,"description":1059,"org":1060,"tags":1061,"stars":20,"repoUrl":21,"updatedAt":1065},"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},[1062,1063,1064],{"name":18,"slug":19,"type":15},{"name":9,"slug":8,"type":15},{"name":994,"slug":995,"type":15},"2026-07-30T05:25:51.400011",{"slug":1067,"name":1067,"fn":1068,"description":1069,"org":1070,"tags":1071,"stars":20,"repoUrl":21,"updatedAt":1076},"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},[1072,1073,1074,1075],{"name":1050,"slug":1051,"type":15},{"name":18,"slug":19,"type":15},{"name":9,"slug":8,"type":15},{"name":994,"slug":995,"type":15},"2026-07-30T05:25:48.703799",{"slug":1078,"name":1078,"fn":1079,"description":1080,"org":1081,"tags":1082,"stars":20,"repoUrl":21,"updatedAt":1086},"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},[1083,1084,1085],{"name":18,"slug":19,"type":15},{"name":9,"slug":8,"type":15},{"name":994,"slug":995,"type":15},"2026-07-30T05:25:47.367943",{"slug":56,"name":56,"fn":1088,"description":1089,"org":1090,"tags":1091,"stars":20,"repoUrl":21,"updatedAt":1095},"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},[1092,1093,1094],{"name":13,"slug":14,"type":15},{"name":18,"slug":19,"type":15},{"name":994,"slug":995,"type":15},"2026-07-30T05:25:52.366295",125,{"items":1098,"total":1142},[1099,1105,1111,1117,1124,1130,1136],{"slug":101,"name":101,"fn":965,"description":966,"org":1100,"tags":1101,"stars":20,"repoUrl":21,"updatedAt":972},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1102,1103,1104],{"name":13,"slug":14,"type":15},{"name":18,"slug":19,"type":15},{"name":9,"slug":8,"type":15},{"slug":974,"name":974,"fn":975,"description":976,"org":1106,"tags":1107,"stars":20,"repoUrl":21,"updatedAt":984},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1108,1109,1110],{"name":980,"slug":981,"type":15},{"name":18,"slug":19,"type":15},{"name":9,"slug":8,"type":15},{"slug":986,"name":986,"fn":987,"description":988,"org":1112,"tags":1113,"stars":20,"repoUrl":21,"updatedAt":996},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1114,1115,1116],{"name":13,"slug":14,"type":15},{"name":9,"slug":8,"type":15},{"name":994,"slug":995,"type":15},{"slug":58,"name":58,"fn":998,"description":999,"org":1118,"tags":1119,"stars":20,"repoUrl":21,"updatedAt":1010},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1120,1121,1122,1123],{"name":1003,"slug":1004,"type":15},{"name":18,"slug":19,"type":15},{"name":1007,"slug":1008,"type":15},{"name":9,"slug":8,"type":15},{"slug":1012,"name":1012,"fn":1013,"description":1014,"org":1125,"tags":1126,"stars":20,"repoUrl":21,"updatedAt":1022},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1127,1128,1129],{"name":1018,"slug":1019,"type":15},{"name":18,"slug":19,"type":15},{"name":9,"slug":8,"type":15},{"slug":1024,"name":1024,"fn":1025,"description":1026,"org":1131,"tags":1132,"stars":20,"repoUrl":21,"updatedAt":1032},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1133,1134,1135],{"name":13,"slug":14,"type":15},{"name":18,"slug":19,"type":15},{"name":9,"slug":8,"type":15},{"slug":1034,"name":1034,"fn":1035,"description":1036,"org":1137,"tags":1138,"stars":20,"repoUrl":21,"updatedAt":1042},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1139,1140,1141],{"name":18,"slug":19,"type":15},{"name":9,"slug":8,"type":15},{"name":994,"slug":995,"type":15},30]