Build a Multifeatured Table With TanStack Table

If you’ve worked before on a web application then you may have wondered how to display multiple data that are similar to each other. TanStack Tables (formerly React Table, before v8) are invaluable for creating user-friendly interfaces to view and modify records. At my current workplace, we extensively utilize these tables across multiple products. Until eight months ago we were working with React Table v6 and then an idea came to me to update the react-table package to v7.latest. Something that I regretted the next day but every time since then that I have to build a new feature in a table I’m finding out that this was a very good idea. A little while ago the newest version 8 came out, with a new name too, I thought to create a new project to try and test the new features of the library and write my first story here in medium about that.

TanStack Table | React Table, Solid Table, Svelte Table, Vue Table

Getting Started

Let’s start by setting up a project with a simple table example. Later, we’ll gradually incorporate advanced features like sorting, pagination, search, column resizing, page size adjustment, and column visibility.

Note: Before we start I have created a repository with this project.

GitHub - thomas-siozos/multifeatured-react-table: An advanced table using react-table

Use the following commands in your terminal to set up the application, install tanstack/react-table and then start the server locally.

npx create-react-app multifeatured-react-table
cd multifeatured-react-table
npm install @tanstack/react-table
npm start

Data Setup

But what is a table without data? To populate our table, let’s use sample employee data structured as follows:

To generate a sufficient amount of test data, create a ‘mockData.js’ file exporting an array (MOCK_DATA).

Note: You can use Mockaroo, a free data generator and API mocking tool, to create custom datasets.

Mockaroo - Random Data Generator and API Mocking Tool | JSON / CSV / SQL / Excel

Creating the Table

Next, pass the columns array as a prop to our MultifeaturedTable component.

Now that all the prerequisites are done we can finally create our simple table.

We pass columns and data as props to our MultifeaturedTable component and we use useMemo to memorize their values for performance optimization. The resulting React element resembles a pure HTML table but includes functions such as:

• getHeaderGroups()
• getRowModal()
• getVisibleCells()
• flexRender()

You can view the table on your localhost:3000.

Note: I have added some styling to the table, you can find it in repo/css/App.css or add something else you like.

Sorting

The next feature we are going to add is sorting. We will declare a “state variable” sorting by using useState hook. So, our code will look like this:

sorting-snipper

We have implemented a getSortingArrowStyles() function to decide which arrow-style to add according to the sorting state.

Below is sorting in action.

table-sorting

Paging

For managing large datasets, pagination is crucial. We’ll utilize TanStack Table’s default pagination functionality, including getPaginationRowModel and JSX elements for corresponding navigation buttons.

We have created 4 buttons (‘<<’, ‘<’, ‘>’, ‘>>’) and 1 input to let the user put a page they want to navigate. For buttons ‘<’, ‘>’ we use the functions table.previousPage() and table.nextPage() (// if we can go to next page) respectively. The button ‘<<’ onClick calls table.setPageIndex(0) and the button ‘>>’ calls table.setPageIndex(table.getPageCount() — 1). Finally, the input element every time user changes the number it calls table.setPageIndex(page), where page is the typed number or 0 if it’s not a number.

You can see below an example how paging works.

table-paging

Search Functionality

Do you remember the old days before all these computers and fancy staff, where we had to search in a book? It was painful, right? Fortunately, in tables we are able to add searching functionality and make searching much easier. We will use TanStack Table’s onGlobalFilterChange, getFilteredRowModel and we will initialize a state variable globalFilter.

Plus, we have added an input for searching.

table-searching

Note: Care about this error https://github.com/TanStack/table/issues/4280 and add in columns where data are numbers enableGlobalFilter: false.

Column Resizing

Mimic Excel’s column resizing feature by employing TanStack Table’s enableColumnResizing and columnResizeMode.

Inside header element in the end of it we added a div, which is responsible for its column resizing. Feel free to change columnResizeMode from ‘onChange’ to ‘onEnd’, it determines when the columnSizing state is updated.

table-column-resizing

Page Size Adjustment

One more functionality to add in our table is the ability to change the page size because many times we want to see more or less records per page than the default page size. We are going to add a dropdown for selecting page size into a settings modal. For this reason before we start creating our dropdown we will create a modal by using React’s createPortal. Create a ModalPortal.js which will has a state variable ‘active’ and its position will be ‘absolute’ and will be calculated according to his parent. Our file will look like this:

In MultifeaturedTable.js file we will create 2 refs, selectParent and settingsParent with React’s useRef and under the ‘>>’ we will add our ModalPortal, the root one for our settings modal and the nested for our dropdown. Also, 2 state variable selectActive and settingsActive to control when the modals will be open or close.

Note: For icons you need to install the package with the command

npm install react-icons — save. 

table-page-size

Column Visibility

One of my favorite features that has been added in TanStack Table v8 is the column visibility. I had to make this functionality by my own in our products for v7, that we are currently using. For this functionality we will use TanStack Table’s onColumnVisibilityChange and a state variable columnVisibility.

Inside our settings modal we have added above the select page size portal an input to search in the available headers and checkboxes for each header to control the column visibility.

table-column-visibility

TanStack Table library contains more useful functionalities, which will help you build a flexible and easy-to-use table. I tried to cover a lot of common functionalities in this story. Thanks for reading!