How to Handle 'Select All' in Server-Side Pagination with Custom Row Selection in Material React Table?

[rogeliovividly]

I'm working with server-side paginated data where the server returns 10 Payment items per page, along with a summary of all payment IDs. The data structure looks like this:

data = {
  results: [Payment Object 1, Payment Object 2, ..., Payment Object 10],
  summary: {
    allPaymentIds: [1, 2, 3, ..., 100],
    count: 100
  }
};

I want to customize the behavior of onRowSelectionChange so that when the "Select All" checkbox is checked, all allPaymentIds are moved into my rowSelection object.

Currently, I'm managing row selection manually like this:

const [rowSelection, setRowSelection] = useState<MRTRowSelectionState>({});

Then, I'm using this setter in my table configuration:

const table = useMaterialReactTable({
  ...
  enableRowSelection: true,
  onRowSelectionChange: setRowSelection,
});