Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/utsavdotpro/reacttable-utils
Util functions & classes for easily creating Tanstack React Tables v8
https://github.com/utsavdotpro/reacttable-utils
react react-table react-table-v8
Last synced: 14 days ago
JSON representation
Util functions & classes for easily creating Tanstack React Tables v8
- Host: GitHub
- URL: https://github.com/utsavdotpro/reacttable-utils
- Owner: utsavdotpro
- Created: 2022-07-16T20:46:39.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-07-18T13:00:23.000Z (over 2 years ago)
- Last Synced: 2024-11-16T00:19:37.535Z (about 1 month ago)
- Topics: react, react-table, react-table-v8
- Language: TypeScript
- Homepage: https://npmjs.com/package/react-table-utils
- Size: 115 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Table Utils
Util functions & classes for working with [TanStack Table v8](https://tanstack.com/table/v8/?from=reactTableV7&original=https://react-table-v7.tanstack.com/) (ReactTable) easily & quickly.
## Install
````bash
yarn add react-table-utils
# or
npm install react-table-utils
````
## Getting Started
This is a utils package for TanStack Table so you need to install it to your project.
````bash
yarn @tanstack/react-table
````
## Classes & Functions
### TableHeader Class
TableHeader 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.
````js
new TableHeader("name") // id or key for the column
.header("Name") // optional header text or element
.footer(("Total")) // optional footer text or element
.cell((value) => {value}) // optional cell element, returns the value by default
.accessorFn((row) => row.name) // optional accessor function, overrides the cell
.build(); // returns the JSON object
````
### TableHeaderBuilder Class
While [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.
The `add()` takes three parameters:
- `idOrKey`: id or key for the column
- `fn`: function that gives you the generated TableHeader to modify
- `toAdd`: boolean flag to conditionally add the header to the builder
It 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.
**Example:**
````js
new TableHeaderBuilder()
.add("serial", (col) =>
col.header("#").accessorFn((_, index) => index + 1)
)
.add("actions", (col) => col.header(""))
.add("name")
.add("email", (col) =>
col.cell((value) => (
{value}
))
)
.add("mobile", (col) =>
col.cell((value) =>
{value}
)
)
.add("language", (col) =>
col.cell((value) => {value})
)
.add("status", (col) =>
col.cell((value) => (
{value.toLowerCase()}
))
)
.build(); // returns an array of (TableHeader) JSON objects
````
## Comparing the Code Structure
## Features
- More readable & maintainable code
- Ability to rearrange columns
- Easy to set table defaults
- 100% type-safe
- Headless, just like ReactTable
## Contribution
> 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.
Feel 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).