React-table 7 Tutorial

Hello Developers, for all of you who uses the react-table package, the 7th version has a lot of changes. Now, as a developer, you have to write how to render the table yourself. In this article, we are going to go through how you can render the table yourself. As a bonus we are going to give it an ability to have an infinite scroll using react-window.

Disclaimer: this is the first time we use this version in our company, this is just an incentive to make the reader eager to read the documentation of this package and just to share what I just learnt

I. Rendering a Simple Table

For rendering a simple table, we are going to follow the logic laid down by the authors of the table. Instead of using the simple table to render, we are going to use the Table from react-bootstrap.

In this tutorial, all we need is: rendering the table, sorting it, filtering it, and the ability to add a sub component to a row. As a bonus we are going to add the ability to use infinite scroll using react-virtualized.

let’s start by an example(for a better view experience, add Code Medium plugin):

useTable is the root hook for React Table. To use it, pass it with an options object with at least a columns and data value, followed by any React Table compatible hooks you want to use. — from the authors site

The key here is to learn how useTable works by getting familiar with headerGroups, rows, prepareRow, and component decorators such as getTableProps, getTableBodyProps,.

On our end, we learnt this, by logging in the console everything and studying the api here.

getTableProps and getTableBodyProps are component decorators; functions that return props for JSX element. For example getTableProps returns {role: ‘table’}.

headerGroups is an object that contains an array of headers and decorators getHeaderGroupProps and getFooterGroupProps. Each header(column) is an object where one of the keys maps to a function to render a header render. it also has a column decorator getHeaderProps().

From the authors site, before rendering a row, it must be passed through the function prepareRow . According to the authors, this function is dedicated to lazily render the cell.

Each row contains cell which is an array of object where each corresponds to a single cell on a row. Each cell also has a decorator, and a render function.

Here is the original example where we started learning and our rewrite for learning purposes.

II. Sorting

In order to make the table sort we need to use another hook called useSortBy. Additionally, we need to change the way we render a little bit.

here is an example:

Notice that from we retried three addition constant from the column object: getSortByToggleProps, isSorted, isSortedDesc.

1. getSortByToggleProps is a decorator that return an on click function for the column as one of the props. This gives the table the ability to be sorted.
2. isSorted is a boolean which is true when the table is sorted
3. isSortedDesc is a boolean which is true when the table column is sorted in a descending way, false when is sorted in a ascending way, and undefined when the table is not sorted.

By combining isSorted and isSortedDesc, we added an extra class to the table header. Additionally, using css we can style it the way we want.

Here is the link to a working example.

III. Filtering

1. Column Filter.

In order to give a table the ability to filter by column, we need to use another hook called useFilters.

Additionally we must define an JSON object of filter components, and an object of filter functions.

example of the filter functions object:

In this object each key corresponds to a filter type and maps to a function to use while filtering. The default function used is the one whose key is ‘text’

Example of the default filter components

If we are not using the default filter component or the default filter Component, we must define the filter we want to use in the column headers.

example:

putting it all together:

here is a working example with a sort and filter by column options.

2. Global Filter

In order to give a table the ability to filter globally, we need to use another hook called useGlobalFilter.

Additionally we will instantiate state, setGlobalFilter variables from UseTable. From state, we are going to get the value used by the global filter and setGlobalFilter is the function that changes this.

We need to define a component that is going to be used as the global filter and what values need to be passed in here.

Here is an example and the two variable stated above being used.

Combing everything together here is a working example.

III. Resizing

By this time you are now familiar that any feature in this package has its own hooks. For resizing we are going to use two hooks: useResizeHook for adding the ability to resize and useFlexLayout in order to use the flex ability.

We are going to add a div dedicated to the resizer and getResizerProps is going to add the click handler.

Notice that from the column, we instantiated a function and a variable to use while resizing.

IV. SubComponent

Hook: useExpander.

Requirements:

1. Add an expander header in the table columns
2. Define a function to render the subcomponent. In the example below the function is renderRowSubComponent
3. Render the subcomponent in the view

New variable:

1. isExpanded from the row

example:

Table status so far: it is expandable with subcomponent(s), filterable, sortable, and resizable.

I hope that from now on, you realized that every new feature you have to add to the table, you need to research the necessary hook from the docs.

BONUS: INFINITE SCROLL

For this task, we are going to add the react-virtualized package. From this package we are going to use three components: InfiniteLoader, List, and AutoSizer.

This feature does not require a new hook instead, exteranal package to load new rows.

Example:

changes:

1. We removed the ability to have a sub component
2. Used the List component from react-virtualized to render the table body and passed it a function to render an individual row.
3. Used the AutoSizer component to control the height of the table.
4. Used the InfiniteLoader component to handle to handle the reload

Follow the comment inside the code view to understand more how each item is used.

This is the link to the github repository containing this entire tutorial.

— — Knowledge is meant to be shared.