Question: How to have custom row ids?

[dustingraves]

I would like to have the id from my database be used as the key/id for the row. Currently when I try to handle delete it returns the local id which is just the position of the data in the table. Based on this I would have to create a map of local id -> database id before I pass in the data. Is there a way to get more helpful data from the handler, or override the id with your own?

The only option that provides cell data is onRowClick but if you select all cells there is no meaningful data to work with.

rowsSelected output:

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

Tech	Version
Material-UI	3.0.2
MUI-datatables	2.0.0-beta-32
React	16.4.1
browser	chrome
etc

[hwatersiv]

I'm not trying to hijack this thread, I think I'm having a similar issue with the onRowsSelect when having 2 tables on the page at the same time that share common options.

Table 1: 0: {index: 0, dataIndex: 0}

when I select from Table 2: 0: {index: 0, dataIndex: 0}

I have no idea which array it came from.

I hope this is similar enough to fall here If not, I'll open a different issue.

EDIT (update): I have used onTableChange() to handle differentiating the tables like so:

options = {
     onTableChange: (action: string, tableState: any) => {
                     this.handleOnRowSelected(action, tableState.displayData, tableState.selectedRows);
     },
}
private handleOnRowSelected = (action: string, displayData: any[], selectedRows: any[]) => {
        if(action !== "rowsSelect") { return };

        global.console.log("action: ",action)
        global.console.log("displayData:",displayData)
        global.console.log("selectedRows:", selectedRows)

}

[zhdanouskikh]

you can pass id as column with option display: "excluded"

[serendipity1004]

what if you want to do batch actions? like select bunch of rows and use external button to do something with the selected rows

[dustingraves]

@SidharthRaveendran if you read my initial problem you would see I don't have a problem with individual rows its when selecting multiple rows.

@zhdanouskikh I already had a solution for a row, by embedding the id into an onClick function & button using custom render.

So the problem is more with batch options. I can work with row data, but with batch stuff, it only sends index location.

so you have database ids, and in a key, val nosql this is not just 0,1,2,3. Even if it was I would have to sort the data and match ids to line up with index location. Index location shouldn't be the only thing accessible.

The only solution sort of is if the hash ids are hidden in a cell and you use onTableChange and parse through all the changes to get the batch cell data or keep a map of index ids to db hash ids.

[dustingraves]

@hwatersiv that seems like a similar problem. I don't feel like we should have to parse all the table changes each time. This could be solved with an option to use a specific cell as the key data and include that in the index data that comes back from each row selected.

[dustingraves]

@gregnb could we at least get rowData: string[], included in the onRowsSelect data? This could also be an option that just says turn on custom key and have column 0 be display: "excluded"and the value be included something i.e:

1: {index: 1, dataIndex: 1, rowKey: 'a01fg12356adbgk'}

this would be picked off from the rowData:

['a01fg12356adbgk', 'name', 'stuff', 'random']

[k8martian]

I have similar problem. I cannot use the default index given from onRowSelect to delete the data from my cms backend because I need the id from the database that belongs to the data record itself, and whenever a data record deleted, the database will not allow to use back the id or index that belongs to the previous deleted data and force it to use whatever the latest new index as id. With onRowSelect, we can only get the id that are freshly generated but not sync with the id from the backend database and hence the deletion failed. Is there any plan to let onRowSelect to get row data like onRowClick? Using onRowClick with custom delete button can solve single delete but not group delete. Let onRowSelect to get the row data seems make sense in many cases. Or any suggestions to solve this will be greatly appreciated.

[gregnb]

Will look into this issue and make it a priority

[k8martian]

Will look into this issue and make it a priority

My issue has been solved by created id column and set it to display: "excluded". Thanks for your attention.

[sanand404]

In column add display: "excluded" const columns = [{ name: 'id', options: { display: 'excluded' }}];

[gabrielliwerant]

@snsheth55 The table doesn't use custom ids, you have to do the mapping on your end based on whatever it is you're trying to achieve. Typically, you'd map the dataIndex to your original data:

const myId = myOriginalData[column][dataIndex][idRow].

[cristianeto]

my solution was that:

1. My id column with display: 'excluded'

2. In my second column , where I used the id to call a another link like /user/id, I added: options customBodyRender with params (value, tableMeta)

   {
   name: "id_person",
       label: "ID",
       options: {
         display: "excluded"
   },
     {
       name: "names_person",
       label: "Name",
       options: {
         customBodyRender: (value, tableMeta) => {
           return (
             <Link
               style={{ textDecoration: "none" }}
               to={`/user/${tableMeta.rowData[0]}`}
             >
               {value}
             </Link>
           );
         }
       }
     },

   ....

and THATS ALLL!!! IT WORKS!!

[sparktx-adam-gleason]

Any update on this? I have a use case where I'd like to store the id field from my rows array in a selectedRows prop.

I could map the row.id to the stored dataIndex but this mapping breaks as soon as you apply a filter to the table. The dataIndices are not preserved before and after filtration.

If you could provide an option to specify the rowSelectionKey and pass that to onRowSelectionChange function that should be sufficient.

const [selectedRows, setSelectedRows] = useState([])

const options = {
 ...,
 rowsSelected: selectedRows,
 rowSelectionKey: "id",
 onRowSelectionChange: (
      currentRowsSelected,
      allRowsSelected,
      rowsSelected,  // this is the array of `rowSelectionKey` values
    ) => {
       setSelectedRows(rowsSelected)
    }
}