Is there a way that I can create a custom column with auto numbering in material-table?

Question

I would like to generate a custom column that is based off of the api data that maintains the ordering even if rows are deleted. Like the image below but not with hard-coded numbers. The library i'm referencing is not angular-material-table but this one: react-table

Here is the code i'm working with:

import React from "react";
import ReactDOM from "react-dom";
import MaterialTable from "material-table";
import Check from "@material-ui/icons/Check";
import Clear from "@material-ui/icons/Clear";
import Delete from "@material-ui/icons/Delete";
import Add from "@material-ui/icons/Add";
import Edit from "@material-ui/icons/Edit";
import Search from '@material-ui/icons/Search'
import "./styles.css";

function App() {
  return (
    <div className="App">
      <MaterialTable
        icons={{
          Add: () => <Add />,
          Check: () => <Check />,
          Clear: () => <Clear />,
          ResetSearch: () => <Clear />,
          Delete: () => <Delete />,
          Search: () => <Search />,
          Edit: () => <Edit />
        }}
        columns={[
          { title: "Name", field: "name" },
          { title: "Surname", field: "surname" },
          { title: "Custom", field: "number", type: "numeric" },
          {
            title: "Birth Place",
            field: "birthCity",
            lookup: { 34: "İstanbul", 63: "Şanlıurfa" }
          }
        ]}
        data={[
          { name: "Mehmet", surname: "Baran", number: 1, birthCity: 63 },
          {
            name: "Zerya Betül",
            surname: "Baran",
            number: 2,
            birthCity: 34
          }
        ]}
        editable={{
          onRowAdd: newData => {
            new Promise((resolve, reject) => {
              setTimeout(() => {
                {
                  /* const data = this.state.data;
        data.push(newData);
        this.setState({ data }, () => resolve()); */
                }
                resolve();
              }, 1000);
            });
          },
          onRowUpdate: (newData, oldData) => {
            onClick = () => console.log("hi");

            new Promise((resolve, reject) => {
              setTimeout(() => {
                {
                  /* const data = this.state.data;
    const index = data.indexOf(oldData);
    data[index] = newData;                
    this.setState({ data }, () => resolve()); */
                }
                resolve();
              }, 1000);
            });
          },
          onRowDelete: oldData =>
            new Promise((resolve, reject) => {
              setTimeout(() => {
                {
                  /* let data = this.state.data;
    const index = data.indexOf(oldData);
    data.splice(index, 1);
    this.setState({ data }, () => resolve()); */
                }
                resolve();
              }, 1000);
            })
        }}
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

Can you try this:

if you want use id that generated by material-table look at id field. But if you need it to be start from 1 instead of 0, you can use id+1 field

<MaterialTable       
        columns={[
          { title: "Name", field: "name" },
          { title: "Surname", field: "surname" },
          { title: "Id", field: "tableData.id" },
          { title: "Id+1", render: rowData => rowData.tableData.id + 1 },
        ]}
/>