React Table - How to implement row selection with controlled server-side pagination

In this blog, we will implement multi-row selection and select all with controlled server-side pagination in React using React Table hooks.

We will use examples provided by react-table for controlled pagination and row selection and pagination and work our way to acheive desired result.

Implementation

Step 1

To select all rows, we would need unique identifier of all rows pre-fetched on the page. Pass all ids to the Table component.

Step 2

Use getToggleAllRowsSelectedProps instead of getToggleAllPageRowsSelectedProps for header checkbox to trigger rows select event across all pages. Note - getToggleAllRowsSelectedProps works seamlessly for frontend pagination, but needs to be customized for server-side pagination.

Step 3

Set autoResetSelectedRows table option to false.

Step 4

Add following custom stateReducer as a table option.

Definition

const extractSelectedRowIds = (ids) =>
  ids.reduce((row, id) => ({ ...row, [id]: true }), {});

const stateReducer = (ids) => (newState, action) => {
  if (action.type === "toggleAllRowsSelected") {
    // determine if the header checkbox is selected or deselected
    // if selected then push all ids into selectedRowIds
    if (action.value) {
      return {
        ...newState,
        selectedRowIds: extractSelectedRowIds(ids)
      };
    }
    // else empty selectedRowIds state
    return { ...newState, selectedRowIds: {} };
  }
  return newState;
};

useTable options

useTable(
  {
    columns,
    data,
    ...
    autoResetSelectedRows: false,
    getRowId: (row) => row.id,
    stateReducer: stateReducer(ids)
  },
  ...
)

Note: ids is an array of unique identifiers of complete dataset.

After setting above custom table options, the header checkbox will select all rows instead of page rows, and selected rows will remain selected even after page change or navigation.

Downside

While implementing these customizations, it’s only fair to discuss downside of this approach. When we have huge data, say in thousands or even more, above approach is not recommended because it can slow down the selection and de-selection process on the page.

Conclusion

In this blog, we implemented Select All checkbox with controlled pagination and discussed its pitfalls.

For complete code of above implementation, please check out following codesandbox.