{"id":22612281,"url":"https://github.com/utsavdotpro/reacttable-utils","last_synced_at":"2025-04-11T09:13:45.827Z","repository":{"id":45807533,"uuid":"514681569","full_name":"utsavdotpro/ReactTable-Utils","owner":"utsavdotpro","description":"Util functions \u0026 classes for easily creating Tanstack React Tables v8","archived":false,"fork":false,"pushed_at":"2022-07-18T13:00:23.000Z","size":118,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-25T06:33:15.025Z","etag":null,"topics":["react","react-table","react-table-v8"],"latest_commit_sha":null,"homepage":"https://npmjs.com/package/react-table-utils","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/utsavdotpro.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}},"created_at":"2022-07-16T20:46:39.000Z","updated_at":"2025-03-06T13:48:13.000Z","dependencies_parsed_at":"2022-07-19T14:38:56.087Z","dependency_job_id":null,"html_url":"https://github.com/utsavdotpro/ReactTable-Utils","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/utsavdotpro%2FReactTable-Utils","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/utsavdotpro%2FReactTable-Utils/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/utsavdotpro%2FReactTable-Utils/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/utsavdotpro%2FReactTable-Utils/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/utsavdotpro","download_url":"https://codeload.github.com/utsavdotpro/ReactTable-Utils/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248365290,"owners_count":21091761,"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","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":["react","react-table","react-table-v8"],"created_at":"2024-12-08T17:12:00.846Z","updated_at":"2025-04-11T09:13:45.806Z","avatar_url":"https://github.com/utsavdotpro.png","language":"TypeScript","readme":"# React Table Utils\n\nUtil functions \u0026 classes for working with [TanStack Table v8](https://tanstack.com/table/v8/?from=reactTableV7\u0026original=https://react-table-v7.tanstack.com/) (ReactTable) easily \u0026 quickly.\n\n## Install\n\n````bash\nyarn add react-table-utils\n# or\nnpm install react-table-utils\n````\n\n## Getting Started\n\nThis is a utils package for TanStack Table so you need to install it to your project.\n\n````bash\nyarn @tanstack/react-table\n````\n\n## Classes \u0026 Functions\n\n### TableHeader Class\n\nTableHeader is a generic class for generating table headers for the table. It gives you the option to modify all the required properties of your column directly by using the different setter functions. It supports chaining.\n\n````js\nnew TableHeader\u003cEntityType\u003e(\"name\") // id or key for the column\n  .header(\"Name\") // optional header text or element\n  .footer((\"Total\")) // optional footer text or element\n  .cell((value) =\u003e \u003cstrong\u003e{value}\u003c/strong\u003e) // optional cell element, returns the value by default\n  .accessorFn((row) =\u003e row.name) // optional accessor function, overrides the cell\n  .build(); // returns the JSON object\n````\n\n### TableHeaderBuilder Class\n\nWhile [TableHeader](#tableheader-class) is good for creating single column headers, it is not enough for creating multiple columns. TableHeaderBuilder is a class for creating multiple columns. It gives you an `add()` to quickly chain as many table headers as you like.\n\nThe `add()` takes three parameters:\n\n- `idOrKey`: id or key for the column\n- `fn`: function that gives you the generated TableHeader to modify\n- `toAdd`: boolean flag to conditionally add the header to the builder\n\nIt also has an `addAt()` that accepts all the parameters of `add()` but also takes an `position` parameter to add the header at a specific index.\n\n**Example:**\n````js\nnew TableHeaderBuilder\u003cEntityType\u003e()\n  .add(\"serial\", (col) =\u003e\n    col.header(\"#\").accessorFn((_, index) =\u003e index + 1)\n  )\n  .add(\"actions\", (col) =\u003e col.header(\"\"))\n  .add(\"name\")\n  .add(\"email\", (col) =\u003e\n    col.cell((value) =\u003e (\n      \u003cLinkedItem href={`mailto:${value}`}\u003e{value}\u003c/LinkedItem\u003e\n    ))\n  )\n  .add(\"mobile\", (col) =\u003e\n    col.cell((value) =\u003e\n      \u003cLinkedItem href={`tel:${value}`}\u003e{value}\u003c/LinkedItem\u003e\n    )\n  )\n  .add(\"language\", (col) =\u003e\n    col.cell((value) =\u003e \u003cspan\u003e{value}\u003c/span\u003e)\n  )\n  .add(\"status\", (col) =\u003e\n    col.cell((value) =\u003e (\n      \u003cTag\u003e{value.toLowerCase()}\u003c/Tag\u003e\n    ))\n  )\n  .build(); // returns an array of (TableHeader) JSON objects\n````\n\n## Comparing the Code Structure\n\n![](./samples/comparison.png)\n\n## Features\n\n - More readable \u0026 maintainable code\n - Ability to rearrange columns\n - Easy to set table defaults\n - 100% type-safe\n - Headless, just like ReactTable\n  \n\n## Contribution\n\u003e I wrote this package while working on a client project and thus, this package doesn't not have all the properties supported by TanStack table. But, they can be added easily.\n\nFeel free to open a pull request if you want to add support for more properties and enhance this package. You can also open an issue and I might add the support for you (based on my availability).","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Futsavdotpro%2Freacttable-utils","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Futsavdotpro%2Freacttable-utils","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Futsavdotpro%2Freacttable-utils/lists"}