[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-tanstack-column-pinning":3,"mdc--klqv92-key":53,"related-org-tanstack-column-pinning":1145,"related-repo-tanstack-column-pinning":1275},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":23,"repoUrl":24,"updatedAt":25,"license":26,"forks":27,"topics":28,"repo":48,"sourceUrl":51,"mdContent":52},"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},"tanstack","TanStack","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Ftanstack.png",[12,16,19,20],{"name":13,"slug":14,"type":15},"CSS","css","tag",{"name":17,"slug":18,"type":15},"UI Components","ui-components",{"name":9,"slug":8,"type":15},{"name":21,"slug":22,"type":15},"Frontend","frontend",28175,"https:\u002F\u002Fgithub.com\u002FTanStack\u002Ftable","2026-07-30T05:25:55.377366",null,3539,[29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47],"datagrid","datagrids","datatable","filtering","grid","grouping","hooks","javascript","pagination","react","reactjs","solid","solidjs","sorting","svelte","sveltejs","table","typescript","vue",{"repoUrl":24,"stars":23,"forks":27,"topics":49,"description":50},[29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47],"🤖 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-pinning","---\nname: column-pinning\ndescription: >\n  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.\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-pinning.md'\n  - 'TanStack\u002Ftable:packages\u002Ftable-core\u002Fsrc\u002Ffeatures\u002Fcolumn-pinning'\n  - 'TanStack\u002Ftable:examples\u002Freact\u002Fcolumn-pinning-sticky'\n---\n\nThis skill builds on `core`, `table-features`, and `column-sizing`. Pinning partitions models; CSS creates the sticky visual result.\n\n## Setup\n\n```ts\nimport {\n  columnPinningFeature,\n  columnSizingFeature,\n  tableFeatures,\n} from '@tanstack\u002Ftable-core'\n\nexport const features = tableFeatures({\n  columnSizingFeature,\n  columnPinningFeature,\n})\nexport const initialState = {\n  columnPinning: { start: ['name'], end: ['actions'] },\n}\n```\n\n## Core Patterns\n\n```ts\nconst style = (column: Column\u003Cany, any>) => ({\n  position: column.getIsPinned() ? 'sticky' : 'relative',\n  insetInlineStart:\n    column.getIsPinned() === 'start'\n      ? `${column.getStart('start')}px`\n      : undefined,\n  insetInlineEnd:\n    column.getIsPinned() === 'end' ? `${column.getAfter('end')}px` : undefined,\n  width: `${column.getSize()}px`,\n  zIndex: column.getIsPinned() ? 1 : 0,\n  background: 'Canvas',\n})\n```\n\n## Common Mistakes\n\n### [HIGH] Using physical v8 regions\n\nWrong: `column.pin('left')`\n\nCorrect: `column.pin('start')`\n\nV9 uses logical `start` and `end`, including state and collection APIs.\n\nSource: `docs\u002Fframework\u002Freact\u002Fguide\u002Fmigrating.md#column-pinning`\n\n### [HIGH] Expecting sticky CSS automatically\n\nWrong: `column.pin('start')`\n\nCorrect: `Object.assign(cell.style, style(column))`\n\nThe feature only computes regions and offsets; the renderer owns positioning, backgrounds, overflow, and stacking.\n\nSource: `examples\u002Freact\u002Fcolumn-pinning-sticky\u002Fsrc\u002Fmain.tsx`\n\n### [HIGH] Diverging rendered and model widths\n\nWrong: `cell.style.width = 'auto'`\n\nCorrect: `cell.style.width = `${column.getSize()}px``\n\nSticky offsets use numeric sizes, so mismatched DOM widths create gaps or overlaps.\n\nSource: `docs\u002Fframework\u002Freact\u002Fguide\u002Fcolumn-pinning.md#useful-column-pinning-apis`\n\n## API Discovery\n\nInspect `node_modules\u002F@tanstack\u002Ftable-core\u002Fdist\u002Ffeatures\u002Fcolumn-pinning\u002F`; use CSS logical properties for direction-aware rendering.\n",{"data":54,"body":67},{"name":4,"description":6,"metadata":55,"requires":59,"sources":63},{"type":56,"library":57,"library_version":58},"sub-skill","@tanstack\u002Ftable-core","9.0.0-beta.59",[60,61,62],"core","table-features","column-sizing",[64,65,66],"TanStack\u002Ftable:docs\u002Fframework\u002Freact\u002Fguide\u002Fcolumn-pinning.md","TanStack\u002Ftable:packages\u002Ftable-core\u002Fsrc\u002Ffeatures\u002Fcolumn-pinning","TanStack\u002Ftable:examples\u002Freact\u002Fcolumn-pinning-sticky",{"type":68,"children":69},"root",[70,100,107,422,428,959,965,977,988,999,1018,1029,1039,1048,1058,1063,1073,1083,1093,1105,1110,1120,1126,1139],{"type":71,"tag":72,"props":73,"children":74},"element","p",{},[75,78,84,86,91,93,98],{"type":76,"value":77},"text","This skill builds on ",{"type":71,"tag":79,"props":80,"children":82},"code",{"className":81},[],[83],{"type":76,"value":60},{"type":76,"value":85},", ",{"type":71,"tag":79,"props":87,"children":89},{"className":88},[],[90],{"type":76,"value":61},{"type":76,"value":92},", and ",{"type":71,"tag":79,"props":94,"children":96},{"className":95},[],[97],{"type":76,"value":62},{"type":76,"value":99},". Pinning partitions models; CSS creates the sticky visual result.",{"type":71,"tag":101,"props":102,"children":104},"h2",{"id":103},"setup",[105],{"type":76,"value":106},"Setup",{"type":71,"tag":108,"props":109,"children":114},"pre",{"className":110,"code":111,"language":112,"meta":113,"style":113},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import {\n  columnPinningFeature,\n  columnSizingFeature,\n  tableFeatures,\n} from '@tanstack\u002Ftable-core'\n\nexport const features = tableFeatures({\n  columnSizingFeature,\n  columnPinningFeature,\n})\nexport const initialState = {\n  columnPinning: { start: ['name'], end: ['actions'] },\n}\n","ts","",[115],{"type":71,"tag":79,"props":116,"children":117},{"__ignoreMap":113},[118,136,151,164,177,206,216,257,269,281,294,319,413],{"type":71,"tag":119,"props":120,"children":123},"span",{"class":121,"line":122},"line",1,[124,130],{"type":71,"tag":119,"props":125,"children":127},{"style":126},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[128],{"type":76,"value":129},"import",{"type":71,"tag":119,"props":131,"children":133},{"style":132},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[134],{"type":76,"value":135}," {\n",{"type":71,"tag":119,"props":137,"children":139},{"class":121,"line":138},2,[140,146],{"type":71,"tag":119,"props":141,"children":143},{"style":142},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[144],{"type":76,"value":145},"  columnPinningFeature",{"type":71,"tag":119,"props":147,"children":148},{"style":132},[149],{"type":76,"value":150},",\n",{"type":71,"tag":119,"props":152,"children":154},{"class":121,"line":153},3,[155,160],{"type":71,"tag":119,"props":156,"children":157},{"style":142},[158],{"type":76,"value":159},"  columnSizingFeature",{"type":71,"tag":119,"props":161,"children":162},{"style":132},[163],{"type":76,"value":150},{"type":71,"tag":119,"props":165,"children":167},{"class":121,"line":166},4,[168,173],{"type":71,"tag":119,"props":169,"children":170},{"style":142},[171],{"type":76,"value":172},"  tableFeatures",{"type":71,"tag":119,"props":174,"children":175},{"style":132},[176],{"type":76,"value":150},{"type":71,"tag":119,"props":178,"children":180},{"class":121,"line":179},5,[181,186,191,196,201],{"type":71,"tag":119,"props":182,"children":183},{"style":132},[184],{"type":76,"value":185},"}",{"type":71,"tag":119,"props":187,"children":188},{"style":126},[189],{"type":76,"value":190}," from",{"type":71,"tag":119,"props":192,"children":193},{"style":132},[194],{"type":76,"value":195}," '",{"type":71,"tag":119,"props":197,"children":199},{"style":198},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[200],{"type":76,"value":57},{"type":71,"tag":119,"props":202,"children":203},{"style":132},[204],{"type":76,"value":205},"'\n",{"type":71,"tag":119,"props":207,"children":209},{"class":121,"line":208},6,[210],{"type":71,"tag":119,"props":211,"children":213},{"emptyLinePlaceholder":212},true,[214],{"type":76,"value":215},"\n",{"type":71,"tag":119,"props":217,"children":219},{"class":121,"line":218},7,[220,225,231,236,241,247,252],{"type":71,"tag":119,"props":221,"children":222},{"style":126},[223],{"type":76,"value":224},"export",{"type":71,"tag":119,"props":226,"children":228},{"style":227},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[229],{"type":76,"value":230}," const",{"type":71,"tag":119,"props":232,"children":233},{"style":142},[234],{"type":76,"value":235}," features ",{"type":71,"tag":119,"props":237,"children":238},{"style":132},[239],{"type":76,"value":240},"=",{"type":71,"tag":119,"props":242,"children":244},{"style":243},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[245],{"type":76,"value":246}," tableFeatures",{"type":71,"tag":119,"props":248,"children":249},{"style":142},[250],{"type":76,"value":251},"(",{"type":71,"tag":119,"props":253,"children":254},{"style":132},[255],{"type":76,"value":256},"{\n",{"type":71,"tag":119,"props":258,"children":260},{"class":121,"line":259},8,[261,265],{"type":71,"tag":119,"props":262,"children":263},{"style":142},[264],{"type":76,"value":159},{"type":71,"tag":119,"props":266,"children":267},{"style":132},[268],{"type":76,"value":150},{"type":71,"tag":119,"props":270,"children":272},{"class":121,"line":271},9,[273,277],{"type":71,"tag":119,"props":274,"children":275},{"style":142},[276],{"type":76,"value":145},{"type":71,"tag":119,"props":278,"children":279},{"style":132},[280],{"type":76,"value":150},{"type":71,"tag":119,"props":282,"children":284},{"class":121,"line":283},10,[285,289],{"type":71,"tag":119,"props":286,"children":287},{"style":132},[288],{"type":76,"value":185},{"type":71,"tag":119,"props":290,"children":291},{"style":142},[292],{"type":76,"value":293},")\n",{"type":71,"tag":119,"props":295,"children":297},{"class":121,"line":296},11,[298,302,306,311,315],{"type":71,"tag":119,"props":299,"children":300},{"style":126},[301],{"type":76,"value":224},{"type":71,"tag":119,"props":303,"children":304},{"style":227},[305],{"type":76,"value":230},{"type":71,"tag":119,"props":307,"children":308},{"style":142},[309],{"type":76,"value":310}," initialState ",{"type":71,"tag":119,"props":312,"children":313},{"style":132},[314],{"type":76,"value":240},{"type":71,"tag":119,"props":316,"children":317},{"style":132},[318],{"type":76,"value":135},{"type":71,"tag":119,"props":320,"children":322},{"class":121,"line":321},12,[323,329,334,339,344,348,353,358,363,367,372,377,382,386,390,394,399,403,408],{"type":71,"tag":119,"props":324,"children":326},{"style":325},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[327],{"type":76,"value":328},"  columnPinning",{"type":71,"tag":119,"props":330,"children":331},{"style":132},[332],{"type":76,"value":333},":",{"type":71,"tag":119,"props":335,"children":336},{"style":132},[337],{"type":76,"value":338}," {",{"type":71,"tag":119,"props":340,"children":341},{"style":325},[342],{"type":76,"value":343}," start",{"type":71,"tag":119,"props":345,"children":346},{"style":132},[347],{"type":76,"value":333},{"type":71,"tag":119,"props":349,"children":350},{"style":142},[351],{"type":76,"value":352}," [",{"type":71,"tag":119,"props":354,"children":355},{"style":132},[356],{"type":76,"value":357},"'",{"type":71,"tag":119,"props":359,"children":360},{"style":198},[361],{"type":76,"value":362},"name",{"type":71,"tag":119,"props":364,"children":365},{"style":132},[366],{"type":76,"value":357},{"type":71,"tag":119,"props":368,"children":369},{"style":142},[370],{"type":76,"value":371},"]",{"type":71,"tag":119,"props":373,"children":374},{"style":132},[375],{"type":76,"value":376},",",{"type":71,"tag":119,"props":378,"children":379},{"style":325},[380],{"type":76,"value":381}," end",{"type":71,"tag":119,"props":383,"children":384},{"style":132},[385],{"type":76,"value":333},{"type":71,"tag":119,"props":387,"children":388},{"style":142},[389],{"type":76,"value":352},{"type":71,"tag":119,"props":391,"children":392},{"style":132},[393],{"type":76,"value":357},{"type":71,"tag":119,"props":395,"children":396},{"style":198},[397],{"type":76,"value":398},"actions",{"type":71,"tag":119,"props":400,"children":401},{"style":132},[402],{"type":76,"value":357},{"type":71,"tag":119,"props":404,"children":405},{"style":142},[406],{"type":76,"value":407},"] ",{"type":71,"tag":119,"props":409,"children":410},{"style":132},[411],{"type":76,"value":412},"},\n",{"type":71,"tag":119,"props":414,"children":416},{"class":121,"line":415},13,[417],{"type":71,"tag":119,"props":418,"children":419},{"style":132},[420],{"type":76,"value":421},"}\n",{"type":71,"tag":101,"props":423,"children":425},{"id":424},"core-patterns",[426],{"type":76,"value":427},"Core Patterns",{"type":71,"tag":108,"props":429,"children":431},{"className":110,"code":430,"language":112,"meta":113,"style":113},"const style = (column: Column\u003Cany, any>) => ({\n  position: column.getIsPinned() ? 'sticky' : 'relative',\n  insetInlineStart:\n    column.getIsPinned() === 'start'\n      ? `${column.getStart('start')}px`\n      : undefined,\n  insetInlineEnd:\n    column.getIsPinned() === 'end' ? `${column.getAfter('end')}px` : undefined,\n  width: `${column.getSize()}px`,\n  zIndex: column.getIsPinned() ? 1 : 0,\n  background: 'Canvas',\n})\n",[432],{"type":71,"tag":79,"props":433,"children":434},{"__ignoreMap":113},[435,510,582,595,633,694,707,719,818,868,919,948],{"type":71,"tag":119,"props":436,"children":437},{"class":121,"line":122},[438,443,448,452,457,463,467,473,478,483,487,492,497,502,506],{"type":71,"tag":119,"props":439,"children":440},{"style":227},[441],{"type":76,"value":442},"const",{"type":71,"tag":119,"props":444,"children":445},{"style":142},[446],{"type":76,"value":447}," style ",{"type":71,"tag":119,"props":449,"children":450},{"style":132},[451],{"type":76,"value":240},{"type":71,"tag":119,"props":453,"children":454},{"style":132},[455],{"type":76,"value":456}," (",{"type":71,"tag":119,"props":458,"children":460},{"style":459},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[461],{"type":76,"value":462},"column",{"type":71,"tag":119,"props":464,"children":465},{"style":132},[466],{"type":76,"value":333},{"type":71,"tag":119,"props":468,"children":470},{"style":469},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[471],{"type":76,"value":472}," Column",{"type":71,"tag":119,"props":474,"children":475},{"style":132},[476],{"type":76,"value":477},"\u003C",{"type":71,"tag":119,"props":479,"children":480},{"style":469},[481],{"type":76,"value":482},"any",{"type":71,"tag":119,"props":484,"children":485},{"style":132},[486],{"type":76,"value":376},{"type":71,"tag":119,"props":488,"children":489},{"style":469},[490],{"type":76,"value":491}," any",{"type":71,"tag":119,"props":493,"children":494},{"style":132},[495],{"type":76,"value":496},">)",{"type":71,"tag":119,"props":498,"children":499},{"style":227},[500],{"type":76,"value":501}," =>",{"type":71,"tag":119,"props":503,"children":504},{"style":142},[505],{"type":76,"value":456},{"type":71,"tag":119,"props":507,"children":508},{"style":132},[509],{"type":76,"value":256},{"type":71,"tag":119,"props":511,"children":512},{"class":121,"line":138},[513,518,522,527,532,537,542,547,551,556,560,565,569,574,578],{"type":71,"tag":119,"props":514,"children":515},{"style":325},[516],{"type":76,"value":517},"  position",{"type":71,"tag":119,"props":519,"children":520},{"style":132},[521],{"type":76,"value":333},{"type":71,"tag":119,"props":523,"children":524},{"style":142},[525],{"type":76,"value":526}," column",{"type":71,"tag":119,"props":528,"children":529},{"style":132},[530],{"type":76,"value":531},".",{"type":71,"tag":119,"props":533,"children":534},{"style":243},[535],{"type":76,"value":536},"getIsPinned",{"type":71,"tag":119,"props":538,"children":539},{"style":142},[540],{"type":76,"value":541},"() ",{"type":71,"tag":119,"props":543,"children":544},{"style":132},[545],{"type":76,"value":546},"?",{"type":71,"tag":119,"props":548,"children":549},{"style":132},[550],{"type":76,"value":195},{"type":71,"tag":119,"props":552,"children":553},{"style":198},[554],{"type":76,"value":555},"sticky",{"type":71,"tag":119,"props":557,"children":558},{"style":132},[559],{"type":76,"value":357},{"type":71,"tag":119,"props":561,"children":562},{"style":132},[563],{"type":76,"value":564}," :",{"type":71,"tag":119,"props":566,"children":567},{"style":132},[568],{"type":76,"value":195},{"type":71,"tag":119,"props":570,"children":571},{"style":198},[572],{"type":76,"value":573},"relative",{"type":71,"tag":119,"props":575,"children":576},{"style":132},[577],{"type":76,"value":357},{"type":71,"tag":119,"props":579,"children":580},{"style":132},[581],{"type":76,"value":150},{"type":71,"tag":119,"props":583,"children":584},{"class":121,"line":153},[585,590],{"type":71,"tag":119,"props":586,"children":587},{"style":325},[588],{"type":76,"value":589},"  insetInlineStart",{"type":71,"tag":119,"props":591,"children":592},{"style":132},[593],{"type":76,"value":594},":\n",{"type":71,"tag":119,"props":596,"children":597},{"class":121,"line":166},[598,603,607,611,615,620,624,629],{"type":71,"tag":119,"props":599,"children":600},{"style":142},[601],{"type":76,"value":602},"    column",{"type":71,"tag":119,"props":604,"children":605},{"style":132},[606],{"type":76,"value":531},{"type":71,"tag":119,"props":608,"children":609},{"style":243},[610],{"type":76,"value":536},{"type":71,"tag":119,"props":612,"children":613},{"style":142},[614],{"type":76,"value":541},{"type":71,"tag":119,"props":616,"children":617},{"style":132},[618],{"type":76,"value":619},"===",{"type":71,"tag":119,"props":621,"children":622},{"style":132},[623],{"type":76,"value":195},{"type":71,"tag":119,"props":625,"children":626},{"style":198},[627],{"type":76,"value":628},"start",{"type":71,"tag":119,"props":630,"children":631},{"style":132},[632],{"type":76,"value":205},{"type":71,"tag":119,"props":634,"children":635},{"class":121,"line":179},[636,641,646,650,654,659,663,667,671,675,680,684,689],{"type":71,"tag":119,"props":637,"children":638},{"style":132},[639],{"type":76,"value":640},"      ?",{"type":71,"tag":119,"props":642,"children":643},{"style":132},[644],{"type":76,"value":645}," `${",{"type":71,"tag":119,"props":647,"children":648},{"style":142},[649],{"type":76,"value":462},{"type":71,"tag":119,"props":651,"children":652},{"style":132},[653],{"type":76,"value":531},{"type":71,"tag":119,"props":655,"children":656},{"style":243},[657],{"type":76,"value":658},"getStart",{"type":71,"tag":119,"props":660,"children":661},{"style":142},[662],{"type":76,"value":251},{"type":71,"tag":119,"props":664,"children":665},{"style":132},[666],{"type":76,"value":357},{"type":71,"tag":119,"props":668,"children":669},{"style":198},[670],{"type":76,"value":628},{"type":71,"tag":119,"props":672,"children":673},{"style":132},[674],{"type":76,"value":357},{"type":71,"tag":119,"props":676,"children":677},{"style":142},[678],{"type":76,"value":679},")",{"type":71,"tag":119,"props":681,"children":682},{"style":132},[683],{"type":76,"value":185},{"type":71,"tag":119,"props":685,"children":686},{"style":198},[687],{"type":76,"value":688},"px",{"type":71,"tag":119,"props":690,"children":691},{"style":132},[692],{"type":76,"value":693},"`\n",{"type":71,"tag":119,"props":695,"children":696},{"class":121,"line":208},[697,702],{"type":71,"tag":119,"props":698,"children":699},{"style":132},[700],{"type":76,"value":701},"      :",{"type":71,"tag":119,"props":703,"children":704},{"style":132},[705],{"type":76,"value":706}," undefined,\n",{"type":71,"tag":119,"props":708,"children":709},{"class":121,"line":218},[710,715],{"type":71,"tag":119,"props":711,"children":712},{"style":325},[713],{"type":76,"value":714},"  insetInlineEnd",{"type":71,"tag":119,"props":716,"children":717},{"style":132},[718],{"type":76,"value":594},{"type":71,"tag":119,"props":720,"children":721},{"class":121,"line":259},[722,726,730,734,738,742,746,751,755,760,764,768,772,777,781,785,789,793,797,801,805,810,814],{"type":71,"tag":119,"props":723,"children":724},{"style":142},[725],{"type":76,"value":602},{"type":71,"tag":119,"props":727,"children":728},{"style":132},[729],{"type":76,"value":531},{"type":71,"tag":119,"props":731,"children":732},{"style":243},[733],{"type":76,"value":536},{"type":71,"tag":119,"props":735,"children":736},{"style":142},[737],{"type":76,"value":541},{"type":71,"tag":119,"props":739,"children":740},{"style":132},[741],{"type":76,"value":619},{"type":71,"tag":119,"props":743,"children":744},{"style":132},[745],{"type":76,"value":195},{"type":71,"tag":119,"props":747,"children":748},{"style":198},[749],{"type":76,"value":750},"end",{"type":71,"tag":119,"props":752,"children":753},{"style":132},[754],{"type":76,"value":357},{"type":71,"tag":119,"props":756,"children":757},{"style":132},[758],{"type":76,"value":759}," ?",{"type":71,"tag":119,"props":761,"children":762},{"style":132},[763],{"type":76,"value":645},{"type":71,"tag":119,"props":765,"children":766},{"style":142},[767],{"type":76,"value":462},{"type":71,"tag":119,"props":769,"children":770},{"style":132},[771],{"type":76,"value":531},{"type":71,"tag":119,"props":773,"children":774},{"style":243},[775],{"type":76,"value":776},"getAfter",{"type":71,"tag":119,"props":778,"children":779},{"style":142},[780],{"type":76,"value":251},{"type":71,"tag":119,"props":782,"children":783},{"style":132},[784],{"type":76,"value":357},{"type":71,"tag":119,"props":786,"children":787},{"style":198},[788],{"type":76,"value":750},{"type":71,"tag":119,"props":790,"children":791},{"style":132},[792],{"type":76,"value":357},{"type":71,"tag":119,"props":794,"children":795},{"style":142},[796],{"type":76,"value":679},{"type":71,"tag":119,"props":798,"children":799},{"style":132},[800],{"type":76,"value":185},{"type":71,"tag":119,"props":802,"children":803},{"style":198},[804],{"type":76,"value":688},{"type":71,"tag":119,"props":806,"children":807},{"style":132},[808],{"type":76,"value":809},"`",{"type":71,"tag":119,"props":811,"children":812},{"style":132},[813],{"type":76,"value":564},{"type":71,"tag":119,"props":815,"children":816},{"style":132},[817],{"type":76,"value":706},{"type":71,"tag":119,"props":819,"children":820},{"class":121,"line":271},[821,826,830,834,838,842,847,852,856,860,864],{"type":71,"tag":119,"props":822,"children":823},{"style":325},[824],{"type":76,"value":825},"  width",{"type":71,"tag":119,"props":827,"children":828},{"style":132},[829],{"type":76,"value":333},{"type":71,"tag":119,"props":831,"children":832},{"style":132},[833],{"type":76,"value":645},{"type":71,"tag":119,"props":835,"children":836},{"style":142},[837],{"type":76,"value":462},{"type":71,"tag":119,"props":839,"children":840},{"style":132},[841],{"type":76,"value":531},{"type":71,"tag":119,"props":843,"children":844},{"style":243},[845],{"type":76,"value":846},"getSize",{"type":71,"tag":119,"props":848,"children":849},{"style":142},[850],{"type":76,"value":851},"()",{"type":71,"tag":119,"props":853,"children":854},{"style":132},[855],{"type":76,"value":185},{"type":71,"tag":119,"props":857,"children":858},{"style":198},[859],{"type":76,"value":688},{"type":71,"tag":119,"props":861,"children":862},{"style":132},[863],{"type":76,"value":809},{"type":71,"tag":119,"props":865,"children":866},{"style":132},[867],{"type":76,"value":150},{"type":71,"tag":119,"props":869,"children":870},{"class":121,"line":283},[871,876,880,884,888,892,896,900,906,910,915],{"type":71,"tag":119,"props":872,"children":873},{"style":325},[874],{"type":76,"value":875},"  zIndex",{"type":71,"tag":119,"props":877,"children":878},{"style":132},[879],{"type":76,"value":333},{"type":71,"tag":119,"props":881,"children":882},{"style":142},[883],{"type":76,"value":526},{"type":71,"tag":119,"props":885,"children":886},{"style":132},[887],{"type":76,"value":531},{"type":71,"tag":119,"props":889,"children":890},{"style":243},[891],{"type":76,"value":536},{"type":71,"tag":119,"props":893,"children":894},{"style":142},[895],{"type":76,"value":541},{"type":71,"tag":119,"props":897,"children":898},{"style":132},[899],{"type":76,"value":546},{"type":71,"tag":119,"props":901,"children":903},{"style":902},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[904],{"type":76,"value":905}," 1",{"type":71,"tag":119,"props":907,"children":908},{"style":132},[909],{"type":76,"value":564},{"type":71,"tag":119,"props":911,"children":912},{"style":902},[913],{"type":76,"value":914}," 0",{"type":71,"tag":119,"props":916,"children":917},{"style":132},[918],{"type":76,"value":150},{"type":71,"tag":119,"props":920,"children":921},{"class":121,"line":296},[922,927,931,935,940,944],{"type":71,"tag":119,"props":923,"children":924},{"style":325},[925],{"type":76,"value":926},"  background",{"type":71,"tag":119,"props":928,"children":929},{"style":132},[930],{"type":76,"value":333},{"type":71,"tag":119,"props":932,"children":933},{"style":132},[934],{"type":76,"value":195},{"type":71,"tag":119,"props":936,"children":937},{"style":198},[938],{"type":76,"value":939},"Canvas",{"type":71,"tag":119,"props":941,"children":942},{"style":132},[943],{"type":76,"value":357},{"type":71,"tag":119,"props":945,"children":946},{"style":132},[947],{"type":76,"value":150},{"type":71,"tag":119,"props":949,"children":950},{"class":121,"line":321},[951,955],{"type":71,"tag":119,"props":952,"children":953},{"style":132},[954],{"type":76,"value":185},{"type":71,"tag":119,"props":956,"children":957},{"style":142},[958],{"type":76,"value":293},{"type":71,"tag":101,"props":960,"children":962},{"id":961},"common-mistakes",[963],{"type":76,"value":964},"Common Mistakes",{"type":71,"tag":966,"props":967,"children":969},"h3",{"id":968},"high-using-physical-v8-regions",[970,975],{"type":71,"tag":119,"props":971,"children":972},{},[973],{"type":76,"value":974},"HIGH",{"type":76,"value":976}," Using physical v8 regions",{"type":71,"tag":72,"props":978,"children":979},{},[980,982],{"type":76,"value":981},"Wrong: ",{"type":71,"tag":79,"props":983,"children":985},{"className":984},[],[986],{"type":76,"value":987},"column.pin('left')",{"type":71,"tag":72,"props":989,"children":990},{},[991,993],{"type":76,"value":992},"Correct: ",{"type":71,"tag":79,"props":994,"children":996},{"className":995},[],[997],{"type":76,"value":998},"column.pin('start')",{"type":71,"tag":72,"props":1000,"children":1001},{},[1002,1004,1009,1011,1016],{"type":76,"value":1003},"V9 uses logical ",{"type":71,"tag":79,"props":1005,"children":1007},{"className":1006},[],[1008],{"type":76,"value":628},{"type":76,"value":1010}," and ",{"type":71,"tag":79,"props":1012,"children":1014},{"className":1013},[],[1015],{"type":76,"value":750},{"type":76,"value":1017},", including state and collection APIs.",{"type":71,"tag":72,"props":1019,"children":1020},{},[1021,1023],{"type":76,"value":1022},"Source: ",{"type":71,"tag":79,"props":1024,"children":1026},{"className":1025},[],[1027],{"type":76,"value":1028},"docs\u002Fframework\u002Freact\u002Fguide\u002Fmigrating.md#column-pinning",{"type":71,"tag":966,"props":1030,"children":1032},{"id":1031},"high-expecting-sticky-css-automatically",[1033,1037],{"type":71,"tag":119,"props":1034,"children":1035},{},[1036],{"type":76,"value":974},{"type":76,"value":1038}," Expecting sticky CSS automatically",{"type":71,"tag":72,"props":1040,"children":1041},{},[1042,1043],{"type":76,"value":981},{"type":71,"tag":79,"props":1044,"children":1046},{"className":1045},[],[1047],{"type":76,"value":998},{"type":71,"tag":72,"props":1049,"children":1050},{},[1051,1052],{"type":76,"value":992},{"type":71,"tag":79,"props":1053,"children":1055},{"className":1054},[],[1056],{"type":76,"value":1057},"Object.assign(cell.style, style(column))",{"type":71,"tag":72,"props":1059,"children":1060},{},[1061],{"type":76,"value":1062},"The feature only computes regions and offsets; the renderer owns positioning, backgrounds, overflow, and stacking.",{"type":71,"tag":72,"props":1064,"children":1065},{},[1066,1067],{"type":76,"value":1022},{"type":71,"tag":79,"props":1068,"children":1070},{"className":1069},[],[1071],{"type":76,"value":1072},"examples\u002Freact\u002Fcolumn-pinning-sticky\u002Fsrc\u002Fmain.tsx",{"type":71,"tag":966,"props":1074,"children":1076},{"id":1075},"high-diverging-rendered-and-model-widths",[1077,1081],{"type":71,"tag":119,"props":1078,"children":1079},{},[1080],{"type":76,"value":974},{"type":76,"value":1082}," Diverging rendered and model widths",{"type":71,"tag":72,"props":1084,"children":1085},{},[1086,1087],{"type":76,"value":981},{"type":71,"tag":79,"props":1088,"children":1090},{"className":1089},[],[1091],{"type":76,"value":1092},"cell.style.width = 'auto'",{"type":71,"tag":72,"props":1094,"children":1095},{},[1096,1097,1103],{"type":76,"value":992},{"type":71,"tag":79,"props":1098,"children":1100},{"className":1099},[],[1101],{"type":76,"value":1102},"cell.style.width = ",{"type":76,"value":1104},"${column.getSize()}px``",{"type":71,"tag":72,"props":1106,"children":1107},{},[1108],{"type":76,"value":1109},"Sticky offsets use numeric sizes, so mismatched DOM widths create gaps or overlaps.",{"type":71,"tag":72,"props":1111,"children":1112},{},[1113,1114],{"type":76,"value":1022},{"type":71,"tag":79,"props":1115,"children":1117},{"className":1116},[],[1118],{"type":76,"value":1119},"docs\u002Fframework\u002Freact\u002Fguide\u002Fcolumn-pinning.md#useful-column-pinning-apis",{"type":71,"tag":101,"props":1121,"children":1123},{"id":1122},"api-discovery",[1124],{"type":76,"value":1125},"API Discovery",{"type":71,"tag":72,"props":1127,"children":1128},{},[1129,1131,1137],{"type":76,"value":1130},"Inspect ",{"type":71,"tag":79,"props":1132,"children":1134},{"className":1133},[],[1135],{"type":76,"value":1136},"node_modules\u002F@tanstack\u002Ftable-core\u002Fdist\u002Ffeatures\u002Fcolumn-pinning\u002F",{"type":76,"value":1138},"; use CSS logical properties for direction-aware rendering.",{"type":71,"tag":1140,"props":1141,"children":1142},"style",{},[1143],{"type":76,"value":1144},"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":1146,"total":1274},[1147,1159,1171,1181,1196,1208,1218,1228,1235,1245,1255,1265],{"slug":1148,"name":1148,"fn":1149,"description":1150,"org":1151,"tags":1152,"stars":23,"repoUrl":24,"updatedAt":1158},"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},[1153,1156,1157],{"name":1154,"slug":1155,"type":15},"Data Analysis","data-analysis",{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:25:59.429787",{"slug":1160,"name":1160,"fn":1161,"description":1162,"org":1163,"tags":1164,"stars":23,"repoUrl":24,"updatedAt":1170},"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},[1165,1168,1169],{"name":1166,"slug":1167,"type":15},"Debugging","debugging",{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:26:05.418735",{"slug":1172,"name":1172,"fn":1173,"description":1174,"org":1175,"tags":1176,"stars":23,"repoUrl":24,"updatedAt":1180},"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},[1177,1178,1179],{"name":1154,"slug":1155,"type":15},{"name":9,"slug":8,"type":15},{"name":17,"slug":18,"type":15},"2026-07-30T05:25:38.403427",{"slug":1182,"name":1182,"fn":1183,"description":1184,"org":1185,"tags":1186,"stars":23,"repoUrl":24,"updatedAt":1195},"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},[1187,1190,1191,1194],{"name":1188,"slug":1189,"type":15},"Data Pipeline","data-pipeline",{"name":21,"slug":22,"type":15},{"name":1192,"slug":1193,"type":15},"Performance","performance",{"name":9,"slug":8,"type":15},"2026-07-30T05:25:45.400104",{"slug":1197,"name":1197,"fn":1198,"description":1199,"org":1200,"tags":1201,"stars":23,"repoUrl":24,"updatedAt":1207},"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},[1202,1205,1206],{"name":1203,"slug":1204,"type":15},"Data Visualization","data-visualization",{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:25:41.397257",{"slug":1209,"name":1209,"fn":1210,"description":1211,"org":1212,"tags":1213,"stars":23,"repoUrl":24,"updatedAt":1217},"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},[1214,1215,1216],{"name":1154,"slug":1155,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:25:53.391632",{"slug":1219,"name":1219,"fn":1220,"description":1221,"org":1222,"tags":1223,"stars":23,"repoUrl":24,"updatedAt":1227},"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},[1224,1225,1226],{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":17,"slug":18,"type":15},"2026-07-30T05:26:03.37801",{"slug":4,"name":4,"fn":5,"description":6,"org":1229,"tags":1230,"stars":23,"repoUrl":24,"updatedAt":25},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1231,1232,1233,1234],{"name":13,"slug":14,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":17,"slug":18,"type":15},{"slug":1236,"name":1236,"fn":1237,"description":1238,"org":1239,"tags":1240,"stars":23,"repoUrl":24,"updatedAt":1244},"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},[1241,1242,1243],{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":17,"slug":18,"type":15},"2026-07-30T05:25:51.400011",{"slug":62,"name":62,"fn":1246,"description":1247,"org":1248,"tags":1249,"stars":23,"repoUrl":24,"updatedAt":1254},"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},[1250,1251,1252,1253],{"name":13,"slug":14,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":17,"slug":18,"type":15},"2026-07-30T05:25:48.703799",{"slug":1256,"name":1256,"fn":1257,"description":1258,"org":1259,"tags":1260,"stars":23,"repoUrl":24,"updatedAt":1264},"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},[1261,1262,1263],{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":17,"slug":18,"type":15},"2026-07-30T05:25:47.367943",{"slug":60,"name":60,"fn":1266,"description":1267,"org":1268,"tags":1269,"stars":23,"repoUrl":24,"updatedAt":1273},"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},[1270,1271,1272],{"name":1154,"slug":1155,"type":15},{"name":21,"slug":22,"type":15},{"name":17,"slug":18,"type":15},"2026-07-30T05:25:52.366295",125,{"items":1276,"total":1320},[1277,1283,1289,1295,1302,1308,1314],{"slug":1148,"name":1148,"fn":1149,"description":1150,"org":1278,"tags":1279,"stars":23,"repoUrl":24,"updatedAt":1158},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1280,1281,1282],{"name":1154,"slug":1155,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"slug":1160,"name":1160,"fn":1161,"description":1162,"org":1284,"tags":1285,"stars":23,"repoUrl":24,"updatedAt":1170},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1286,1287,1288],{"name":1166,"slug":1167,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"slug":1172,"name":1172,"fn":1173,"description":1174,"org":1290,"tags":1291,"stars":23,"repoUrl":24,"updatedAt":1180},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1292,1293,1294],{"name":1154,"slug":1155,"type":15},{"name":9,"slug":8,"type":15},{"name":17,"slug":18,"type":15},{"slug":1182,"name":1182,"fn":1183,"description":1184,"org":1296,"tags":1297,"stars":23,"repoUrl":24,"updatedAt":1195},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1298,1299,1300,1301],{"name":1188,"slug":1189,"type":15},{"name":21,"slug":22,"type":15},{"name":1192,"slug":1193,"type":15},{"name":9,"slug":8,"type":15},{"slug":1197,"name":1197,"fn":1198,"description":1199,"org":1303,"tags":1304,"stars":23,"repoUrl":24,"updatedAt":1207},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1305,1306,1307],{"name":1203,"slug":1204,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"slug":1209,"name":1209,"fn":1210,"description":1211,"org":1309,"tags":1310,"stars":23,"repoUrl":24,"updatedAt":1217},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1311,1312,1313],{"name":1154,"slug":1155,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"slug":1219,"name":1219,"fn":1220,"description":1221,"org":1315,"tags":1316,"stars":23,"repoUrl":24,"updatedAt":1227},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1317,1318,1319],{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":17,"slug":18,"type":15},30]