How to add a sortable index column in react-table

Question

So I'd like use react-table to create a sortable column that numbers each row (according to its position in the data set).

According to docs, sorting is done via a sorting function that compares the accessor value. However, the accessor option does not expose the index, unlike the Cell option.

So that means this won't work:

const columns = [
  {
    Header: '#',
    id: 'index',
    accessor: (row) => row.index // 'index' is undefined
  },
  /* ... */
]

My current workaround is to inject an index directly into the dataset like this:

myIndexedData = myData.map((el,index) => ({index, ...el})) //immutable

return (
  <ReactTable
    data={myIndexedData}
    columns={columns}
  />
);

This is not really an optimal solution, especially with a large dataset. Is there a better way that I'm not seeing?

Mahdi Mohammadizadeh · Accepted Answer · 2021-05-09 08:15:22Z

9

You can use the second argument as index.

{
      Header: '#',
      id: 'index',
      accessor: (_row: any, i : number) => i + 1 
}

answered May 9, 2021 at 8:15

Mahdi Mohammadizadeh

3054 silver badges10 bronze badges

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

2 Comments

Daniel Danielecki Over a year ago

Master answer, solved my problem!

Ronald Das Over a year ago

This is working for v7.7.0

Stephen Rauch · Accepted Answer · 2018-06-01 01:08:11Z

8

{
    Header: "",
    id: "row",
    maxWidth: 50,
    filterable: false,
    Cell: (row) => {
        return <div>{row.index}</div>;
    }
},

edited Jun 1, 2018 at 1:08

Stephen Rauch♦

50.1k32 gold badges118 silver badges143 bronze badges

answered Jun 1, 2018 at 0:47

WarrenU

1061 silver badge5 bronze badges

1 Comment

Ajay Ghosh Over a year ago

row.index is still undefined

Suraj Rao · Accepted Answer · 2021-02-08 08:39:20Z

5

{
    Header: "Index",
    accessor: "",
    Cell: (row) => {
        return <div>{row.row.id + 1}</div>;
    },
    disableSortBy: true,
    disableFilters: true,
},

ver."react-table": "^7.6.3",

edited Feb 8, 2021 at 8:39

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

answered Feb 8, 2021 at 8:28

Zapwoi

511 silver badge3 bronze badges

2 Comments

Sijan Shrestha Over a year ago

Could you please help explain why using that particular version might solve this issue?

javasenior Over a year ago

Just convert row.row.id to Number(row.row.id), so it doesn't shows like 11,21,31....

ManhNguyen · Accepted Answer · 2021-05-11 03:45:28Z

1

   {
      Header: '#',
      Cell: (row) => {
        return <div>{Number(row.row.id) + 1}</div>;
      },
    }

"react-table": "7.7.0", get index for pagination and page size

function getIndex(props) {
  return (
     <div>
       {props.state.pageIndex * props.state.pageSize + 
        Number(props.row.id) + 1}
     </div>
  );
}

edited May 11, 2021 at 3:45

answered May 7, 2021 at 9:01

ManhNguyen

1211 silver badge5 bronze badges

Comments

khushbu thakur · Accepted Answer · 2020-11-21 02:14:06Z

export const SerialNumberColumn = {
    Header: "Sr No", // label of header
    id: "row", 
    maxWidth: 50,
    filterable: false,  
    Cell: (row) => {
      let {pageIndex} = row.state; // get current page index (1 - n)
      let {index} = row.cell.row;  // get current row number (0 - 9)
      let srNo = ``;

      if(pageIndex === 1){
        srNo = index + 1;
      // 1, 2, 3, 4,
     // as index starts from 0

      }else{
        if(index === 9){
          srNo = `${pageIndex}0`;
       // in case of 20, 30, 40, 50
        }else{
          srNo = `${pageIndex - 1}${index + 1}`;
       // for others such as 11, 12, 13, 41, 42, ..., n
        }
      }
        return <div>{srNo}</div>;
    }
};

For example, your page size is 10 (10 rows on each page) and you have 15 pages total. So total records would be 10 * 15 = 150;

What the above code does is,

let {pageIndex} = row.**strong text**state;

This extracts the page number for each row. So from records 0-9, the page number will be 1

let {index} = row.cell.row;

Get row number

So, 0 for the first row 1 for second and so on. For each page, we will get exactly 0-9 records or less as the page size is 10.

As row numbers start from 0, we will increment it by 1.

if(pageIndex === 1){
        srNo = index + 1;

// srNo = 0 + 1 -> 1
// srNo = 1 + 1 -> 2

From the second page onwards when row number is 9, the serial number should be 20, 30, 40

Row number | Serial number 0 11 1 12 2 13 . . . . . . 9 20

So we will just put pageIndex with 0

          srNo = `${pageIndex}0`; 
// srNo = 20
// srNo = 30
// srNo = 40

And finally for the rest of the serial numbers after the first page would be srNo = `${pageIndex - 1}${index + 1}`;

For. e.g.:

srNo = `${2 - 1}${0 + 1}`; 11

Instead of just providing the codes, please provide comments on how your code works or how it answer the questions.

Collectives™ on Stack Overflow

How to add a sortable index column in react-table

5 Answers 5

2 Comments

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related