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

Fri, 22 Oct 2021 15:12:17 +0530

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.

React-Table on Taha Husain

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

Implementation

Step 1

Step 2