[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-tanstack-with-tanstack-query":3,"mdc--m7oaw-key":51,"related-org-tanstack-with-tanstack-query":1917,"related-repo-tanstack-with-tanstack-query":2057},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":22,"repoUrl":23,"updatedAt":24,"license":25,"forks":26,"topics":27,"repo":46,"sourceUrl":49,"mdContent":50},"with-tanstack-query","compose Vue Query with table state","Compose reactive Vue Query keys and results with Vue Table manual row processing, refs\u002Fcomputed state, server counts, and already-processed pages without duplicating query data into a drifting local ref.\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],{"name":13,"slug":14,"type":15},"Vue","vue","tag",{"name":17,"slug":18,"type":15},"Frontend","frontend",{"name":20,"slug":21,"type":15},"State Management","state-management",28175,"https:\u002F\u002Fgithub.com\u002FTanStack\u002Ftable","2026-07-30T05:26:00.369582",null,3539,[28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,14],"datagrid","datagrids","datatable","filtering","grid","grouping","hooks","javascript","pagination","react","reactjs","solid","solidjs","sorting","svelte","sveltejs","table","typescript",{"repoUrl":23,"stars":22,"forks":26,"topics":47,"description":48},[28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,14],"🤖 Headless UI for building powerful tables & datagrids for TS\u002FJS -  React-Table, Vue-Table, Solid-Table, Svelte-Table","https:\u002F\u002Fgithub.com\u002FTanStack\u002Ftable\u002Ftree\u002FHEAD\u002Fpackages\u002Fvue-table\u002Fskills\u002Fwith-tanstack-query","---\nname: with-tanstack-query\ndescription: >\n  Compose reactive Vue Query keys and results with Vue Table manual row processing, refs\u002Fcomputed state, server counts, and already-processed pages without duplicating query data into a drifting local ref.\nmetadata:\n  type: composition\n  library: '@tanstack\u002Fvue-table'\n  framework: vue\n  library_version: '9.0.0-beta.59'\nrequires:\n  - '@tanstack\u002Ftable-core#client-vs-server'\n  - getting-started\n  - table-state\nsources:\n  - 'TanStack\u002Ftable:examples\u002Fvue\u002Fwith-tanstack-query'\n  - 'TanStack\u002Ftable:docs\u002Fframework\u002Fvue\u002Fguide\u002Fpagination.md'\n---\n\nThis skill builds on `@tanstack\u002Ftable-core#client-vs-server`, `getting-started`, and `table-state`. Name each client- and server-owned processing stage first.\n\n## Setup\n\n```ts\nimport { computed, ref } from 'vue'\nimport { keepPreviousData, useQuery } from '@tanstack\u002Fvue-query'\nimport {\n  rowPaginationFeature,\n  tableFeatures,\n  useTable,\n} from '@tanstack\u002Fvue-table'\n\nconst pagination = ref({ pageIndex: 0, pageSize: 20 })\nconst query = useQuery(() => ({\n  queryKey: ['people', pagination.value.pageIndex, pagination.value.pageSize],\n  queryFn: () =>\n    fetch(\n      `\u002Fapi\u002Fpeople?page=${pagination.value.pageIndex}&size=${pagination.value.pageSize}`,\n    ).then((r) => r.json()),\n  placeholderData: keepPreviousData,\n}))\nconst data = computed(() => query.data.value?.rows ?? [])\nconst rowCount = computed(() => query.data.value?.rowCount ?? 0)\nconst state = computed(() => ({ pagination: pagination.value }))\nconst table = useTable({\n  features: tableFeatures({ rowPaginationFeature }),\n  columns,\n  data,\n  rowCount,\n  manualPagination: true,\n  state,\n  onPaginationChange: (next) => {\n    pagination.value =\n      typeof next === 'function' ? next(pagination.value) : next\n  },\n})\n```\n\n## Core Patterns\n\n### Keep query dependencies reactive\n\nUse the Vue Query options function and read refs inside it. Include every manual filter\u002Fsort\u002Fpage input in the query key.\n\n### Pass Query results directly\n\nExpose result fields as computed refs. Introduce a second local data ref only for an explicit editing workflow with a cache-write policy.\n\n## Common Mistakes\n\n### HIGH Unwrapping before query construction\n\nWrong:\n\n```ts\nconst page = pagination.value.pageIndex\nuseQuery(() => ({ queryKey: ['people', page], queryFn }))\n```\n\nCorrect:\n\n```ts\nuseQuery(() => ({ queryKey: ['people', pagination.value.pageIndex], queryFn }))\n```\n\nOnly reads inside the reactive options function become query dependencies.\n\nSource: `examples\u002Fvue\u002Fwith-tanstack-query\u002Fsrc\u002FApp.tsx`\n\n### HIGH Mirroring Query data locally\n\nWrong:\n\n```ts\nconst rows = ref(query.data.value?.rows ?? [])\n```\n\nCorrect:\n\n```ts\nconst rows = computed(() => query.data.value?.rows ?? [])\n```\n\nA one-time copy drifts from subsequent cache results.\n\nSource: `examples\u002Fvue\u002Fwith-tanstack-query\u002Fsrc\u002FApp.tsx`\n\n### HIGH Omitting server counts\n\nWrong:\n\n```ts\nuseTable({ features, columns, data, manualPagination: true })\n```\n\nCorrect:\n\n```ts\nuseTable({ features, columns, data, rowCount, manualPagination: true })\n```\n\nOne returned page cannot tell Table how many pages the server has.\n\nSource: `docs\u002Fframework\u002Fvue\u002Fguide\u002Fpagination.md`\n\n## API Discovery\n\nInspect installed `@tanstack\u002Fvue-table\u002Fdist\u002FuseTable.d.ts`, installed `@tanstack\u002Fvue-query\u002Fdist\u002F`, and the relevant manual Table feature source for exact option types.\n",{"data":52,"body":64},{"name":4,"description":6,"metadata":53,"requires":57,"sources":61},{"type":54,"library":55,"framework":14,"library_version":56},"composition","@tanstack\u002Fvue-table","9.0.0-beta.59",[58,59,60],"@tanstack\u002Ftable-core#client-vs-server","getting-started","table-state",[62,63],"TanStack\u002Ftable:examples\u002Fvue\u002Fwith-tanstack-query","TanStack\u002Ftable:docs\u002Fframework\u002Fvue\u002Fguide\u002Fpagination.md",{"type":65,"children":66},"root",[67,97,104,1254,1260,1267,1272,1278,1283,1289,1295,1300,1423,1428,1527,1532,1543,1549,1553,1617,1621,1695,1700,1709,1715,1719,1790,1794,1869,1874,1884,1890,1911],{"type":68,"tag":69,"props":70,"children":71},"element","p",{},[72,75,81,83,88,90,95],{"type":73,"value":74},"text","This skill builds on ",{"type":68,"tag":76,"props":77,"children":79},"code",{"className":78},[],[80],{"type":73,"value":58},{"type":73,"value":82},", ",{"type":68,"tag":76,"props":84,"children":86},{"className":85},[],[87],{"type":73,"value":59},{"type":73,"value":89},", and ",{"type":68,"tag":76,"props":91,"children":93},{"className":92},[],[94],{"type":73,"value":60},{"type":73,"value":96},". Name each client- and server-owned processing stage first.",{"type":68,"tag":98,"props":99,"children":101},"h2",{"id":100},"setup",[102],{"type":73,"value":103},"Setup",{"type":68,"tag":105,"props":106,"children":111},"pre",{"className":107,"code":108,"language":109,"meta":110,"style":110},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { computed, ref } from 'vue'\nimport { keepPreviousData, useQuery } from '@tanstack\u002Fvue-query'\nimport {\n  rowPaginationFeature,\n  tableFeatures,\n  useTable,\n} from '@tanstack\u002Fvue-table'\n\nconst pagination = ref({ pageIndex: 0, pageSize: 20 })\nconst query = useQuery(() => ({\n  queryKey: ['people', pagination.value.pageIndex, pagination.value.pageSize],\n  queryFn: () =>\n    fetch(\n      `\u002Fapi\u002Fpeople?page=${pagination.value.pageIndex}&size=${pagination.value.pageSize}`,\n    ).then((r) => r.json()),\n  placeholderData: keepPreviousData,\n}))\nconst data = computed(() => query.data.value?.rows ?? [])\nconst rowCount = computed(() => query.data.value?.rowCount ?? 0)\nconst state = computed(() => ({ pagination: pagination.value }))\nconst table = useTable({\n  features: tableFeatures({ rowPaginationFeature }),\n  columns,\n  data,\n  rowCount,\n  manualPagination: true,\n  state,\n  onPaginationChange: (next) => {\n    pagination.value =\n      typeof next === 'function' ? next(pagination.value) : next\n  },\n})\n","ts","",[112],{"type":68,"tag":76,"props":113,"children":114},{"__ignoreMap":110},[115,174,221,234,248,261,274,299,309,388,433,522,545,559,641,705,726,739,814,888,958,988,1031,1044,1057,1070,1093,1106,1140,1162,1233,1242],{"type":68,"tag":116,"props":117,"children":120},"span",{"class":118,"line":119},"line",1,[121,127,133,139,144,149,154,159,164,169],{"type":68,"tag":116,"props":122,"children":124},{"style":123},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[125],{"type":73,"value":126},"import",{"type":68,"tag":116,"props":128,"children":130},{"style":129},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[131],{"type":73,"value":132}," {",{"type":68,"tag":116,"props":134,"children":136},{"style":135},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[137],{"type":73,"value":138}," computed",{"type":68,"tag":116,"props":140,"children":141},{"style":129},[142],{"type":73,"value":143},",",{"type":68,"tag":116,"props":145,"children":146},{"style":135},[147],{"type":73,"value":148}," ref",{"type":68,"tag":116,"props":150,"children":151},{"style":129},[152],{"type":73,"value":153}," }",{"type":68,"tag":116,"props":155,"children":156},{"style":123},[157],{"type":73,"value":158}," from",{"type":68,"tag":116,"props":160,"children":161},{"style":129},[162],{"type":73,"value":163}," '",{"type":68,"tag":116,"props":165,"children":167},{"style":166},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[168],{"type":73,"value":14},{"type":68,"tag":116,"props":170,"children":171},{"style":129},[172],{"type":73,"value":173},"'\n",{"type":68,"tag":116,"props":175,"children":177},{"class":118,"line":176},2,[178,182,186,191,195,200,204,208,212,217],{"type":68,"tag":116,"props":179,"children":180},{"style":123},[181],{"type":73,"value":126},{"type":68,"tag":116,"props":183,"children":184},{"style":129},[185],{"type":73,"value":132},{"type":68,"tag":116,"props":187,"children":188},{"style":135},[189],{"type":73,"value":190}," keepPreviousData",{"type":68,"tag":116,"props":192,"children":193},{"style":129},[194],{"type":73,"value":143},{"type":68,"tag":116,"props":196,"children":197},{"style":135},[198],{"type":73,"value":199}," useQuery",{"type":68,"tag":116,"props":201,"children":202},{"style":129},[203],{"type":73,"value":153},{"type":68,"tag":116,"props":205,"children":206},{"style":123},[207],{"type":73,"value":158},{"type":68,"tag":116,"props":209,"children":210},{"style":129},[211],{"type":73,"value":163},{"type":68,"tag":116,"props":213,"children":214},{"style":166},[215],{"type":73,"value":216},"@tanstack\u002Fvue-query",{"type":68,"tag":116,"props":218,"children":219},{"style":129},[220],{"type":73,"value":173},{"type":68,"tag":116,"props":222,"children":224},{"class":118,"line":223},3,[225,229],{"type":68,"tag":116,"props":226,"children":227},{"style":123},[228],{"type":73,"value":126},{"type":68,"tag":116,"props":230,"children":231},{"style":129},[232],{"type":73,"value":233}," {\n",{"type":68,"tag":116,"props":235,"children":237},{"class":118,"line":236},4,[238,243],{"type":68,"tag":116,"props":239,"children":240},{"style":135},[241],{"type":73,"value":242},"  rowPaginationFeature",{"type":68,"tag":116,"props":244,"children":245},{"style":129},[246],{"type":73,"value":247},",\n",{"type":68,"tag":116,"props":249,"children":251},{"class":118,"line":250},5,[252,257],{"type":68,"tag":116,"props":253,"children":254},{"style":135},[255],{"type":73,"value":256},"  tableFeatures",{"type":68,"tag":116,"props":258,"children":259},{"style":129},[260],{"type":73,"value":247},{"type":68,"tag":116,"props":262,"children":264},{"class":118,"line":263},6,[265,270],{"type":68,"tag":116,"props":266,"children":267},{"style":135},[268],{"type":73,"value":269},"  useTable",{"type":68,"tag":116,"props":271,"children":272},{"style":129},[273],{"type":73,"value":247},{"type":68,"tag":116,"props":275,"children":277},{"class":118,"line":276},7,[278,283,287,291,295],{"type":68,"tag":116,"props":279,"children":280},{"style":129},[281],{"type":73,"value":282},"}",{"type":68,"tag":116,"props":284,"children":285},{"style":123},[286],{"type":73,"value":158},{"type":68,"tag":116,"props":288,"children":289},{"style":129},[290],{"type":73,"value":163},{"type":68,"tag":116,"props":292,"children":293},{"style":166},[294],{"type":73,"value":55},{"type":68,"tag":116,"props":296,"children":297},{"style":129},[298],{"type":73,"value":173},{"type":68,"tag":116,"props":300,"children":302},{"class":118,"line":301},8,[303],{"type":68,"tag":116,"props":304,"children":306},{"emptyLinePlaceholder":305},true,[307],{"type":73,"value":308},"\n",{"type":68,"tag":116,"props":310,"children":312},{"class":118,"line":311},9,[313,319,324,329,334,339,344,350,355,361,365,370,374,379,383],{"type":68,"tag":116,"props":314,"children":316},{"style":315},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[317],{"type":73,"value":318},"const",{"type":68,"tag":116,"props":320,"children":321},{"style":135},[322],{"type":73,"value":323}," pagination ",{"type":68,"tag":116,"props":325,"children":326},{"style":129},[327],{"type":73,"value":328},"=",{"type":68,"tag":116,"props":330,"children":332},{"style":331},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[333],{"type":73,"value":148},{"type":68,"tag":116,"props":335,"children":336},{"style":135},[337],{"type":73,"value":338},"(",{"type":68,"tag":116,"props":340,"children":341},{"style":129},[342],{"type":73,"value":343},"{",{"type":68,"tag":116,"props":345,"children":347},{"style":346},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[348],{"type":73,"value":349}," pageIndex",{"type":68,"tag":116,"props":351,"children":352},{"style":129},[353],{"type":73,"value":354},":",{"type":68,"tag":116,"props":356,"children":358},{"style":357},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[359],{"type":73,"value":360}," 0",{"type":68,"tag":116,"props":362,"children":363},{"style":129},[364],{"type":73,"value":143},{"type":68,"tag":116,"props":366,"children":367},{"style":346},[368],{"type":73,"value":369}," pageSize",{"type":68,"tag":116,"props":371,"children":372},{"style":129},[373],{"type":73,"value":354},{"type":68,"tag":116,"props":375,"children":376},{"style":357},[377],{"type":73,"value":378}," 20",{"type":68,"tag":116,"props":380,"children":381},{"style":129},[382],{"type":73,"value":153},{"type":68,"tag":116,"props":384,"children":385},{"style":135},[386],{"type":73,"value":387},")\n",{"type":68,"tag":116,"props":389,"children":391},{"class":118,"line":390},10,[392,396,401,405,409,413,418,423,428],{"type":68,"tag":116,"props":393,"children":394},{"style":315},[395],{"type":73,"value":318},{"type":68,"tag":116,"props":397,"children":398},{"style":135},[399],{"type":73,"value":400}," query ",{"type":68,"tag":116,"props":402,"children":403},{"style":129},[404],{"type":73,"value":328},{"type":68,"tag":116,"props":406,"children":407},{"style":331},[408],{"type":73,"value":199},{"type":68,"tag":116,"props":410,"children":411},{"style":135},[412],{"type":73,"value":338},{"type":68,"tag":116,"props":414,"children":415},{"style":129},[416],{"type":73,"value":417},"()",{"type":68,"tag":116,"props":419,"children":420},{"style":315},[421],{"type":73,"value":422}," =>",{"type":68,"tag":116,"props":424,"children":425},{"style":135},[426],{"type":73,"value":427}," (",{"type":68,"tag":116,"props":429,"children":430},{"style":129},[431],{"type":73,"value":432},"{\n",{"type":68,"tag":116,"props":434,"children":436},{"class":118,"line":435},11,[437,442,446,451,456,461,465,469,474,479,484,488,493,497,501,505,509,513,518],{"type":68,"tag":116,"props":438,"children":439},{"style":346},[440],{"type":73,"value":441},"  queryKey",{"type":68,"tag":116,"props":443,"children":444},{"style":129},[445],{"type":73,"value":354},{"type":68,"tag":116,"props":447,"children":448},{"style":135},[449],{"type":73,"value":450}," [",{"type":68,"tag":116,"props":452,"children":453},{"style":129},[454],{"type":73,"value":455},"'",{"type":68,"tag":116,"props":457,"children":458},{"style":166},[459],{"type":73,"value":460},"people",{"type":68,"tag":116,"props":462,"children":463},{"style":129},[464],{"type":73,"value":455},{"type":68,"tag":116,"props":466,"children":467},{"style":129},[468],{"type":73,"value":143},{"type":68,"tag":116,"props":470,"children":471},{"style":135},[472],{"type":73,"value":473}," pagination",{"type":68,"tag":116,"props":475,"children":476},{"style":129},[477],{"type":73,"value":478},".",{"type":68,"tag":116,"props":480,"children":481},{"style":135},[482],{"type":73,"value":483},"value",{"type":68,"tag":116,"props":485,"children":486},{"style":129},[487],{"type":73,"value":478},{"type":68,"tag":116,"props":489,"children":490},{"style":135},[491],{"type":73,"value":492},"pageIndex",{"type":68,"tag":116,"props":494,"children":495},{"style":129},[496],{"type":73,"value":143},{"type":68,"tag":116,"props":498,"children":499},{"style":135},[500],{"type":73,"value":473},{"type":68,"tag":116,"props":502,"children":503},{"style":129},[504],{"type":73,"value":478},{"type":68,"tag":116,"props":506,"children":507},{"style":135},[508],{"type":73,"value":483},{"type":68,"tag":116,"props":510,"children":511},{"style":129},[512],{"type":73,"value":478},{"type":68,"tag":116,"props":514,"children":515},{"style":135},[516],{"type":73,"value":517},"pageSize]",{"type":68,"tag":116,"props":519,"children":520},{"style":129},[521],{"type":73,"value":247},{"type":68,"tag":116,"props":523,"children":525},{"class":118,"line":524},12,[526,531,535,540],{"type":68,"tag":116,"props":527,"children":528},{"style":331},[529],{"type":73,"value":530},"  queryFn",{"type":68,"tag":116,"props":532,"children":533},{"style":129},[534],{"type":73,"value":354},{"type":68,"tag":116,"props":536,"children":537},{"style":129},[538],{"type":73,"value":539}," ()",{"type":68,"tag":116,"props":541,"children":542},{"style":315},[543],{"type":73,"value":544}," =>\n",{"type":68,"tag":116,"props":546,"children":548},{"class":118,"line":547},13,[549,554],{"type":68,"tag":116,"props":550,"children":551},{"style":331},[552],{"type":73,"value":553},"    fetch",{"type":68,"tag":116,"props":555,"children":556},{"style":135},[557],{"type":73,"value":558},"(\n",{"type":68,"tag":116,"props":560,"children":562},{"class":118,"line":561},14,[563,568,573,578,582,586,590,594,598,602,607,611,615,619,623,627,632,637],{"type":68,"tag":116,"props":564,"children":565},{"style":129},[566],{"type":73,"value":567},"      `",{"type":68,"tag":116,"props":569,"children":570},{"style":166},[571],{"type":73,"value":572},"\u002Fapi\u002Fpeople?page=",{"type":68,"tag":116,"props":574,"children":575},{"style":129},[576],{"type":73,"value":577},"${",{"type":68,"tag":116,"props":579,"children":580},{"style":135},[581],{"type":73,"value":36},{"type":68,"tag":116,"props":583,"children":584},{"style":129},[585],{"type":73,"value":478},{"type":68,"tag":116,"props":587,"children":588},{"style":135},[589],{"type":73,"value":483},{"type":68,"tag":116,"props":591,"children":592},{"style":129},[593],{"type":73,"value":478},{"type":68,"tag":116,"props":595,"children":596},{"style":135},[597],{"type":73,"value":492},{"type":68,"tag":116,"props":599,"children":600},{"style":129},[601],{"type":73,"value":282},{"type":68,"tag":116,"props":603,"children":604},{"style":166},[605],{"type":73,"value":606},"&size=",{"type":68,"tag":116,"props":608,"children":609},{"style":129},[610],{"type":73,"value":577},{"type":68,"tag":116,"props":612,"children":613},{"style":135},[614],{"type":73,"value":36},{"type":68,"tag":116,"props":616,"children":617},{"style":129},[618],{"type":73,"value":478},{"type":68,"tag":116,"props":620,"children":621},{"style":135},[622],{"type":73,"value":483},{"type":68,"tag":116,"props":624,"children":625},{"style":129},[626],{"type":73,"value":478},{"type":68,"tag":116,"props":628,"children":629},{"style":135},[630],{"type":73,"value":631},"pageSize",{"type":68,"tag":116,"props":633,"children":634},{"style":129},[635],{"type":73,"value":636},"}`",{"type":68,"tag":116,"props":638,"children":639},{"style":129},[640],{"type":73,"value":247},{"type":68,"tag":116,"props":642,"children":644},{"class":118,"line":643},15,[645,650,654,659,663,667,673,678,682,687,691,696,701],{"type":68,"tag":116,"props":646,"children":647},{"style":135},[648],{"type":73,"value":649},"    )",{"type":68,"tag":116,"props":651,"children":652},{"style":129},[653],{"type":73,"value":478},{"type":68,"tag":116,"props":655,"children":656},{"style":331},[657],{"type":73,"value":658},"then",{"type":68,"tag":116,"props":660,"children":661},{"style":135},[662],{"type":73,"value":338},{"type":68,"tag":116,"props":664,"children":665},{"style":129},[666],{"type":73,"value":338},{"type":68,"tag":116,"props":668,"children":670},{"style":669},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[671],{"type":73,"value":672},"r",{"type":68,"tag":116,"props":674,"children":675},{"style":129},[676],{"type":73,"value":677},")",{"type":68,"tag":116,"props":679,"children":680},{"style":315},[681],{"type":73,"value":422},{"type":68,"tag":116,"props":683,"children":684},{"style":135},[685],{"type":73,"value":686}," r",{"type":68,"tag":116,"props":688,"children":689},{"style":129},[690],{"type":73,"value":478},{"type":68,"tag":116,"props":692,"children":693},{"style":331},[694],{"type":73,"value":695},"json",{"type":68,"tag":116,"props":697,"children":698},{"style":135},[699],{"type":73,"value":700},"())",{"type":68,"tag":116,"props":702,"children":703},{"style":129},[704],{"type":73,"value":247},{"type":68,"tag":116,"props":706,"children":708},{"class":118,"line":707},16,[709,714,718,722],{"type":68,"tag":116,"props":710,"children":711},{"style":346},[712],{"type":73,"value":713},"  placeholderData",{"type":68,"tag":116,"props":715,"children":716},{"style":129},[717],{"type":73,"value":354},{"type":68,"tag":116,"props":719,"children":720},{"style":135},[721],{"type":73,"value":190},{"type":68,"tag":116,"props":723,"children":724},{"style":129},[725],{"type":73,"value":247},{"type":68,"tag":116,"props":727,"children":729},{"class":118,"line":728},17,[730,734],{"type":68,"tag":116,"props":731,"children":732},{"style":129},[733],{"type":73,"value":282},{"type":68,"tag":116,"props":735,"children":736},{"style":135},[737],{"type":73,"value":738},"))\n",{"type":68,"tag":116,"props":740,"children":742},{"class":118,"line":741},18,[743,747,752,756,760,764,768,772,777,781,786,790,794,799,804,809],{"type":68,"tag":116,"props":744,"children":745},{"style":315},[746],{"type":73,"value":318},{"type":68,"tag":116,"props":748,"children":749},{"style":135},[750],{"type":73,"value":751}," data ",{"type":68,"tag":116,"props":753,"children":754},{"style":129},[755],{"type":73,"value":328},{"type":68,"tag":116,"props":757,"children":758},{"style":331},[759],{"type":73,"value":138},{"type":68,"tag":116,"props":761,"children":762},{"style":135},[763],{"type":73,"value":338},{"type":68,"tag":116,"props":765,"children":766},{"style":129},[767],{"type":73,"value":417},{"type":68,"tag":116,"props":769,"children":770},{"style":315},[771],{"type":73,"value":422},{"type":68,"tag":116,"props":773,"children":774},{"style":135},[775],{"type":73,"value":776}," query",{"type":68,"tag":116,"props":778,"children":779},{"style":129},[780],{"type":73,"value":478},{"type":68,"tag":116,"props":782,"children":783},{"style":135},[784],{"type":73,"value":785},"data",{"type":68,"tag":116,"props":787,"children":788},{"style":129},[789],{"type":73,"value":478},{"type":68,"tag":116,"props":791,"children":792},{"style":135},[793],{"type":73,"value":483},{"type":68,"tag":116,"props":795,"children":796},{"style":129},[797],{"type":73,"value":798},"?.",{"type":68,"tag":116,"props":800,"children":801},{"style":135},[802],{"type":73,"value":803},"rows ",{"type":68,"tag":116,"props":805,"children":806},{"style":129},[807],{"type":73,"value":808},"??",{"type":68,"tag":116,"props":810,"children":811},{"style":135},[812],{"type":73,"value":813}," [])\n",{"type":68,"tag":116,"props":815,"children":817},{"class":118,"line":816},19,[818,822,827,831,835,839,843,847,851,855,859,863,867,871,876,880,884],{"type":68,"tag":116,"props":819,"children":820},{"style":315},[821],{"type":73,"value":318},{"type":68,"tag":116,"props":823,"children":824},{"style":135},[825],{"type":73,"value":826}," rowCount ",{"type":68,"tag":116,"props":828,"children":829},{"style":129},[830],{"type":73,"value":328},{"type":68,"tag":116,"props":832,"children":833},{"style":331},[834],{"type":73,"value":138},{"type":68,"tag":116,"props":836,"children":837},{"style":135},[838],{"type":73,"value":338},{"type":68,"tag":116,"props":840,"children":841},{"style":129},[842],{"type":73,"value":417},{"type":68,"tag":116,"props":844,"children":845},{"style":315},[846],{"type":73,"value":422},{"type":68,"tag":116,"props":848,"children":849},{"style":135},[850],{"type":73,"value":776},{"type":68,"tag":116,"props":852,"children":853},{"style":129},[854],{"type":73,"value":478},{"type":68,"tag":116,"props":856,"children":857},{"style":135},[858],{"type":73,"value":785},{"type":68,"tag":116,"props":860,"children":861},{"style":129},[862],{"type":73,"value":478},{"type":68,"tag":116,"props":864,"children":865},{"style":135},[866],{"type":73,"value":483},{"type":68,"tag":116,"props":868,"children":869},{"style":129},[870],{"type":73,"value":798},{"type":68,"tag":116,"props":872,"children":873},{"style":135},[874],{"type":73,"value":875},"rowCount ",{"type":68,"tag":116,"props":877,"children":878},{"style":129},[879],{"type":73,"value":808},{"type":68,"tag":116,"props":881,"children":882},{"style":357},[883],{"type":73,"value":360},{"type":68,"tag":116,"props":885,"children":886},{"style":135},[887],{"type":73,"value":387},{"type":68,"tag":116,"props":889,"children":891},{"class":118,"line":890},20,[892,896,901,905,909,913,917,921,925,929,933,937,941,945,950,954],{"type":68,"tag":116,"props":893,"children":894},{"style":315},[895],{"type":73,"value":318},{"type":68,"tag":116,"props":897,"children":898},{"style":135},[899],{"type":73,"value":900}," state ",{"type":68,"tag":116,"props":902,"children":903},{"style":129},[904],{"type":73,"value":328},{"type":68,"tag":116,"props":906,"children":907},{"style":331},[908],{"type":73,"value":138},{"type":68,"tag":116,"props":910,"children":911},{"style":135},[912],{"type":73,"value":338},{"type":68,"tag":116,"props":914,"children":915},{"style":129},[916],{"type":73,"value":417},{"type":68,"tag":116,"props":918,"children":919},{"style":315},[920],{"type":73,"value":422},{"type":68,"tag":116,"props":922,"children":923},{"style":135},[924],{"type":73,"value":427},{"type":68,"tag":116,"props":926,"children":927},{"style":129},[928],{"type":73,"value":343},{"type":68,"tag":116,"props":930,"children":931},{"style":346},[932],{"type":73,"value":473},{"type":68,"tag":116,"props":934,"children":935},{"style":129},[936],{"type":73,"value":354},{"type":68,"tag":116,"props":938,"children":939},{"style":135},[940],{"type":73,"value":473},{"type":68,"tag":116,"props":942,"children":943},{"style":129},[944],{"type":73,"value":478},{"type":68,"tag":116,"props":946,"children":947},{"style":135},[948],{"type":73,"value":949},"value ",{"type":68,"tag":116,"props":951,"children":952},{"style":129},[953],{"type":73,"value":282},{"type":68,"tag":116,"props":955,"children":956},{"style":135},[957],{"type":73,"value":738},{"type":68,"tag":116,"props":959,"children":961},{"class":118,"line":960},21,[962,966,971,975,980,984],{"type":68,"tag":116,"props":963,"children":964},{"style":315},[965],{"type":73,"value":318},{"type":68,"tag":116,"props":967,"children":968},{"style":135},[969],{"type":73,"value":970}," table ",{"type":68,"tag":116,"props":972,"children":973},{"style":129},[974],{"type":73,"value":328},{"type":68,"tag":116,"props":976,"children":977},{"style":331},[978],{"type":73,"value":979}," useTable",{"type":68,"tag":116,"props":981,"children":982},{"style":135},[983],{"type":73,"value":338},{"type":68,"tag":116,"props":985,"children":986},{"style":129},[987],{"type":73,"value":432},{"type":68,"tag":116,"props":989,"children":991},{"class":118,"line":990},22,[992,997,1001,1006,1010,1014,1019,1023,1027],{"type":68,"tag":116,"props":993,"children":994},{"style":346},[995],{"type":73,"value":996},"  features",{"type":68,"tag":116,"props":998,"children":999},{"style":129},[1000],{"type":73,"value":354},{"type":68,"tag":116,"props":1002,"children":1003},{"style":331},[1004],{"type":73,"value":1005}," tableFeatures",{"type":68,"tag":116,"props":1007,"children":1008},{"style":135},[1009],{"type":73,"value":338},{"type":68,"tag":116,"props":1011,"children":1012},{"style":129},[1013],{"type":73,"value":343},{"type":68,"tag":116,"props":1015,"children":1016},{"style":135},[1017],{"type":73,"value":1018}," rowPaginationFeature ",{"type":68,"tag":116,"props":1020,"children":1021},{"style":129},[1022],{"type":73,"value":282},{"type":68,"tag":116,"props":1024,"children":1025},{"style":135},[1026],{"type":73,"value":677},{"type":68,"tag":116,"props":1028,"children":1029},{"style":129},[1030],{"type":73,"value":247},{"type":68,"tag":116,"props":1032,"children":1034},{"class":118,"line":1033},23,[1035,1040],{"type":68,"tag":116,"props":1036,"children":1037},{"style":135},[1038],{"type":73,"value":1039},"  columns",{"type":68,"tag":116,"props":1041,"children":1042},{"style":129},[1043],{"type":73,"value":247},{"type":68,"tag":116,"props":1045,"children":1047},{"class":118,"line":1046},24,[1048,1053],{"type":68,"tag":116,"props":1049,"children":1050},{"style":135},[1051],{"type":73,"value":1052},"  data",{"type":68,"tag":116,"props":1054,"children":1055},{"style":129},[1056],{"type":73,"value":247},{"type":68,"tag":116,"props":1058,"children":1060},{"class":118,"line":1059},25,[1061,1066],{"type":68,"tag":116,"props":1062,"children":1063},{"style":135},[1064],{"type":73,"value":1065},"  rowCount",{"type":68,"tag":116,"props":1067,"children":1068},{"style":129},[1069],{"type":73,"value":247},{"type":68,"tag":116,"props":1071,"children":1073},{"class":118,"line":1072},26,[1074,1079,1083,1089],{"type":68,"tag":116,"props":1075,"children":1076},{"style":346},[1077],{"type":73,"value":1078},"  manualPagination",{"type":68,"tag":116,"props":1080,"children":1081},{"style":129},[1082],{"type":73,"value":354},{"type":68,"tag":116,"props":1084,"children":1086},{"style":1085},"--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC",[1087],{"type":73,"value":1088}," true",{"type":68,"tag":116,"props":1090,"children":1091},{"style":129},[1092],{"type":73,"value":247},{"type":68,"tag":116,"props":1094,"children":1096},{"class":118,"line":1095},27,[1097,1102],{"type":68,"tag":116,"props":1098,"children":1099},{"style":135},[1100],{"type":73,"value":1101},"  state",{"type":68,"tag":116,"props":1103,"children":1104},{"style":129},[1105],{"type":73,"value":247},{"type":68,"tag":116,"props":1107,"children":1109},{"class":118,"line":1108},28,[1110,1115,1119,1123,1128,1132,1136],{"type":68,"tag":116,"props":1111,"children":1112},{"style":331},[1113],{"type":73,"value":1114},"  onPaginationChange",{"type":68,"tag":116,"props":1116,"children":1117},{"style":129},[1118],{"type":73,"value":354},{"type":68,"tag":116,"props":1120,"children":1121},{"style":129},[1122],{"type":73,"value":427},{"type":68,"tag":116,"props":1124,"children":1125},{"style":669},[1126],{"type":73,"value":1127},"next",{"type":68,"tag":116,"props":1129,"children":1130},{"style":129},[1131],{"type":73,"value":677},{"type":68,"tag":116,"props":1133,"children":1134},{"style":315},[1135],{"type":73,"value":422},{"type":68,"tag":116,"props":1137,"children":1138},{"style":129},[1139],{"type":73,"value":233},{"type":68,"tag":116,"props":1141,"children":1143},{"class":118,"line":1142},29,[1144,1149,1153,1157],{"type":68,"tag":116,"props":1145,"children":1146},{"style":135},[1147],{"type":73,"value":1148},"    pagination",{"type":68,"tag":116,"props":1150,"children":1151},{"style":129},[1152],{"type":73,"value":478},{"type":68,"tag":116,"props":1154,"children":1155},{"style":135},[1156],{"type":73,"value":483},{"type":68,"tag":116,"props":1158,"children":1159},{"style":129},[1160],{"type":73,"value":1161}," =\n",{"type":68,"tag":116,"props":1163,"children":1165},{"class":118,"line":1164},30,[1166,1171,1176,1181,1185,1190,1194,1199,1203,1207,1211,1215,1219,1224,1228],{"type":68,"tag":116,"props":1167,"children":1168},{"style":129},[1169],{"type":73,"value":1170},"      typeof",{"type":68,"tag":116,"props":1172,"children":1173},{"style":135},[1174],{"type":73,"value":1175}," next",{"type":68,"tag":116,"props":1177,"children":1178},{"style":129},[1179],{"type":73,"value":1180}," ===",{"type":68,"tag":116,"props":1182,"children":1183},{"style":129},[1184],{"type":73,"value":163},{"type":68,"tag":116,"props":1186,"children":1187},{"style":166},[1188],{"type":73,"value":1189},"function",{"type":68,"tag":116,"props":1191,"children":1192},{"style":129},[1193],{"type":73,"value":455},{"type":68,"tag":116,"props":1195,"children":1196},{"style":129},[1197],{"type":73,"value":1198}," ?",{"type":68,"tag":116,"props":1200,"children":1201},{"style":331},[1202],{"type":73,"value":1175},{"type":68,"tag":116,"props":1204,"children":1205},{"style":346},[1206],{"type":73,"value":338},{"type":68,"tag":116,"props":1208,"children":1209},{"style":135},[1210],{"type":73,"value":36},{"type":68,"tag":116,"props":1212,"children":1213},{"style":129},[1214],{"type":73,"value":478},{"type":68,"tag":116,"props":1216,"children":1217},{"style":135},[1218],{"type":73,"value":483},{"type":68,"tag":116,"props":1220,"children":1221},{"style":346},[1222],{"type":73,"value":1223},") ",{"type":68,"tag":116,"props":1225,"children":1226},{"style":129},[1227],{"type":73,"value":354},{"type":68,"tag":116,"props":1229,"children":1230},{"style":135},[1231],{"type":73,"value":1232}," next\n",{"type":68,"tag":116,"props":1234,"children":1236},{"class":118,"line":1235},31,[1237],{"type":68,"tag":116,"props":1238,"children":1239},{"style":129},[1240],{"type":73,"value":1241},"  },\n",{"type":68,"tag":116,"props":1243,"children":1245},{"class":118,"line":1244},32,[1246,1250],{"type":68,"tag":116,"props":1247,"children":1248},{"style":129},[1249],{"type":73,"value":282},{"type":68,"tag":116,"props":1251,"children":1252},{"style":135},[1253],{"type":73,"value":387},{"type":68,"tag":98,"props":1255,"children":1257},{"id":1256},"core-patterns",[1258],{"type":73,"value":1259},"Core Patterns",{"type":68,"tag":1261,"props":1262,"children":1264},"h3",{"id":1263},"keep-query-dependencies-reactive",[1265],{"type":73,"value":1266},"Keep query dependencies reactive",{"type":68,"tag":69,"props":1268,"children":1269},{},[1270],{"type":73,"value":1271},"Use the Vue Query options function and read refs inside it. Include every manual filter\u002Fsort\u002Fpage input in the query key.",{"type":68,"tag":1261,"props":1273,"children":1275},{"id":1274},"pass-query-results-directly",[1276],{"type":73,"value":1277},"Pass Query results directly",{"type":68,"tag":69,"props":1279,"children":1280},{},[1281],{"type":73,"value":1282},"Expose result fields as computed refs. Introduce a second local data ref only for an explicit editing workflow with a cache-write policy.",{"type":68,"tag":98,"props":1284,"children":1286},{"id":1285},"common-mistakes",[1287],{"type":73,"value":1288},"Common Mistakes",{"type":68,"tag":1261,"props":1290,"children":1292},{"id":1291},"high-unwrapping-before-query-construction",[1293],{"type":73,"value":1294},"HIGH Unwrapping before query construction",{"type":68,"tag":69,"props":1296,"children":1297},{},[1298],{"type":73,"value":1299},"Wrong:",{"type":68,"tag":105,"props":1301,"children":1303},{"className":107,"code":1302,"language":109,"meta":110,"style":110},"const page = pagination.value.pageIndex\nuseQuery(() => ({ queryKey: ['people', page], queryFn }))\n",[1304],{"type":68,"tag":76,"props":1305,"children":1306},{"__ignoreMap":110},[1307,1344],{"type":68,"tag":116,"props":1308,"children":1309},{"class":118,"line":119},[1310,1314,1319,1323,1327,1331,1335,1339],{"type":68,"tag":116,"props":1311,"children":1312},{"style":315},[1313],{"type":73,"value":318},{"type":68,"tag":116,"props":1315,"children":1316},{"style":135},[1317],{"type":73,"value":1318}," page ",{"type":68,"tag":116,"props":1320,"children":1321},{"style":129},[1322],{"type":73,"value":328},{"type":68,"tag":116,"props":1324,"children":1325},{"style":135},[1326],{"type":73,"value":473},{"type":68,"tag":116,"props":1328,"children":1329},{"style":129},[1330],{"type":73,"value":478},{"type":68,"tag":116,"props":1332,"children":1333},{"style":135},[1334],{"type":73,"value":483},{"type":68,"tag":116,"props":1336,"children":1337},{"style":129},[1338],{"type":73,"value":478},{"type":68,"tag":116,"props":1340,"children":1341},{"style":135},[1342],{"type":73,"value":1343},"pageIndex\n",{"type":68,"tag":116,"props":1345,"children":1346},{"class":118,"line":176},[1347,1352,1356,1360,1364,1368,1372,1377,1381,1385,1389,1393,1397,1401,1406,1410,1415,1419],{"type":68,"tag":116,"props":1348,"children":1349},{"style":331},[1350],{"type":73,"value":1351},"useQuery",{"type":68,"tag":116,"props":1353,"children":1354},{"style":135},[1355],{"type":73,"value":338},{"type":68,"tag":116,"props":1357,"children":1358},{"style":129},[1359],{"type":73,"value":417},{"type":68,"tag":116,"props":1361,"children":1362},{"style":315},[1363],{"type":73,"value":422},{"type":68,"tag":116,"props":1365,"children":1366},{"style":135},[1367],{"type":73,"value":427},{"type":68,"tag":116,"props":1369,"children":1370},{"style":129},[1371],{"type":73,"value":343},{"type":68,"tag":116,"props":1373,"children":1374},{"style":346},[1375],{"type":73,"value":1376}," queryKey",{"type":68,"tag":116,"props":1378,"children":1379},{"style":129},[1380],{"type":73,"value":354},{"type":68,"tag":116,"props":1382,"children":1383},{"style":135},[1384],{"type":73,"value":450},{"type":68,"tag":116,"props":1386,"children":1387},{"style":129},[1388],{"type":73,"value":455},{"type":68,"tag":116,"props":1390,"children":1391},{"style":166},[1392],{"type":73,"value":460},{"type":68,"tag":116,"props":1394,"children":1395},{"style":129},[1396],{"type":73,"value":455},{"type":68,"tag":116,"props":1398,"children":1399},{"style":129},[1400],{"type":73,"value":143},{"type":68,"tag":116,"props":1402,"children":1403},{"style":135},[1404],{"type":73,"value":1405}," page]",{"type":68,"tag":116,"props":1407,"children":1408},{"style":129},[1409],{"type":73,"value":143},{"type":68,"tag":116,"props":1411,"children":1412},{"style":135},[1413],{"type":73,"value":1414}," queryFn ",{"type":68,"tag":116,"props":1416,"children":1417},{"style":129},[1418],{"type":73,"value":282},{"type":68,"tag":116,"props":1420,"children":1421},{"style":135},[1422],{"type":73,"value":738},{"type":68,"tag":69,"props":1424,"children":1425},{},[1426],{"type":73,"value":1427},"Correct:",{"type":68,"tag":105,"props":1429,"children":1431},{"className":107,"code":1430,"language":109,"meta":110,"style":110},"useQuery(() => ({ queryKey: ['people', pagination.value.pageIndex], queryFn }))\n",[1432],{"type":68,"tag":76,"props":1433,"children":1434},{"__ignoreMap":110},[1435],{"type":68,"tag":116,"props":1436,"children":1437},{"class":118,"line":119},[1438,1442,1446,1450,1454,1458,1462,1466,1470,1474,1478,1482,1486,1490,1494,1498,1502,1506,1511,1515,1519,1523],{"type":68,"tag":116,"props":1439,"children":1440},{"style":331},[1441],{"type":73,"value":1351},{"type":68,"tag":116,"props":1443,"children":1444},{"style":135},[1445],{"type":73,"value":338},{"type":68,"tag":116,"props":1447,"children":1448},{"style":129},[1449],{"type":73,"value":417},{"type":68,"tag":116,"props":1451,"children":1452},{"style":315},[1453],{"type":73,"value":422},{"type":68,"tag":116,"props":1455,"children":1456},{"style":135},[1457],{"type":73,"value":427},{"type":68,"tag":116,"props":1459,"children":1460},{"style":129},[1461],{"type":73,"value":343},{"type":68,"tag":116,"props":1463,"children":1464},{"style":346},[1465],{"type":73,"value":1376},{"type":68,"tag":116,"props":1467,"children":1468},{"style":129},[1469],{"type":73,"value":354},{"type":68,"tag":116,"props":1471,"children":1472},{"style":135},[1473],{"type":73,"value":450},{"type":68,"tag":116,"props":1475,"children":1476},{"style":129},[1477],{"type":73,"value":455},{"type":68,"tag":116,"props":1479,"children":1480},{"style":166},[1481],{"type":73,"value":460},{"type":68,"tag":116,"props":1483,"children":1484},{"style":129},[1485],{"type":73,"value":455},{"type":68,"tag":116,"props":1487,"children":1488},{"style":129},[1489],{"type":73,"value":143},{"type":68,"tag":116,"props":1491,"children":1492},{"style":135},[1493],{"type":73,"value":473},{"type":68,"tag":116,"props":1495,"children":1496},{"style":129},[1497],{"type":73,"value":478},{"type":68,"tag":116,"props":1499,"children":1500},{"style":135},[1501],{"type":73,"value":483},{"type":68,"tag":116,"props":1503,"children":1504},{"style":129},[1505],{"type":73,"value":478},{"type":68,"tag":116,"props":1507,"children":1508},{"style":135},[1509],{"type":73,"value":1510},"pageIndex]",{"type":68,"tag":116,"props":1512,"children":1513},{"style":129},[1514],{"type":73,"value":143},{"type":68,"tag":116,"props":1516,"children":1517},{"style":135},[1518],{"type":73,"value":1414},{"type":68,"tag":116,"props":1520,"children":1521},{"style":129},[1522],{"type":73,"value":282},{"type":68,"tag":116,"props":1524,"children":1525},{"style":135},[1526],{"type":73,"value":738},{"type":68,"tag":69,"props":1528,"children":1529},{},[1530],{"type":73,"value":1531},"Only reads inside the reactive options function become query dependencies.",{"type":68,"tag":69,"props":1533,"children":1534},{},[1535,1537],{"type":73,"value":1536},"Source: ",{"type":68,"tag":76,"props":1538,"children":1540},{"className":1539},[],[1541],{"type":73,"value":1542},"examples\u002Fvue\u002Fwith-tanstack-query\u002Fsrc\u002FApp.tsx",{"type":68,"tag":1261,"props":1544,"children":1546},{"id":1545},"high-mirroring-query-data-locally",[1547],{"type":73,"value":1548},"HIGH Mirroring Query data locally",{"type":68,"tag":69,"props":1550,"children":1551},{},[1552],{"type":73,"value":1299},{"type":68,"tag":105,"props":1554,"children":1556},{"className":107,"code":1555,"language":109,"meta":110,"style":110},"const rows = ref(query.data.value?.rows ?? [])\n",[1557],{"type":68,"tag":76,"props":1558,"children":1559},{"__ignoreMap":110},[1560],{"type":68,"tag":116,"props":1561,"children":1562},{"class":118,"line":119},[1563,1567,1572,1576,1580,1585,1589,1593,1597,1601,1605,1609,1613],{"type":68,"tag":116,"props":1564,"children":1565},{"style":315},[1566],{"type":73,"value":318},{"type":68,"tag":116,"props":1568,"children":1569},{"style":135},[1570],{"type":73,"value":1571}," rows ",{"type":68,"tag":116,"props":1573,"children":1574},{"style":129},[1575],{"type":73,"value":328},{"type":68,"tag":116,"props":1577,"children":1578},{"style":331},[1579],{"type":73,"value":148},{"type":68,"tag":116,"props":1581,"children":1582},{"style":135},[1583],{"type":73,"value":1584},"(query",{"type":68,"tag":116,"props":1586,"children":1587},{"style":129},[1588],{"type":73,"value":478},{"type":68,"tag":116,"props":1590,"children":1591},{"style":135},[1592],{"type":73,"value":785},{"type":68,"tag":116,"props":1594,"children":1595},{"style":129},[1596],{"type":73,"value":478},{"type":68,"tag":116,"props":1598,"children":1599},{"style":135},[1600],{"type":73,"value":483},{"type":68,"tag":116,"props":1602,"children":1603},{"style":129},[1604],{"type":73,"value":798},{"type":68,"tag":116,"props":1606,"children":1607},{"style":135},[1608],{"type":73,"value":803},{"type":68,"tag":116,"props":1610,"children":1611},{"style":129},[1612],{"type":73,"value":808},{"type":68,"tag":116,"props":1614,"children":1615},{"style":135},[1616],{"type":73,"value":813},{"type":68,"tag":69,"props":1618,"children":1619},{},[1620],{"type":73,"value":1427},{"type":68,"tag":105,"props":1622,"children":1624},{"className":107,"code":1623,"language":109,"meta":110,"style":110},"const rows = computed(() => query.data.value?.rows ?? [])\n",[1625],{"type":68,"tag":76,"props":1626,"children":1627},{"__ignoreMap":110},[1628],{"type":68,"tag":116,"props":1629,"children":1630},{"class":118,"line":119},[1631,1635,1639,1643,1647,1651,1655,1659,1663,1667,1671,1675,1679,1683,1687,1691],{"type":68,"tag":116,"props":1632,"children":1633},{"style":315},[1634],{"type":73,"value":318},{"type":68,"tag":116,"props":1636,"children":1637},{"style":135},[1638],{"type":73,"value":1571},{"type":68,"tag":116,"props":1640,"children":1641},{"style":129},[1642],{"type":73,"value":328},{"type":68,"tag":116,"props":1644,"children":1645},{"style":331},[1646],{"type":73,"value":138},{"type":68,"tag":116,"props":1648,"children":1649},{"style":135},[1650],{"type":73,"value":338},{"type":68,"tag":116,"props":1652,"children":1653},{"style":129},[1654],{"type":73,"value":417},{"type":68,"tag":116,"props":1656,"children":1657},{"style":315},[1658],{"type":73,"value":422},{"type":68,"tag":116,"props":1660,"children":1661},{"style":135},[1662],{"type":73,"value":776},{"type":68,"tag":116,"props":1664,"children":1665},{"style":129},[1666],{"type":73,"value":478},{"type":68,"tag":116,"props":1668,"children":1669},{"style":135},[1670],{"type":73,"value":785},{"type":68,"tag":116,"props":1672,"children":1673},{"style":129},[1674],{"type":73,"value":478},{"type":68,"tag":116,"props":1676,"children":1677},{"style":135},[1678],{"type":73,"value":483},{"type":68,"tag":116,"props":1680,"children":1681},{"style":129},[1682],{"type":73,"value":798},{"type":68,"tag":116,"props":1684,"children":1685},{"style":135},[1686],{"type":73,"value":803},{"type":68,"tag":116,"props":1688,"children":1689},{"style":129},[1690],{"type":73,"value":808},{"type":68,"tag":116,"props":1692,"children":1693},{"style":135},[1694],{"type":73,"value":813},{"type":68,"tag":69,"props":1696,"children":1697},{},[1698],{"type":73,"value":1699},"A one-time copy drifts from subsequent cache results.",{"type":68,"tag":69,"props":1701,"children":1702},{},[1703,1704],{"type":73,"value":1536},{"type":68,"tag":76,"props":1705,"children":1707},{"className":1706},[],[1708],{"type":73,"value":1542},{"type":68,"tag":1261,"props":1710,"children":1712},{"id":1711},"high-omitting-server-counts",[1713],{"type":73,"value":1714},"HIGH Omitting server counts",{"type":68,"tag":69,"props":1716,"children":1717},{},[1718],{"type":73,"value":1299},{"type":68,"tag":105,"props":1720,"children":1722},{"className":107,"code":1721,"language":109,"meta":110,"style":110},"useTable({ features, columns, data, manualPagination: true })\n",[1723],{"type":68,"tag":76,"props":1724,"children":1725},{"__ignoreMap":110},[1726],{"type":68,"tag":116,"props":1727,"children":1728},{"class":118,"line":119},[1729,1734,1738,1742,1747,1751,1756,1760,1765,1769,1774,1778,1782,1786],{"type":68,"tag":116,"props":1730,"children":1731},{"style":331},[1732],{"type":73,"value":1733},"useTable",{"type":68,"tag":116,"props":1735,"children":1736},{"style":135},[1737],{"type":73,"value":338},{"type":68,"tag":116,"props":1739,"children":1740},{"style":129},[1741],{"type":73,"value":343},{"type":68,"tag":116,"props":1743,"children":1744},{"style":135},[1745],{"type":73,"value":1746}," features",{"type":68,"tag":116,"props":1748,"children":1749},{"style":129},[1750],{"type":73,"value":143},{"type":68,"tag":116,"props":1752,"children":1753},{"style":135},[1754],{"type":73,"value":1755}," columns",{"type":68,"tag":116,"props":1757,"children":1758},{"style":129},[1759],{"type":73,"value":143},{"type":68,"tag":116,"props":1761,"children":1762},{"style":135},[1763],{"type":73,"value":1764}," data",{"type":68,"tag":116,"props":1766,"children":1767},{"style":129},[1768],{"type":73,"value":143},{"type":68,"tag":116,"props":1770,"children":1771},{"style":346},[1772],{"type":73,"value":1773}," manualPagination",{"type":68,"tag":116,"props":1775,"children":1776},{"style":129},[1777],{"type":73,"value":354},{"type":68,"tag":116,"props":1779,"children":1780},{"style":1085},[1781],{"type":73,"value":1088},{"type":68,"tag":116,"props":1783,"children":1784},{"style":129},[1785],{"type":73,"value":153},{"type":68,"tag":116,"props":1787,"children":1788},{"style":135},[1789],{"type":73,"value":387},{"type":68,"tag":69,"props":1791,"children":1792},{},[1793],{"type":73,"value":1427},{"type":68,"tag":105,"props":1795,"children":1797},{"className":107,"code":1796,"language":109,"meta":110,"style":110},"useTable({ features, columns, data, rowCount, manualPagination: true })\n",[1798],{"type":68,"tag":76,"props":1799,"children":1800},{"__ignoreMap":110},[1801],{"type":68,"tag":116,"props":1802,"children":1803},{"class":118,"line":119},[1804,1808,1812,1816,1820,1824,1828,1832,1836,1840,1845,1849,1853,1857,1861,1865],{"type":68,"tag":116,"props":1805,"children":1806},{"style":331},[1807],{"type":73,"value":1733},{"type":68,"tag":116,"props":1809,"children":1810},{"style":135},[1811],{"type":73,"value":338},{"type":68,"tag":116,"props":1813,"children":1814},{"style":129},[1815],{"type":73,"value":343},{"type":68,"tag":116,"props":1817,"children":1818},{"style":135},[1819],{"type":73,"value":1746},{"type":68,"tag":116,"props":1821,"children":1822},{"style":129},[1823],{"type":73,"value":143},{"type":68,"tag":116,"props":1825,"children":1826},{"style":135},[1827],{"type":73,"value":1755},{"type":68,"tag":116,"props":1829,"children":1830},{"style":129},[1831],{"type":73,"value":143},{"type":68,"tag":116,"props":1833,"children":1834},{"style":135},[1835],{"type":73,"value":1764},{"type":68,"tag":116,"props":1837,"children":1838},{"style":129},[1839],{"type":73,"value":143},{"type":68,"tag":116,"props":1841,"children":1842},{"style":135},[1843],{"type":73,"value":1844}," rowCount",{"type":68,"tag":116,"props":1846,"children":1847},{"style":129},[1848],{"type":73,"value":143},{"type":68,"tag":116,"props":1850,"children":1851},{"style":346},[1852],{"type":73,"value":1773},{"type":68,"tag":116,"props":1854,"children":1855},{"style":129},[1856],{"type":73,"value":354},{"type":68,"tag":116,"props":1858,"children":1859},{"style":1085},[1860],{"type":73,"value":1088},{"type":68,"tag":116,"props":1862,"children":1863},{"style":129},[1864],{"type":73,"value":153},{"type":68,"tag":116,"props":1866,"children":1867},{"style":135},[1868],{"type":73,"value":387},{"type":68,"tag":69,"props":1870,"children":1871},{},[1872],{"type":73,"value":1873},"One returned page cannot tell Table how many pages the server has.",{"type":68,"tag":69,"props":1875,"children":1876},{},[1877,1878],{"type":73,"value":1536},{"type":68,"tag":76,"props":1879,"children":1881},{"className":1880},[],[1882],{"type":73,"value":1883},"docs\u002Fframework\u002Fvue\u002Fguide\u002Fpagination.md",{"type":68,"tag":98,"props":1885,"children":1887},{"id":1886},"api-discovery",[1888],{"type":73,"value":1889},"API Discovery",{"type":68,"tag":69,"props":1891,"children":1892},{},[1893,1895,1901,1903,1909],{"type":73,"value":1894},"Inspect installed ",{"type":68,"tag":76,"props":1896,"children":1898},{"className":1897},[],[1899],{"type":73,"value":1900},"@tanstack\u002Fvue-table\u002Fdist\u002FuseTable.d.ts",{"type":73,"value":1902},", installed ",{"type":68,"tag":76,"props":1904,"children":1906},{"className":1905},[],[1907],{"type":73,"value":1908},"@tanstack\u002Fvue-query\u002Fdist\u002F",{"type":73,"value":1910},", and the relevant manual Table feature source for exact option types.",{"type":68,"tag":1912,"props":1913,"children":1914},"style",{},[1915],{"type":73,"value":1916},"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":1918,"total":2056},[1919,1931,1943,1955,1970,1982,1992,2002,2015,2025,2036,2046],{"slug":1920,"name":1920,"fn":1921,"description":1922,"org":1923,"tags":1924,"stars":22,"repoUrl":23,"updatedAt":1930},"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},[1925,1928,1929],{"name":1926,"slug":1927,"type":15},"Data Analysis","data-analysis",{"name":17,"slug":18,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:25:59.429787",{"slug":1932,"name":1932,"fn":1933,"description":1934,"org":1935,"tags":1936,"stars":22,"repoUrl":23,"updatedAt":1942},"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},[1937,1940,1941],{"name":1938,"slug":1939,"type":15},"Debugging","debugging",{"name":17,"slug":18,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:26:05.418735",{"slug":1944,"name":1944,"fn":1945,"description":1946,"org":1947,"tags":1948,"stars":22,"repoUrl":23,"updatedAt":1954},"cell-selection","select rectangular cell ranges in tables","Select rectangular cell ranges with cellSelectionFeature: two-corner range state keyed by row and column id, mousedown\u002Fmouseenter handlers, selection edges, render-order resolution under pinning, and autoResetCellSelection. Load when ranges widen unexpectedly after sorting or column reordering, when a drag re-renders the whole table, or when building copy-to-clipboard from a selection.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1949,1950,1951],{"name":1926,"slug":1927,"type":15},{"name":9,"slug":8,"type":15},{"name":1952,"slug":1953,"type":15},"UI Components","ui-components","2026-07-30T05:25:38.403427",{"slug":1956,"name":1956,"fn":1957,"description":1958,"org":1959,"tags":1960,"stars":22,"repoUrl":23,"updatedAt":1969},"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},[1961,1964,1965,1968],{"name":1962,"slug":1963,"type":15},"Data Pipeline","data-pipeline",{"name":17,"slug":18,"type":15},{"name":1966,"slug":1967,"type":15},"Performance","performance",{"name":9,"slug":8,"type":15},"2026-07-30T05:25:45.400104",{"slug":1971,"name":1971,"fn":1972,"description":1973,"org":1974,"tags":1975,"stars":22,"repoUrl":23,"updatedAt":1981},"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},[1976,1979,1980],{"name":1977,"slug":1978,"type":15},"Data Visualization","data-visualization",{"name":17,"slug":18,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:25:41.397257",{"slug":1983,"name":1983,"fn":1984,"description":1985,"org":1986,"tags":1987,"stars":22,"repoUrl":23,"updatedAt":1991},"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},[1988,1989,1990],{"name":1926,"slug":1927,"type":15},{"name":17,"slug":18,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:25:53.391632",{"slug":1993,"name":1993,"fn":1994,"description":1995,"org":1996,"tags":1997,"stars":22,"repoUrl":23,"updatedAt":2001},"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},[1998,1999,2000],{"name":17,"slug":18,"type":15},{"name":9,"slug":8,"type":15},{"name":1952,"slug":1953,"type":15},"2026-07-30T05:26:03.37801",{"slug":2003,"name":2003,"fn":2004,"description":2005,"org":2006,"tags":2007,"stars":22,"repoUrl":23,"updatedAt":2014},"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},[2008,2011,2012,2013],{"name":2009,"slug":2010,"type":15},"CSS","css",{"name":17,"slug":18,"type":15},{"name":9,"slug":8,"type":15},{"name":1952,"slug":1953,"type":15},"2026-07-30T05:25:55.377366",{"slug":2016,"name":2016,"fn":2017,"description":2018,"org":2019,"tags":2020,"stars":22,"repoUrl":23,"updatedAt":2024},"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},[2021,2022,2023],{"name":17,"slug":18,"type":15},{"name":9,"slug":8,"type":15},{"name":1952,"slug":1953,"type":15},"2026-07-30T05:25:51.400011",{"slug":2026,"name":2026,"fn":2027,"description":2028,"org":2029,"tags":2030,"stars":22,"repoUrl":23,"updatedAt":2035},"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},[2031,2032,2033,2034],{"name":2009,"slug":2010,"type":15},{"name":17,"slug":18,"type":15},{"name":9,"slug":8,"type":15},{"name":1952,"slug":1953,"type":15},"2026-07-30T05:25:48.703799",{"slug":2037,"name":2037,"fn":2038,"description":2039,"org":2040,"tags":2041,"stars":22,"repoUrl":23,"updatedAt":2045},"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},[2042,2043,2044],{"name":17,"slug":18,"type":15},{"name":9,"slug":8,"type":15},{"name":1952,"slug":1953,"type":15},"2026-07-30T05:25:47.367943",{"slug":2047,"name":2047,"fn":2048,"description":2049,"org":2050,"tags":2051,"stars":22,"repoUrl":23,"updatedAt":2055},"core","build data grids with TanStack Table","Use TanStack Table v9 as a headless data-grid state and row-processing engine. Load for first-table architecture, stable data and columns, row numbering with getDisplayIndex, semantic rendering, framework adapter choice, or deciding what Table owns versus the renderer.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[2052,2053,2054],{"name":1926,"slug":1927,"type":15},{"name":17,"slug":18,"type":15},{"name":1952,"slug":1953,"type":15},"2026-07-30T05:25:52.366295",125,{"items":2058,"total":1164},[2059,2065,2071,2077,2084,2090,2096],{"slug":1920,"name":1920,"fn":1921,"description":1922,"org":2060,"tags":2061,"stars":22,"repoUrl":23,"updatedAt":1930},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[2062,2063,2064],{"name":1926,"slug":1927,"type":15},{"name":17,"slug":18,"type":15},{"name":9,"slug":8,"type":15},{"slug":1932,"name":1932,"fn":1933,"description":1934,"org":2066,"tags":2067,"stars":22,"repoUrl":23,"updatedAt":1942},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[2068,2069,2070],{"name":1938,"slug":1939,"type":15},{"name":17,"slug":18,"type":15},{"name":9,"slug":8,"type":15},{"slug":1944,"name":1944,"fn":1945,"description":1946,"org":2072,"tags":2073,"stars":22,"repoUrl":23,"updatedAt":1954},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[2074,2075,2076],{"name":1926,"slug":1927,"type":15},{"name":9,"slug":8,"type":15},{"name":1952,"slug":1953,"type":15},{"slug":1956,"name":1956,"fn":1957,"description":1958,"org":2078,"tags":2079,"stars":22,"repoUrl":23,"updatedAt":1969},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[2080,2081,2082,2083],{"name":1962,"slug":1963,"type":15},{"name":17,"slug":18,"type":15},{"name":1966,"slug":1967,"type":15},{"name":9,"slug":8,"type":15},{"slug":1971,"name":1971,"fn":1972,"description":1973,"org":2085,"tags":2086,"stars":22,"repoUrl":23,"updatedAt":1981},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[2087,2088,2089],{"name":1977,"slug":1978,"type":15},{"name":17,"slug":18,"type":15},{"name":9,"slug":8,"type":15},{"slug":1983,"name":1983,"fn":1984,"description":1985,"org":2091,"tags":2092,"stars":22,"repoUrl":23,"updatedAt":1991},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[2093,2094,2095],{"name":1926,"slug":1927,"type":15},{"name":17,"slug":18,"type":15},{"name":9,"slug":8,"type":15},{"slug":1993,"name":1993,"fn":1994,"description":1995,"org":2097,"tags":2098,"stars":22,"repoUrl":23,"updatedAt":2001},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[2099,2100,2101],{"name":17,"slug":18,"type":15},{"name":9,"slug":8,"type":15},{"name":1952,"slug":1953,"type":15}]