Material-table: Selection functionality doesn't work correctly if selection state stored in Redux

[elenaheister]

Describe the bug
I am storing the selection state of a material-table with selectable rows in Redux because I need it elsewhere in the app. This causes unexpected and incorrect behaviour of the checkboxes in the table, as detailed below and in the screenshots.

Question: Is "material-table" generally compatible with Redux? Not sure if I am missing something, but storing state in Redux is a very common thing to do and I can't find anything relevant in the documentation on how to get this working correctly.

Set up
A "material-table" table with selectable rows. Selecting a checkbox sets this selection state in the Redux store. The checked state of the checkbox (selectionProps >> checked) is driven by that same selection state in the Redux store - full code below but here's the relevant line: selectionProps: (file) => ({ checked: !!reduxFileSelection && reduxFileSelection.includes(file.fileId) }),.

To Reproduce
Steps to reproduce the behavior:

1. Select "File 0" in the table (this sets the selection state in Redux)
2. Click on the "Fetch selected files" button (this clears the selection state in Redux)
3. Observe that the checkbox next to "File 0" is correctly unchecked (checkbox state set by selection state in Redux)
4. Now select "File "1".
5. Observe that the checkbox next to "File 1" is correctly checked, but the checkbox next to "File 0" is ALSO incorrectly checked

Expected behavior
In step 5 above I expect only the checkbox next to "File 1" to be checked.

Screenshots

Desktop (please complete the following information):

• OS: Windows
• Browser: Observed in several browsers

Additional context

• React version: 16.9.0
• material-table version: 1.56.1

[Alexbay218]

Similar problem here. This is related to https://github.com/mbrn/material-table/issues/1578

I don't think we can programmatically control the selection state, as we are just changing visuals, not the underlying selection data.

This should be high priority for the author, otherwise I'm going to find another table library to use.

[ax0n-pr1me]

my workaround was to write rowData to the store, then grab it with the redux hook useSelector

so in one table / component...

import { useSelector, useDispatch } from 'react-redux'
import { setSelectedObservation } from "./actions";
...
const onRowClick = (e, rowData) => {
        dispatch(setSelectedObservation(rowData))
    }

then in the other table component...

import { useSelector, useDispatch } from 'react-redux'
...
const selectedObservation = []
selectedObservation.push(useSelector(state => state.observations.selectedObservation))
...

return (
    <>
      {selectedObservation[0] &&
        <MaterialTable
...

data={selectedObservation}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.