React Table Part 2: Sorting and Filtering

Sorting

Sorting is a common feature in tables that allows users to organize data based on a specific column. React Table makes it easy to implement sorting with the useSortBy hook.

First, we need to import the useSortBy hook from React Table:

import { useTable, useSortBy } from 'react-table'

Next, we can add the useSortBy hook to our useTable function:

const {

getTableProps,

getTableBodyProps,

headerGroups,

footer groups,

rows,

prepareRow,

} = useTable({

columns,

dates, },

useSortBy)

Now, we can add sorting functionality to our table headers and footers. We can do this by mapping through the headerGroups and footerGroups arrays and rendering each column header with a sort button. The column.getSortByToggleProps() function returns props that we can spread onto the header element to enable sorting. We can also add an arrow icon to indicate the sorting direction:

Now let us look at the result:

Fig. 1: Table before sort

Fig. 2: Table  with country sorted from A - B

Fig. 3: Table with country sorted from Z - A

Filtering

Filtering is another common feature in tables that allows users to search for specific data within a table. React Table provides us with the useFilters and useGlobalFilter hooks to enable filtering.

First, we need to create a filter component that will render a search input field. This component will be used for individual column filtering:

This component receives the column object as a prop and extracts the filterValue and setFilter functions from it. filterValue represents the current filter value for the column, while setFilter is a function that sets the new filter value when the user types something in the input field.

We can also add a global filter component that will search for data across all columns. This component will be used to search for data in the entire table:

This component receives the filter and setFilter functions as props from React Table. filter represents the current global filter value, while setFilter is a function that sets the new global filter value when the user types something in the input field.

Notice that we are using the useAsyncDebounce hook from React Table. This hook debounces the user's input by a certain number of milliseconds (in this case, 1000), which means that the setFilter function will only be called after the user has finished typing for at least that amount of time. This helps to reduce unnecessary rendering and improve performance.

Now that we have our two filter components, let's integrate them into our table. First, we need to modify our columns array to include the Filter property for each column that we want to be filterable:

Now, let us look at the results:

Fig. 4:  Table before filter/search

Fig. 5: Table with a globa filter that searches through the entire table where there is "Te".

Fig. 6: Table with column filter that searches through a specific column(First Name) where there is "Te".