可在材料表中的 cellEdit 上进行条件编辑

时间:2021-07-15 08:10:04

标签: reactjs material-table

当我在 schema

中使用 editable 属性时
editable: (row, rowData) => {
        return rowData.town === "scaraborough";
      },

它工作正常,但是当我使用 field 的 celEdit editable 属性时,只是与 boolean

一起使用

  const tableRef = React.useRef();

  const [columns, setColumns] = useState<Column<schema>[]>([
    {
      title: "Name",
      field: "name",
      editable: "always",
      type: "string",
      resizable: true,
      emptyValue: <div style={{ visibility: "hidden" }}>empty</div>,
    },
    {
      title: "Town",
      field: "town",
      editable: (row, rowData) => {
        return rowData.town === "scaraborough";
      },
      type: "string",
    },
    {
      title: "Digits",
      field: "digits",
      type: "numeric",

      lookup: { 63: "212", 212: "1212" },
    },
    { title: "status", field: "status", editable: "always", type: "boolean" },
  ]);
  const [data, setData] = useState<schema[]>([
    {
      name: "",
      town: "sample input data",
      digits: 63,
      status: false,
    },
    { name: "jimmy", town: "scaraborough", digits: 63, status: false },
    { name: "sdsdd", town: "china", digits: 212, status: false },
  ]);

  const options = { filtering: true, selection: true };
  return (
   <MaterialTable
      tableRef={tableRef}
      columns={columns}
      data={data}
      options={options}
      // editable={{
      //   onRowUpdate: (newData, oldData) =>
      //     new Promise((resolve, reject) => {
      //         const dataUpdate = [...data];
      //         resolve(data);

      //     }),
      // }}
      cellEditable={{
        onCellEditApproved: (newValue, oldValue, rowData: any, columnDef) => {
          return new Promise((resolve, reject) => {
            resolve();
          });
        },
      }}
    />
  );

"material-table": "^1.69.3",

0 个答案:

没有答案