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).

[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

[Lokinorse]

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

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

[dhruv-pixis]

Can you provide the full solution here ?
@dlauterbach

[dhruv-pixis]

Did you find any solution for this ? @Lokinorse

[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

[Lokinorse]

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

[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

[Lokinorse]

Initial question was: "rows as initially selected". How exactly resetRowSelection() will help?

[QastanFIT]

Anyone with a working example?

[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});

[dhruv-pixis]

This works.

Mark this as an ANSWER