Mui-datatables: More details on how onRowsSelected relates to data in grid

[JordanKadish]

Issue

I understand that the onRowsSelected callback returns the index of which checkbox was last ticked/unticked, as well as the indices of all currently selected items. When I tick a checkbox and then sort the rows in a different way, the index of the row changes.
Example:
Row 1: bob, smith
Row 2: john, apple

If I click the box for row 1, it will console log: [0], [0]
If I then say sort by surname, ascending, and untick the ticked row 1 box, it will console log: [1],[1]

With this in mind, how am I supposed to get information out of a selected row (eg make a json obj out of the row when tickbox is ticked) and how can I use the array of all currently selected items when I have stuff like server side pagination only sending the current page to screen (IE storing which items have been previously selected on the server).

Thoughts: Assuming there is a way to get a json obj of the row currently being ticked/unticked, it would be easy to just store a selectedItems array server side, I am just not sure how to pull a row to then send to server

Your Environment

| Tech | Version |
|--------------|---------|
| mui-datatables | lateast |
| node | latest |
| OS | arch linux |

[JordanKadish]

More clarity (since I feel some is needed):

I bound my callback function this {this} in constructor
Then in the method, I tried to use the array index args being sent relate to the state data. This doesn't work, so I'm just not sure how to use the data being displayed on the screen to get a row's data that way. I have tried relating the indices to this.state.data, but when I sort the on screen grid in any way, the on screen data won't match the state data indices...

[gregnb]

Hey @JordanKadish, you're like the biggest package supporter! Not sure where I would be without all your feedback :).

Ok, I'm seeing your issue now. While it's nice to get the index of what is currently selected what is really required is the index of where it is in relation to the provided datastore. What if we modified onRowsSelected to return the following (imagine if we checked off both rows):

[{ index: 0, dataIndex: 0 }],
[{ index: 0, dataIndex: 0 }, { index: 1, dataIndex: 1 }],

[gregnb]

Also, if that is something that will help would you want to take this work up?

[JordanKadish]

When returning the dataIndex (assuming that is the one related to what's in the data in browser) I'm not sure how to utilise that index to get rows from in-browser.

The use case I am going for is basically when someone selects a row, it would be helpful to have some key passed in so that when the row is selected, we can more easily identify which row it was. For example if each row has some u_id, that could be passed into the onRowsSelected function in options somehow so when the function is called, instead of returning indicies just return the arrays containing the u_id that was ticked/unticked, and then the array of u_id's that are currently ticked

[gregnb]

Ok, the way i'm seeing it if data looks like this:

const data = [
["bob", "smith"],
["john", "apple"]
];

Steps:
1) Click on row #1
-> onRowsSelect returns [{ index: 0, dataIndex: 0} ], [ {index: 0, dataIndex: 1}]
2) Click on row #2
-> onRowsSelect returns [{ index: 1, dataIndex: 1} ], [ {index: 0, dataIndex: 1}, {index: 1, dataIndex: 1}]
2) Sort by surname, ascending
3) Untick row 1 (which should be "john apple")
-> onRowsSelect returns [{ index: 0, dataIndex: 1}], [ { index: 0, dataIndex: 0} ]

So, when receiving that onRowSelect you could examine what is available for rowsSelected from function(currentRowsSelected: array, rowsSelected: array) => void

And in that Array looking at dataIndex you could then do the following:

   const data = [
      ["bob", "smith"],
      ["john", "apple"]
    ];

  const options = {
      onRowsSelect: (rowsSelected, allRows) => {
         allRows.forEach(row => {
           const dataRow = data[row.dataIndex]; // this is the row in your data source
           console.log(dataRow);
         });        
        console.log(rowsSelected, allRows);
      },
   };

Looking at this I believe I should change function(currentRowsSelected: array, rowsSelected: array) => void to function(currentRowsClicked: array, rowsSelected: array) => void because this callback triggers on a tick/untick

Is this helpful?

[JordanKadish]

Okay so you're saying row.index will be the INITIAL index when the table was first created? With the dataIndex variable in the example you provided, I'm not sure what it's doing: you select the first row and dataIndex becomes 1, but then when you select the second row, its dataIndex is already 1? And then in the final example, the initial row 1's dataIndex has now become 0??

[gregnb]

Okay so you're saying row.index will be the INITIAL index when the table was first created?

Yes

Click on row #1
-> onRowsSelect returns [{ index: 0, dataIndex: 0} ], [ {index: 0, dataIndex: 1}]
Click on row #2
-> onRowsSelect returns [{ index: 1, dataIndex: 1} ], [ {index: 0, dataIndex: 1}, {index: 1, dataIndex: 1}]

Sorry, a mistake (getting late for me here and I'm going to bed at this point). This is what I meant:

Click on row #1
-> onRowsSelect returns [{ index: 0, dataIndex: 0} ], [ {index: 0, dataIndex: 0}]
Click on row #2
-> onRowsSelect returns [{ index: 1, dataIndex: 1} ], [ {index: 0, dataIndex: 0}, {index: 1, dataIndex: 1}]

Sort by surname, ascending
Untick row 1 (which should be "john apple")
-> onRowsSelect returns [{ index: 0, dataIndex: 1}], [ { index: 1, dataIndex: 0} ]

[JordanKadish]

Ah I see. Sure, I think this could work assuming devs keep track of clicked items relative to the current page being sent client side. IE if user requests 5 items to render to screen and clicks some, those clicked items will need some reference point that can be sent back to server. I would imagine that on grid render/re-render, the page being sent can be contained in the data variable and a row extracted via the dataIndex, and then that row could contain a u_id or something

[gregnb]

Yeah, I think it could work. overall one thing that stuck out from this whole conversation was what about saving the check/unchecked states. I'm going to add in a prop to load those in incase someone from server side wants to hydrate that state.

So overall, from this ticket the two things to take:
1) Add additional info to the onSelectRows to return { index, dataIndex}
2) Add additional prop so a user from server side could rehydrate selected rows (if they chose todo so)

[RaySheikh]

This is great info, as i'm running into a similar issue. Also would it be possible to add select button in the mobile(stacked) version? or maybe allow a selectableRows function for the mobile(stacked) version tied to a button.
Thanks Jordan and gregnb.

[gregnb]

Upgrade to the latest version. onSelectRows function will now return { index, dataIndex }

[NickToye]

onRowsSelect not onSelectRows?

[pamminnie]

Hi, is it possible to pass in my own ID for dataIndex? As I have a list of projects, I would want to select multiple rows to delete and it would be good if I can pass in the project ID of the selected rows.