title: How to add SrNo (#) column at first position at mui-datatable React.js
body: <p>Created table using React and <a href="https://www.npmjs.com/package/mui-datatables" rel="nofollow noreferrer">MUI-Datatables</a>: need to add SrNo column at first, also need to add Delete and IsActive button.</p>
  
  <pre><code>import React, { useState, useEffect } from 'react';
  import Grid from '@material-ui/core/Grid';
  import Switch from '@material-ui/core/Switch';
  import MUIDataTable from "mui-datatables";
  export const Services = () =&gt; {
      const [itemList, setItemList] = useState([]);
  
      const [mainColumns, setMainColumns] = useState([]);
  
      const selectData = async () =&gt; {
          const response = await ServiceAPI(); // data from web wervice
          var data = JSON.parse(response.data);
          setItemList(data);
      };
  
      const createColumns = () =&gt; {
          var columns = [];
  
         // how to add Sr No column 
  
          columns.push(
              {
                  label: 'ID',
                  name: 'service_id',
  
              });
  
          columns.push(
              {
                  label: 'Name',
                  name: 'service_name',
  
              });
  
          setMainColumns(columns);
      };
      useEffect(() =&gt; {
          createColumns();
          selectData();
      }, []);
  
      return (
          &lt;&gt;
              &lt;h3&gt;Service&lt;/h3&gt;
              &lt;Grid container  &gt;
                  &lt;Grid item xs={12}&gt;
  
              &lt;MUIDataTable
                  title={"Service"}
                  data={itemList}
                  columns={mainColumns}  
                  className="table nowrap"
              /&gt;
  
                  &lt;/Grid&gt;
              &lt;/Grid&gt;
          &lt;/&gt;
      );
  }
  </code></pre>
  
  <p>tried below code for active/deactivate, but OnChange() is run every time, which should call on only click event (also tried OnClick()):</p>
  
  <pre><code>columns.push(
              {
                  label: 'Active',
                  name: 'is_active',
                  options: {
                      filter: false,
                      sort: false,
                      customBodyRender: (value, tableMeta, updateValue) =&gt; {
                          const serviceID = tableMeta.rowData[0];
                          return (
                                      &lt;Switch color="primary" checked={value} value={value} onChange={activate}/&gt;
                              /&gt;
                          );
                      }
                  }
              });
  </code></pre>