react-table row selection with custom field instead of index

Question

I'm using the react-table package. I made a simple table with row selection. The problem is: The row selection result is an object with indexes:

{
 0: true,
 1: true,
 ...
}

But I want to be the primary key of my data like this:

{
  EXoxMjyd4leYABdpuy8m: true,
  2gXlClA38AU8sSM5jnZ7: true,
  ...
}

Code example

In the documentation, I can't find a configuration where I can set the selection key. The question is, how can I achieve the second example?

Fiodorov Andrei · Accepted Answer · 2021-11-25 18:06:51Z

9

You need to overwrite the table option getRowId.

Example:

const getRowId = (row, relativeIndex, parent) => {
   // In row object you have access to data. 
   // You can choose parameter. In this example I used uniqueId
   return parent ? [parent.id, row.uniqueId].join('.') : row.uniqueId;
}

Here is live example:

edited Nov 25, 2021 at 18:06

answered Nov 25, 2021 at 17:16

Fiodorov Andrei

2,0481 gold badge19 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ipikuka · Accepted Answer · 2022-10-31 08:13:11Z

2

If you are using version 8 react-table; you can use instance.getSelectedRowModel() in order to get the original (data model of the rows) of the selected rows as well as the row indexes.

For instance:

const arraySelectedUsersId = instance.getSelectedRowModel().rows.map(({ original }) => (original as User).id)

answered Oct 31, 2022 at 8:13

ipikuka

8846 silver badges11 bronze badges

Collectives™ on Stack Overflow

react-table row selection with custom field instead of index

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related