CODEWITHSUNDEEP
reactjsgridjs
user3431310
user3431310

Reputation: 871

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:

enter image description here

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

Upvotes: 1

Views: 2882

Answers (1)

Prakash S
Prakash S

Reputation: 2053

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

enter image description here

Upvotes: 1

Related Questions