Есть ли способ, которым я могу создать пользовательский столбец с автоматической нумерацией в таблице материалов?

Question

Я хотел бы создать пользовательский столбец, основанный на данных API, поддерживающих порядок, даже если строки удалены.Как на рисунке ниже, но не с жестко закодированными числами.Библиотека, на которую я ссылаюсь, - это не таблица угловых материалов, а вот эта: таблица реакций

Воткод, с которым я работаю:

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

Можете ли вы попробовать это:

, если вы хотите использовать идентификатор, сгенерированный таблицей материалов, посмотрите в поле id. Но если вам нужно, чтобы он начинался с 1 вместо 0, вы можете использовать id+1 поле

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