How set some rows as initially selected

[dlauterbach]

I am displaying a table with row selection in a modal. When the user clicks "Save", the selected rows are saved into the parent component state and the modal is closed. If the user later clicks on button to edit their selections in same modal, I would like to display the table with their previously selected rows from parent component state initially selected. How can I load a table with some rows initially selected?

[dlauterbach]

I found my answer here. To have some rows initially selected I add their row Ids to initialState.selectedRowIds object that is passed as option to useTable(options).

[tahv0]

Your link is broken. Any chance to get correct link?

[aquibbaig]

https://github.com/tannerlinsley/react-table/blob/master/docs/src/pages/docs/api/useRowSelect.md

[AmrStar25]

but this still have issue because table will re-render after each change in row selection and initialState.selectedRowIds remain as it and i cant't change any row selection @dlauterbach

[GuOshiro]

Hey @tahv0 you can see here
https://spectrum.chat/react-table/general/v7-how-get-selected-rows-outside-of-react-table~2deb9558-c484-4b97-9e1c-6be608f1f275

[ialexalvarado]

any new URL for this topic? that URL's already broken

[codeawy]

You can use resetRowSelection() to reset, I have it help

[devGemScram]

Please provide a working URL, the above URL is broken.

[codeawy]

You can use resetRowSelection() to reset, I have it help

[QastanFIT]

Anyone with a working example?

[tungrix]

When I set:

const [rowSelection, setRowSelection] = useState({"1": true});

I got:

Type 'Dispatch<SetStateAction<{ "1": boolean; }>>' is not assignable to type 'OnChangeFn<RowSelectionState>'.
  Types of parameters 'value' and 'updaterOrValue' are incompatible.
    Type 'Updater<RowSelectionState>' is not assignable to type 'SetStateAction<{ "1": boolean; }>'.
      Type 'RowSelectionState' is not assignable to type 'SetStateAction<{ "1": boolean; }>'.
        Property '"1"' is missing in type 'RowSelectionState' but required in type '{ "1": boolean; }'.

from onRowSelectionChange inside useReactTable.

[KevinVandy]

Use strings for the keys

[tungrix]

I changed to string and still got an error from typescript, edited the error above.

[dubbajubba]

I think typescript is inferring the type of rowSelection as Record<"1", boolean>.

Type your variable, like this: const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({ "1": true });

[tungrix]

Thank you, adding <RowSelectionState> to the useState also works.

import { RowSelectionState } from "@tanstack/react-table";

const [rowSelection, setRowSelection] = useState<RowSelectionState>({"1": true});