FAQ

Below are some of the most frequently asked questions on how to use the React Table API to solve various table challenges you may encounter

How can I manually control the table state?

Occasionally, you may need to override some of the table state from a parent component or from somewhere above the usage of useTable. In this case, you can turn to useTable's useControlledState option. This hook function is run on every render and allows you an opportunity to override or change the final table state in a safe way.

For example, to control a table's pageIndex from a parent component:

1 const [controlledPageIndex, setControlledPage] = React.useState(0)
2 
3 useTable({
4   useControlledState: state => {
5     return React.useMemo(
6       () => ({
7         ...state,
8         pageIndex: controlledPageIndex,
9       }),
10       [state, controlledPageIndex]
11     )
12   },
13 })

It's important that the state override is done within a useMemo call to prevent the state variable from changing on every render. It's also extremely important that you always use the state in any dependencies to ensure that you do not block normal state updates.

How can I use the table state to fetch new data?

When managing your data externally or asynchronously (eg. server-side pagination/sorting/grouping/etc), you will need to fetch new data as the internal table state changes. With React Hooks, this is fantastically easier than it was before now that we have the React.useEffect hook. We can use this hook to "watch" the table state for specific changes and use those effects to trigger fetches for new data (or synchronize any other state you may be managing externally from your table component):

1 function Table({ data, onFetchData }) {
2   const {
3     state: { pageIndex, pageSize, sortBy, filters },
4   } = useTable({
5     data,
6   })
7 
8   // When these table states change, fetch new data!
9   React.useEffect(() => {
10     onFetchData({ pageIndex, pageSize, sortBy, filters })
11   }, [onFetchData, pageIndex, pageSize, sortBy, filters])
12 
13   return </>
14 }

Using this approach, you can respond and trigger any type of side-effect using the table instance!

How can I debounce rapid table state changes?

React Table has a few built-in side-effects of its own (most of which are meant for resetting parts of the state when data changes). By default, these state side-effects are on and when their conditions are met, they immediately fire off actions that will manipulate the table state. Sometimes, this may result in multiple rapid rerenders (usually just 2, or one more than normal), and could cause any side-effects you have watching the table state to also fire multiple times in-a-row. To alleviate this edge-case, React Table exports a useAsyncDebounce function that will allow you to debounce rapid side-effects and only use the latest one.

A good example of this when doing server-side pagination and sorting, a user changes the sortBy for a table and the pageIndex is automatically reset to 0 via an internal side effect. This would normally cause our effect below to fire 2 times, but with useAsyncDebounce we can make sure our data fetch function only gets called once:

1 import { useTable, useAsyncDebounce } from 'react-table'
2 
3 function Table({ data, onFetchData }) {
4   const {
5     state: { pageIndex, pageSize, sortBy, filters },
6   } = useTable({
7     data,
8   })
9 
10   // Debounce our onFetchData call for 100ms
11   const onFetchDataDebounced = useAsyncDebounce(onFetchData, 100)
12 
13   // When the these table states changes, fetch new data!
14   React.useEffect(() => {
15     // Every change will call our debounced function
16     onFetchDataDebounced({ pageIndex, pageSize, sortBy, filters })
17     // Only the last call after the 100ms debounce is over will be fired!
18   }, [onFetchDataDebounced, pageIndex, pageSize, sortBy, filters])
19 
20   return </>
21 }

How do I stop my table state from automatically resetting when my data changes?

Most plugins use state that should normally reset when the data sources changes, but sometimes you need to suppress that from happening if you are filtering your data externally, or immutably editing your data while looking at it, or simply doing anything external with your data that you don't want to trigger a piece of table state to reset automatically.

For those situations, each plugin provides a way to disable the state from automatically resetting internally when data or other dependencies for a piece of state change. By setting any of them to false, you can stop the automatic resets from being triggered.

Here is an example of stopping basically every piece of state from changing as they normally do while we edit the data source for a table:

1 const [data, setData] = React.useState([])
2 const skipPageResetRef = React.useRef()
3 
4 const updateData = newData => {
5   // When data gets updated with this function, set a flag
6   // to disable all of the auto resetting
7   skipPageResetRef.current = true
8 
9   setData(newData)
10 }
11 
12 React.useEffect(() => {
13   // After the table has updated, always remove the flag
14   skipPageResetRef.current = false
15 })
16 
17 useTable({
18   ...
19   autoResetPage: !skipPageResetRef.current,
20   autoResetExpanded: !skipPageResetRef.current,
21   autoResetGroupBy: !skipPageResetRef.current,
22   autoResetSelectedRows: !skipPageResetRef.current,
23   autoResetSortBy: !skipPageResetRef.current,
24   autoResetFilters: !skipPageResetRef.current,
25   autoResetRowState: !skipPageResetRef.current,
26 })

Now, when we update our data, the above table states will not automatically reset!