{"id":18187281,"url":"https://github.com/georgiirocket/tables","last_synced_at":"2025-09-21T22:12:19.543Z","repository":{"id":260769510,"uuid":"882288451","full_name":"georgiirocket/tables","owner":"georgiirocket","description":"✅ Implementation of tables with TanStack Table","archived":false,"fork":false,"pushed_at":"2025-04-08T18:12:21.000Z","size":966,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-09T21:52:24.706Z","etag":null,"topics":["dexie","framer-motion","nextjs","react-icons","react-table","tailwind","tanstack-table","zustand"],"latest_commit_sha":null,"homepage":"https://tables-pi-woad.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/georgiirocket.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-02T12:20:23.000Z","updated_at":"2025-04-08T18:15:27.000Z","dependencies_parsed_at":"2025-04-09T21:52:25.635Z","dependency_job_id":null,"html_url":"https://github.com/georgiirocket/tables","commit_stats":null,"previous_names":["georgiirocket/tables"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/georgiirocket/tables","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/georgiirocket%2Ftables","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/georgiirocket%2Ftables/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/georgiirocket%2Ftables/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/georgiirocket%2Ftables/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/georgiirocket","download_url":"https://codeload.github.com/georgiirocket/tables/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/georgiirocket%2Ftables/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":276314355,"owners_count":25620902,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-21T02:00:07.055Z","response_time":72,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dexie","framer-motion","nextjs","react-icons","react-table","tailwind","tanstack-table","zustand"],"created_at":"2024-11-03T01:03:09.112Z","updated_at":"2025-09-21T22:12:19.522Z","avatar_url":"https://github.com/georgiirocket.png","language":"TypeScript","readme":"Implementation of tables with TanStack Table\n\n## TanStack Table\n\n[TanStack Table](https://tanstack.com/table/latest)\n\nTanStack Table is a powerful tool for creating and reusing tables on the web.\n\nThis repository shows a basic implementation of stylesheets.\n\nFeel free to copy, add and use this\n\n## Tools used\n\n-  Next.js\n-  Hero UI\n-  TanStack Table\n-  Tailwind\n-  Dexie\n-  Framer Motion\n-  Zustand\n\n\n## Examples\n\n-  [Base usage](https://tables-pi-woad.vercel.app)\n-  [With indexDB](https://tables-pi-woad.vercel.app/with-index-db)\n-  [With first index](https://tables-pi-woad.vercel.app/with-first-index-column)\n-  [With total row](https://tables-pi-woad.vercel.app/with-total-row)\n-  [With menu](https://tables-pi-woad.vercel.app/with-menu)\n-  [With menu](https://tables-pi-woad.vercel.app/with-menu)\n-  [With data updating](https://tables-pi-woad.vercel.app/update-data)\n-  [Many entities](https://tables-pi-woad.vercel.app/many-entities)\n-  [Full functionally](https://tables-pi-woad.vercel.app/full)\n\n## Base example:\n\ndata.tsx\n\n```ts\nexport type IColumn = ColumnDef\u003cIEntity\u003e[];\n\nexport const columData: IColumn = [\n  {\n    accessorKey: 'image',\n    header: 'Photo',\n    cell: ImageCell,\n    size: 180,\n    enableGlobalFilter: false,\n  },\n  {\n    accessorKey: 'title',\n    header: 'Title',\n    size: 180,\n  },\n  {\n    accessorKey: 'price',\n    header: FilterHeaderCell,\n    filterFn: columnFilterFn,\n    size: 100,\n    meta: { headerName: 'Price' },\n  },\n  {\n    accessorKey: 'description',\n    header: 'Description',\n    cell: DescriptionCell,\n    size: 250,\n  },\n  {\n    accessorKey: 'category',\n    header: FilterHeaderCell,\n    filterFn: columnFilterFn,\n    size: 150,\n    meta: { headerName: 'Category' },\n  },\n];\n```\n\nindex.tsx (table component)\n\n```jsx\nconst BaseTable: FC = () =\u003e {\n    const { baseEntities } = dataStore((state) =\u003e state);\n    const { sorting, setSorting, globalFilter, setGlobalFilter, columnFilters, setColumnFilters } =\n      baseFiltersStore((state) =\u003e state);\n\n    const table = useReactTable({\n      data: baseEntities,\n      columns: columData,\n      getCoreRowModel: getCoreRowModel(),\n      getSortedRowModel: getSortedRowModel(),\n      getFilteredRowModel: getFilteredRowModel(),\n      getFacetedRowModel: getFacetedRowModel(),\n      getFacetedUniqueValues: getFacetedUniqueValues(),\n      globalFilterFn: 'includesString',\n      columnResizeMode: 'onChange',\n      onGlobalFilterChange: setGlobalFilter,\n      onColumnFiltersChange: setColumnFilters,\n      onSortingChange: setSorting,\n      state: { globalFilter, columnFilters, sorting },\n      getRowId: (item) =\u003e String(item.id),\n    });\n\n    return \u003cCommonTable table={table} /\u003e;\n  };\n```\n\n## Node version\n\n- node - 22.13.0\n- npm - 10.9.2\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeorgiirocket%2Ftables","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgeorgiirocket%2Ftables","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeorgiirocket%2Ftables/lists"}