Mui-datatables: onRowSelect disrupted by dispatch or setState event

[djarrin]

When I try to dispatch a redux event (or simply setState) within the onRowsSelect callback my events get dispatched but the box that was supposed to be selected never actually selects. If I take the dispatch or setState method out the box updates as expected.

Expected Behavior

I expect my redux store to be updated and for the checkbox to be selected.

Current Behavior

My redux store does get updated but the checkbox for the datatables component does not get checked

Steps to Reproduce (for bugs)

Here is my option variable:

(all inside the render method)

let {dispatch,callOrders} = this.props;
const options = {
            filter: false,
            print: false,
            download: false,
            responsive: 'scroll',
            onRowsSelect: (currentRowsSelected, allRowsSelected) => {
                let selectedItems = allRowsSelected.map(item => {
                    return callOrders.callOrders[item.index];
                })
                dispatch(setSelectedCallOrders({selectedCallOrders: selectedItems}))
            }
        }

Your Environment

I'm experiencing this issue within a create-react app env

| Tech | Version |
|--------------|---------|
| Material-UI | ^4.3.3 |
| MUI-datatables | ^2.9.0 |
| React | ^16.9.0 |

[patorjk]

I'm using Redux for my app and am doing something similar and it works for me. I think I see 2 issues:

• You should be using item.dataIndex instead of item.index.
• If you update the state, the table gets re-rendered using the props you pass into the table. If your options aren't current with what you've been doing, then the table won't reflect what you've done. For reference, here's what my code looks like:

onRowsSelect: (currentRowsSelected, allRowsSelected) => {
    props.updateRowsSelected( props.tab.id, allRowsSelected.map(row => row.dataIndex) );
},

The props.updateRowsSelected method does the dispatch and it winds up setting props.tab.rowsSelected equal to allRowsSelected.map(row => row.dataIndex).

In my options object I have:

rowsSelected: props.tab.rowsSelected || [],

[djarrin]

You're the man @patorjk, that was precisely what it was. I took a slightly different method and just assigned a state for rowsSelected and updated when I dispatched the store.... might have some single source concerns there but I'll address that in refactor.

p.s. Hell yea Baltimore Devs (there are literally dozens of us)! (this will probably be deleted)

[gabrielliwerant]

[maitedev]

I am using the option in onRowSelect, to dispatch a redux event to which the selected ids must pass as a parameter.
This onRowSelect option returns me a selected index array, starting at position 0.
The IDs of the elements that make up my table start at 1 not at 0. So, when I pass the index that returns me onRowSelect does not match the element of the BD.

I would like to know how I can access the information of the selected rows.

Another option for me would be if I had an option where I defined the idex of the table, which would match my index in the BD.

  selectableRows: "single", 
  onRowsSelect: (currentRowsSelected) => {
    const [{dataIndex}] = currentRowsSelected;
    const id= dataIndex +1;        
    this.props.fetchUser(id);   
  }

[gabrielliwerant]

Couldn't you accommodate this by adding 1 to the index in your reducer? Or sending in index + 1 with the action?

[maitedev]

Couldn't you accommodate this by adding 1 to the index in your reducer? Or sending in index + 1 with the action?
What if my ids are not a sequence? for example, my ids could be, 2, 5, 8, 9,13. What i am trying to accomplish here is, get the selected ids to delete them. By any chance there is a way to get an array of the selected objects? If this is possible i would be able of get the real ids and then do the operation. But only with the indexes i cannot do anything.

[patorjk]

By any chance there is a way to get an array of the selected objects?

It should be the second parameter of the onRowsSelect function. See my example above. "currentRowsSelected" should probably renamed "affectedRows" to avoid confusion. Also, dataIndex refers to the index of the data you passed in, it's not related to your IDs.