React Table Utils

Util functions & classes for working with TanStack Table v8 (ReactTable) easily & quickly.

Install

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.

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.

new TableHeader<EntityType>("name") // id or key for the column
  .header("Name") // optional header text or element
  .footer(("Total")) // optional footer text or element
  .cell((value) => <strong>{value}</strong>) // 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 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:

new TableHeaderBuilder<EntityType>()
  .add("serial", (col) =>
    col.header("#").accessorFn((_, index) => index + 1)
  )
  .add("actions", (col) => col.header(""))
  .add("name")
  .add("email", (col) =>
    col.cell((value) => (
      <LinkedItem href={`mailto:${value}`}>{value}</LinkedItem>
    ))
  )
  .add("mobile", (col) =>
    col.cell((value) =>
      <LinkedItem href={`tel:${value}`}>{value}</LinkedItem>
    )
  )
  .add("language", (col) =>
    col.cell((value) => <span>{value}</span>)
  )
  .add("status", (col) =>
    col.cell((value) => (
      <Tag>{value.toLowerCase()}</Tag>
    ))
  )
  .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).