[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6EGATCWYJ5176TQJXZ7VCZZ":3,"skill-same:01M6EGATCWYJ5176TQJXZ7VCZZ":48},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":21,"linkOnly":22,"markdownContent":23,"markdownBody":23,"frontMatter":24,"refName":25,"commitSha":26,"skillDirectory":27,"forksCount":28,"repositoryHtmlUrl":29,"repositoryHomepageUrl":30,"ownerHtmlUrl":31,"ownerBlogUrl":6,"ownerDescription":32,"updatedAt":33,"install":34,"resources":47},"01M6EGATCWYJ5176TQJXZ7VCZZ","tanstack-table",null,"ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",67,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002FTerminalSkills\u002Fskills\u002Ftanstack-table\u002FSKILL.md",[],[18,19,20],"table","tanstack","tanstack table","2026-11-10 10:12:30",false,"# TanStack Table\n\n## Overview\n\nTanStack Table is a headless table library — it handles the logic (sorting, filtering, pagination, grouping, column visibility) and you handle the rendering. No predefined styles or markup, full control over how the table looks. Works with React, Vue, Svelte, Solid, or vanilla JS. The standard for building custom data tables that don't look like every other Material UI table.\n\n## When to Use\n\n- Displaying tabular data with sorting, filtering, and pagination\n- Need full control over table styling (not a pre-styled component)\n- Server-side pagination and filtering\n- Complex tables with column resizing, reordering, and pinning\n- Row selection and bulk actions\n- Large datasets with virtualized rendering\n\n## Instructions\n\n### Setup\n\n```bash\nnpm install @tanstack\u002Freact-table\n```\n\n### Basic Table\n\n```tsx\n\u002F\u002F components\u002FDataTable.tsx — Sortable, filterable table\nimport {\n  useReactTable,\n  getCoreRowModel,\n  getSortedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  flexRender,\n  ColumnDef,\n  SortingState,\n} from \"@tanstack\u002Freact-table\";\nimport { useState } from \"react\";\n\ninterface User {\n  id: number;\n  name: string;\n  email: string;\n  role: string;\n  status: \"active\" | \"inactive\";\n  joinedAt: string;\n}\n\nconst columns: ColumnDef\u003CUser>[] = [\n  {\n    accessorKey: \"name\",\n    header: \"Name\",\n    cell: (info) => \u003Cspan className=\"font-medium\">{info.getValue\u003Cstring>()}\u003C\u002Fspan>,\n  },\n  { accessorKey: \"email\", header: \"Email\" },\n  { accessorKey: \"role\", header: \"Role\" },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: (info) => (\n      \u003Cspan className={info.getValue() === \"active\" ? \"text-green-600\" : \"text-gray-400\"}>\n        {info.getValue\u003Cstring>()}\n      \u003C\u002Fspan>\n    ),\n  },\n  {\n    accessorKey: \"joinedAt\",\n    header: \"Joined\",\n    cell: (info) => new Date(info.getValue\u003Cstring>()).toLocaleDateString(),\n  },\n];\n\nexport function UsersTable({ data }: { data: User[] }) {\n  const [sorting, setSorting] = useState\u003CSortingState>([]);\n  const [globalFilter, setGlobalFilter] = useState(\"\");\n\n  const table = useReactTable({\n    data,\n    columns,\n    state: { sorting, globalFilter },\n    onSortingChange: setSorting,\n    onGlobalFilterChange: setGlobalFilter,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n  });\n\n  return (\n    \u003Cdiv>\n      {\u002F* Search *\u002F}\n      \u003Cinput\n        value={globalFilter}\n        onChange={(e) => setGlobalFilter(e.target.value)}\n        placeholder=\"Search all columns...\"\n        className=\"mb-4 p-2 border rounded\"\n      \u002F>\n\n      {\u002F* Table *\u002F}\n      \u003Ctable className=\"w-full border-collapse\">\n        \u003Cthead>\n          {table.getHeaderGroups().map((headerGroup) => (\n            \u003Ctr key={headerGroup.id}>\n              {headerGroup.headers.map((header) => (\n                \u003Cth\n                  key={header.id}\n                  onClick={header.column.getToggleSortingHandler()}\n                  className=\"text-left p-3 border-b cursor-pointer hover:bg-gray-50\"\n                >\n                  {flexRender(header.column.columnDef.header, header.getContext())}\n                  {{ asc: \" ↑\", desc: \" ↓\" }[header.column.getIsSorted() as string] ?? \"\"}\n                \u003C\u002Fth>\n              ))}\n            \u003C\u002Ftr>\n          ))}\n        \u003C\u002Fthead>\n        \u003Ctbody>\n          {table.getRowModel().rows.map((row) => (\n            \u003Ctr key={row.id} className=\"hover:bg-gray-50\">\n              {row.getVisibleCells().map((cell) => (\n                \u003Ctd key={cell.id} className=\"p-3 border-b\">\n                  {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                \u003C\u002Ftd>\n              ))}\n            \u003C\u002Ftr>\n          ))}\n        \u003C\u002Ftbody>\n      \u003C\u002Ftable>\n\n      {\u002F* Pagination *\u002F}\n      \u003Cdiv className=\"flex items-center gap-2 mt-4\">\n        \u003Cbutton onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>\n          Previous\n        \u003C\u002Fbutton>\n        \u003Cspan>\n          Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}\n        \u003C\u002Fspan>\n        \u003Cbutton onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>\n          Next\n        \u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n### Server-Side Pagination\n\n```tsx\n\u002F\u002F components\u002FServerTable.tsx — Fetch data per page from API\nconst table = useReactTable({\n  data: serverData.rows,\n  columns,\n  pageCount: serverData.pageCount,\n  state: { sorting, pagination },\n  onSortingChange: setSorting,\n  onPaginationChange: setPagination,\n  getCoreRowModel: getCoreRowModel(),\n  manualPagination: true,   \u002F\u002F Server handles pagination\n  manualSorting: true,      \u002F\u002F Server handles sorting\n});\n\n\u002F\u002F Fetch when pagination\u002Fsorting changes\nuseEffect(() => {\n  fetchData({\n    page: pagination.pageIndex,\n    pageSize: pagination.pageSize,\n    sortBy: sorting[0]?.id,\n    sortDir: sorting[0]?.desc ? \"desc\" : \"asc\",\n  });\n}, [pagination, sorting]);\n```\n\n### Row Selection\n\n```tsx\nconst [rowSelection, setRowSelection] = useState({});\n\nconst columns: ColumnDef\u003CUser>[] = [\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      \u003Cinput type=\"checkbox\" checked={table.getIsAllRowsSelected()} onChange={table.getToggleAllRowsSelectedHandler()} \u002F>\n    ),\n    cell: ({ row }) => (\n      \u003Cinput type=\"checkbox\" checked={row.getIsSelected()} onChange={row.getToggleSelectedHandler()} \u002F>\n    ),\n  },\n  \u002F\u002F ... other columns\n];\n\n\u002F\u002F Get selected rows\nconst selectedUsers = table.getSelectedRowModel().rows.map((r) => r.original);\n```\n\n## Examples\n\n### Example 1: Admin data table with CRUD\n\n**User prompt:** \"Build an admin table for managing users — sort, filter, paginate, and bulk delete.\"\n\nThe agent will create a TanStack Table with all features, row selection for bulk actions, and a search input.\n\n### Example 2: Server-side paginated table\n\n**User prompt:** \"My API returns paginated data. Build a table that fetches page by page.\"\n\nThe agent will set up manual pagination\u002Fsorting, fetch data on state change, and handle loading states.\n\n## Guidelines\n\n- **Headless = you own the markup** — style however you want\n- **`getCoreRowModel` is required** — always include it\n- **Add models for features** — `getSortedRowModel`, `getFilteredRowModel`, etc.\n- **`manualPagination` for server-side** — table tracks state, you fetch data\n- **`ColumnDef` for type safety** — `accessorKey` maps to data fields\n- **`flexRender` for cell rendering** — renders header and cell components\n- **Row selection with `getToggleSelectedHandler`** — works with checkboxes\n- **Column visibility** — `table.getColumn(\"email\")?.toggleVisibility(false)`\n- **Virtualization** — combine with `@tanstack\u002Freact-virtual` for 100K+ rows\n- **No styles included** — use Tailwind, CSS, or any styling solution\n",{},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002FTerminalSkills\u002Fskills\u002Ftanstack-table",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":7,"skillName":5,"commands":35,"prompt":45,"zipAvailable":46},[36,39,42],{"tool":37,"command":38},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill tanstack-table",{"tool":40,"command":41},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill tanstack-table",{"tool":43,"command":44},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill tanstack-table","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002FTerminalSkills\u002Fskills\u002Ftanstack-table\u002FSKILL.md",true,[],[49,63,73,82,88,95],{"skillNo":50,"name":51,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":52,"categories":53,"keywords":59,"publishedAt":21},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[54],{"categoryNo":55,"categoryName":56,"taxonomyType":57,"taxonomyTypeDesc":58},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[60,61,62],"model","model hierarchy","model hierarchy skill",{"skillNo":64,"name":65,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":66,"categories":67,"keywords":69,"publishedAt":21},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[68],{"categoryNo":55,"categoryName":56,"taxonomyType":57,"taxonomyTypeDesc":58},[70,71,72],"MCP","zoom","zoom mcp",{"skillNo":74,"name":75,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":76,"categories":77,"keywords":78,"publishedAt":21},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[79,80,81,71],"sdk","zoom apps sdk","apps",{"skillNo":83,"name":84,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":85,"categories":86,"keywords":87,"publishedAt":21},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[84],{"skillNo":89,"name":90,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":91,"categories":92,"keywords":94,"publishedAt":21},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[93],{"categoryNo":55,"categoryName":56,"taxonomyType":57,"taxonomyTypeDesc":58},[90],{"skillNo":96,"name":97,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":98,"categories":99,"keywords":100,"publishedAt":21},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[97]]