Select all table rows with server side pagination
I have table that displays data that comes from an api using server side pagination. How do I mark all rows as selected when the user checks the 'select all' checkbox in header? Because currently, when the user clicks select all, the rows of the entire page are selected, but not from the entire table.
I'm using react-table v7.
Checkbox column:
{
id: "selection",
Header: ({
getToggleAllRowsSelectedProps,
}) => {
return <IndeterminateCheckbox
{...getToggleAllRowsSelectedProps()}
/>
},
Cell: ({ row, selectedFlatRows }) => {
return (
<IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
) },
}
Table config:
{
columns: memoizedColumns,
data:[],
initialState: {},
manualPagination:true,
manualSortBy: true,
manualGlobalFilter: true,
manualFilters: true,
pageCount,
autoResetSelectedRows: false,
getRowId(originalRow, relativeIndex, parent) {
return originalRow.id;
},
}1 Reply
flat-fuchsia•10mo ago
Does your API provide a list of all of each id for each result, even those not shown?
If so then that’s straight forward enough, else you’ll need an endpoint that can provide the full list of ids, then update the selected row state with that data, tracking your custom ids as opposed to the table default ids.