React-Table: useTable
Intro
React-Table is an awesome headless data table component for React with a ton of great features. The API is well documented but the code samples leave a bit to be desired. In some instances they demonstrate multiple different hooks in one example, which can be confusing for beginners. A Simplest Possible Implementation (SPI) is always preferable in documentation.
In other instances the code samples imply things that may not necessarily be true. Like if you use useBlockLayout you must also use Styled Components. And other implications that we will explore.
This post is intended to provide several SPI examples of common hooks and also dispel some misconceptions that the documentation examples may create.
Example Notes
I am going to provide all of my examples as nested components. There will be one primary component called <DataTable> which is where the majority of the code for the table will live. This will be wrapped by another component <PeopleDataTable> which will feed the data and columns to the <DataTable> as props.
This is intended to mimic a real world implementation as closely as possible. We want our <DataTable> component to be composable. In the real world there will probably be several different versions of a table for different types or categories of data. We will pretend that we want to show user information with this particular instance, thus <PeopleDataTable>.
This parent component exists simply to pass data, columns and other settings down to the <DataTable> component, as you would do in a real application.
By removing the column definitions, data generation and styles from the DataTable component it is MUCH easier to see what is happening with this library.
useTable
This is the simplest possible implementation of a react-table with no additional features. Just taking data and columns props and generating a table.
In the following posts we will expand on this simple table with sorting, filtering, pagination and more by using the other available hooks.
Comments
Recent Work
Basalt
basalt.softwareFree desktop AI Chat client, designed for developers and businesses. Unlocks advanced model settings only available in the API. Includes quality of life features like custom syntax highlighting.
BidBear
bidbear.ioBidbear is a report automation tool. It downloads Amazon Seller and Advertising reports, daily, to a private database. It then merges and formats the data into beautiful, on demand, exportable performance reports.