从库物料表添加行时，如何自定义字段？

Question

使用库material-table向可编辑表中添加行时，如何自定义字段？我想使该字段为只读，或者使用户无法更改该字段。我已经尝试了对列使用只读选项，但这仅使它对于更新字段为只读。

import React from "react";
import MaterialTable from "material-table";
import Edit from "@material-ui/icons/Edit"
import Add from "@material-ui/icons/Add"
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  return (
    <MaterialTable
      title="Editable Preview"
      columns={[
        { title: "Name", field: "name", readonly: true  }, // only works on update
        { title: "Surname", field: "surname" },
        { title: "Birth Year", field: "birthYear", type: "numeric" }
      ]}
      data={[
        { name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 },
        {
          name: "Zerya Betül",
          surname: "Baran",
          birthYear: 2017,
          birthCity: 34
        }
      ]}
      title="Basic"
      options={{
        paging: false
      }}
      icons={{
        Add: () => <Add />,
        Edit: () => <Edit />
      }}
      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) =>
            new Promise((resolve, reject) => {
              setTimeout(() => {
                {
                  // const data = this.state.data;
                  // const index = data.indexOf(oldData);
                  // data[index] = newData;
                  // this.setState({ data }, () => resolve());
                }
                resolve()
              }, 1000)
            })
      }}
    />
  );
}

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

Answer 1

根据docs，您可以覆盖该组件，而仅使用自定义函数来呈现该字段。

...

    <MaterialTable
      title="Editable Preview"
      component={{
        // add the custom component here
      }}
      columns={[
        { title: "Name", field: "name", readonly: true  }, // only works on update
        { title: "Surname", field: "surname" },
        { title: "Birth Year", field: "birthYear", type: "numeric" }
      ]}
      data={[
        { name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 },
        {
          name: "Zerya Betül",
          surname: "Baran",
          birthYear: 2017,
          birthCity: 34
        }
      ]}
      title="Basic"
      options={{
        paging: false
      }}
      icons={{
        Add: () => <Add />,
        Edit: () => <Edit />
      }}
      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) =>
            new Promise((resolve, reject) => {
              setTimeout(() => {
                {
                  // const data = this.state.data;
                  // const index = data.indexOf(oldData);
                  // data[index] = newData;
                  // this.setState({ data }, () => resolve());
                }
                resolve()
              }, 1000)
            })
      }}
    />
  );
}

...