reactjs - 有没有办法可以在材料表中创建具有自动编号的自定义列？

Question

我想生成一个基于 api 数据的自定义列，即使删除行也能保持顺序。如下图所示，但没有硬编码数字。我引用的库不是 angular-material-table 而是这个库：react-table

这是我正在使用的代码：

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，请查看id字段。但是如果你需要它从 1 而不是 0 开始，你可以使用id+1field

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