[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-tanstack-column-resizing":3,"mdc--pczgc1-key":50,"related-repo-tanstack-column-resizing":878,"related-org-tanstack-column-resizing":962},{"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},"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},"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:51.400011",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\u002Fcolumn-resizing","---\nname: column-resizing\ndescription: >\n  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.\nmetadata:\n  {\n    type: sub-skill,\n    library: '@tanstack\u002Ftable-core',\n    library_version: '9.0.0-beta.59',\n  }\nrequires: ['core', 'table-features', 'column-sizing']\nsources:\n  - 'TanStack\u002Ftable:docs\u002Fframework\u002Freact\u002Fguide\u002Fcolumn-resizing.md'\n  - 'TanStack\u002Ftable:packages\u002Ftable-core\u002Fsrc\u002Ffeatures\u002Fcolumn-resizing'\n  - 'TanStack\u002Ftable:examples\u002Freact\u002Fcolumn-resizing-performant'\n---\n\nThis skill builds on `core`, `table-features`, and `column-sizing`. Resizing supplies gesture APIs and state; the renderer supplies handles and widths.\n\n## Setup\n\n```ts\nimport {\n  columnResizingFeature,\n  columnSizingFeature,\n  tableFeatures,\n} from '@tanstack\u002Ftable-core'\n\nexport const features = tableFeatures({\n  columnSizingFeature,\n  columnResizingFeature,\n})\nexport const options = {\n  columnResizeMode: 'onChange' as const,\n  columnResizeDirection: 'ltr' as const,\n}\n```\n\n## Core Patterns\n\n```ts\nconst handler = header.getResizeHandler()\nhandle.addEventListener('mousedown', handler)\nhandle.addEventListener('touchstart', handler)\n```\n\nFor large grids, compute all visible sizes once per update and expose them as CSS variables.\n\n## Common Mistakes\n\n### [CRITICAL] Omitting sizing prerequisite\n\nWrong: `tableFeatures({ columnResizingFeature })`\n\nCorrect: `tableFeatures({ columnSizingFeature, columnResizingFeature })`\n\nResizing modifies the sizing state and requires `columnSizingFeature`.\n\nSource: `packages\u002Ftable-core\u002Fsrc\u002Ftypes\u002FTableFeatures.ts#FeatureSlotPrereqs`\n\n### [HIGH] Rendering an inert handle\n\nWrong: `handle.addEventListener('pointerdown', header.getResizeHandler())`\n\nCorrect:\n\n```ts\nconst handler = header.getResizeHandler()\nhandle.addEventListener('mousedown', handler)\nhandle.addEventListener('touchstart', handler)\n```\n\nThe shipped handler distinguishes `touchstart` from the mouse path. A single\n`pointerdown` listener does not provide working touch resizing; wire both mouse\nand touch start events.\n\nSource: `docs\u002Fframework\u002Freact\u002Fguide\u002Fcolumn-resizing.md#connect-column-resizing-apis-to-ui`\n\n### [MEDIUM] Reading sizes in every cell\n\nWrong: `cells.forEach(cell => cell.style.width = `${cell.column.getSize()}px`)`\n\nCorrect: `root.style.setProperty(`--col-${header.id}`, `${header.getSize()}px`)`\n\nCaching sizes or CSS variables avoids repeated work during `onChange` resizing.\n\nSource: `examples\u002Freact\u002Fcolumn-resizing-performant\u002Fsrc\u002Fmain.tsx`\n\n## API Discovery\n\nInspect `node_modules\u002F@tanstack\u002Ftable-core\u002Fdist\u002Ffeatures\u002Fcolumn-resizing\u002F` and the sizing feature directory for the state it updates.\n",{"data":51,"body":64},{"name":4,"description":6,"metadata":52,"requires":56,"sources":60},{"type":53,"library":54,"library_version":55},"sub-skill","@tanstack\u002Ftable-core","9.0.0-beta.59",[57,58,59],"core","table-features","column-sizing",[61,62,63],"TanStack\u002Ftable:docs\u002Fframework\u002Freact\u002Fguide\u002Fcolumn-resizing.md","TanStack\u002Ftable:packages\u002Ftable-core\u002Fsrc\u002Ffeatures\u002Fcolumn-resizing","TanStack\u002Ftable:examples\u002Freact\u002Fcolumn-resizing-performant",{"type":65,"children":66},"root",[67,97,104,405,411,539,544,550,562,573,584,596,607,618,628,633,748,768,778,789,807,831,843,853,859,872],{"type":68,"tag":69,"props":70,"children":71},"element","p",{},[72,75,81,83,88,90,95],{"type":73,"value":74},"text","This skill builds on ",{"type":68,"tag":76,"props":77,"children":79},"code",{"className":78},[],[80],{"type":73,"value":57},{"type":73,"value":82},", ",{"type":68,"tag":76,"props":84,"children":86},{"className":85},[],[87],{"type":73,"value":58},{"type":73,"value":89},", and ",{"type":68,"tag":76,"props":91,"children":93},{"className":92},[],[94],{"type":73,"value":59},{"type":73,"value":96},". Resizing supplies gesture APIs and state; the renderer supplies handles and widths.",{"type":68,"tag":98,"props":99,"children":101},"h2",{"id":100},"setup",[102],{"type":73,"value":103},"Setup",{"type":68,"tag":105,"props":106,"children":111},"pre",{"className":107,"code":108,"language":109,"meta":110,"style":110},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import {\n  columnResizingFeature,\n  columnSizingFeature,\n  tableFeatures,\n} from '@tanstack\u002Ftable-core'\n\nexport const features = tableFeatures({\n  columnSizingFeature,\n  columnResizingFeature,\n})\nexport const options = {\n  columnResizeMode: 'onChange' as const,\n  columnResizeDirection: 'ltr' as const,\n}\n","ts","",[112],{"type":68,"tag":76,"props":113,"children":114},{"__ignoreMap":110},[115,133,148,161,174,203,213,254,266,278,291,316,358,396],{"type":68,"tag":116,"props":117,"children":120},"span",{"class":118,"line":119},"line",1,[121,127],{"type":68,"tag":116,"props":122,"children":124},{"style":123},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[125],{"type":73,"value":126},"import",{"type":68,"tag":116,"props":128,"children":130},{"style":129},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[131],{"type":73,"value":132}," {\n",{"type":68,"tag":116,"props":134,"children":136},{"class":118,"line":135},2,[137,143],{"type":68,"tag":116,"props":138,"children":140},{"style":139},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[141],{"type":73,"value":142},"  columnResizingFeature",{"type":68,"tag":116,"props":144,"children":145},{"style":129},[146],{"type":73,"value":147},",\n",{"type":68,"tag":116,"props":149,"children":151},{"class":118,"line":150},3,[152,157],{"type":68,"tag":116,"props":153,"children":154},{"style":139},[155],{"type":73,"value":156},"  columnSizingFeature",{"type":68,"tag":116,"props":158,"children":159},{"style":129},[160],{"type":73,"value":147},{"type":68,"tag":116,"props":162,"children":164},{"class":118,"line":163},4,[165,170],{"type":68,"tag":116,"props":166,"children":167},{"style":139},[168],{"type":73,"value":169},"  tableFeatures",{"type":68,"tag":116,"props":171,"children":172},{"style":129},[173],{"type":73,"value":147},{"type":68,"tag":116,"props":175,"children":177},{"class":118,"line":176},5,[178,183,188,193,198],{"type":68,"tag":116,"props":179,"children":180},{"style":129},[181],{"type":73,"value":182},"}",{"type":68,"tag":116,"props":184,"children":185},{"style":123},[186],{"type":73,"value":187}," from",{"type":68,"tag":116,"props":189,"children":190},{"style":129},[191],{"type":73,"value":192}," '",{"type":68,"tag":116,"props":194,"children":196},{"style":195},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[197],{"type":73,"value":54},{"type":68,"tag":116,"props":199,"children":200},{"style":129},[201],{"type":73,"value":202},"'\n",{"type":68,"tag":116,"props":204,"children":206},{"class":118,"line":205},6,[207],{"type":68,"tag":116,"props":208,"children":210},{"emptyLinePlaceholder":209},true,[211],{"type":73,"value":212},"\n",{"type":68,"tag":116,"props":214,"children":216},{"class":118,"line":215},7,[217,222,228,233,238,244,249],{"type":68,"tag":116,"props":218,"children":219},{"style":123},[220],{"type":73,"value":221},"export",{"type":68,"tag":116,"props":223,"children":225},{"style":224},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[226],{"type":73,"value":227}," const",{"type":68,"tag":116,"props":229,"children":230},{"style":139},[231],{"type":73,"value":232}," features ",{"type":68,"tag":116,"props":234,"children":235},{"style":129},[236],{"type":73,"value":237},"=",{"type":68,"tag":116,"props":239,"children":241},{"style":240},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[242],{"type":73,"value":243}," tableFeatures",{"type":68,"tag":116,"props":245,"children":246},{"style":139},[247],{"type":73,"value":248},"(",{"type":68,"tag":116,"props":250,"children":251},{"style":129},[252],{"type":73,"value":253},"{\n",{"type":68,"tag":116,"props":255,"children":257},{"class":118,"line":256},8,[258,262],{"type":68,"tag":116,"props":259,"children":260},{"style":139},[261],{"type":73,"value":156},{"type":68,"tag":116,"props":263,"children":264},{"style":129},[265],{"type":73,"value":147},{"type":68,"tag":116,"props":267,"children":269},{"class":118,"line":268},9,[270,274],{"type":68,"tag":116,"props":271,"children":272},{"style":139},[273],{"type":73,"value":142},{"type":68,"tag":116,"props":275,"children":276},{"style":129},[277],{"type":73,"value":147},{"type":68,"tag":116,"props":279,"children":281},{"class":118,"line":280},10,[282,286],{"type":68,"tag":116,"props":283,"children":284},{"style":129},[285],{"type":73,"value":182},{"type":68,"tag":116,"props":287,"children":288},{"style":139},[289],{"type":73,"value":290},")\n",{"type":68,"tag":116,"props":292,"children":294},{"class":118,"line":293},11,[295,299,303,308,312],{"type":68,"tag":116,"props":296,"children":297},{"style":123},[298],{"type":73,"value":221},{"type":68,"tag":116,"props":300,"children":301},{"style":224},[302],{"type":73,"value":227},{"type":68,"tag":116,"props":304,"children":305},{"style":139},[306],{"type":73,"value":307}," options ",{"type":68,"tag":116,"props":309,"children":310},{"style":129},[311],{"type":73,"value":237},{"type":68,"tag":116,"props":313,"children":314},{"style":129},[315],{"type":73,"value":132},{"type":68,"tag":116,"props":317,"children":319},{"class":118,"line":318},12,[320,326,331,335,340,345,350,354],{"type":68,"tag":116,"props":321,"children":323},{"style":322},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[324],{"type":73,"value":325},"  columnResizeMode",{"type":68,"tag":116,"props":327,"children":328},{"style":129},[329],{"type":73,"value":330},":",{"type":68,"tag":116,"props":332,"children":333},{"style":129},[334],{"type":73,"value":192},{"type":68,"tag":116,"props":336,"children":337},{"style":195},[338],{"type":73,"value":339},"onChange",{"type":68,"tag":116,"props":341,"children":342},{"style":129},[343],{"type":73,"value":344},"'",{"type":68,"tag":116,"props":346,"children":347},{"style":123},[348],{"type":73,"value":349}," as",{"type":68,"tag":116,"props":351,"children":352},{"style":224},[353],{"type":73,"value":227},{"type":68,"tag":116,"props":355,"children":356},{"style":129},[357],{"type":73,"value":147},{"type":68,"tag":116,"props":359,"children":361},{"class":118,"line":360},13,[362,367,371,375,380,384,388,392],{"type":68,"tag":116,"props":363,"children":364},{"style":322},[365],{"type":73,"value":366},"  columnResizeDirection",{"type":68,"tag":116,"props":368,"children":369},{"style":129},[370],{"type":73,"value":330},{"type":68,"tag":116,"props":372,"children":373},{"style":129},[374],{"type":73,"value":192},{"type":68,"tag":116,"props":376,"children":377},{"style":195},[378],{"type":73,"value":379},"ltr",{"type":68,"tag":116,"props":381,"children":382},{"style":129},[383],{"type":73,"value":344},{"type":68,"tag":116,"props":385,"children":386},{"style":123},[387],{"type":73,"value":349},{"type":68,"tag":116,"props":389,"children":390},{"style":224},[391],{"type":73,"value":227},{"type":68,"tag":116,"props":393,"children":394},{"style":129},[395],{"type":73,"value":147},{"type":68,"tag":116,"props":397,"children":399},{"class":118,"line":398},14,[400],{"type":68,"tag":116,"props":401,"children":402},{"style":129},[403],{"type":73,"value":404},"}\n",{"type":68,"tag":98,"props":406,"children":408},{"id":407},"core-patterns",[409],{"type":73,"value":410},"Core Patterns",{"type":68,"tag":105,"props":412,"children":414},{"className":107,"code":413,"language":109,"meta":110,"style":110},"const handler = header.getResizeHandler()\nhandle.addEventListener('mousedown', handler)\nhandle.addEventListener('touchstart', handler)\n",[415],{"type":68,"tag":76,"props":416,"children":417},{"__ignoreMap":110},[418,455,499],{"type":68,"tag":116,"props":419,"children":420},{"class":118,"line":119},[421,426,431,435,440,445,450],{"type":68,"tag":116,"props":422,"children":423},{"style":224},[424],{"type":73,"value":425},"const",{"type":68,"tag":116,"props":427,"children":428},{"style":139},[429],{"type":73,"value":430}," handler ",{"type":68,"tag":116,"props":432,"children":433},{"style":129},[434],{"type":73,"value":237},{"type":68,"tag":116,"props":436,"children":437},{"style":139},[438],{"type":73,"value":439}," header",{"type":68,"tag":116,"props":441,"children":442},{"style":129},[443],{"type":73,"value":444},".",{"type":68,"tag":116,"props":446,"children":447},{"style":240},[448],{"type":73,"value":449},"getResizeHandler",{"type":68,"tag":116,"props":451,"children":452},{"style":139},[453],{"type":73,"value":454},"()\n",{"type":68,"tag":116,"props":456,"children":457},{"class":118,"line":135},[458,463,467,472,476,480,485,489,494],{"type":68,"tag":116,"props":459,"children":460},{"style":139},[461],{"type":73,"value":462},"handle",{"type":68,"tag":116,"props":464,"children":465},{"style":129},[466],{"type":73,"value":444},{"type":68,"tag":116,"props":468,"children":469},{"style":240},[470],{"type":73,"value":471},"addEventListener",{"type":68,"tag":116,"props":473,"children":474},{"style":139},[475],{"type":73,"value":248},{"type":68,"tag":116,"props":477,"children":478},{"style":129},[479],{"type":73,"value":344},{"type":68,"tag":116,"props":481,"children":482},{"style":195},[483],{"type":73,"value":484},"mousedown",{"type":68,"tag":116,"props":486,"children":487},{"style":129},[488],{"type":73,"value":344},{"type":68,"tag":116,"props":490,"children":491},{"style":129},[492],{"type":73,"value":493},",",{"type":68,"tag":116,"props":495,"children":496},{"style":139},[497],{"type":73,"value":498}," handler)\n",{"type":68,"tag":116,"props":500,"children":501},{"class":118,"line":150},[502,506,510,514,518,522,527,531,535],{"type":68,"tag":116,"props":503,"children":504},{"style":139},[505],{"type":73,"value":462},{"type":68,"tag":116,"props":507,"children":508},{"style":129},[509],{"type":73,"value":444},{"type":68,"tag":116,"props":511,"children":512},{"style":240},[513],{"type":73,"value":471},{"type":68,"tag":116,"props":515,"children":516},{"style":139},[517],{"type":73,"value":248},{"type":68,"tag":116,"props":519,"children":520},{"style":129},[521],{"type":73,"value":344},{"type":68,"tag":116,"props":523,"children":524},{"style":195},[525],{"type":73,"value":526},"touchstart",{"type":68,"tag":116,"props":528,"children":529},{"style":129},[530],{"type":73,"value":344},{"type":68,"tag":116,"props":532,"children":533},{"style":129},[534],{"type":73,"value":493},{"type":68,"tag":116,"props":536,"children":537},{"style":139},[538],{"type":73,"value":498},{"type":68,"tag":69,"props":540,"children":541},{},[542],{"type":73,"value":543},"For large grids, compute all visible sizes once per update and expose them as CSS variables.",{"type":68,"tag":98,"props":545,"children":547},{"id":546},"common-mistakes",[548],{"type":73,"value":549},"Common Mistakes",{"type":68,"tag":551,"props":552,"children":554},"h3",{"id":553},"critical-omitting-sizing-prerequisite",[555,560],{"type":68,"tag":116,"props":556,"children":557},{},[558],{"type":73,"value":559},"CRITICAL",{"type":73,"value":561}," Omitting sizing prerequisite",{"type":68,"tag":69,"props":563,"children":564},{},[565,567],{"type":73,"value":566},"Wrong: ",{"type":68,"tag":76,"props":568,"children":570},{"className":569},[],[571],{"type":73,"value":572},"tableFeatures({ columnResizingFeature })",{"type":68,"tag":69,"props":574,"children":575},{},[576,578],{"type":73,"value":577},"Correct: ",{"type":68,"tag":76,"props":579,"children":581},{"className":580},[],[582],{"type":73,"value":583},"tableFeatures({ columnSizingFeature, columnResizingFeature })",{"type":68,"tag":69,"props":585,"children":586},{},[587,589,595],{"type":73,"value":588},"Resizing modifies the sizing state and requires ",{"type":68,"tag":76,"props":590,"children":592},{"className":591},[],[593],{"type":73,"value":594},"columnSizingFeature",{"type":73,"value":444},{"type":68,"tag":69,"props":597,"children":598},{},[599,601],{"type":73,"value":600},"Source: ",{"type":68,"tag":76,"props":602,"children":604},{"className":603},[],[605],{"type":73,"value":606},"packages\u002Ftable-core\u002Fsrc\u002Ftypes\u002FTableFeatures.ts#FeatureSlotPrereqs",{"type":68,"tag":551,"props":608,"children":610},{"id":609},"high-rendering-an-inert-handle",[611,616],{"type":68,"tag":116,"props":612,"children":613},{},[614],{"type":73,"value":615},"HIGH",{"type":73,"value":617}," Rendering an inert handle",{"type":68,"tag":69,"props":619,"children":620},{},[621,622],{"type":73,"value":566},{"type":68,"tag":76,"props":623,"children":625},{"className":624},[],[626],{"type":73,"value":627},"handle.addEventListener('pointerdown', header.getResizeHandler())",{"type":68,"tag":69,"props":629,"children":630},{},[631],{"type":73,"value":632},"Correct:",{"type":68,"tag":105,"props":634,"children":635},{"className":107,"code":413,"language":109,"meta":110,"style":110},[636],{"type":68,"tag":76,"props":637,"children":638},{"__ignoreMap":110},[639,670,709],{"type":68,"tag":116,"props":640,"children":641},{"class":118,"line":119},[642,646,650,654,658,662,666],{"type":68,"tag":116,"props":643,"children":644},{"style":224},[645],{"type":73,"value":425},{"type":68,"tag":116,"props":647,"children":648},{"style":139},[649],{"type":73,"value":430},{"type":68,"tag":116,"props":651,"children":652},{"style":129},[653],{"type":73,"value":237},{"type":68,"tag":116,"props":655,"children":656},{"style":139},[657],{"type":73,"value":439},{"type":68,"tag":116,"props":659,"children":660},{"style":129},[661],{"type":73,"value":444},{"type":68,"tag":116,"props":663,"children":664},{"style":240},[665],{"type":73,"value":449},{"type":68,"tag":116,"props":667,"children":668},{"style":139},[669],{"type":73,"value":454},{"type":68,"tag":116,"props":671,"children":672},{"class":118,"line":135},[673,677,681,685,689,693,697,701,705],{"type":68,"tag":116,"props":674,"children":675},{"style":139},[676],{"type":73,"value":462},{"type":68,"tag":116,"props":678,"children":679},{"style":129},[680],{"type":73,"value":444},{"type":68,"tag":116,"props":682,"children":683},{"style":240},[684],{"type":73,"value":471},{"type":68,"tag":116,"props":686,"children":687},{"style":139},[688],{"type":73,"value":248},{"type":68,"tag":116,"props":690,"children":691},{"style":129},[692],{"type":73,"value":344},{"type":68,"tag":116,"props":694,"children":695},{"style":195},[696],{"type":73,"value":484},{"type":68,"tag":116,"props":698,"children":699},{"style":129},[700],{"type":73,"value":344},{"type":68,"tag":116,"props":702,"children":703},{"style":129},[704],{"type":73,"value":493},{"type":68,"tag":116,"props":706,"children":707},{"style":139},[708],{"type":73,"value":498},{"type":68,"tag":116,"props":710,"children":711},{"class":118,"line":150},[712,716,720,724,728,732,736,740,744],{"type":68,"tag":116,"props":713,"children":714},{"style":139},[715],{"type":73,"value":462},{"type":68,"tag":116,"props":717,"children":718},{"style":129},[719],{"type":73,"value":444},{"type":68,"tag":116,"props":721,"children":722},{"style":240},[723],{"type":73,"value":471},{"type":68,"tag":116,"props":725,"children":726},{"style":139},[727],{"type":73,"value":248},{"type":68,"tag":116,"props":729,"children":730},{"style":129},[731],{"type":73,"value":344},{"type":68,"tag":116,"props":733,"children":734},{"style":195},[735],{"type":73,"value":526},{"type":68,"tag":116,"props":737,"children":738},{"style":129},[739],{"type":73,"value":344},{"type":68,"tag":116,"props":741,"children":742},{"style":129},[743],{"type":73,"value":493},{"type":68,"tag":116,"props":745,"children":746},{"style":139},[747],{"type":73,"value":498},{"type":68,"tag":69,"props":749,"children":750},{},[751,753,758,760,766],{"type":73,"value":752},"The shipped handler distinguishes ",{"type":68,"tag":76,"props":754,"children":756},{"className":755},[],[757],{"type":73,"value":526},{"type":73,"value":759}," from the mouse path. A single\n",{"type":68,"tag":76,"props":761,"children":763},{"className":762},[],[764],{"type":73,"value":765},"pointerdown",{"type":73,"value":767}," listener does not provide working touch resizing; wire both mouse\nand touch start events.",{"type":68,"tag":69,"props":769,"children":770},{},[771,772],{"type":73,"value":600},{"type":68,"tag":76,"props":773,"children":775},{"className":774},[],[776],{"type":73,"value":777},"docs\u002Fframework\u002Freact\u002Fguide\u002Fcolumn-resizing.md#connect-column-resizing-apis-to-ui",{"type":68,"tag":551,"props":779,"children":781},{"id":780},"medium-reading-sizes-in-every-cell",[782,787],{"type":68,"tag":116,"props":783,"children":784},{},[785],{"type":73,"value":786},"MEDIUM",{"type":73,"value":788}," Reading sizes in every cell",{"type":68,"tag":69,"props":790,"children":791},{},[792,793,799,801],{"type":73,"value":566},{"type":68,"tag":76,"props":794,"children":796},{"className":795},[],[797],{"type":73,"value":798},"cells.forEach(cell => cell.style.width = ",{"type":73,"value":800},"${cell.column.getSize()}px",{"type":68,"tag":76,"props":802,"children":804},{"className":803},[],[805],{"type":73,"value":806},")",{"type":68,"tag":69,"props":808,"children":809},{},[810,811,817,819,824,826],{"type":73,"value":577},{"type":68,"tag":76,"props":812,"children":814},{"className":813},[],[815],{"type":73,"value":816},"root.style.setProperty(",{"type":73,"value":818},"--col-${header.id}",{"type":68,"tag":76,"props":820,"children":822},{"className":821},[],[823],{"type":73,"value":82},{"type":73,"value":825},"${header.getSize()}px",{"type":68,"tag":76,"props":827,"children":829},{"className":828},[],[830],{"type":73,"value":806},{"type":68,"tag":69,"props":832,"children":833},{},[834,836,841],{"type":73,"value":835},"Caching sizes or CSS variables avoids repeated work during ",{"type":68,"tag":76,"props":837,"children":839},{"className":838},[],[840],{"type":73,"value":339},{"type":73,"value":842}," resizing.",{"type":68,"tag":69,"props":844,"children":845},{},[846,847],{"type":73,"value":600},{"type":68,"tag":76,"props":848,"children":850},{"className":849},[],[851],{"type":73,"value":852},"examples\u002Freact\u002Fcolumn-resizing-performant\u002Fsrc\u002Fmain.tsx",{"type":68,"tag":98,"props":854,"children":856},{"id":855},"api-discovery",[857],{"type":73,"value":858},"API Discovery",{"type":68,"tag":69,"props":860,"children":861},{},[862,864,870],{"type":73,"value":863},"Inspect ",{"type":68,"tag":76,"props":865,"children":867},{"className":866},[],[868],{"type":73,"value":869},"node_modules\u002F@tanstack\u002Ftable-core\u002Fdist\u002Ffeatures\u002Fcolumn-resizing\u002F",{"type":73,"value":871}," and the sizing feature directory for the state it updates.",{"type":68,"tag":873,"props":874,"children":875},"style",{},[876],{"type":73,"value":877},"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":879,"total":961},[880,892,904,914,929,941,951],{"slug":881,"name":881,"fn":882,"description":883,"org":884,"tags":885,"stars":20,"repoUrl":21,"updatedAt":891},"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},[886,889,890],{"name":887,"slug":888,"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":893,"name":893,"fn":894,"description":895,"org":896,"tags":897,"stars":20,"repoUrl":21,"updatedAt":903},"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},[898,901,902],{"name":899,"slug":900,"type":15},"Debugging","debugging",{"name":18,"slug":19,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:26:05.418735",{"slug":905,"name":905,"fn":906,"description":907,"org":908,"tags":909,"stars":20,"repoUrl":21,"updatedAt":913},"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},[910,911,912],{"name":887,"slug":888,"type":15},{"name":9,"slug":8,"type":15},{"name":13,"slug":14,"type":15},"2026-07-30T05:25:38.403427",{"slug":915,"name":915,"fn":916,"description":917,"org":918,"tags":919,"stars":20,"repoUrl":21,"updatedAt":928},"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},[920,923,924,927],{"name":921,"slug":922,"type":15},"Data Pipeline","data-pipeline",{"name":18,"slug":19,"type":15},{"name":925,"slug":926,"type":15},"Performance","performance",{"name":9,"slug":8,"type":15},"2026-07-30T05:25:45.400104",{"slug":930,"name":930,"fn":931,"description":932,"org":933,"tags":934,"stars":20,"repoUrl":21,"updatedAt":940},"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},[935,938,939],{"name":936,"slug":937,"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":942,"name":942,"fn":943,"description":944,"org":945,"tags":946,"stars":20,"repoUrl":21,"updatedAt":950},"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},[947,948,949],{"name":887,"slug":888,"type":15},{"name":18,"slug":19,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:25:53.391632",{"slug":952,"name":952,"fn":953,"description":954,"org":955,"tags":956,"stars":20,"repoUrl":21,"updatedAt":960},"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},[957,958,959],{"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":963,"total":1055},[964,970,976,982,989,995,1001,1007,1020,1026,1036,1046],{"slug":881,"name":881,"fn":882,"description":883,"org":965,"tags":966,"stars":20,"repoUrl":21,"updatedAt":891},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[967,968,969],{"name":887,"slug":888,"type":15},{"name":18,"slug":19,"type":15},{"name":9,"slug":8,"type":15},{"slug":893,"name":893,"fn":894,"description":895,"org":971,"tags":972,"stars":20,"repoUrl":21,"updatedAt":903},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[973,974,975],{"name":899,"slug":900,"type":15},{"name":18,"slug":19,"type":15},{"name":9,"slug":8,"type":15},{"slug":905,"name":905,"fn":906,"description":907,"org":977,"tags":978,"stars":20,"repoUrl":21,"updatedAt":913},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[979,980,981],{"name":887,"slug":888,"type":15},{"name":9,"slug":8,"type":15},{"name":13,"slug":14,"type":15},{"slug":915,"name":915,"fn":916,"description":917,"org":983,"tags":984,"stars":20,"repoUrl":21,"updatedAt":928},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[985,986,987,988],{"name":921,"slug":922,"type":15},{"name":18,"slug":19,"type":15},{"name":925,"slug":926,"type":15},{"name":9,"slug":8,"type":15},{"slug":930,"name":930,"fn":931,"description":932,"org":990,"tags":991,"stars":20,"repoUrl":21,"updatedAt":940},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[992,993,994],{"name":936,"slug":937,"type":15},{"name":18,"slug":19,"type":15},{"name":9,"slug":8,"type":15},{"slug":942,"name":942,"fn":943,"description":944,"org":996,"tags":997,"stars":20,"repoUrl":21,"updatedAt":950},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[998,999,1000],{"name":887,"slug":888,"type":15},{"name":18,"slug":19,"type":15},{"name":9,"slug":8,"type":15},{"slug":952,"name":952,"fn":953,"description":954,"org":1002,"tags":1003,"stars":20,"repoUrl":21,"updatedAt":960},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1004,1005,1006],{"name":18,"slug":19,"type":15},{"name":9,"slug":8,"type":15},{"name":13,"slug":14,"type":15},{"slug":1008,"name":1008,"fn":1009,"description":1010,"org":1011,"tags":1012,"stars":20,"repoUrl":21,"updatedAt":1019},"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},[1013,1016,1017,1018],{"name":1014,"slug":1015,"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":4,"name":4,"fn":5,"description":6,"org":1021,"tags":1022,"stars":20,"repoUrl":21,"updatedAt":22},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1023,1024,1025],{"name":18,"slug":19,"type":15},{"name":9,"slug":8,"type":15},{"name":13,"slug":14,"type":15},{"slug":59,"name":59,"fn":1027,"description":1028,"org":1029,"tags":1030,"stars":20,"repoUrl":21,"updatedAt":1035},"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},[1031,1032,1033,1034],{"name":1014,"slug":1015,"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":1037,"name":1037,"fn":1038,"description":1039,"org":1040,"tags":1041,"stars":20,"repoUrl":21,"updatedAt":1045},"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},[1042,1043,1044],{"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":1047,"description":1048,"org":1049,"tags":1050,"stars":20,"repoUrl":21,"updatedAt":1054},"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},[1051,1052,1053],{"name":887,"slug":888,"type":15},{"name":18,"slug":19,"type":15},{"name":13,"slug":14,"type":15},"2026-07-30T05:25:52.366295",125]