title: How to show row index in grid js using react js
body: <p>currently creating my datatable using grid.js in reactjs.</p>
  <p><strong>This is my code</strong></p>
  <pre><code>&lt;Grid
      data={data.filter(e =&gt; e.status != 0)}
      columns={[
          {
              id: 'url',
              name: 'url',
              hidden: true
  
          }, {
              id: 'id',
              name: '#',
              formatter: (cell) =&gt; _(this.showIndexNo()) //&lt;-- where i do the function to display row index number
  
          }, {
              id: 'name',
              name: 'Name'
          }, {
              id: 'smgk_name',
              name: 'SM Name',
              formatter: (cell, row) =&gt; _(this.showSmlink(row.cells[0].data, row.cells[3].data))
  
          }, {
              id: 'email',
              name: 'Email',
              // formatter: (cell) =&gt; _(moment(cell).format(MOMENT_FORMAT))
  
          },
          {
              id: 'id',
              name: 'Actions',
              formatter: (cell) =&gt; _(this.showButton(cell))
              //(cell) =&gt; `Name: ${cell}`
          }
      ]}
  
      search={true}
      sort={true}
  /&gt;
  </code></pre>
  <p>I want to display the row index/ auto increment in my grid js.
  How should i edit this code?</p>
  <pre><code> showIndexNo() {
  
   const { subscriberData } = this.state;
  
   let a = [];
  
   return (subscriberData.filter(e =&gt; e.status != 0).map((item, i) =&gt; i ) ) }
  </code></pre>
  <p>and I get this result:</p>
  <p><a href="https://i.stack.imgur.com/LjzUQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LjzUQ.png" alt="enter image description here" /></a></p>
  <p>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</p>