[SOLVED] How to show row index in grid js using react js

How to show row index in grid js using react js

currently creating my datatable using grid.js in reactjs.

This is my code

<Grid
    data={data.filter(e => e.status != 0)}
    columns={[
        {
            id: 'url',
            name: 'url',
            hidden: true

        }, {
            id: 'id',
            name: '#',
            formatter: (cell) => _(this.showIndexNo()) //<-- where i do the function to display row index number

        }, {
            id: 'name',
            name: 'Name'
        }, {
            id: 'smgk_name',
            name: 'SM Name',
            formatter: (cell, row) => _(this.showSmlink(row.cells[0].data, row.cells[3].data))

        }, {
            id: 'email',
            name: 'Email',
            // formatter: (cell) => _(moment(cell).format(MOMENT_FORMAT))

        },
        {
            id: 'id',
            name: 'Actions',
            formatter: (cell) => _(this.showButton(cell))
            //(cell) => `Name: ${cell}`
        }
    ]}

    search={true}
    sort={true}
/>

I want to display the row index/ auto increment in my grid js. How should i edit this code?

 showIndexNo() {

 const { subscriberData } = this.state;

 let a = [];

 return (subscriberData.filter(e => e.status != 0).map((item, i) => i ) ) }

and I get this result:

I cannot use ID as the row Index as when I delete one details the Id will still be there only status will changed to deleted(this wont be displayed in grid), so I need row Index. Really appreciate any help

Solution

return (subscriberData.filter(e => e.status != 0).map((item, i) =>
  return { ...item,
    rowIndex: i //use rowIndex as column
  }))
}