[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-tanstack-coordinate-charts-with-tanstack":3,"mdc-u7bxat-key":51,"related-repo-tanstack-coordinate-charts-with-tanstack":1420,"related-org-tanstack-coordinate-charts-with-tanstack":1505},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":26,"repoUrl":27,"updatedAt":28,"license":29,"forks":30,"topics":31,"repo":46,"sourceUrl":49,"mdContent":50},"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},"tanstack","TanStack","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Ftanstack.png",[12,16,19,22,23],{"name":13,"slug":14,"type":15},"Data Engineering","data-engineering","tag",{"name":17,"slug":18,"type":15},"Data Analysis","data-analysis",{"name":20,"slug":21,"type":15},"Charts","charts",{"name":9,"slug":8,"type":15},{"name":24,"slug":25,"type":15},"Frontend","frontend",608,"https:\u002F\u002Fgithub.com\u002FTanStack\u002Fcharts","2026-08-15T03:47:37.086246",null,40,[32,33,21,34,35,36,37,38,39,40,41,42,43,8,44,45],"accessible-charts","charting-library","d3","data-visualization","dataviz","grammar-of-graphics","javascript","octane","react","responsive-charts","ssr","svg","typescript","visualization",{"repoUrl":27,"stars":26,"forks":30,"topics":47,"description":48},[32,33,21,34,35,36,37,38,39,40,41,42,43,8,44,45],"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\u002Fcoordinate-charts-with-tanstack","---\nname: coordinate-charts-with-tanstack\ndescription: >\n  Coordinate TanStack Charts with TanStack Table data grids, TanStack DB live\n  queries and sync engines, TanStack Query server state, Store, Router,\n  Virtual, Pacer, Start, and Form without duplicating ownership. Load for\n  chart-grid linking, shared filtering or selection, live synchronized data,\n  optimistic updates, URL-restorable chart state, virtualized detail views,\n  paced streams, or dashboard-wide state.\nmetadata:\n  type: composition\n  library: '@tanstack\u002Fcharts'\n  library_version: '0.9.0'\nsources:\n  - 'TanStack\u002Fcharts:docs\u002Fguides\u002Finteractions-and-selections.md'\n  - 'TanStack\u002Fcharts:docs\u002Fguides\u002Ftransforms-and-reactivity.md'\n  - 'TanStack\u002Fcharts:docs\u002Fguides\u002Fdynamic-data-and-animation.md'\n  - 'https:\u002F\u002Ftanstack.com\u002Ftable\u002Flatest\u002Fdocs\u002Fguide\u002Frow-models'\n  - 'https:\u002F\u002Ftanstack.com\u002Fdb\u002Flatest\u002Fdocs\u002Fguides\u002Flive-queries'\n  - 'https:\u002F\u002Ftanstack.com\u002Fdb\u002Flatest\u002Fdocs\u002Fguides\u002Fmutations'\n  - 'https:\u002F\u002Ftanstack.com\u002Fquery\u002Flatest\u002Fdocs\u002Fframework\u002Freact\u002Fguides\u002Fimportant-defaults'\n---\n\n# Coordinate Charts With TanStack\n\nRun **trigger → inspect → decide → build → verify** across the complete product state graph. Assign one owner to each row projection, semantic key, filter, selection, viewport, revision, transaction, and timing policy before connecting libraries.\n\n## Setup\n\n### Inspect the ownership graph\n\nRecord these boundaries before writing adapters:\n\n| Concern                                                   | Normal owner                                   | Chart input                                                       |\n| --------------------------------------------------------- | ---------------------------------------------- | ----------------------------------------------------------------- |\n| Remote fetching, cache, freshness, retry                  | Query                                          | resolved semantic snapshot plus status                            |\n| Normalized records, live queries, optimistic transactions | DB or sync collection                          | keyed projection plus sync state                                  |\n| Grid filtering, sorting, grouping, pagination             | Table when grid-local; application when shared | explicitly chosen row-model frontier                              |\n| Visual encoding, focus, scene, renderer                   | Charts                                         | prepared rows and committed behavior options                      |\n| Shared client intent                                      | Store or application state                     | semantic filters, keys, and domains                               |\n| Restorable navigation state                               | Router search                                  | validated compact intent, never pixels or row objects             |\n| Mounted grid window                                       | Virtual                                        | no analytical effect unless “visible rows” is the stated question |\n| Burst, queue, or batch policy                             | Pacer                                          | paced source revisions or committed actions                       |\n| Draft controls and validation                             | Form or local state                            | committed, valid intent                                           |\n| SSR request and hydration                                 | Start or framework lifecycle                   | deterministic data revision, locale, and initial geometry         |\n\nFail condition: two libraries can independently change the same semantic state, or the chart receives rows without a named scope and revision.\n\n### Name each row projection\n\nDo not pass “the rows” between surfaces. Name the analytical frontier:\n\n- `sourceRows`: canonical records available to this client.\n- `eligibleRows`: records after shared business filters.\n- `summaryRows`: chart grain after aggregation or binning.\n- `detailRows`: grid grain before presentation-only sorting or pagination.\n- `visibleRows`: currently mounted virtual items; usually presentation only.\n- `selectedRows`: rows resolved from stable semantic keys.\n\nDocument whether grid sorting, filtering, grouping, pagination, or selection changes the chart question. Use the [Table and data-grid reference](references\u002Ftable-and-data-grid.md) for row-model choices.\n\n## Core Patterns\n\n### Derive once, project deliberately\n\nUse one semantic projection owner, then expose separate summary and detail outputs:\n\n```ts\nconst analysis = projectOrders(sourceRows, sharedIntent)\n\nconst tableData = analysis.detailRows\nconst chartDefinition = defineChart({\n  marks: [\n    lineY(analysis.summaryRows, {\n      x: 'day',\n      y: 'revenue',\n      color: 'region',\n      key: ({ datum }) => `${datum.region}:${datum.day.toISOString()}`,\n    }),\n  ],\n  x: { scale: scaleUtc },\n  y: { scale: scaleLinear },\n})\n```\n\nDo not independently restate eligibility, aggregation, or metric formulas in Table accessors and chart transforms. Presentation-only table sort and pagination may remain grid-owned.\n\n### Synchronize semantic intent, not component internals\n\nShare values such as:\n\n- entity IDs or aggregate bucket keys;\n- validated filters and comparison periods;\n- committed scale domains or time windows;\n- selected metric and grouping dimension;\n- data revision and “as of” status.\n\nKeep DOM nodes, row indexes, chart pixels, virtual indexes, tooltip bodies, and Table row objects inside their owning surface.\n\n### Separate transient, committed, and persisted state\n\nUse three phases where interaction can write data:\n\n1. **Transient**: hover, pointer position, drag preview, and active handle remain local and cheap.\n2. **Committed**: selection, accepted brush domain, and submitted filters update shared application or URL state once.\n3. **Persisted**: DB or server writes expose pending, confirmed, failed, and rollback states explicitly.\n\nDo not write every pointer frame to Router, Query, a sync engine, or a database transaction. Read [Query, DB, and sync](references\u002Fquery-db-and-sync.md) when records are live or writable.\n\n### Pace at the expensive boundary\n\nChoose timing by semantics:\n\n- debounce draft search or filters that should wait for intent;\n- throttle disposable visual previews that need bounded frequency;\n- queue writes when every operation must persist;\n- batch compatible mutations, telemetry, or source revisions;\n- preserve latest-wins correctness for chart presentation even when writes are lossless.\n\nDo not add a second scheduler around work already bounded by the chart host, live-query engine, or framework.\n\n### Verify the full synchronization sequence\n\n1. Load one named data revision into both surfaces.\n2. Apply a shared filter and prove summary totals reconcile with detail rows.\n3. Sort and paginate the grid; prove the chart changes only when intended.\n4. Select from chart and grid; prove both resolve the same semantic keys.\n5. Apply an optimistic update; distinguish pending from confirmed output.\n6. Roll back or receive a remote update; preserve surviving selection and clear missing keys.\n7. Restore URL state, hydrate, resize, virtualize, and destroy without duplicate subscriptions or writes.\n\n## Common Mistakes\n\n### CRITICAL Charting the final rendered row model accidentally\n\nWrong: feed the chart whatever rows the grid currently renders.\n\nCorrect: choose the filtered, grouped, pre-pagination, page, or selected frontier because it matches the stated comparison.\n\nTable row models can include sorting, grouping, expansion, and pagination. The final grid row model is a presentation result, not an automatically valid analytical dataset.\n\nSource: TanStack Table row-model guide\n\n### CRITICAL Keying coordination by row or virtual index\n\nWrong: synchronize `row.index`, array position, or virtual item index.\n\nCorrect: define an application-level entity or aggregate key and adapt both Table and Charts to it.\n\nIndexes change under sorting, filtering, pagination, streaming, and virtualization. Grouped Table row IDs may also contain presentation suffixes.\n\nSource: TanStack Table rows guide; `API-FRICTION.md` F-120, F-131, and F-239\n\n### CRITICAL Duplicating filtering and aggregation\n\nWrong: implement the KPI in a Table aggregation function and again in chart preparation.\n\nCorrect: derive one named semantic projection that can feed the grid, chart, table alternative, export, and tests.\n\nIndependent pipelines drift on null policy, denominators, time boundaries, and later product changes.\n\nSource: `docs\u002Fguides\u002Ftransforms-and-reactivity.md`; `API-FRICTION.md` F-128 and F-163\n\n### CRITICAL Creating a bidirectional state loop\n\nWrong: chart selection sets a Table filter whose change recreates chart selection and writes the URL again.\n\nCorrect: assign one owner, normalize one event into semantic intent, and let every surface derive from that state without echoing equivalent updates.\n\nFeedback loops cause redundant renders, history spam, flicker, and state that cannot settle.\n\nSource: Charts interaction ownership; TanStack Router search-state guidance\n\n### HIGH Treating optimistic rows as confirmed history\n\nWrong: animate an optimistic mutation into the ordinary historical series with no pending state.\n\nCorrect: carry sync or transaction status into the semantic projection, differentiate pending values when decision-relevant, and verify rollback.\n\nTanStack DB applies optimistic state before persistence and can replace or roll it back after synchronization.\n\nSource: TanStack DB mutations and live-query guides\n\n### CRITICAL Persisting every interaction frame\n\nWrong: write every brush, handle, resize, or pointer update through Router, Query invalidation, or a sync transaction.\n\nCorrect: preview locally, pace expensive derivation if necessary, and commit one semantic value at the interaction boundary.\n\nFrame-rate state is presentation. Persistence needs validation, cancellation, ordering, and conflict semantics.\n\nSource: Charts interaction guides; TanStack Pacer timing guidance\n\n### HIGH Treating virtualization as analytical filtering\n\nWrong: chart only mounted grid rows because Virtual currently exposes them.\n\nCorrect: chart the intended source or filtered projection; use mounted rows only for an explicitly viewport-scoped question.\n\nVirtual controls render work, not dataset meaning.\n\nSource: TanStack Virtual virtualizer reference\n\n## References\n\n- [Table and data grids](references\u002Ftable-and-data-grid.md)\n- [Query, DB, and sync engines](references\u002Fquery-db-and-sync.md)\n- [TanStack application state and lifecycle](references\u002Ftanstack-application-state.md)\n\nSee also: `prepare-chart-data\u002FSKILL.md`, `build-chart-interactions\u002FSKILL.md`, `update-and-animate-charts\u002FSKILL.md`, and `debug-and-verify-charts\u002FSKILL.md`.\n",{"data":52,"body":65},{"name":4,"description":6,"metadata":53,"sources":57},{"type":54,"library":55,"library_version":56},"composition","@tanstack\u002Fcharts","0.9.0",[58,59,60,61,62,63,64],"TanStack\u002Fcharts:docs\u002Fguides\u002Finteractions-and-selections.md","TanStack\u002Fcharts:docs\u002Fguides\u002Ftransforms-and-reactivity.md","TanStack\u002Fcharts:docs\u002Fguides\u002Fdynamic-data-and-animation.md","https:\u002F\u002Ftanstack.com\u002Ftable\u002Flatest\u002Fdocs\u002Fguide\u002Frow-models","https:\u002F\u002Ftanstack.com\u002Fdb\u002Flatest\u002Fdocs\u002Fguides\u002Flive-queries","https:\u002F\u002Ftanstack.com\u002Fdb\u002Flatest\u002Fdocs\u002Fguides\u002Fmutations","https:\u002F\u002Ftanstack.com\u002Fquery\u002Flatest\u002Fdocs\u002Fframework\u002Freact\u002Fguides\u002Fimportant-defaults",{"type":66,"children":67},"root",[68,76,90,97,104,109,321,326,332,337,409,423,429,435,440,931,936,942,947,975,980,986,991,1025,1038,1044,1049,1077,1082,1088,1126,1132,1138,1143,1148,1153,1158,1164,1177,1182,1187,1200,1206,1211,1216,1221,1241,1247,1252,1257,1262,1267,1273,1278,1283,1288,1293,1299,1304,1309,1314,1319,1325,1330,1335,1340,1345,1351,1379,1414],{"type":69,"tag":70,"props":71,"children":72},"element","h1",{"id":4},[73],{"type":74,"value":75},"text","Coordinate Charts With TanStack",{"type":69,"tag":77,"props":78,"children":79},"p",{},[80,82,88],{"type":74,"value":81},"Run ",{"type":69,"tag":83,"props":84,"children":85},"strong",{},[86],{"type":74,"value":87},"trigger → inspect → decide → build → verify",{"type":74,"value":89}," across the complete product state graph. Assign one owner to each row projection, semantic key, filter, selection, viewport, revision, transaction, and timing policy before connecting libraries.",{"type":69,"tag":91,"props":92,"children":94},"h2",{"id":93},"setup",[95],{"type":74,"value":96},"Setup",{"type":69,"tag":98,"props":99,"children":101},"h3",{"id":100},"inspect-the-ownership-graph",[102],{"type":74,"value":103},"Inspect the ownership graph",{"type":69,"tag":77,"props":105,"children":106},{},[107],{"type":74,"value":108},"Record these boundaries before writing adapters:",{"type":69,"tag":110,"props":111,"children":112},"table",{},[113,137],{"type":69,"tag":114,"props":115,"children":116},"thead",{},[117],{"type":69,"tag":118,"props":119,"children":120},"tr",{},[121,127,132],{"type":69,"tag":122,"props":123,"children":124},"th",{},[125],{"type":74,"value":126},"Concern",{"type":69,"tag":122,"props":128,"children":129},{},[130],{"type":74,"value":131},"Normal owner",{"type":69,"tag":122,"props":133,"children":134},{},[135],{"type":74,"value":136},"Chart input",{"type":69,"tag":138,"props":139,"children":140},"tbody",{},[141,160,178,196,213,231,249,267,285,303],{"type":69,"tag":118,"props":142,"children":143},{},[144,150,155],{"type":69,"tag":145,"props":146,"children":147},"td",{},[148],{"type":74,"value":149},"Remote fetching, cache, freshness, retry",{"type":69,"tag":145,"props":151,"children":152},{},[153],{"type":74,"value":154},"Query",{"type":69,"tag":145,"props":156,"children":157},{},[158],{"type":74,"value":159},"resolved semantic snapshot plus status",{"type":69,"tag":118,"props":161,"children":162},{},[163,168,173],{"type":69,"tag":145,"props":164,"children":165},{},[166],{"type":74,"value":167},"Normalized records, live queries, optimistic transactions",{"type":69,"tag":145,"props":169,"children":170},{},[171],{"type":74,"value":172},"DB or sync collection",{"type":69,"tag":145,"props":174,"children":175},{},[176],{"type":74,"value":177},"keyed projection plus sync state",{"type":69,"tag":118,"props":179,"children":180},{},[181,186,191],{"type":69,"tag":145,"props":182,"children":183},{},[184],{"type":74,"value":185},"Grid filtering, sorting, grouping, pagination",{"type":69,"tag":145,"props":187,"children":188},{},[189],{"type":74,"value":190},"Table when grid-local; application when shared",{"type":69,"tag":145,"props":192,"children":193},{},[194],{"type":74,"value":195},"explicitly chosen row-model frontier",{"type":69,"tag":118,"props":197,"children":198},{},[199,204,208],{"type":69,"tag":145,"props":200,"children":201},{},[202],{"type":74,"value":203},"Visual encoding, focus, scene, renderer",{"type":69,"tag":145,"props":205,"children":206},{},[207],{"type":74,"value":20},{"type":69,"tag":145,"props":209,"children":210},{},[211],{"type":74,"value":212},"prepared rows and committed behavior options",{"type":69,"tag":118,"props":214,"children":215},{},[216,221,226],{"type":69,"tag":145,"props":217,"children":218},{},[219],{"type":74,"value":220},"Shared client intent",{"type":69,"tag":145,"props":222,"children":223},{},[224],{"type":74,"value":225},"Store or application state",{"type":69,"tag":145,"props":227,"children":228},{},[229],{"type":74,"value":230},"semantic filters, keys, and domains",{"type":69,"tag":118,"props":232,"children":233},{},[234,239,244],{"type":69,"tag":145,"props":235,"children":236},{},[237],{"type":74,"value":238},"Restorable navigation state",{"type":69,"tag":145,"props":240,"children":241},{},[242],{"type":74,"value":243},"Router search",{"type":69,"tag":145,"props":245,"children":246},{},[247],{"type":74,"value":248},"validated compact intent, never pixels or row objects",{"type":69,"tag":118,"props":250,"children":251},{},[252,257,262],{"type":69,"tag":145,"props":253,"children":254},{},[255],{"type":74,"value":256},"Mounted grid window",{"type":69,"tag":145,"props":258,"children":259},{},[260],{"type":74,"value":261},"Virtual",{"type":69,"tag":145,"props":263,"children":264},{},[265],{"type":74,"value":266},"no analytical effect unless “visible rows” is the stated question",{"type":69,"tag":118,"props":268,"children":269},{},[270,275,280],{"type":69,"tag":145,"props":271,"children":272},{},[273],{"type":74,"value":274},"Burst, queue, or batch policy",{"type":69,"tag":145,"props":276,"children":277},{},[278],{"type":74,"value":279},"Pacer",{"type":69,"tag":145,"props":281,"children":282},{},[283],{"type":74,"value":284},"paced source revisions or committed actions",{"type":69,"tag":118,"props":286,"children":287},{},[288,293,298],{"type":69,"tag":145,"props":289,"children":290},{},[291],{"type":74,"value":292},"Draft controls and validation",{"type":69,"tag":145,"props":294,"children":295},{},[296],{"type":74,"value":297},"Form or local state",{"type":69,"tag":145,"props":299,"children":300},{},[301],{"type":74,"value":302},"committed, valid intent",{"type":69,"tag":118,"props":304,"children":305},{},[306,311,316],{"type":69,"tag":145,"props":307,"children":308},{},[309],{"type":74,"value":310},"SSR request and hydration",{"type":69,"tag":145,"props":312,"children":313},{},[314],{"type":74,"value":315},"Start or framework lifecycle",{"type":69,"tag":145,"props":317,"children":318},{},[319],{"type":74,"value":320},"deterministic data revision, locale, and initial geometry",{"type":69,"tag":77,"props":322,"children":323},{},[324],{"type":74,"value":325},"Fail condition: two libraries can independently change the same semantic state, or the chart receives rows without a named scope and revision.",{"type":69,"tag":98,"props":327,"children":329},{"id":328},"name-each-row-projection",[330],{"type":74,"value":331},"Name each row projection",{"type":69,"tag":77,"props":333,"children":334},{},[335],{"type":74,"value":336},"Do not pass “the rows” between surfaces. Name the analytical frontier:",{"type":69,"tag":338,"props":339,"children":340},"ul",{},[341,354,365,376,387,398],{"type":69,"tag":342,"props":343,"children":344},"li",{},[345,352],{"type":69,"tag":346,"props":347,"children":349},"code",{"className":348},[],[350],{"type":74,"value":351},"sourceRows",{"type":74,"value":353},": canonical records available to this client.",{"type":69,"tag":342,"props":355,"children":356},{},[357,363],{"type":69,"tag":346,"props":358,"children":360},{"className":359},[],[361],{"type":74,"value":362},"eligibleRows",{"type":74,"value":364},": records after shared business filters.",{"type":69,"tag":342,"props":366,"children":367},{},[368,374],{"type":69,"tag":346,"props":369,"children":371},{"className":370},[],[372],{"type":74,"value":373},"summaryRows",{"type":74,"value":375},": chart grain after aggregation or binning.",{"type":69,"tag":342,"props":377,"children":378},{},[379,385],{"type":69,"tag":346,"props":380,"children":382},{"className":381},[],[383],{"type":74,"value":384},"detailRows",{"type":74,"value":386},": grid grain before presentation-only sorting or pagination.",{"type":69,"tag":342,"props":388,"children":389},{},[390,396],{"type":69,"tag":346,"props":391,"children":393},{"className":392},[],[394],{"type":74,"value":395},"visibleRows",{"type":74,"value":397},": currently mounted virtual items; usually presentation only.",{"type":69,"tag":342,"props":399,"children":400},{},[401,407],{"type":69,"tag":346,"props":402,"children":404},{"className":403},[],[405],{"type":74,"value":406},"selectedRows",{"type":74,"value":408},": rows resolved from stable semantic keys.",{"type":69,"tag":77,"props":410,"children":411},{},[412,414,421],{"type":74,"value":413},"Document whether grid sorting, filtering, grouping, pagination, or selection changes the chart question. Use the ",{"type":69,"tag":415,"props":416,"children":418},"a",{"href":417},"references\u002Ftable-and-data-grid.md",[419],{"type":74,"value":420},"Table and data-grid reference",{"type":74,"value":422}," for row-model choices.",{"type":69,"tag":91,"props":424,"children":426},{"id":425},"core-patterns",[427],{"type":74,"value":428},"Core Patterns",{"type":69,"tag":98,"props":430,"children":432},{"id":431},"derive-once-project-deliberately",[433],{"type":74,"value":434},"Derive once, project deliberately",{"type":69,"tag":77,"props":436,"children":437},{},[438],{"type":74,"value":439},"Use one semantic projection owner, then expose separate summary and detail outputs:",{"type":69,"tag":441,"props":442,"children":447},"pre",{"className":443,"code":444,"language":445,"meta":446,"style":446},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const analysis = projectOrders(sourceRows, sharedIntent)\n\nconst tableData = analysis.detailRows\nconst chartDefinition = defineChart({\n  marks: [\n    lineY(analysis.summaryRows, {\n      x: 'day',\n      y: 'revenue',\n      color: 'region',\n      key: ({ datum }) => `${datum.region}:${datum.day.toISOString()}`,\n    }),\n  ],\n  x: { scale: scaleUtc },\n  y: { scale: scaleLinear },\n})\n","ts","",[448],{"type":69,"tag":346,"props":449,"children":450},{"__ignoreMap":446},[451,496,506,538,570,590,621,655,685,715,816,834,847,884,918],{"type":69,"tag":452,"props":453,"children":456},"span",{"class":454,"line":455},"line",1,[457,463,469,475,481,486,491],{"type":69,"tag":452,"props":458,"children":460},{"style":459},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[461],{"type":74,"value":462},"const",{"type":69,"tag":452,"props":464,"children":466},{"style":465},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[467],{"type":74,"value":468}," analysis ",{"type":69,"tag":452,"props":470,"children":472},{"style":471},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[473],{"type":74,"value":474},"=",{"type":69,"tag":452,"props":476,"children":478},{"style":477},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[479],{"type":74,"value":480}," projectOrders",{"type":69,"tag":452,"props":482,"children":483},{"style":465},[484],{"type":74,"value":485},"(sourceRows",{"type":69,"tag":452,"props":487,"children":488},{"style":471},[489],{"type":74,"value":490},",",{"type":69,"tag":452,"props":492,"children":493},{"style":465},[494],{"type":74,"value":495}," sharedIntent)\n",{"type":69,"tag":452,"props":497,"children":499},{"class":454,"line":498},2,[500],{"type":69,"tag":452,"props":501,"children":503},{"emptyLinePlaceholder":502},true,[504],{"type":74,"value":505},"\n",{"type":69,"tag":452,"props":507,"children":509},{"class":454,"line":508},3,[510,514,519,523,528,533],{"type":69,"tag":452,"props":511,"children":512},{"style":459},[513],{"type":74,"value":462},{"type":69,"tag":452,"props":515,"children":516},{"style":465},[517],{"type":74,"value":518}," tableData ",{"type":69,"tag":452,"props":520,"children":521},{"style":471},[522],{"type":74,"value":474},{"type":69,"tag":452,"props":524,"children":525},{"style":465},[526],{"type":74,"value":527}," analysis",{"type":69,"tag":452,"props":529,"children":530},{"style":471},[531],{"type":74,"value":532},".",{"type":69,"tag":452,"props":534,"children":535},{"style":465},[536],{"type":74,"value":537},"detailRows\n",{"type":69,"tag":452,"props":539,"children":541},{"class":454,"line":540},4,[542,546,551,555,560,565],{"type":69,"tag":452,"props":543,"children":544},{"style":459},[545],{"type":74,"value":462},{"type":69,"tag":452,"props":547,"children":548},{"style":465},[549],{"type":74,"value":550}," chartDefinition ",{"type":69,"tag":452,"props":552,"children":553},{"style":471},[554],{"type":74,"value":474},{"type":69,"tag":452,"props":556,"children":557},{"style":477},[558],{"type":74,"value":559}," defineChart",{"type":69,"tag":452,"props":561,"children":562},{"style":465},[563],{"type":74,"value":564},"(",{"type":69,"tag":452,"props":566,"children":567},{"style":471},[568],{"type":74,"value":569},"{\n",{"type":69,"tag":452,"props":571,"children":573},{"class":454,"line":572},5,[574,580,585],{"type":69,"tag":452,"props":575,"children":577},{"style":576},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[578],{"type":74,"value":579},"  marks",{"type":69,"tag":452,"props":581,"children":582},{"style":471},[583],{"type":74,"value":584},":",{"type":69,"tag":452,"props":586,"children":587},{"style":465},[588],{"type":74,"value":589}," [\n",{"type":69,"tag":452,"props":591,"children":593},{"class":454,"line":592},6,[594,599,604,608,612,616],{"type":69,"tag":452,"props":595,"children":596},{"style":477},[597],{"type":74,"value":598},"    lineY",{"type":69,"tag":452,"props":600,"children":601},{"style":465},[602],{"type":74,"value":603},"(analysis",{"type":69,"tag":452,"props":605,"children":606},{"style":471},[607],{"type":74,"value":532},{"type":69,"tag":452,"props":609,"children":610},{"style":465},[611],{"type":74,"value":373},{"type":69,"tag":452,"props":613,"children":614},{"style":471},[615],{"type":74,"value":490},{"type":69,"tag":452,"props":617,"children":618},{"style":471},[619],{"type":74,"value":620}," {\n",{"type":69,"tag":452,"props":622,"children":624},{"class":454,"line":623},7,[625,630,634,639,645,650],{"type":69,"tag":452,"props":626,"children":627},{"style":576},[628],{"type":74,"value":629},"      x",{"type":69,"tag":452,"props":631,"children":632},{"style":471},[633],{"type":74,"value":584},{"type":69,"tag":452,"props":635,"children":636},{"style":471},[637],{"type":74,"value":638}," '",{"type":69,"tag":452,"props":640,"children":642},{"style":641},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[643],{"type":74,"value":644},"day",{"type":69,"tag":452,"props":646,"children":647},{"style":471},[648],{"type":74,"value":649},"'",{"type":69,"tag":452,"props":651,"children":652},{"style":471},[653],{"type":74,"value":654},",\n",{"type":69,"tag":452,"props":656,"children":658},{"class":454,"line":657},8,[659,664,668,672,677,681],{"type":69,"tag":452,"props":660,"children":661},{"style":576},[662],{"type":74,"value":663},"      y",{"type":69,"tag":452,"props":665,"children":666},{"style":471},[667],{"type":74,"value":584},{"type":69,"tag":452,"props":669,"children":670},{"style":471},[671],{"type":74,"value":638},{"type":69,"tag":452,"props":673,"children":674},{"style":641},[675],{"type":74,"value":676},"revenue",{"type":69,"tag":452,"props":678,"children":679},{"style":471},[680],{"type":74,"value":649},{"type":69,"tag":452,"props":682,"children":683},{"style":471},[684],{"type":74,"value":654},{"type":69,"tag":452,"props":686,"children":688},{"class":454,"line":687},9,[689,694,698,702,707,711],{"type":69,"tag":452,"props":690,"children":691},{"style":576},[692],{"type":74,"value":693},"      color",{"type":69,"tag":452,"props":695,"children":696},{"style":471},[697],{"type":74,"value":584},{"type":69,"tag":452,"props":699,"children":700},{"style":471},[701],{"type":74,"value":638},{"type":69,"tag":452,"props":703,"children":704},{"style":641},[705],{"type":74,"value":706},"region",{"type":69,"tag":452,"props":708,"children":709},{"style":471},[710],{"type":74,"value":649},{"type":69,"tag":452,"props":712,"children":713},{"style":471},[714],{"type":74,"value":654},{"type":69,"tag":452,"props":716,"children":718},{"class":454,"line":717},10,[719,724,728,733,739,744,749,754,759,763,767,772,776,781,785,789,793,797,802,807,812],{"type":69,"tag":452,"props":720,"children":721},{"style":477},[722],{"type":74,"value":723},"      key",{"type":69,"tag":452,"props":725,"children":726},{"style":471},[727],{"type":74,"value":584},{"type":69,"tag":452,"props":729,"children":730},{"style":471},[731],{"type":74,"value":732}," ({",{"type":69,"tag":452,"props":734,"children":736},{"style":735},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[737],{"type":74,"value":738}," datum",{"type":69,"tag":452,"props":740,"children":741},{"style":471},[742],{"type":74,"value":743}," })",{"type":69,"tag":452,"props":745,"children":746},{"style":459},[747],{"type":74,"value":748}," =>",{"type":69,"tag":452,"props":750,"children":751},{"style":471},[752],{"type":74,"value":753}," `${",{"type":69,"tag":452,"props":755,"children":756},{"style":465},[757],{"type":74,"value":758},"datum",{"type":69,"tag":452,"props":760,"children":761},{"style":471},[762],{"type":74,"value":532},{"type":69,"tag":452,"props":764,"children":765},{"style":465},[766],{"type":74,"value":706},{"type":69,"tag":452,"props":768,"children":769},{"style":471},[770],{"type":74,"value":771},"}",{"type":69,"tag":452,"props":773,"children":774},{"style":641},[775],{"type":74,"value":584},{"type":69,"tag":452,"props":777,"children":778},{"style":471},[779],{"type":74,"value":780},"${",{"type":69,"tag":452,"props":782,"children":783},{"style":465},[784],{"type":74,"value":758},{"type":69,"tag":452,"props":786,"children":787},{"style":471},[788],{"type":74,"value":532},{"type":69,"tag":452,"props":790,"children":791},{"style":465},[792],{"type":74,"value":644},{"type":69,"tag":452,"props":794,"children":795},{"style":471},[796],{"type":74,"value":532},{"type":69,"tag":452,"props":798,"children":799},{"style":477},[800],{"type":74,"value":801},"toISOString",{"type":69,"tag":452,"props":803,"children":804},{"style":465},[805],{"type":74,"value":806},"()",{"type":69,"tag":452,"props":808,"children":809},{"style":471},[810],{"type":74,"value":811},"}`",{"type":69,"tag":452,"props":813,"children":814},{"style":471},[815],{"type":74,"value":654},{"type":69,"tag":452,"props":817,"children":819},{"class":454,"line":818},11,[820,825,830],{"type":69,"tag":452,"props":821,"children":822},{"style":471},[823],{"type":74,"value":824},"    }",{"type":69,"tag":452,"props":826,"children":827},{"style":465},[828],{"type":74,"value":829},")",{"type":69,"tag":452,"props":831,"children":832},{"style":471},[833],{"type":74,"value":654},{"type":69,"tag":452,"props":835,"children":837},{"class":454,"line":836},12,[838,843],{"type":69,"tag":452,"props":839,"children":840},{"style":465},[841],{"type":74,"value":842},"  ]",{"type":69,"tag":452,"props":844,"children":845},{"style":471},[846],{"type":74,"value":654},{"type":69,"tag":452,"props":848,"children":850},{"class":454,"line":849},13,[851,856,860,865,870,874,879],{"type":69,"tag":452,"props":852,"children":853},{"style":576},[854],{"type":74,"value":855},"  x",{"type":69,"tag":452,"props":857,"children":858},{"style":471},[859],{"type":74,"value":584},{"type":69,"tag":452,"props":861,"children":862},{"style":471},[863],{"type":74,"value":864}," {",{"type":69,"tag":452,"props":866,"children":867},{"style":576},[868],{"type":74,"value":869}," scale",{"type":69,"tag":452,"props":871,"children":872},{"style":471},[873],{"type":74,"value":584},{"type":69,"tag":452,"props":875,"children":876},{"style":465},[877],{"type":74,"value":878}," scaleUtc ",{"type":69,"tag":452,"props":880,"children":881},{"style":471},[882],{"type":74,"value":883},"},\n",{"type":69,"tag":452,"props":885,"children":887},{"class":454,"line":886},14,[888,893,897,901,905,909,914],{"type":69,"tag":452,"props":889,"children":890},{"style":576},[891],{"type":74,"value":892},"  y",{"type":69,"tag":452,"props":894,"children":895},{"style":471},[896],{"type":74,"value":584},{"type":69,"tag":452,"props":898,"children":899},{"style":471},[900],{"type":74,"value":864},{"type":69,"tag":452,"props":902,"children":903},{"style":576},[904],{"type":74,"value":869},{"type":69,"tag":452,"props":906,"children":907},{"style":471},[908],{"type":74,"value":584},{"type":69,"tag":452,"props":910,"children":911},{"style":465},[912],{"type":74,"value":913}," scaleLinear ",{"type":69,"tag":452,"props":915,"children":916},{"style":471},[917],{"type":74,"value":883},{"type":69,"tag":452,"props":919,"children":921},{"class":454,"line":920},15,[922,926],{"type":69,"tag":452,"props":923,"children":924},{"style":471},[925],{"type":74,"value":771},{"type":69,"tag":452,"props":927,"children":928},{"style":465},[929],{"type":74,"value":930},")\n",{"type":69,"tag":77,"props":932,"children":933},{},[934],{"type":74,"value":935},"Do not independently restate eligibility, aggregation, or metric formulas in Table accessors and chart transforms. Presentation-only table sort and pagination may remain grid-owned.",{"type":69,"tag":98,"props":937,"children":939},{"id":938},"synchronize-semantic-intent-not-component-internals",[940],{"type":74,"value":941},"Synchronize semantic intent, not component internals",{"type":69,"tag":77,"props":943,"children":944},{},[945],{"type":74,"value":946},"Share values such as:",{"type":69,"tag":338,"props":948,"children":949},{},[950,955,960,965,970],{"type":69,"tag":342,"props":951,"children":952},{},[953],{"type":74,"value":954},"entity IDs or aggregate bucket keys;",{"type":69,"tag":342,"props":956,"children":957},{},[958],{"type":74,"value":959},"validated filters and comparison periods;",{"type":69,"tag":342,"props":961,"children":962},{},[963],{"type":74,"value":964},"committed scale domains or time windows;",{"type":69,"tag":342,"props":966,"children":967},{},[968],{"type":74,"value":969},"selected metric and grouping dimension;",{"type":69,"tag":342,"props":971,"children":972},{},[973],{"type":74,"value":974},"data revision and “as of” status.",{"type":69,"tag":77,"props":976,"children":977},{},[978],{"type":74,"value":979},"Keep DOM nodes, row indexes, chart pixels, virtual indexes, tooltip bodies, and Table row objects inside their owning surface.",{"type":69,"tag":98,"props":981,"children":983},{"id":982},"separate-transient-committed-and-persisted-state",[984],{"type":74,"value":985},"Separate transient, committed, and persisted state",{"type":69,"tag":77,"props":987,"children":988},{},[989],{"type":74,"value":990},"Use three phases where interaction can write data:",{"type":69,"tag":992,"props":993,"children":994},"ol",{},[995,1005,1015],{"type":69,"tag":342,"props":996,"children":997},{},[998,1003],{"type":69,"tag":83,"props":999,"children":1000},{},[1001],{"type":74,"value":1002},"Transient",{"type":74,"value":1004},": hover, pointer position, drag preview, and active handle remain local and cheap.",{"type":69,"tag":342,"props":1006,"children":1007},{},[1008,1013],{"type":69,"tag":83,"props":1009,"children":1010},{},[1011],{"type":74,"value":1012},"Committed",{"type":74,"value":1014},": selection, accepted brush domain, and submitted filters update shared application or URL state once.",{"type":69,"tag":342,"props":1016,"children":1017},{},[1018,1023],{"type":69,"tag":83,"props":1019,"children":1020},{},[1021],{"type":74,"value":1022},"Persisted",{"type":74,"value":1024},": DB or server writes expose pending, confirmed, failed, and rollback states explicitly.",{"type":69,"tag":77,"props":1026,"children":1027},{},[1028,1030,1036],{"type":74,"value":1029},"Do not write every pointer frame to Router, Query, a sync engine, or a database transaction. Read ",{"type":69,"tag":415,"props":1031,"children":1033},{"href":1032},"references\u002Fquery-db-and-sync.md",[1034],{"type":74,"value":1035},"Query, DB, and sync",{"type":74,"value":1037}," when records are live or writable.",{"type":69,"tag":98,"props":1039,"children":1041},{"id":1040},"pace-at-the-expensive-boundary",[1042],{"type":74,"value":1043},"Pace at the expensive boundary",{"type":69,"tag":77,"props":1045,"children":1046},{},[1047],{"type":74,"value":1048},"Choose timing by semantics:",{"type":69,"tag":338,"props":1050,"children":1051},{},[1052,1057,1062,1067,1072],{"type":69,"tag":342,"props":1053,"children":1054},{},[1055],{"type":74,"value":1056},"debounce draft search or filters that should wait for intent;",{"type":69,"tag":342,"props":1058,"children":1059},{},[1060],{"type":74,"value":1061},"throttle disposable visual previews that need bounded frequency;",{"type":69,"tag":342,"props":1063,"children":1064},{},[1065],{"type":74,"value":1066},"queue writes when every operation must persist;",{"type":69,"tag":342,"props":1068,"children":1069},{},[1070],{"type":74,"value":1071},"batch compatible mutations, telemetry, or source revisions;",{"type":69,"tag":342,"props":1073,"children":1074},{},[1075],{"type":74,"value":1076},"preserve latest-wins correctness for chart presentation even when writes are lossless.",{"type":69,"tag":77,"props":1078,"children":1079},{},[1080],{"type":74,"value":1081},"Do not add a second scheduler around work already bounded by the chart host, live-query engine, or framework.",{"type":69,"tag":98,"props":1083,"children":1085},{"id":1084},"verify-the-full-synchronization-sequence",[1086],{"type":74,"value":1087},"Verify the full synchronization sequence",{"type":69,"tag":992,"props":1089,"children":1090},{},[1091,1096,1101,1106,1111,1116,1121],{"type":69,"tag":342,"props":1092,"children":1093},{},[1094],{"type":74,"value":1095},"Load one named data revision into both surfaces.",{"type":69,"tag":342,"props":1097,"children":1098},{},[1099],{"type":74,"value":1100},"Apply a shared filter and prove summary totals reconcile with detail rows.",{"type":69,"tag":342,"props":1102,"children":1103},{},[1104],{"type":74,"value":1105},"Sort and paginate the grid; prove the chart changes only when intended.",{"type":69,"tag":342,"props":1107,"children":1108},{},[1109],{"type":74,"value":1110},"Select from chart and grid; prove both resolve the same semantic keys.",{"type":69,"tag":342,"props":1112,"children":1113},{},[1114],{"type":74,"value":1115},"Apply an optimistic update; distinguish pending from confirmed output.",{"type":69,"tag":342,"props":1117,"children":1118},{},[1119],{"type":74,"value":1120},"Roll back or receive a remote update; preserve surviving selection and clear missing keys.",{"type":69,"tag":342,"props":1122,"children":1123},{},[1124],{"type":74,"value":1125},"Restore URL state, hydrate, resize, virtualize, and destroy without duplicate subscriptions or writes.",{"type":69,"tag":91,"props":1127,"children":1129},{"id":1128},"common-mistakes",[1130],{"type":74,"value":1131},"Common Mistakes",{"type":69,"tag":98,"props":1133,"children":1135},{"id":1134},"critical-charting-the-final-rendered-row-model-accidentally",[1136],{"type":74,"value":1137},"CRITICAL Charting the final rendered row model accidentally",{"type":69,"tag":77,"props":1139,"children":1140},{},[1141],{"type":74,"value":1142},"Wrong: feed the chart whatever rows the grid currently renders.",{"type":69,"tag":77,"props":1144,"children":1145},{},[1146],{"type":74,"value":1147},"Correct: choose the filtered, grouped, pre-pagination, page, or selected frontier because it matches the stated comparison.",{"type":69,"tag":77,"props":1149,"children":1150},{},[1151],{"type":74,"value":1152},"Table row models can include sorting, grouping, expansion, and pagination. The final grid row model is a presentation result, not an automatically valid analytical dataset.",{"type":69,"tag":77,"props":1154,"children":1155},{},[1156],{"type":74,"value":1157},"Source: TanStack Table row-model guide",{"type":69,"tag":98,"props":1159,"children":1161},{"id":1160},"critical-keying-coordination-by-row-or-virtual-index",[1162],{"type":74,"value":1163},"CRITICAL Keying coordination by row or virtual index",{"type":69,"tag":77,"props":1165,"children":1166},{},[1167,1169,1175],{"type":74,"value":1168},"Wrong: synchronize ",{"type":69,"tag":346,"props":1170,"children":1172},{"className":1171},[],[1173],{"type":74,"value":1174},"row.index",{"type":74,"value":1176},", array position, or virtual item index.",{"type":69,"tag":77,"props":1178,"children":1179},{},[1180],{"type":74,"value":1181},"Correct: define an application-level entity or aggregate key and adapt both Table and Charts to it.",{"type":69,"tag":77,"props":1183,"children":1184},{},[1185],{"type":74,"value":1186},"Indexes change under sorting, filtering, pagination, streaming, and virtualization. Grouped Table row IDs may also contain presentation suffixes.",{"type":69,"tag":77,"props":1188,"children":1189},{},[1190,1192,1198],{"type":74,"value":1191},"Source: TanStack Table rows guide; ",{"type":69,"tag":346,"props":1193,"children":1195},{"className":1194},[],[1196],{"type":74,"value":1197},"API-FRICTION.md",{"type":74,"value":1199}," F-120, F-131, and F-239",{"type":69,"tag":98,"props":1201,"children":1203},{"id":1202},"critical-duplicating-filtering-and-aggregation",[1204],{"type":74,"value":1205},"CRITICAL Duplicating filtering and aggregation",{"type":69,"tag":77,"props":1207,"children":1208},{},[1209],{"type":74,"value":1210},"Wrong: implement the KPI in a Table aggregation function and again in chart preparation.",{"type":69,"tag":77,"props":1212,"children":1213},{},[1214],{"type":74,"value":1215},"Correct: derive one named semantic projection that can feed the grid, chart, table alternative, export, and tests.",{"type":69,"tag":77,"props":1217,"children":1218},{},[1219],{"type":74,"value":1220},"Independent pipelines drift on null policy, denominators, time boundaries, and later product changes.",{"type":69,"tag":77,"props":1222,"children":1223},{},[1224,1226,1232,1234,1239],{"type":74,"value":1225},"Source: ",{"type":69,"tag":346,"props":1227,"children":1229},{"className":1228},[],[1230],{"type":74,"value":1231},"docs\u002Fguides\u002Ftransforms-and-reactivity.md",{"type":74,"value":1233},"; ",{"type":69,"tag":346,"props":1235,"children":1237},{"className":1236},[],[1238],{"type":74,"value":1197},{"type":74,"value":1240}," F-128 and F-163",{"type":69,"tag":98,"props":1242,"children":1244},{"id":1243},"critical-creating-a-bidirectional-state-loop",[1245],{"type":74,"value":1246},"CRITICAL Creating a bidirectional state loop",{"type":69,"tag":77,"props":1248,"children":1249},{},[1250],{"type":74,"value":1251},"Wrong: chart selection sets a Table filter whose change recreates chart selection and writes the URL again.",{"type":69,"tag":77,"props":1253,"children":1254},{},[1255],{"type":74,"value":1256},"Correct: assign one owner, normalize one event into semantic intent, and let every surface derive from that state without echoing equivalent updates.",{"type":69,"tag":77,"props":1258,"children":1259},{},[1260],{"type":74,"value":1261},"Feedback loops cause redundant renders, history spam, flicker, and state that cannot settle.",{"type":69,"tag":77,"props":1263,"children":1264},{},[1265],{"type":74,"value":1266},"Source: Charts interaction ownership; TanStack Router search-state guidance",{"type":69,"tag":98,"props":1268,"children":1270},{"id":1269},"high-treating-optimistic-rows-as-confirmed-history",[1271],{"type":74,"value":1272},"HIGH Treating optimistic rows as confirmed history",{"type":69,"tag":77,"props":1274,"children":1275},{},[1276],{"type":74,"value":1277},"Wrong: animate an optimistic mutation into the ordinary historical series with no pending state.",{"type":69,"tag":77,"props":1279,"children":1280},{},[1281],{"type":74,"value":1282},"Correct: carry sync or transaction status into the semantic projection, differentiate pending values when decision-relevant, and verify rollback.",{"type":69,"tag":77,"props":1284,"children":1285},{},[1286],{"type":74,"value":1287},"TanStack DB applies optimistic state before persistence and can replace or roll it back after synchronization.",{"type":69,"tag":77,"props":1289,"children":1290},{},[1291],{"type":74,"value":1292},"Source: TanStack DB mutations and live-query guides",{"type":69,"tag":98,"props":1294,"children":1296},{"id":1295},"critical-persisting-every-interaction-frame",[1297],{"type":74,"value":1298},"CRITICAL Persisting every interaction frame",{"type":69,"tag":77,"props":1300,"children":1301},{},[1302],{"type":74,"value":1303},"Wrong: write every brush, handle, resize, or pointer update through Router, Query invalidation, or a sync transaction.",{"type":69,"tag":77,"props":1305,"children":1306},{},[1307],{"type":74,"value":1308},"Correct: preview locally, pace expensive derivation if necessary, and commit one semantic value at the interaction boundary.",{"type":69,"tag":77,"props":1310,"children":1311},{},[1312],{"type":74,"value":1313},"Frame-rate state is presentation. Persistence needs validation, cancellation, ordering, and conflict semantics.",{"type":69,"tag":77,"props":1315,"children":1316},{},[1317],{"type":74,"value":1318},"Source: Charts interaction guides; TanStack Pacer timing guidance",{"type":69,"tag":98,"props":1320,"children":1322},{"id":1321},"high-treating-virtualization-as-analytical-filtering",[1323],{"type":74,"value":1324},"HIGH Treating virtualization as analytical filtering",{"type":69,"tag":77,"props":1326,"children":1327},{},[1328],{"type":74,"value":1329},"Wrong: chart only mounted grid rows because Virtual currently exposes them.",{"type":69,"tag":77,"props":1331,"children":1332},{},[1333],{"type":74,"value":1334},"Correct: chart the intended source or filtered projection; use mounted rows only for an explicitly viewport-scoped question.",{"type":69,"tag":77,"props":1336,"children":1337},{},[1338],{"type":74,"value":1339},"Virtual controls render work, not dataset meaning.",{"type":69,"tag":77,"props":1341,"children":1342},{},[1343],{"type":74,"value":1344},"Source: TanStack Virtual virtualizer reference",{"type":69,"tag":91,"props":1346,"children":1348},{"id":1347},"references",[1349],{"type":74,"value":1350},"References",{"type":69,"tag":338,"props":1352,"children":1353},{},[1354,1362,1370],{"type":69,"tag":342,"props":1355,"children":1356},{},[1357],{"type":69,"tag":415,"props":1358,"children":1359},{"href":417},[1360],{"type":74,"value":1361},"Table and data grids",{"type":69,"tag":342,"props":1363,"children":1364},{},[1365],{"type":69,"tag":415,"props":1366,"children":1367},{"href":1032},[1368],{"type":74,"value":1369},"Query, DB, and sync engines",{"type":69,"tag":342,"props":1371,"children":1372},{},[1373],{"type":69,"tag":415,"props":1374,"children":1376},{"href":1375},"references\u002Ftanstack-application-state.md",[1377],{"type":74,"value":1378},"TanStack application state and lifecycle",{"type":69,"tag":77,"props":1380,"children":1381},{},[1382,1384,1390,1392,1398,1399,1405,1407,1413],{"type":74,"value":1383},"See also: ",{"type":69,"tag":346,"props":1385,"children":1387},{"className":1386},[],[1388],{"type":74,"value":1389},"prepare-chart-data\u002FSKILL.md",{"type":74,"value":1391},", ",{"type":69,"tag":346,"props":1393,"children":1395},{"className":1394},[],[1396],{"type":74,"value":1397},"build-chart-interactions\u002FSKILL.md",{"type":74,"value":1391},{"type":69,"tag":346,"props":1400,"children":1402},{"className":1401},[],[1403],{"type":74,"value":1404},"update-and-animate-charts\u002FSKILL.md",{"type":74,"value":1406},", and ",{"type":69,"tag":346,"props":1408,"children":1410},{"className":1409},[],[1411],{"type":74,"value":1412},"debug-and-verify-charts\u002FSKILL.md",{"type":74,"value":532},{"type":69,"tag":1415,"props":1416,"children":1417},"style",{},[1418],{"type":74,"value":1419},"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":1421,"total":836},[1422,1435,1448,1460,1468,1481,1492],{"slug":1423,"name":1423,"fn":1424,"description":1425,"org":1426,"tags":1427,"stars":26,"repoUrl":27,"updatedAt":1434},"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},[1428,1429,1430,1433],{"name":20,"slug":21,"type":15},{"name":24,"slug":25,"type":15},{"name":1431,"slug":1432,"type":15},"Interaction","interaction",{"name":9,"slug":8,"type":15},"2026-08-15T03:47:32.82085",{"slug":1436,"name":1436,"fn":1437,"description":1438,"org":1439,"tags":1440,"stars":26,"repoUrl":27,"updatedAt":1447},"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},[1441,1442,1443,1444],{"name":20,"slug":21,"type":15},{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"name":1445,"slug":1446,"type":15},"UI Components","ui-components","2026-08-15T03:47:30.035164",{"slug":1449,"name":1449,"fn":1450,"description":1451,"org":1452,"tags":1453,"stars":26,"repoUrl":27,"updatedAt":1459},"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},[1454,1455,1457,1458],{"name":20,"slug":21,"type":15},{"name":1456,"slug":35,"type":15},"Data Visualization",{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},"2026-08-15T03:47:40.802271",{"slug":4,"name":4,"fn":5,"description":6,"org":1461,"tags":1462,"stars":26,"repoUrl":27,"updatedAt":28},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1463,1464,1465,1466,1467],{"name":20,"slug":21,"type":15},{"name":17,"slug":18,"type":15},{"name":13,"slug":14,"type":15},{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"slug":1469,"name":1469,"fn":1470,"description":1471,"org":1472,"tags":1473,"stars":26,"repoUrl":27,"updatedAt":1480},"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},[1474,1475,1478,1479],{"name":20,"slug":21,"type":15},{"name":1476,"slug":1477,"type":15},"Debugging","debugging",{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},"2026-08-15T03:47:33.503153",{"slug":1482,"name":1482,"fn":1483,"description":1484,"org":1485,"tags":1486,"stars":26,"repoUrl":27,"updatedAt":1491},"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},[1487,1488,1489,1490],{"name":20,"slug":21,"type":15},{"name":1456,"slug":35,"type":15},{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},"2026-08-15T03:47:40.463333",{"slug":1493,"name":1493,"fn":1494,"description":1495,"org":1496,"tags":1497,"stars":26,"repoUrl":27,"updatedAt":1504},"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},[1498,1499,1500,1501,1503],{"name":20,"slug":21,"type":15},{"name":1456,"slug":35,"type":15},{"name":24,"slug":25,"type":15},{"name":1502,"slug":42,"type":15},"SSR",{"name":9,"slug":8,"type":15},"2026-08-15T03:47:36.306971",{"items":1506,"total":1639},[1507,1519,1529,1539,1550,1565,1575,1585,1595,1608,1618,1629],{"slug":1508,"name":1508,"fn":1509,"description":1510,"org":1511,"tags":1512,"stars":1516,"repoUrl":1517,"updatedAt":1518},"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},[1513,1514,1515],{"name":17,"slug":18,"type":15},{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},28175,"https:\u002F\u002Fgithub.com\u002FTanStack\u002Ftable","2026-08-11T04:05:39.647403",{"slug":1520,"name":1520,"fn":1521,"description":1522,"org":1523,"tags":1524,"stars":1516,"repoUrl":1517,"updatedAt":1528},"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},[1525,1526,1527],{"name":1476,"slug":1477,"type":15},{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},"2026-08-11T04:05:45.454347",{"slug":1530,"name":1530,"fn":1531,"description":1532,"org":1533,"tags":1534,"stars":1516,"repoUrl":1517,"updatedAt":1538},"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},[1535,1536,1537],{"name":17,"slug":18,"type":15},{"name":9,"slug":8,"type":15},{"name":1445,"slug":1446,"type":15},"2026-08-11T04:05:18.454719",{"slug":1540,"name":1540,"fn":1541,"description":1542,"org":1543,"tags":1544,"stars":1516,"repoUrl":1517,"updatedAt":1549},"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},[1545,1546,1547,1548],{"name":1456,"slug":35,"type":15},{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"name":1445,"slug":1446,"type":15},"2026-08-11T04:05:16.471567",{"slug":1551,"name":1551,"fn":1552,"description":1553,"org":1554,"tags":1555,"stars":1516,"repoUrl":1517,"updatedAt":1564},"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},[1556,1559,1560,1563],{"name":1557,"slug":1558,"type":15},"Data Pipeline","data-pipeline",{"name":24,"slug":25,"type":15},{"name":1561,"slug":1562,"type":15},"Performance","performance",{"name":9,"slug":8,"type":15},"2026-08-11T04:05:25.45112",{"slug":1566,"name":1566,"fn":1567,"description":1568,"org":1569,"tags":1570,"stars":1516,"repoUrl":1517,"updatedAt":1574},"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},[1571,1572,1573],{"name":1456,"slug":35,"type":15},{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},"2026-08-11T04:05:21.505333",{"slug":1576,"name":1576,"fn":1577,"description":1578,"org":1579,"tags":1580,"stars":1516,"repoUrl":1517,"updatedAt":1584},"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},[1581,1582,1583],{"name":17,"slug":18,"type":15},{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},"2026-08-11T04:05:33.684468",{"slug":1586,"name":1586,"fn":1587,"description":1588,"org":1589,"tags":1590,"stars":1516,"repoUrl":1517,"updatedAt":1594},"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},[1591,1592,1593],{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"name":1445,"slug":1446,"type":15},"2026-08-11T04:05:43.445905",{"slug":1596,"name":1596,"fn":1597,"description":1598,"org":1599,"tags":1600,"stars":1516,"repoUrl":1517,"updatedAt":1607},"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},[1601,1604,1605,1606],{"name":1602,"slug":1603,"type":15},"CSS","css",{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"name":1445,"slug":1446,"type":15},"2026-08-11T04:05:35.453858",{"slug":1609,"name":1609,"fn":1610,"description":1611,"org":1612,"tags":1613,"stars":1516,"repoUrl":1517,"updatedAt":1617},"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},[1614,1615,1616],{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"name":1445,"slug":1446,"type":15},"2026-08-11T04:05:31.46447",{"slug":1619,"name":1619,"fn":1620,"description":1621,"org":1622,"tags":1623,"stars":1516,"repoUrl":1517,"updatedAt":1628},"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},[1624,1625,1626,1627],{"name":1602,"slug":1603,"type":15},{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"name":1445,"slug":1446,"type":15},"2026-08-11T04:05:28.559861",{"slug":1630,"name":1630,"fn":1631,"description":1632,"org":1633,"tags":1634,"stars":1516,"repoUrl":1517,"updatedAt":1638},"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},[1635,1636,1637],{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"name":1445,"slug":1446,"type":15},"2026-08-11T04:05:27.479925",139]