Select multiple rows programmatically (with codeSandbox example)

[ZiedHf]

Hey,

I am having a hard time to figure out what is the best practice to select multiple rows programmatically.

I don't want to use toggleAllRowsSelected since I don't want to select all the rows.
Nor a loop with toggleRowSelected for performance reason.

See here an example on CodeSandbox with toggleRowSelected with only 1000 rows. It will freeze with 10000 rows.

I am not sure if stateReducer to change the selectedRowIds is the best practice to achieve this.
If so can anyone of you guys provide an example using it ?

I think such an example should go to the documentation as well.

Thanks a lot.

[ZiedHf]

Ok I think I found the answer.

In order to achieve that you will need to use stateReducer and dispatch.
1- Add a new type in the stateReducer.
2- Pass a payload in the dispatch with the same type.
3- Update your state

This is an example :

const stateReducer = (newState: TableState<any>, action: ActionType, previousState: TableState<any>, instance?: TableInstance<any>): TableState<any> => {
        switch (action.type) {
          case 'setRowState': // This is a new type
            return {
              ...newState,
              selectedRowIds: action.payload, // I will set my payload here
            };
          default:
            return newState;
        }
    };

The dispatch will be something similair to this :

dispatch({ type: 'setRowState', payload: {1: true, 2: true, 3: true }}); // Will select the 3 first rows

Use it in your button or useEffect or wherever you want.

Reference :

• https://react-table.tanstack.com/docs/api/useTable#table-options