Adding serial number column in the table

Question

I am using a library named react-data-table-component for table in my application. Everything is going pretty smooth however I need to add a column which will show serial number in my table. The serial number will always start from 1 to total number of objects in photos array.

const columns = [
    {
      name: '#',
      selector: 'id',
      cell: (row) => <span>{I need to show serial number here}</span>
    },
    {
      name: 'Name',
      selector: 'photo_link',
      sortable: true,
    }
    ... // Other fields
]

<DataTable
        columns={columns}
        data={photos}
        paginationTotalRows={total_photos}

Cell key inside column array just takes row as argument and it has current object but I can't get the index of object.

I have the id field in every object of the array but that is not in sequence which I need. How do I solve this problem?

score 3 · Answer 1 · answered May 04 '21 at 07:43

3

I know it's late, but posting as it would help others!

You can have a serial number with the help of index in your column definition, for example

const columns = [
  {
    name: '#',
    cell: (row, index) => index + 1  //RDT provides index by default
  },
   ... // Other fields
]

And indexes start with 0 always, so we are using + 1, Now it will start with 1.

answered May 04 '21 at 07:43

Arvindh

600
1
10
25

1

The order will break when sorting though – pumbo Sep 03 '21 at 10:12

score 2 · Accepted Answer · answered May 07 '20 at 08:40

2

I think the easiest way is to add the serial number to your array items upfront.

photos.forEach((photo, index) => { photo.serial = index + 1; });

Then, simply use this serial field in your columns definition:

{
  name: '#',
  selector: 'serial'
}

answered May 07 '20 at 08:40

zord

4,538
2
25
30

I have 100s of photos coming in the api response. Before I render I have to do this? Is there no other way which is built in library already? – wazz May 07 '20 at 12:27
I haven't found a built-in way to do it in the docs. Doing this for 100s of items (once, after you fetched the data) is no big deal. I'd say it's even better that doing it all the time dynamically. Also, if you sort the array later, the pre-generated serials will be preserved, which is another advantage. – zord May 07 '20 at 16:30

score 0 · Answer 3 · answered Jul 28 '20 at 11:11

0

Try this in columns

render:(text,record,index)=>`${index+1}`,

answered Jul 28 '20 at 11:11

Atchutha rama reddy Karri

1,434
13
16

score 0 · Answer 4 · answered Feb 18 '23 at 16:58

0

You were almost there.

I used below code to get the desired outcome, We can avoid adding new field ('serial' as suggested by Zord) to objects in the array.

Cell: (props) => (<span>{props.index + 1}</span>)

answered Feb 18 '23 at 16:58

SRavi

1

score 0 · Answer 5 · answered Jun 01 '23 at 11:57

0

const columns = [ { name: '#', selector: 'id', cell: (row,index) => index+1 },

answered Jun 01 '23 at 11:57

kailusoni

1

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – alea Jun 01 '23 at 12:55

Adding serial number column in the table

5 Answers5