[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-tanstack-update-and-animate-charts":3,"mdc-b29xkk-key":48,"related-org-tanstack-update-and-animate-charts":2223,"related-repo-tanstack-update-and-animate-charts":2365},{"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":43,"sourceUrl":46,"mdContent":47},"update-and-animate-charts","update and animate TanStack Charts","Update TanStack Charts through stable definition and datum identity, configure SVG motion, and preserve correctness during resize, interruption, streaming, and rolling windows. Load for reactive data, animation, reordering, enter\u002Fexit, or stale interaction state.\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},"Animation","animation","tag",{"name":17,"slug":18,"type":15},"Charts","charts",{"name":9,"slug":8,"type":15},{"name":21,"slug":22,"type":15},"Frontend","frontend",608,"https:\u002F\u002Fgithub.com\u002FTanStack\u002Fcharts","2026-08-15T03:47:35.961106",null,40,[29,30,18,31,32,33,34,35,36,37,38,39,40,8,41,42],"accessible-charts","charting-library","d3","data-visualization","dataviz","grammar-of-graphics","javascript","octane","react","responsive-charts","ssr","svg","typescript","visualization",{"repoUrl":24,"stars":23,"forks":27,"topics":44,"description":45},[29,30,18,31,32,33,34,35,36,37,38,39,40,8,41,42],"A tiny TypeScript visualization grammar for responsive, accessible, server-rendered charts—powered by granular D3 primitives.","https:\u002F\u002Fgithub.com\u002FTanStack\u002Fcharts\u002Ftree\u002FHEAD\u002Fpackages\u002Fcharts-core\u002Fskills\u002Fupdate-and-animate-charts","---\nname: update-and-animate-charts\ndescription: >\n  Update TanStack Charts through stable definition and datum identity,\n  configure SVG motion, and preserve correctness during resize,\n  interruption, streaming, and rolling windows. Load for reactive data,\n  animation, reordering, enter\u002Fexit, or stale interaction state.\nmetadata:\n  type: core\n  library: '@tanstack\u002Fcharts'\n  library_version: '0.9.0'\nsources:\n  - 'TanStack\u002Fcharts:docs\u002Fguides\u002Fdynamic-data-and-animation.md'\n  - 'TanStack\u002Fcharts:docs\u002Freference\u002Fmotion.md'\n  - 'TanStack\u002Fcharts:docs\u002Freference\u002Fchart-definitions.md'\n---\n\n# Update and Animate Charts\n\nUse **trigger → inspect → decide → build → verify**. Definition identity is the application update boundary; mark and datum identities determine what survives it.\n\n## Setup\n\nCreate a new definition only when captured data or visual policy changes, then update the host with that definition:\n\n```ts\nimport { barX, defineChart, mountChart } from '@tanstack\u002Fcharts'\nimport { scaleBand } from '@tanstack\u002Fcharts\u002Fscales\u002Fband'\nimport { scaleLinear } from '@tanstack\u002Fcharts\u002Fscales\u002Flinear'\n\ninterface Row {\n  id: string\n  label: string\n  value: number\n}\n\nfunction createRanking(rows: readonly Row[]) {\n  const ranked = [...rows].sort((left, right) => right.value - left.value)\n\n  return defineChart({\n    svgAnimation: { duration: 280, easing: 'ease-out' },\n    marks: [barX(ranked, { id: 'ranking', x: 'value', y: 'label', key: 'id' })],\n    x: { scale: scaleLinear, nice: true },\n    y: { scale: () => scaleBand\u003Cstring>().padding(0.1) },\n  })\n}\n\nconst element = document.querySelector\u003CHTMLElement>('#ranking')\nif (!element) throw new Error('Missing #ranking')\n\nconst firstRows: readonly Row[] = [\n  { id: 'core', label: 'Core', value: 82 },\n  { id: 'react', label: 'React', value: 74 },\n]\n\nconst options = {\n  definition: createRanking(firstRows),\n  height: 280,\n  ariaLabel: 'Package ranking',\n}\n\nexport const host = mountChart(element, options)\n\nexport function updateRanking(rows: readonly Row[]) {\n  host.update({ ...options, definition: createRanking(rows) })\n}\n```\n\nFramework adapters use their native memoization primitive around the complete definition.\n\n## Core Patterns\n\n### Stabilize three identities\n\n1. **Definition identity** — stable until captured values change.\n2. **Mark `id`** — stable across conditional layers and reorder.\n3. **Datum `key`** — stable entity identity, independent of row position or mutable metrics.\n\nVerify that focus, selection, tooltip pinning, and exit motion follow the semantic entity after reorder.\n\n### Choose the smallest motion contract\n\n- `svgAnimation: true` for lightweight keyed SVG tweening.\n- `svgAnimation` options for duration, easing, and reduced-motion policy.\n- `motion()` renderer only when spring continuity, a timing cascade, or rolling path behavior is part of the product contract.\n- No animation for static export, server output, or changes where transition would imply false continuity.\n\nResize animation defaults off. Keep it off for ordinary observed containers.\n\n### Bound streaming work\n\nKeep source history outside the chart, pass a bounded visible window, preserve keys for retained samples, keep viewport state controlled, and coalesce upstream updates when only the latest state matters.\n\n### Verify interruption, not only endpoints\n\nApply an update during enter, update, exit, focus motion, resize, and rolling movement. The latest accepted definition must win; focused or selected semantic identity must not jump to another row.\n\n## Common Mistakes\n\n### CRITICAL Creating a fresh definition every render\n\nWrong: call the definition factory during every unrelated application render.\n\nCorrect: keep the definition stable until a captured row or visual-policy value changes; use the framework's native memoization primitive or update it deliberately in a vanilla owner.\n\nUnnecessary identity changes invalidate work and can reset presentation state.\n\nSource: definition-identity migration in `CHANGELOG.md`; `docs\u002Fguides\u002Fdynamic-data-and-animation.md`\n\n### CRITICAL Keying entities by row position\n\nWrong:\n\n```ts\nbarX(rows, { x: 'value', y: 'name', key: (_row, index) => index })\n```\n\nCorrect:\n\n```ts\nbarX(rows, { x: 'value', y: 'name', key: 'id' })\n```\n\nInsertion, deletion, and reorder retarget geometry, focus, and exit motion when index is identity.\n\nSource: `API-FRICTION.md` F-131, F-239; `docs\u002Fguides\u002Fdynamic-data-and-animation.md`\n\n### HIGH Animating every responsive resize\n\nWrong:\n\n```ts\nsvgAnimation: {\n  resize: true\n}\n```\n\nCorrect:\n\n```ts\nsvgAnimation: true\n```\n\nContainer observation can repeatedly restart transitions and leave layout behind the actual panel.\n\nSource: `API-FRICTION.md` F-129; `docs\u002Fguides\u002Fresponsive-charts.md`\n\n### HIGH Morphing rolling samples by index\n\nWrong: key a shifting time window by array index.\n\nCorrect: key each observation by stable timestamp or event ID and let removed\u002Fadded samples exit and enter at the window edges.\n\nIndex identity turns old times into different samples instead of preserving retained observations.\n\nSource: `API-FRICTION.md` F-240; `docs\u002Fguides\u002Fdynamic-data-and-animation.md`\n\n### HIGH Tension: motion continuity versus current-state correctness\n\nVisual continuity cannot make stale state acceptable. Verify rapid retargeting, interrupted exits, active focus, and resize while motion is in flight.\n\nSee also: `design-responsive-charts\u002FSKILL.md` and `debug-and-verify-charts\u002FSKILL.md`\n\nSee also: `build-chart-interactions\u002FSKILL.md` and `coordinate-charts-with-tanstack\u002FSKILL.md` — stable mark and datum identity preserves controlled interaction across local, synchronized, and optimistic updates.\n",{"data":49,"body":58},{"name":4,"description":6,"metadata":50,"sources":54},{"type":51,"library":52,"library_version":53},"core","@tanstack\u002Fcharts","0.9.0",[55,56,57],"TanStack\u002Fcharts:docs\u002Fguides\u002Fdynamic-data-and-animation.md","TanStack\u002Fcharts:docs\u002Freference\u002Fmotion.md","TanStack\u002Fcharts:docs\u002Freference\u002Fchart-definitions.md",{"type":59,"children":60},"root",[61,69,83,90,95,1573,1578,1584,1591,1637,1642,1648,1690,1695,1701,1706,1712,1717,1723,1729,1734,1739,1744,1763,1769,1774,1897,1902,2004,2009,2027,2033,2037,2083,2087,2109,2114,2131,2137,2142,2147,2152,2168,2174,2179,2198,2217],{"type":62,"tag":63,"props":64,"children":65},"element","h1",{"id":4},[66],{"type":67,"value":68},"text","Update and Animate Charts",{"type":62,"tag":70,"props":71,"children":72},"p",{},[73,75,81],{"type":67,"value":74},"Use ",{"type":62,"tag":76,"props":77,"children":78},"strong",{},[79],{"type":67,"value":80},"trigger → inspect → decide → build → verify",{"type":67,"value":82},". Definition identity is the application update boundary; mark and datum identities determine what survives it.",{"type":62,"tag":84,"props":85,"children":87},"h2",{"id":86},"setup",[88],{"type":67,"value":89},"Setup",{"type":62,"tag":70,"props":91,"children":92},{},[93],{"type":67,"value":94},"Create a new definition only when captured data or visual policy changes, then update the host with that definition:",{"type":62,"tag":96,"props":97,"children":102},"pre",{"className":98,"code":99,"language":100,"meta":101,"style":101},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { barX, defineChart, mountChart } from '@tanstack\u002Fcharts'\nimport { scaleBand } from '@tanstack\u002Fcharts\u002Fscales\u002Fband'\nimport { scaleLinear } from '@tanstack\u002Fcharts\u002Fscales\u002Flinear'\n\ninterface Row {\n  id: string\n  label: string\n  value: number\n}\n\nfunction createRanking(rows: readonly Row[]) {\n  const ranked = [...rows].sort((left, right) => right.value - left.value)\n\n  return defineChart({\n    svgAnimation: { duration: 280, easing: 'ease-out' },\n    marks: [barX(ranked, { id: 'ranking', x: 'value', y: 'label', key: 'id' })],\n    x: { scale: scaleLinear, nice: true },\n    y: { scale: () => scaleBand\u003Cstring>().padding(0.1) },\n  })\n}\n\nconst element = document.querySelector\u003CHTMLElement>('#ranking')\nif (!element) throw new Error('Missing #ranking')\n\nconst firstRows: readonly Row[] = [\n  { id: 'core', label: 'Core', value: 82 },\n  { id: 'react', label: 'React', value: 74 },\n]\n\nconst options = {\n  definition: createRanking(firstRows),\n  height: 280,\n  ariaLabel: 'Package ranking',\n}\n\nexport const host = mountChart(element, options)\n\nexport function updateRanking(rows: readonly Row[]) {\n  host.update({ ...options, definition: createRanking(rows) })\n}\n","ts","",[103],{"type":62,"tag":104,"props":105,"children":106},"code",{"__ignoreMap":101},[107,175,213,251,261,282,302,319,337,346,354,407,522,530,552,616,768,821,907,920,928,936,1003,1063,1071,1110,1187,1261,1270,1278,1299,1325,1346,1376,1384,1392,1433,1441,1491,1566],{"type":62,"tag":108,"props":109,"children":112},"span",{"class":110,"line":111},"line",1,[113,119,125,131,136,141,145,150,155,160,165,170],{"type":62,"tag":108,"props":114,"children":116},{"style":115},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[117],{"type":67,"value":118},"import",{"type":62,"tag":108,"props":120,"children":122},{"style":121},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[123],{"type":67,"value":124}," {",{"type":62,"tag":108,"props":126,"children":128},{"style":127},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[129],{"type":67,"value":130}," barX",{"type":62,"tag":108,"props":132,"children":133},{"style":121},[134],{"type":67,"value":135},",",{"type":62,"tag":108,"props":137,"children":138},{"style":127},[139],{"type":67,"value":140}," defineChart",{"type":62,"tag":108,"props":142,"children":143},{"style":121},[144],{"type":67,"value":135},{"type":62,"tag":108,"props":146,"children":147},{"style":127},[148],{"type":67,"value":149}," mountChart",{"type":62,"tag":108,"props":151,"children":152},{"style":121},[153],{"type":67,"value":154}," }",{"type":62,"tag":108,"props":156,"children":157},{"style":115},[158],{"type":67,"value":159}," from",{"type":62,"tag":108,"props":161,"children":162},{"style":121},[163],{"type":67,"value":164}," '",{"type":62,"tag":108,"props":166,"children":168},{"style":167},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[169],{"type":67,"value":52},{"type":62,"tag":108,"props":171,"children":172},{"style":121},[173],{"type":67,"value":174},"'\n",{"type":62,"tag":108,"props":176,"children":178},{"class":110,"line":177},2,[179,183,187,192,196,200,204,209],{"type":62,"tag":108,"props":180,"children":181},{"style":115},[182],{"type":67,"value":118},{"type":62,"tag":108,"props":184,"children":185},{"style":121},[186],{"type":67,"value":124},{"type":62,"tag":108,"props":188,"children":189},{"style":127},[190],{"type":67,"value":191}," scaleBand",{"type":62,"tag":108,"props":193,"children":194},{"style":121},[195],{"type":67,"value":154},{"type":62,"tag":108,"props":197,"children":198},{"style":115},[199],{"type":67,"value":159},{"type":62,"tag":108,"props":201,"children":202},{"style":121},[203],{"type":67,"value":164},{"type":62,"tag":108,"props":205,"children":206},{"style":167},[207],{"type":67,"value":208},"@tanstack\u002Fcharts\u002Fscales\u002Fband",{"type":62,"tag":108,"props":210,"children":211},{"style":121},[212],{"type":67,"value":174},{"type":62,"tag":108,"props":214,"children":216},{"class":110,"line":215},3,[217,221,225,230,234,238,242,247],{"type":62,"tag":108,"props":218,"children":219},{"style":115},[220],{"type":67,"value":118},{"type":62,"tag":108,"props":222,"children":223},{"style":121},[224],{"type":67,"value":124},{"type":62,"tag":108,"props":226,"children":227},{"style":127},[228],{"type":67,"value":229}," scaleLinear",{"type":62,"tag":108,"props":231,"children":232},{"style":121},[233],{"type":67,"value":154},{"type":62,"tag":108,"props":235,"children":236},{"style":115},[237],{"type":67,"value":159},{"type":62,"tag":108,"props":239,"children":240},{"style":121},[241],{"type":67,"value":164},{"type":62,"tag":108,"props":243,"children":244},{"style":167},[245],{"type":67,"value":246},"@tanstack\u002Fcharts\u002Fscales\u002Flinear",{"type":62,"tag":108,"props":248,"children":249},{"style":121},[250],{"type":67,"value":174},{"type":62,"tag":108,"props":252,"children":254},{"class":110,"line":253},4,[255],{"type":62,"tag":108,"props":256,"children":258},{"emptyLinePlaceholder":257},true,[259],{"type":67,"value":260},"\n",{"type":62,"tag":108,"props":262,"children":264},{"class":110,"line":263},5,[265,271,277],{"type":62,"tag":108,"props":266,"children":268},{"style":267},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[269],{"type":67,"value":270},"interface",{"type":62,"tag":108,"props":272,"children":274},{"style":273},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[275],{"type":67,"value":276}," Row",{"type":62,"tag":108,"props":278,"children":279},{"style":121},[280],{"type":67,"value":281}," {\n",{"type":62,"tag":108,"props":283,"children":285},{"class":110,"line":284},6,[286,292,297],{"type":62,"tag":108,"props":287,"children":289},{"style":288},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[290],{"type":67,"value":291},"  id",{"type":62,"tag":108,"props":293,"children":294},{"style":121},[295],{"type":67,"value":296},":",{"type":62,"tag":108,"props":298,"children":299},{"style":273},[300],{"type":67,"value":301}," string\n",{"type":62,"tag":108,"props":303,"children":305},{"class":110,"line":304},7,[306,311,315],{"type":62,"tag":108,"props":307,"children":308},{"style":288},[309],{"type":67,"value":310},"  label",{"type":62,"tag":108,"props":312,"children":313},{"style":121},[314],{"type":67,"value":296},{"type":62,"tag":108,"props":316,"children":317},{"style":273},[318],{"type":67,"value":301},{"type":62,"tag":108,"props":320,"children":322},{"class":110,"line":321},8,[323,328,332],{"type":62,"tag":108,"props":324,"children":325},{"style":288},[326],{"type":67,"value":327},"  value",{"type":62,"tag":108,"props":329,"children":330},{"style":121},[331],{"type":67,"value":296},{"type":62,"tag":108,"props":333,"children":334},{"style":273},[335],{"type":67,"value":336}," number\n",{"type":62,"tag":108,"props":338,"children":340},{"class":110,"line":339},9,[341],{"type":62,"tag":108,"props":342,"children":343},{"style":121},[344],{"type":67,"value":345},"}\n",{"type":62,"tag":108,"props":347,"children":349},{"class":110,"line":348},10,[350],{"type":62,"tag":108,"props":351,"children":352},{"emptyLinePlaceholder":257},[353],{"type":67,"value":260},{"type":62,"tag":108,"props":355,"children":357},{"class":110,"line":356},11,[358,363,369,374,380,384,389,393,398,403],{"type":62,"tag":108,"props":359,"children":360},{"style":267},[361],{"type":67,"value":362},"function",{"type":62,"tag":108,"props":364,"children":366},{"style":365},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[367],{"type":67,"value":368}," createRanking",{"type":62,"tag":108,"props":370,"children":371},{"style":121},[372],{"type":67,"value":373},"(",{"type":62,"tag":108,"props":375,"children":377},{"style":376},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[378],{"type":67,"value":379},"rows",{"type":62,"tag":108,"props":381,"children":382},{"style":121},[383],{"type":67,"value":296},{"type":62,"tag":108,"props":385,"children":386},{"style":267},[387],{"type":67,"value":388}," readonly",{"type":62,"tag":108,"props":390,"children":391},{"style":273},[392],{"type":67,"value":276},{"type":62,"tag":108,"props":394,"children":395},{"style":127},[396],{"type":67,"value":397},"[]",{"type":62,"tag":108,"props":399,"children":400},{"style":121},[401],{"type":67,"value":402},")",{"type":62,"tag":108,"props":404,"children":405},{"style":121},[406],{"type":67,"value":281},{"type":62,"tag":108,"props":408,"children":410},{"class":110,"line":409},12,[411,416,421,426,431,436,440,445,450,455,459,463,468,472,477,481,486,490,494,499,504,509,513,517],{"type":62,"tag":108,"props":412,"children":413},{"style":267},[414],{"type":67,"value":415},"  const",{"type":62,"tag":108,"props":417,"children":418},{"style":127},[419],{"type":67,"value":420}," ranked",{"type":62,"tag":108,"props":422,"children":423},{"style":121},[424],{"type":67,"value":425}," =",{"type":62,"tag":108,"props":427,"children":428},{"style":288},[429],{"type":67,"value":430}," [",{"type":62,"tag":108,"props":432,"children":433},{"style":121},[434],{"type":67,"value":435},"...",{"type":62,"tag":108,"props":437,"children":438},{"style":127},[439],{"type":67,"value":379},{"type":62,"tag":108,"props":441,"children":442},{"style":288},[443],{"type":67,"value":444},"]",{"type":62,"tag":108,"props":446,"children":447},{"style":121},[448],{"type":67,"value":449},".",{"type":62,"tag":108,"props":451,"children":452},{"style":365},[453],{"type":67,"value":454},"sort",{"type":62,"tag":108,"props":456,"children":457},{"style":288},[458],{"type":67,"value":373},{"type":62,"tag":108,"props":460,"children":461},{"style":121},[462],{"type":67,"value":373},{"type":62,"tag":108,"props":464,"children":465},{"style":376},[466],{"type":67,"value":467},"left",{"type":62,"tag":108,"props":469,"children":470},{"style":121},[471],{"type":67,"value":135},{"type":62,"tag":108,"props":473,"children":474},{"style":376},[475],{"type":67,"value":476}," right",{"type":62,"tag":108,"props":478,"children":479},{"style":121},[480],{"type":67,"value":402},{"type":62,"tag":108,"props":482,"children":483},{"style":267},[484],{"type":67,"value":485}," =>",{"type":62,"tag":108,"props":487,"children":488},{"style":127},[489],{"type":67,"value":476},{"type":62,"tag":108,"props":491,"children":492},{"style":121},[493],{"type":67,"value":449},{"type":62,"tag":108,"props":495,"children":496},{"style":127},[497],{"type":67,"value":498},"value",{"type":62,"tag":108,"props":500,"children":501},{"style":121},[502],{"type":67,"value":503}," -",{"type":62,"tag":108,"props":505,"children":506},{"style":127},[507],{"type":67,"value":508}," left",{"type":62,"tag":108,"props":510,"children":511},{"style":121},[512],{"type":67,"value":449},{"type":62,"tag":108,"props":514,"children":515},{"style":127},[516],{"type":67,"value":498},{"type":62,"tag":108,"props":518,"children":519},{"style":288},[520],{"type":67,"value":521},")\n",{"type":62,"tag":108,"props":523,"children":525},{"class":110,"line":524},13,[526],{"type":62,"tag":108,"props":527,"children":528},{"emptyLinePlaceholder":257},[529],{"type":67,"value":260},{"type":62,"tag":108,"props":531,"children":533},{"class":110,"line":532},14,[534,539,543,547],{"type":62,"tag":108,"props":535,"children":536},{"style":115},[537],{"type":67,"value":538},"  return",{"type":62,"tag":108,"props":540,"children":541},{"style":365},[542],{"type":67,"value":140},{"type":62,"tag":108,"props":544,"children":545},{"style":288},[546],{"type":67,"value":373},{"type":62,"tag":108,"props":548,"children":549},{"style":121},[550],{"type":67,"value":551},"{\n",{"type":62,"tag":108,"props":553,"children":555},{"class":110,"line":554},15,[556,561,565,569,574,578,584,588,593,597,601,606,611],{"type":62,"tag":108,"props":557,"children":558},{"style":288},[559],{"type":67,"value":560},"    svgAnimation",{"type":62,"tag":108,"props":562,"children":563},{"style":121},[564],{"type":67,"value":296},{"type":62,"tag":108,"props":566,"children":567},{"style":121},[568],{"type":67,"value":124},{"type":62,"tag":108,"props":570,"children":571},{"style":288},[572],{"type":67,"value":573}," duration",{"type":62,"tag":108,"props":575,"children":576},{"style":121},[577],{"type":67,"value":296},{"type":62,"tag":108,"props":579,"children":581},{"style":580},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[582],{"type":67,"value":583}," 280",{"type":62,"tag":108,"props":585,"children":586},{"style":121},[587],{"type":67,"value":135},{"type":62,"tag":108,"props":589,"children":590},{"style":288},[591],{"type":67,"value":592}," easing",{"type":62,"tag":108,"props":594,"children":595},{"style":121},[596],{"type":67,"value":296},{"type":62,"tag":108,"props":598,"children":599},{"style":121},[600],{"type":67,"value":164},{"type":62,"tag":108,"props":602,"children":603},{"style":167},[604],{"type":67,"value":605},"ease-out",{"type":62,"tag":108,"props":607,"children":608},{"style":121},[609],{"type":67,"value":610},"'",{"type":62,"tag":108,"props":612,"children":613},{"style":121},[614],{"type":67,"value":615}," },\n",{"type":62,"tag":108,"props":617,"children":619},{"class":110,"line":618},16,[620,625,629,633,638,642,647,651,655,660,664,668,673,677,681,686,690,694,698,702,706,711,715,719,724,728,732,737,741,745,750,754,758,763],{"type":62,"tag":108,"props":621,"children":622},{"style":288},[623],{"type":67,"value":624},"    marks",{"type":62,"tag":108,"props":626,"children":627},{"style":121},[628],{"type":67,"value":296},{"type":62,"tag":108,"props":630,"children":631},{"style":288},[632],{"type":67,"value":430},{"type":62,"tag":108,"props":634,"children":635},{"style":365},[636],{"type":67,"value":637},"barX",{"type":62,"tag":108,"props":639,"children":640},{"style":288},[641],{"type":67,"value":373},{"type":62,"tag":108,"props":643,"children":644},{"style":127},[645],{"type":67,"value":646},"ranked",{"type":62,"tag":108,"props":648,"children":649},{"style":121},[650],{"type":67,"value":135},{"type":62,"tag":108,"props":652,"children":653},{"style":121},[654],{"type":67,"value":124},{"type":62,"tag":108,"props":656,"children":657},{"style":288},[658],{"type":67,"value":659}," id",{"type":62,"tag":108,"props":661,"children":662},{"style":121},[663],{"type":67,"value":296},{"type":62,"tag":108,"props":665,"children":666},{"style":121},[667],{"type":67,"value":164},{"type":62,"tag":108,"props":669,"children":670},{"style":167},[671],{"type":67,"value":672},"ranking",{"type":62,"tag":108,"props":674,"children":675},{"style":121},[676],{"type":67,"value":610},{"type":62,"tag":108,"props":678,"children":679},{"style":121},[680],{"type":67,"value":135},{"type":62,"tag":108,"props":682,"children":683},{"style":288},[684],{"type":67,"value":685}," x",{"type":62,"tag":108,"props":687,"children":688},{"style":121},[689],{"type":67,"value":296},{"type":62,"tag":108,"props":691,"children":692},{"style":121},[693],{"type":67,"value":164},{"type":62,"tag":108,"props":695,"children":696},{"style":167},[697],{"type":67,"value":498},{"type":62,"tag":108,"props":699,"children":700},{"style":121},[701],{"type":67,"value":610},{"type":62,"tag":108,"props":703,"children":704},{"style":121},[705],{"type":67,"value":135},{"type":62,"tag":108,"props":707,"children":708},{"style":288},[709],{"type":67,"value":710}," y",{"type":62,"tag":108,"props":712,"children":713},{"style":121},[714],{"type":67,"value":296},{"type":62,"tag":108,"props":716,"children":717},{"style":121},[718],{"type":67,"value":164},{"type":62,"tag":108,"props":720,"children":721},{"style":167},[722],{"type":67,"value":723},"label",{"type":62,"tag":108,"props":725,"children":726},{"style":121},[727],{"type":67,"value":610},{"type":62,"tag":108,"props":729,"children":730},{"style":121},[731],{"type":67,"value":135},{"type":62,"tag":108,"props":733,"children":734},{"style":288},[735],{"type":67,"value":736}," key",{"type":62,"tag":108,"props":738,"children":739},{"style":121},[740],{"type":67,"value":296},{"type":62,"tag":108,"props":742,"children":743},{"style":121},[744],{"type":67,"value":164},{"type":62,"tag":108,"props":746,"children":747},{"style":167},[748],{"type":67,"value":749},"id",{"type":62,"tag":108,"props":751,"children":752},{"style":121},[753],{"type":67,"value":610},{"type":62,"tag":108,"props":755,"children":756},{"style":121},[757],{"type":67,"value":154},{"type":62,"tag":108,"props":759,"children":760},{"style":288},[761],{"type":67,"value":762},")]",{"type":62,"tag":108,"props":764,"children":765},{"style":121},[766],{"type":67,"value":767},",\n",{"type":62,"tag":108,"props":769,"children":771},{"class":110,"line":770},17,[772,777,781,785,790,794,798,802,807,811,817],{"type":62,"tag":108,"props":773,"children":774},{"style":288},[775],{"type":67,"value":776},"    x",{"type":62,"tag":108,"props":778,"children":779},{"style":121},[780],{"type":67,"value":296},{"type":62,"tag":108,"props":782,"children":783},{"style":121},[784],{"type":67,"value":124},{"type":62,"tag":108,"props":786,"children":787},{"style":288},[788],{"type":67,"value":789}," scale",{"type":62,"tag":108,"props":791,"children":792},{"style":121},[793],{"type":67,"value":296},{"type":62,"tag":108,"props":795,"children":796},{"style":127},[797],{"type":67,"value":229},{"type":62,"tag":108,"props":799,"children":800},{"style":121},[801],{"type":67,"value":135},{"type":62,"tag":108,"props":803,"children":804},{"style":288},[805],{"type":67,"value":806}," nice",{"type":62,"tag":108,"props":808,"children":809},{"style":121},[810],{"type":67,"value":296},{"type":62,"tag":108,"props":812,"children":814},{"style":813},"--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC",[815],{"type":67,"value":816}," true",{"type":62,"tag":108,"props":818,"children":819},{"style":121},[820],{"type":67,"value":615},{"type":62,"tag":108,"props":822,"children":824},{"class":110,"line":823},18,[825,830,834,838,842,846,851,855,859,864,869,874,879,883,888,892,897,902],{"type":62,"tag":108,"props":826,"children":827},{"style":288},[828],{"type":67,"value":829},"    y",{"type":62,"tag":108,"props":831,"children":832},{"style":121},[833],{"type":67,"value":296},{"type":62,"tag":108,"props":835,"children":836},{"style":121},[837],{"type":67,"value":124},{"type":62,"tag":108,"props":839,"children":840},{"style":365},[841],{"type":67,"value":789},{"type":62,"tag":108,"props":843,"children":844},{"style":121},[845],{"type":67,"value":296},{"type":62,"tag":108,"props":847,"children":848},{"style":121},[849],{"type":67,"value":850}," ()",{"type":62,"tag":108,"props":852,"children":853},{"style":267},[854],{"type":67,"value":485},{"type":62,"tag":108,"props":856,"children":857},{"style":365},[858],{"type":67,"value":191},{"type":62,"tag":108,"props":860,"children":861},{"style":121},[862],{"type":67,"value":863},"\u003C",{"type":62,"tag":108,"props":865,"children":866},{"style":273},[867],{"type":67,"value":868},"string",{"type":62,"tag":108,"props":870,"children":871},{"style":121},[872],{"type":67,"value":873},">",{"type":62,"tag":108,"props":875,"children":876},{"style":288},[877],{"type":67,"value":878},"()",{"type":62,"tag":108,"props":880,"children":881},{"style":121},[882],{"type":67,"value":449},{"type":62,"tag":108,"props":884,"children":885},{"style":365},[886],{"type":67,"value":887},"padding",{"type":62,"tag":108,"props":889,"children":890},{"style":288},[891],{"type":67,"value":373},{"type":62,"tag":108,"props":893,"children":894},{"style":580},[895],{"type":67,"value":896},"0.1",{"type":62,"tag":108,"props":898,"children":899},{"style":288},[900],{"type":67,"value":901},") ",{"type":62,"tag":108,"props":903,"children":904},{"style":121},[905],{"type":67,"value":906},"},\n",{"type":62,"tag":108,"props":908,"children":910},{"class":110,"line":909},19,[911,916],{"type":62,"tag":108,"props":912,"children":913},{"style":121},[914],{"type":67,"value":915},"  }",{"type":62,"tag":108,"props":917,"children":918},{"style":288},[919],{"type":67,"value":521},{"type":62,"tag":108,"props":921,"children":923},{"class":110,"line":922},20,[924],{"type":62,"tag":108,"props":925,"children":926},{"style":121},[927],{"type":67,"value":345},{"type":62,"tag":108,"props":929,"children":931},{"class":110,"line":930},21,[932],{"type":62,"tag":108,"props":933,"children":934},{"emptyLinePlaceholder":257},[935],{"type":67,"value":260},{"type":62,"tag":108,"props":937,"children":939},{"class":110,"line":938},22,[940,945,950,955,960,964,969,973,978,982,986,990,995,999],{"type":62,"tag":108,"props":941,"children":942},{"style":267},[943],{"type":67,"value":944},"const",{"type":62,"tag":108,"props":946,"children":947},{"style":127},[948],{"type":67,"value":949}," element ",{"type":62,"tag":108,"props":951,"children":952},{"style":121},[953],{"type":67,"value":954},"=",{"type":62,"tag":108,"props":956,"children":957},{"style":127},[958],{"type":67,"value":959}," document",{"type":62,"tag":108,"props":961,"children":962},{"style":121},[963],{"type":67,"value":449},{"type":62,"tag":108,"props":965,"children":966},{"style":365},[967],{"type":67,"value":968},"querySelector",{"type":62,"tag":108,"props":970,"children":971},{"style":121},[972],{"type":67,"value":863},{"type":62,"tag":108,"props":974,"children":975},{"style":273},[976],{"type":67,"value":977},"HTMLElement",{"type":62,"tag":108,"props":979,"children":980},{"style":121},[981],{"type":67,"value":873},{"type":62,"tag":108,"props":983,"children":984},{"style":127},[985],{"type":67,"value":373},{"type":62,"tag":108,"props":987,"children":988},{"style":121},[989],{"type":67,"value":610},{"type":62,"tag":108,"props":991,"children":992},{"style":167},[993],{"type":67,"value":994},"#ranking",{"type":62,"tag":108,"props":996,"children":997},{"style":121},[998],{"type":67,"value":610},{"type":62,"tag":108,"props":1000,"children":1001},{"style":127},[1002],{"type":67,"value":521},{"type":62,"tag":108,"props":1004,"children":1006},{"class":110,"line":1005},23,[1007,1012,1017,1022,1027,1032,1037,1042,1046,1050,1055,1059],{"type":62,"tag":108,"props":1008,"children":1009},{"style":115},[1010],{"type":67,"value":1011},"if",{"type":62,"tag":108,"props":1013,"children":1014},{"style":127},[1015],{"type":67,"value":1016}," (",{"type":62,"tag":108,"props":1018,"children":1019},{"style":121},[1020],{"type":67,"value":1021},"!",{"type":62,"tag":108,"props":1023,"children":1024},{"style":127},[1025],{"type":67,"value":1026},"element) ",{"type":62,"tag":108,"props":1028,"children":1029},{"style":115},[1030],{"type":67,"value":1031},"throw",{"type":62,"tag":108,"props":1033,"children":1034},{"style":121},[1035],{"type":67,"value":1036}," new",{"type":62,"tag":108,"props":1038,"children":1039},{"style":365},[1040],{"type":67,"value":1041}," Error",{"type":62,"tag":108,"props":1043,"children":1044},{"style":127},[1045],{"type":67,"value":373},{"type":62,"tag":108,"props":1047,"children":1048},{"style":121},[1049],{"type":67,"value":610},{"type":62,"tag":108,"props":1051,"children":1052},{"style":167},[1053],{"type":67,"value":1054},"Missing #ranking",{"type":62,"tag":108,"props":1056,"children":1057},{"style":121},[1058],{"type":67,"value":610},{"type":62,"tag":108,"props":1060,"children":1061},{"style":127},[1062],{"type":67,"value":521},{"type":62,"tag":108,"props":1064,"children":1066},{"class":110,"line":1065},24,[1067],{"type":62,"tag":108,"props":1068,"children":1069},{"emptyLinePlaceholder":257},[1070],{"type":67,"value":260},{"type":62,"tag":108,"props":1072,"children":1074},{"class":110,"line":1073},25,[1075,1079,1084,1088,1092,1096,1101,1105],{"type":62,"tag":108,"props":1076,"children":1077},{"style":267},[1078],{"type":67,"value":944},{"type":62,"tag":108,"props":1080,"children":1081},{"style":127},[1082],{"type":67,"value":1083}," firstRows",{"type":62,"tag":108,"props":1085,"children":1086},{"style":121},[1087],{"type":67,"value":296},{"type":62,"tag":108,"props":1089,"children":1090},{"style":267},[1091],{"type":67,"value":388},{"type":62,"tag":108,"props":1093,"children":1094},{"style":273},[1095],{"type":67,"value":276},{"type":62,"tag":108,"props":1097,"children":1098},{"style":127},[1099],{"type":67,"value":1100},"[] ",{"type":62,"tag":108,"props":1102,"children":1103},{"style":121},[1104],{"type":67,"value":954},{"type":62,"tag":108,"props":1106,"children":1107},{"style":127},[1108],{"type":67,"value":1109}," [\n",{"type":62,"tag":108,"props":1111,"children":1113},{"class":110,"line":1112},26,[1114,1119,1123,1127,1131,1135,1139,1143,1148,1152,1156,1161,1165,1169,1174,1178,1183],{"type":62,"tag":108,"props":1115,"children":1116},{"style":121},[1117],{"type":67,"value":1118},"  {",{"type":62,"tag":108,"props":1120,"children":1121},{"style":288},[1122],{"type":67,"value":659},{"type":62,"tag":108,"props":1124,"children":1125},{"style":121},[1126],{"type":67,"value":296},{"type":62,"tag":108,"props":1128,"children":1129},{"style":121},[1130],{"type":67,"value":164},{"type":62,"tag":108,"props":1132,"children":1133},{"style":167},[1134],{"type":67,"value":51},{"type":62,"tag":108,"props":1136,"children":1137},{"style":121},[1138],{"type":67,"value":610},{"type":62,"tag":108,"props":1140,"children":1141},{"style":121},[1142],{"type":67,"value":135},{"type":62,"tag":108,"props":1144,"children":1145},{"style":288},[1146],{"type":67,"value":1147}," label",{"type":62,"tag":108,"props":1149,"children":1150},{"style":121},[1151],{"type":67,"value":296},{"type":62,"tag":108,"props":1153,"children":1154},{"style":121},[1155],{"type":67,"value":164},{"type":62,"tag":108,"props":1157,"children":1158},{"style":167},[1159],{"type":67,"value":1160},"Core",{"type":62,"tag":108,"props":1162,"children":1163},{"style":121},[1164],{"type":67,"value":610},{"type":62,"tag":108,"props":1166,"children":1167},{"style":121},[1168],{"type":67,"value":135},{"type":62,"tag":108,"props":1170,"children":1171},{"style":288},[1172],{"type":67,"value":1173}," value",{"type":62,"tag":108,"props":1175,"children":1176},{"style":121},[1177],{"type":67,"value":296},{"type":62,"tag":108,"props":1179,"children":1180},{"style":580},[1181],{"type":67,"value":1182}," 82",{"type":62,"tag":108,"props":1184,"children":1185},{"style":121},[1186],{"type":67,"value":615},{"type":62,"tag":108,"props":1188,"children":1190},{"class":110,"line":1189},27,[1191,1195,1199,1203,1207,1211,1215,1219,1223,1227,1231,1236,1240,1244,1248,1252,1257],{"type":62,"tag":108,"props":1192,"children":1193},{"style":121},[1194],{"type":67,"value":1118},{"type":62,"tag":108,"props":1196,"children":1197},{"style":288},[1198],{"type":67,"value":659},{"type":62,"tag":108,"props":1200,"children":1201},{"style":121},[1202],{"type":67,"value":296},{"type":62,"tag":108,"props":1204,"children":1205},{"style":121},[1206],{"type":67,"value":164},{"type":62,"tag":108,"props":1208,"children":1209},{"style":167},[1210],{"type":67,"value":37},{"type":62,"tag":108,"props":1212,"children":1213},{"style":121},[1214],{"type":67,"value":610},{"type":62,"tag":108,"props":1216,"children":1217},{"style":121},[1218],{"type":67,"value":135},{"type":62,"tag":108,"props":1220,"children":1221},{"style":288},[1222],{"type":67,"value":1147},{"type":62,"tag":108,"props":1224,"children":1225},{"style":121},[1226],{"type":67,"value":296},{"type":62,"tag":108,"props":1228,"children":1229},{"style":121},[1230],{"type":67,"value":164},{"type":62,"tag":108,"props":1232,"children":1233},{"style":167},[1234],{"type":67,"value":1235},"React",{"type":62,"tag":108,"props":1237,"children":1238},{"style":121},[1239],{"type":67,"value":610},{"type":62,"tag":108,"props":1241,"children":1242},{"style":121},[1243],{"type":67,"value":135},{"type":62,"tag":108,"props":1245,"children":1246},{"style":288},[1247],{"type":67,"value":1173},{"type":62,"tag":108,"props":1249,"children":1250},{"style":121},[1251],{"type":67,"value":296},{"type":62,"tag":108,"props":1253,"children":1254},{"style":580},[1255],{"type":67,"value":1256}," 74",{"type":62,"tag":108,"props":1258,"children":1259},{"style":121},[1260],{"type":67,"value":615},{"type":62,"tag":108,"props":1262,"children":1264},{"class":110,"line":1263},28,[1265],{"type":62,"tag":108,"props":1266,"children":1267},{"style":127},[1268],{"type":67,"value":1269},"]\n",{"type":62,"tag":108,"props":1271,"children":1273},{"class":110,"line":1272},29,[1274],{"type":62,"tag":108,"props":1275,"children":1276},{"emptyLinePlaceholder":257},[1277],{"type":67,"value":260},{"type":62,"tag":108,"props":1279,"children":1281},{"class":110,"line":1280},30,[1282,1286,1291,1295],{"type":62,"tag":108,"props":1283,"children":1284},{"style":267},[1285],{"type":67,"value":944},{"type":62,"tag":108,"props":1287,"children":1288},{"style":127},[1289],{"type":67,"value":1290}," options ",{"type":62,"tag":108,"props":1292,"children":1293},{"style":121},[1294],{"type":67,"value":954},{"type":62,"tag":108,"props":1296,"children":1297},{"style":121},[1298],{"type":67,"value":281},{"type":62,"tag":108,"props":1300,"children":1302},{"class":110,"line":1301},31,[1303,1308,1312,1316,1321],{"type":62,"tag":108,"props":1304,"children":1305},{"style":288},[1306],{"type":67,"value":1307},"  definition",{"type":62,"tag":108,"props":1309,"children":1310},{"style":121},[1311],{"type":67,"value":296},{"type":62,"tag":108,"props":1313,"children":1314},{"style":365},[1315],{"type":67,"value":368},{"type":62,"tag":108,"props":1317,"children":1318},{"style":127},[1319],{"type":67,"value":1320},"(firstRows)",{"type":62,"tag":108,"props":1322,"children":1323},{"style":121},[1324],{"type":67,"value":767},{"type":62,"tag":108,"props":1326,"children":1328},{"class":110,"line":1327},32,[1329,1334,1338,1342],{"type":62,"tag":108,"props":1330,"children":1331},{"style":288},[1332],{"type":67,"value":1333},"  height",{"type":62,"tag":108,"props":1335,"children":1336},{"style":121},[1337],{"type":67,"value":296},{"type":62,"tag":108,"props":1339,"children":1340},{"style":580},[1341],{"type":67,"value":583},{"type":62,"tag":108,"props":1343,"children":1344},{"style":121},[1345],{"type":67,"value":767},{"type":62,"tag":108,"props":1347,"children":1349},{"class":110,"line":1348},33,[1350,1355,1359,1363,1368,1372],{"type":62,"tag":108,"props":1351,"children":1352},{"style":288},[1353],{"type":67,"value":1354},"  ariaLabel",{"type":62,"tag":108,"props":1356,"children":1357},{"style":121},[1358],{"type":67,"value":296},{"type":62,"tag":108,"props":1360,"children":1361},{"style":121},[1362],{"type":67,"value":164},{"type":62,"tag":108,"props":1364,"children":1365},{"style":167},[1366],{"type":67,"value":1367},"Package ranking",{"type":62,"tag":108,"props":1369,"children":1370},{"style":121},[1371],{"type":67,"value":610},{"type":62,"tag":108,"props":1373,"children":1374},{"style":121},[1375],{"type":67,"value":767},{"type":62,"tag":108,"props":1377,"children":1379},{"class":110,"line":1378},34,[1380],{"type":62,"tag":108,"props":1381,"children":1382},{"style":121},[1383],{"type":67,"value":345},{"type":62,"tag":108,"props":1385,"children":1387},{"class":110,"line":1386},35,[1388],{"type":62,"tag":108,"props":1389,"children":1390},{"emptyLinePlaceholder":257},[1391],{"type":67,"value":260},{"type":62,"tag":108,"props":1393,"children":1395},{"class":110,"line":1394},36,[1396,1401,1406,1411,1415,1419,1424,1428],{"type":62,"tag":108,"props":1397,"children":1398},{"style":115},[1399],{"type":67,"value":1400},"export",{"type":62,"tag":108,"props":1402,"children":1403},{"style":267},[1404],{"type":67,"value":1405}," const",{"type":62,"tag":108,"props":1407,"children":1408},{"style":127},[1409],{"type":67,"value":1410}," host ",{"type":62,"tag":108,"props":1412,"children":1413},{"style":121},[1414],{"type":67,"value":954},{"type":62,"tag":108,"props":1416,"children":1417},{"style":365},[1418],{"type":67,"value":149},{"type":62,"tag":108,"props":1420,"children":1421},{"style":127},[1422],{"type":67,"value":1423},"(element",{"type":62,"tag":108,"props":1425,"children":1426},{"style":121},[1427],{"type":67,"value":135},{"type":62,"tag":108,"props":1429,"children":1430},{"style":127},[1431],{"type":67,"value":1432}," options)\n",{"type":62,"tag":108,"props":1434,"children":1436},{"class":110,"line":1435},37,[1437],{"type":62,"tag":108,"props":1438,"children":1439},{"emptyLinePlaceholder":257},[1440],{"type":67,"value":260},{"type":62,"tag":108,"props":1442,"children":1444},{"class":110,"line":1443},38,[1445,1449,1454,1459,1463,1467,1471,1475,1479,1483,1487],{"type":62,"tag":108,"props":1446,"children":1447},{"style":115},[1448],{"type":67,"value":1400},{"type":62,"tag":108,"props":1450,"children":1451},{"style":267},[1452],{"type":67,"value":1453}," function",{"type":62,"tag":108,"props":1455,"children":1456},{"style":365},[1457],{"type":67,"value":1458}," updateRanking",{"type":62,"tag":108,"props":1460,"children":1461},{"style":121},[1462],{"type":67,"value":373},{"type":62,"tag":108,"props":1464,"children":1465},{"style":376},[1466],{"type":67,"value":379},{"type":62,"tag":108,"props":1468,"children":1469},{"style":121},[1470],{"type":67,"value":296},{"type":62,"tag":108,"props":1472,"children":1473},{"style":267},[1474],{"type":67,"value":388},{"type":62,"tag":108,"props":1476,"children":1477},{"style":273},[1478],{"type":67,"value":276},{"type":62,"tag":108,"props":1480,"children":1481},{"style":127},[1482],{"type":67,"value":397},{"type":62,"tag":108,"props":1484,"children":1485},{"style":121},[1486],{"type":67,"value":402},{"type":62,"tag":108,"props":1488,"children":1489},{"style":121},[1490],{"type":67,"value":281},{"type":62,"tag":108,"props":1492,"children":1494},{"class":110,"line":1493},39,[1495,1500,1504,1509,1513,1518,1523,1528,1532,1537,1541,1545,1549,1553,1557,1562],{"type":62,"tag":108,"props":1496,"children":1497},{"style":127},[1498],{"type":67,"value":1499},"  host",{"type":62,"tag":108,"props":1501,"children":1502},{"style":121},[1503],{"type":67,"value":449},{"type":62,"tag":108,"props":1505,"children":1506},{"style":365},[1507],{"type":67,"value":1508},"update",{"type":62,"tag":108,"props":1510,"children":1511},{"style":288},[1512],{"type":67,"value":373},{"type":62,"tag":108,"props":1514,"children":1515},{"style":121},[1516],{"type":67,"value":1517},"{",{"type":62,"tag":108,"props":1519,"children":1520},{"style":121},[1521],{"type":67,"value":1522}," ...",{"type":62,"tag":108,"props":1524,"children":1525},{"style":127},[1526],{"type":67,"value":1527},"options",{"type":62,"tag":108,"props":1529,"children":1530},{"style":121},[1531],{"type":67,"value":135},{"type":62,"tag":108,"props":1533,"children":1534},{"style":288},[1535],{"type":67,"value":1536}," definition",{"type":62,"tag":108,"props":1538,"children":1539},{"style":121},[1540],{"type":67,"value":296},{"type":62,"tag":108,"props":1542,"children":1543},{"style":365},[1544],{"type":67,"value":368},{"type":62,"tag":108,"props":1546,"children":1547},{"style":288},[1548],{"type":67,"value":373},{"type":62,"tag":108,"props":1550,"children":1551},{"style":127},[1552],{"type":67,"value":379},{"type":62,"tag":108,"props":1554,"children":1555},{"style":288},[1556],{"type":67,"value":901},{"type":62,"tag":108,"props":1558,"children":1559},{"style":121},[1560],{"type":67,"value":1561},"}",{"type":62,"tag":108,"props":1563,"children":1564},{"style":288},[1565],{"type":67,"value":521},{"type":62,"tag":108,"props":1567,"children":1568},{"class":110,"line":27},[1569],{"type":62,"tag":108,"props":1570,"children":1571},{"style":121},[1572],{"type":67,"value":345},{"type":62,"tag":70,"props":1574,"children":1575},{},[1576],{"type":67,"value":1577},"Framework adapters use their native memoization primitive around the complete definition.",{"type":62,"tag":84,"props":1579,"children":1581},{"id":1580},"core-patterns",[1582],{"type":67,"value":1583},"Core Patterns",{"type":62,"tag":1585,"props":1586,"children":1588},"h3",{"id":1587},"stabilize-three-identities",[1589],{"type":67,"value":1590},"Stabilize three identities",{"type":62,"tag":1592,"props":1593,"children":1594},"ol",{},[1595,1606,1621],{"type":62,"tag":1596,"props":1597,"children":1598},"li",{},[1599,1604],{"type":62,"tag":76,"props":1600,"children":1601},{},[1602],{"type":67,"value":1603},"Definition identity",{"type":67,"value":1605}," — stable until captured values change.",{"type":62,"tag":1596,"props":1607,"children":1608},{},[1609,1619],{"type":62,"tag":76,"props":1610,"children":1611},{},[1612,1614],{"type":67,"value":1613},"Mark ",{"type":62,"tag":104,"props":1615,"children":1617},{"className":1616},[],[1618],{"type":67,"value":749},{"type":67,"value":1620}," — stable across conditional layers and reorder.",{"type":62,"tag":1596,"props":1622,"children":1623},{},[1624,1635],{"type":62,"tag":76,"props":1625,"children":1626},{},[1627,1629],{"type":67,"value":1628},"Datum ",{"type":62,"tag":104,"props":1630,"children":1632},{"className":1631},[],[1633],{"type":67,"value":1634},"key",{"type":67,"value":1636}," — stable entity identity, independent of row position or mutable metrics.",{"type":62,"tag":70,"props":1638,"children":1639},{},[1640],{"type":67,"value":1641},"Verify that focus, selection, tooltip pinning, and exit motion follow the semantic entity after reorder.",{"type":62,"tag":1585,"props":1643,"children":1645},{"id":1644},"choose-the-smallest-motion-contract",[1646],{"type":67,"value":1647},"Choose the smallest motion contract",{"type":62,"tag":1649,"props":1650,"children":1651},"ul",{},[1652,1663,1674,1685],{"type":62,"tag":1596,"props":1653,"children":1654},{},[1655,1661],{"type":62,"tag":104,"props":1656,"children":1658},{"className":1657},[],[1659],{"type":67,"value":1660},"svgAnimation: true",{"type":67,"value":1662}," for lightweight keyed SVG tweening.",{"type":62,"tag":1596,"props":1664,"children":1665},{},[1666,1672],{"type":62,"tag":104,"props":1667,"children":1669},{"className":1668},[],[1670],{"type":67,"value":1671},"svgAnimation",{"type":67,"value":1673}," options for duration, easing, and reduced-motion policy.",{"type":62,"tag":1596,"props":1675,"children":1676},{},[1677,1683],{"type":62,"tag":104,"props":1678,"children":1680},{"className":1679},[],[1681],{"type":67,"value":1682},"motion()",{"type":67,"value":1684}," renderer only when spring continuity, a timing cascade, or rolling path behavior is part of the product contract.",{"type":62,"tag":1596,"props":1686,"children":1687},{},[1688],{"type":67,"value":1689},"No animation for static export, server output, or changes where transition would imply false continuity.",{"type":62,"tag":70,"props":1691,"children":1692},{},[1693],{"type":67,"value":1694},"Resize animation defaults off. Keep it off for ordinary observed containers.",{"type":62,"tag":1585,"props":1696,"children":1698},{"id":1697},"bound-streaming-work",[1699],{"type":67,"value":1700},"Bound streaming work",{"type":62,"tag":70,"props":1702,"children":1703},{},[1704],{"type":67,"value":1705},"Keep source history outside the chart, pass a bounded visible window, preserve keys for retained samples, keep viewport state controlled, and coalesce upstream updates when only the latest state matters.",{"type":62,"tag":1585,"props":1707,"children":1709},{"id":1708},"verify-interruption-not-only-endpoints",[1710],{"type":67,"value":1711},"Verify interruption, not only endpoints",{"type":62,"tag":70,"props":1713,"children":1714},{},[1715],{"type":67,"value":1716},"Apply an update during enter, update, exit, focus motion, resize, and rolling movement. The latest accepted definition must win; focused or selected semantic identity must not jump to another row.",{"type":62,"tag":84,"props":1718,"children":1720},{"id":1719},"common-mistakes",[1721],{"type":67,"value":1722},"Common Mistakes",{"type":62,"tag":1585,"props":1724,"children":1726},{"id":1725},"critical-creating-a-fresh-definition-every-render",[1727],{"type":67,"value":1728},"CRITICAL Creating a fresh definition every render",{"type":62,"tag":70,"props":1730,"children":1731},{},[1732],{"type":67,"value":1733},"Wrong: call the definition factory during every unrelated application render.",{"type":62,"tag":70,"props":1735,"children":1736},{},[1737],{"type":67,"value":1738},"Correct: keep the definition stable until a captured row or visual-policy value changes; use the framework's native memoization primitive or update it deliberately in a vanilla owner.",{"type":62,"tag":70,"props":1740,"children":1741},{},[1742],{"type":67,"value":1743},"Unnecessary identity changes invalidate work and can reset presentation state.",{"type":62,"tag":70,"props":1745,"children":1746},{},[1747,1749,1755,1757],{"type":67,"value":1748},"Source: definition-identity migration in ",{"type":62,"tag":104,"props":1750,"children":1752},{"className":1751},[],[1753],{"type":67,"value":1754},"CHANGELOG.md",{"type":67,"value":1756},"; ",{"type":62,"tag":104,"props":1758,"children":1760},{"className":1759},[],[1761],{"type":67,"value":1762},"docs\u002Fguides\u002Fdynamic-data-and-animation.md",{"type":62,"tag":1585,"props":1764,"children":1766},{"id":1765},"critical-keying-entities-by-row-position",[1767],{"type":67,"value":1768},"CRITICAL Keying entities by row position",{"type":62,"tag":70,"props":1770,"children":1771},{},[1772],{"type":67,"value":1773},"Wrong:",{"type":62,"tag":96,"props":1775,"children":1777},{"className":98,"code":1776,"language":100,"meta":101,"style":101},"barX(rows, { x: 'value', y: 'name', key: (_row, index) => index })\n",[1778],{"type":62,"tag":104,"props":1779,"children":1780},{"__ignoreMap":101},[1781],{"type":62,"tag":108,"props":1782,"children":1783},{"class":110,"line":111},[1784,1788,1793,1797,1801,1805,1809,1813,1817,1821,1825,1829,1833,1837,1842,1846,1850,1854,1858,1862,1867,1871,1876,1880,1884,1889,1893],{"type":62,"tag":108,"props":1785,"children":1786},{"style":365},[1787],{"type":67,"value":637},{"type":62,"tag":108,"props":1789,"children":1790},{"style":127},[1791],{"type":67,"value":1792},"(rows",{"type":62,"tag":108,"props":1794,"children":1795},{"style":121},[1796],{"type":67,"value":135},{"type":62,"tag":108,"props":1798,"children":1799},{"style":121},[1800],{"type":67,"value":124},{"type":62,"tag":108,"props":1802,"children":1803},{"style":288},[1804],{"type":67,"value":685},{"type":62,"tag":108,"props":1806,"children":1807},{"style":121},[1808],{"type":67,"value":296},{"type":62,"tag":108,"props":1810,"children":1811},{"style":121},[1812],{"type":67,"value":164},{"type":62,"tag":108,"props":1814,"children":1815},{"style":167},[1816],{"type":67,"value":498},{"type":62,"tag":108,"props":1818,"children":1819},{"style":121},[1820],{"type":67,"value":610},{"type":62,"tag":108,"props":1822,"children":1823},{"style":121},[1824],{"type":67,"value":135},{"type":62,"tag":108,"props":1826,"children":1827},{"style":288},[1828],{"type":67,"value":710},{"type":62,"tag":108,"props":1830,"children":1831},{"style":121},[1832],{"type":67,"value":296},{"type":62,"tag":108,"props":1834,"children":1835},{"style":121},[1836],{"type":67,"value":164},{"type":62,"tag":108,"props":1838,"children":1839},{"style":167},[1840],{"type":67,"value":1841},"name",{"type":62,"tag":108,"props":1843,"children":1844},{"style":121},[1845],{"type":67,"value":610},{"type":62,"tag":108,"props":1847,"children":1848},{"style":121},[1849],{"type":67,"value":135},{"type":62,"tag":108,"props":1851,"children":1852},{"style":365},[1853],{"type":67,"value":736},{"type":62,"tag":108,"props":1855,"children":1856},{"style":121},[1857],{"type":67,"value":296},{"type":62,"tag":108,"props":1859,"children":1860},{"style":121},[1861],{"type":67,"value":1016},{"type":62,"tag":108,"props":1863,"children":1864},{"style":376},[1865],{"type":67,"value":1866},"_row",{"type":62,"tag":108,"props":1868,"children":1869},{"style":121},[1870],{"type":67,"value":135},{"type":62,"tag":108,"props":1872,"children":1873},{"style":376},[1874],{"type":67,"value":1875}," index",{"type":62,"tag":108,"props":1877,"children":1878},{"style":121},[1879],{"type":67,"value":402},{"type":62,"tag":108,"props":1881,"children":1882},{"style":267},[1883],{"type":67,"value":485},{"type":62,"tag":108,"props":1885,"children":1886},{"style":127},[1887],{"type":67,"value":1888}," index ",{"type":62,"tag":108,"props":1890,"children":1891},{"style":121},[1892],{"type":67,"value":1561},{"type":62,"tag":108,"props":1894,"children":1895},{"style":127},[1896],{"type":67,"value":521},{"type":62,"tag":70,"props":1898,"children":1899},{},[1900],{"type":67,"value":1901},"Correct:",{"type":62,"tag":96,"props":1903,"children":1905},{"className":98,"code":1904,"language":100,"meta":101,"style":101},"barX(rows, { x: 'value', y: 'name', key: 'id' })\n",[1906],{"type":62,"tag":104,"props":1907,"children":1908},{"__ignoreMap":101},[1909],{"type":62,"tag":108,"props":1910,"children":1911},{"class":110,"line":111},[1912,1916,1920,1924,1928,1932,1936,1940,1944,1948,1952,1956,1960,1964,1968,1972,1976,1980,1984,1988,1992,1996,2000],{"type":62,"tag":108,"props":1913,"children":1914},{"style":365},[1915],{"type":67,"value":637},{"type":62,"tag":108,"props":1917,"children":1918},{"style":127},[1919],{"type":67,"value":1792},{"type":62,"tag":108,"props":1921,"children":1922},{"style":121},[1923],{"type":67,"value":135},{"type":62,"tag":108,"props":1925,"children":1926},{"style":121},[1927],{"type":67,"value":124},{"type":62,"tag":108,"props":1929,"children":1930},{"style":288},[1931],{"type":67,"value":685},{"type":62,"tag":108,"props":1933,"children":1934},{"style":121},[1935],{"type":67,"value":296},{"type":62,"tag":108,"props":1937,"children":1938},{"style":121},[1939],{"type":67,"value":164},{"type":62,"tag":108,"props":1941,"children":1942},{"style":167},[1943],{"type":67,"value":498},{"type":62,"tag":108,"props":1945,"children":1946},{"style":121},[1947],{"type":67,"value":610},{"type":62,"tag":108,"props":1949,"children":1950},{"style":121},[1951],{"type":67,"value":135},{"type":62,"tag":108,"props":1953,"children":1954},{"style":288},[1955],{"type":67,"value":710},{"type":62,"tag":108,"props":1957,"children":1958},{"style":121},[1959],{"type":67,"value":296},{"type":62,"tag":108,"props":1961,"children":1962},{"style":121},[1963],{"type":67,"value":164},{"type":62,"tag":108,"props":1965,"children":1966},{"style":167},[1967],{"type":67,"value":1841},{"type":62,"tag":108,"props":1969,"children":1970},{"style":121},[1971],{"type":67,"value":610},{"type":62,"tag":108,"props":1973,"children":1974},{"style":121},[1975],{"type":67,"value":135},{"type":62,"tag":108,"props":1977,"children":1978},{"style":288},[1979],{"type":67,"value":736},{"type":62,"tag":108,"props":1981,"children":1982},{"style":121},[1983],{"type":67,"value":296},{"type":62,"tag":108,"props":1985,"children":1986},{"style":121},[1987],{"type":67,"value":164},{"type":62,"tag":108,"props":1989,"children":1990},{"style":167},[1991],{"type":67,"value":749},{"type":62,"tag":108,"props":1993,"children":1994},{"style":121},[1995],{"type":67,"value":610},{"type":62,"tag":108,"props":1997,"children":1998},{"style":121},[1999],{"type":67,"value":154},{"type":62,"tag":108,"props":2001,"children":2002},{"style":127},[2003],{"type":67,"value":521},{"type":62,"tag":70,"props":2005,"children":2006},{},[2007],{"type":67,"value":2008},"Insertion, deletion, and reorder retarget geometry, focus, and exit motion when index is identity.",{"type":62,"tag":70,"props":2010,"children":2011},{},[2012,2014,2020,2022],{"type":67,"value":2013},"Source: ",{"type":62,"tag":104,"props":2015,"children":2017},{"className":2016},[],[2018],{"type":67,"value":2019},"API-FRICTION.md",{"type":67,"value":2021}," F-131, F-239; ",{"type":62,"tag":104,"props":2023,"children":2025},{"className":2024},[],[2026],{"type":67,"value":1762},{"type":62,"tag":1585,"props":2028,"children":2030},{"id":2029},"high-animating-every-responsive-resize",[2031],{"type":67,"value":2032},"HIGH Animating every responsive resize",{"type":62,"tag":70,"props":2034,"children":2035},{},[2036],{"type":67,"value":1773},{"type":62,"tag":96,"props":2038,"children":2040},{"className":98,"code":2039,"language":100,"meta":101,"style":101},"svgAnimation: {\n  resize: true\n}\n",[2041],{"type":62,"tag":104,"props":2042,"children":2043},{"__ignoreMap":101},[2044,2059,2076],{"type":62,"tag":108,"props":2045,"children":2046},{"class":110,"line":111},[2047,2051,2055],{"type":62,"tag":108,"props":2048,"children":2049},{"style":273},[2050],{"type":67,"value":1671},{"type":62,"tag":108,"props":2052,"children":2053},{"style":121},[2054],{"type":67,"value":296},{"type":62,"tag":108,"props":2056,"children":2057},{"style":121},[2058],{"type":67,"value":281},{"type":62,"tag":108,"props":2060,"children":2061},{"class":110,"line":177},[2062,2067,2071],{"type":62,"tag":108,"props":2063,"children":2064},{"style":273},[2065],{"type":67,"value":2066},"  resize",{"type":62,"tag":108,"props":2068,"children":2069},{"style":121},[2070],{"type":67,"value":296},{"type":62,"tag":108,"props":2072,"children":2073},{"style":813},[2074],{"type":67,"value":2075}," true\n",{"type":62,"tag":108,"props":2077,"children":2078},{"class":110,"line":215},[2079],{"type":62,"tag":108,"props":2080,"children":2081},{"style":121},[2082],{"type":67,"value":345},{"type":62,"tag":70,"props":2084,"children":2085},{},[2086],{"type":67,"value":1901},{"type":62,"tag":96,"props":2088,"children":2090},{"className":98,"code":2089,"language":100,"meta":101,"style":101},"svgAnimation: true\n",[2091],{"type":62,"tag":104,"props":2092,"children":2093},{"__ignoreMap":101},[2094],{"type":62,"tag":108,"props":2095,"children":2096},{"class":110,"line":111},[2097,2101,2105],{"type":62,"tag":108,"props":2098,"children":2099},{"style":273},[2100],{"type":67,"value":1671},{"type":62,"tag":108,"props":2102,"children":2103},{"style":121},[2104],{"type":67,"value":296},{"type":62,"tag":108,"props":2106,"children":2107},{"style":813},[2108],{"type":67,"value":2075},{"type":62,"tag":70,"props":2110,"children":2111},{},[2112],{"type":67,"value":2113},"Container observation can repeatedly restart transitions and leave layout behind the actual panel.",{"type":62,"tag":70,"props":2115,"children":2116},{},[2117,2118,2123,2125],{"type":67,"value":2013},{"type":62,"tag":104,"props":2119,"children":2121},{"className":2120},[],[2122],{"type":67,"value":2019},{"type":67,"value":2124}," F-129; ",{"type":62,"tag":104,"props":2126,"children":2128},{"className":2127},[],[2129],{"type":67,"value":2130},"docs\u002Fguides\u002Fresponsive-charts.md",{"type":62,"tag":1585,"props":2132,"children":2134},{"id":2133},"high-morphing-rolling-samples-by-index",[2135],{"type":67,"value":2136},"HIGH Morphing rolling samples by index",{"type":62,"tag":70,"props":2138,"children":2139},{},[2140],{"type":67,"value":2141},"Wrong: key a shifting time window by array index.",{"type":62,"tag":70,"props":2143,"children":2144},{},[2145],{"type":67,"value":2146},"Correct: key each observation by stable timestamp or event ID and let removed\u002Fadded samples exit and enter at the window edges.",{"type":62,"tag":70,"props":2148,"children":2149},{},[2150],{"type":67,"value":2151},"Index identity turns old times into different samples instead of preserving retained observations.",{"type":62,"tag":70,"props":2153,"children":2154},{},[2155,2156,2161,2163],{"type":67,"value":2013},{"type":62,"tag":104,"props":2157,"children":2159},{"className":2158},[],[2160],{"type":67,"value":2019},{"type":67,"value":2162}," F-240; ",{"type":62,"tag":104,"props":2164,"children":2166},{"className":2165},[],[2167],{"type":67,"value":1762},{"type":62,"tag":1585,"props":2169,"children":2171},{"id":2170},"high-tension-motion-continuity-versus-current-state-correctness",[2172],{"type":67,"value":2173},"HIGH Tension: motion continuity versus current-state correctness",{"type":62,"tag":70,"props":2175,"children":2176},{},[2177],{"type":67,"value":2178},"Visual continuity cannot make stale state acceptable. Verify rapid retargeting, interrupted exits, active focus, and resize while motion is in flight.",{"type":62,"tag":70,"props":2180,"children":2181},{},[2182,2184,2190,2192],{"type":67,"value":2183},"See also: ",{"type":62,"tag":104,"props":2185,"children":2187},{"className":2186},[],[2188],{"type":67,"value":2189},"design-responsive-charts\u002FSKILL.md",{"type":67,"value":2191}," and ",{"type":62,"tag":104,"props":2193,"children":2195},{"className":2194},[],[2196],{"type":67,"value":2197},"debug-and-verify-charts\u002FSKILL.md",{"type":62,"tag":70,"props":2199,"children":2200},{},[2201,2202,2208,2209,2215],{"type":67,"value":2183},{"type":62,"tag":104,"props":2203,"children":2205},{"className":2204},[],[2206],{"type":67,"value":2207},"build-chart-interactions\u002FSKILL.md",{"type":67,"value":2191},{"type":62,"tag":104,"props":2210,"children":2212},{"className":2211},[],[2213],{"type":67,"value":2214},"coordinate-charts-with-tanstack\u002FSKILL.md",{"type":67,"value":2216}," — stable mark and datum identity preserves controlled interaction across local, synchronized, and optimistic updates.",{"type":62,"tag":2218,"props":2219,"children":2220},"style",{},[2221],{"type":67,"value":2222},"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":2224,"total":2364},[2225,2239,2251,2263,2275,2290,2300,2310,2320,2333,2343,2354],{"slug":2226,"name":2226,"fn":2227,"description":2228,"org":2229,"tags":2230,"stars":2236,"repoUrl":2237,"updatedAt":2238},"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},[2231,2234,2235],{"name":2232,"slug":2233,"type":15},"Data Analysis","data-analysis",{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},28175,"https:\u002F\u002Fgithub.com\u002FTanStack\u002Ftable","2026-08-11T04:05:39.647403",{"slug":2240,"name":2240,"fn":2241,"description":2242,"org":2243,"tags":2244,"stars":2236,"repoUrl":2237,"updatedAt":2250},"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},[2245,2248,2249],{"name":2246,"slug":2247,"type":15},"Debugging","debugging",{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},"2026-08-11T04:05:45.454347",{"slug":2252,"name":2252,"fn":2253,"description":2254,"org":2255,"tags":2256,"stars":2236,"repoUrl":2237,"updatedAt":2262},"cell-selection","select rectangular cell ranges in tables","Select, add, and subtract rectangular cell ranges with cellSelectionFeature: ordered include\u002Fexclude operations keyed by row and column id, modifier dragging, final positive bounds, selection edges, render-order resolution under pinning, and autoResetCellSelection. Load for spreadsheet-style selection, “select all except” behavior, unexpected range changes after sorting or reordering, drag performance, or copy-to-clipboard.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[2257,2258,2259],{"name":2232,"slug":2233,"type":15},{"name":9,"slug":8,"type":15},{"name":2260,"slug":2261,"type":15},"UI Components","ui-components","2026-08-11T04:05:18.454719",{"slug":2264,"name":2264,"fn":2265,"description":2266,"org":2267,"tags":2268,"stars":2236,"repoUrl":2237,"updatedAt":2274},"cell-spanning","configure cell spanning in TanStack Table","Merge adjacent body cells with cellSpanningFeature: value-based rowSpan opt-in per column via spanRows, per-row colSpan via spanColumns, and the covered-cell convention where a span of 0 means skip the cell. Load for merged data grids, spans that disappear after sorting or paginating, ragged table rows, or a cell that unexpectedly merges down the whole tbody.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[2269,2271,2272,2273],{"name":2270,"slug":32,"type":15},"Data Visualization",{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":2260,"slug":2261,"type":15},"2026-08-11T04:05:16.471567",{"slug":2276,"name":2276,"fn":2277,"description":2278,"org":2279,"tags":2280,"stars":2236,"repoUrl":2237,"updatedAt":2289},"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},[2281,2284,2285,2288],{"name":2282,"slug":2283,"type":15},"Data Pipeline","data-pipeline",{"name":21,"slug":22,"type":15},{"name":2286,"slug":2287,"type":15},"Performance","performance",{"name":9,"slug":8,"type":15},"2026-08-11T04:05:25.45112",{"slug":2291,"name":2291,"fn":2292,"description":2293,"org":2294,"tags":2295,"stars":2236,"repoUrl":2237,"updatedAt":2299},"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},[2296,2297,2298],{"name":2270,"slug":32,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},"2026-08-11T04:05:21.505333",{"slug":2301,"name":2301,"fn":2302,"description":2303,"org":2304,"tags":2305,"stars":2236,"repoUrl":2237,"updatedAt":2309},"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},[2306,2307,2308],{"name":2232,"slug":2233,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},"2026-08-11T04:05:33.684468",{"slug":2311,"name":2311,"fn":2312,"description":2313,"org":2314,"tags":2315,"stars":2236,"repoUrl":2237,"updatedAt":2319},"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},[2316,2317,2318],{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":2260,"slug":2261,"type":15},"2026-08-11T04:05:43.445905",{"slug":2321,"name":2321,"fn":2322,"description":2323,"org":2324,"tags":2325,"stars":2236,"repoUrl":2237,"updatedAt":2332},"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},[2326,2329,2330,2331],{"name":2327,"slug":2328,"type":15},"CSS","css",{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":2260,"slug":2261,"type":15},"2026-08-11T04:05:35.453858",{"slug":2334,"name":2334,"fn":2335,"description":2336,"org":2337,"tags":2338,"stars":2236,"repoUrl":2237,"updatedAt":2342},"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},[2339,2340,2341],{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":2260,"slug":2261,"type":15},"2026-08-11T04:05:31.46447",{"slug":2344,"name":2344,"fn":2345,"description":2346,"org":2347,"tags":2348,"stars":2236,"repoUrl":2237,"updatedAt":2353},"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},[2349,2350,2351,2352],{"name":2327,"slug":2328,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":2260,"slug":2261,"type":15},"2026-08-11T04:05:28.559861",{"slug":2355,"name":2355,"fn":2356,"description":2357,"org":2358,"tags":2359,"stars":2236,"repoUrl":2237,"updatedAt":2363},"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},[2360,2361,2362],{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":2260,"slug":2261,"type":15},"2026-08-11T04:05:27.479925",139,{"items":2366,"total":409},[2367,2380,2391,2402,2416,2427,2438],{"slug":2368,"name":2368,"fn":2369,"description":2370,"org":2371,"tags":2372,"stars":23,"repoUrl":24,"updatedAt":2379},"build-chart-interactions","build chart interactions with TanStack Charts","Compose TanStack Charts focus, tooltips, controlled selections, cursors, brushes, zoom, keyboard behavior, and coordinated views. Load for hover, focus, pinning, crosshairs, clipping, gesture state, or chart-table coordination.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[2373,2374,2375,2378],{"name":17,"slug":18,"type":15},{"name":21,"slug":22,"type":15},{"name":2376,"slug":2377,"type":15},"Interaction","interaction",{"name":9,"slug":8,"type":15},"2026-08-15T03:47:32.82085",{"slug":2381,"name":2381,"fn":2382,"description":2383,"org":2384,"tags":2385,"stars":23,"repoUrl":24,"updatedAt":2390},"compose-marks-and-views","compose marks and views in TanStack Charts","Translate semantic encodings into TanStack Charts marks, layers, annotations, facets, and coordinated views. Load when choosing marks, combining layers, assigning interaction-point ownership, or deciding whether a custom mark is justified.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[2386,2387,2388,2389],{"name":17,"slug":18,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":2260,"slug":2261,"type":15},"2026-08-15T03:47:30.035164",{"slug":2392,"name":2392,"fn":2393,"description":2394,"org":2395,"tags":2396,"stars":23,"repoUrl":24,"updatedAt":2401},"configure-scales-guides-color","configure scales and guides for TanStack Charts","Configure TanStack Charts domains, scale factories, axes, margins, legends, grouping, and paint without taking ownership of responsive ranges. Load for blank geometry, scale inference, color semantics, shared domains, ticks, labels, or guide layout.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[2397,2398,2399,2400],{"name":17,"slug":18,"type":15},{"name":2270,"slug":32,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},"2026-08-15T03:47:40.802271",{"slug":2403,"name":2403,"fn":2404,"description":2405,"org":2406,"tags":2407,"stars":23,"repoUrl":24,"updatedAt":2415},"coordinate-charts-with-tanstack","coordinate TanStack Charts with data sources","Coordinate TanStack Charts with TanStack Table data grids, TanStack DB live queries and sync engines, TanStack Query server state, Store, Router, Virtual, Pacer, Start, and Form without duplicating ownership. Load for chart-grid linking, shared filtering or selection, live synchronized data, optimistic updates, URL-restorable chart state, virtualized detail views, paced streams, or dashboard-wide state.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[2408,2409,2410,2413,2414],{"name":17,"slug":18,"type":15},{"name":2232,"slug":2233,"type":15},{"name":2411,"slug":2412,"type":15},"Data Engineering","data-engineering",{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},"2026-08-15T03:47:37.086246",{"slug":2417,"name":2417,"fn":2418,"description":2419,"org":2420,"tags":2421,"stars":23,"repoUrl":24,"updatedAt":2426},"debug-and-verify-charts","debug and verify TanStack Charts","Diagnose TanStack Charts type, data, scale, geometry, focus, lifecycle, bundle, and performance failures with scenario-level evidence. Load for blank or clipped charts, misleading output, unsafe casts, migration parity, packed-package checks, or regressions.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[2422,2423,2424,2425],{"name":17,"slug":18,"type":15},{"name":2246,"slug":2247,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},"2026-08-15T03:47:33.503153",{"slug":2428,"name":2428,"fn":2429,"description":2430,"org":2431,"tags":2432,"stars":23,"repoUrl":24,"updatedAt":2437},"design-a-chart","design charts with TanStack Charts","Choose an honest visualization from a user story, metric, comparison, projection, target, or explanatory goal before selecting TanStack Charts marks. Load whenever a user asks to graph, chart, visualize, compare, forecast, project, explain, or communicate data.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[2433,2434,2435,2436],{"name":17,"slug":18,"type":15},{"name":2270,"slug":32,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},"2026-08-15T03:47:40.463333",{"slug":2439,"name":2439,"fn":2440,"description":2441,"org":2442,"tags":2443,"stars":23,"repoUrl":24,"updatedAt":2450},"design-responsive-charts","design responsive TanStack Charts","Make TanStack Charts adapt to measured containers, information priority, guide margins, SSR initial width, and final plot bounds. Load for narrow dashboards, overflow, label density, responsive topology, or pixel-space layouts.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[2444,2445,2446,2447,2449],{"name":17,"slug":18,"type":15},{"name":2270,"slug":32,"type":15},{"name":21,"slug":22,"type":15},{"name":2448,"slug":39,"type":15},"SSR",{"name":9,"slug":8,"type":15},"2026-08-15T03:47:36.306971"]