无法有条件地隐藏 material table 中的 isEditHiden/isDeleteHiden 之类的添加按钮

Question

在material-table中有条件隐藏编辑和删除按钮的选项，如

<MaterialTable
     /// other props
      editable={
        10 > 5 && {
          isEditHidden: () => !10 > 5, // This is condition
          isDeleteHidden: () => !10 > 5, // This is condition
          onRowAdd: newData =>

            }),
          onRowUpdate: (newData, oldData) =>
            
            }),
          onRowDelete: oldData =>

            })
        }
      }
    />

如果 isEditHidden 或 isDeleteHidden 为真，这些按钮将隐藏。我也想隐藏添加按钮（在搜索图标旁边）。但我找不到任何选择。有什么选择吗？

Answer 1

如果需要，您需要 remove editable props 和自定义动作的动作道具，然后可以使用 hidden/disabled property to hide/disable action button。

import React from "react";
import MaterialTable from "material-table";

export default function DisableFieldEditable() {
  const { useState } = React;

  const [columns, setColumns] = useState([
    { title: "Name", field: "name", editable: "onUpdate" },
    { title: "Surname", field: "surname", editable: "never" },
    { title: "Birth Year", field: "birthYear", type: "numeric" },
    {
      title: "Birth Place",
      field: "birthCity",
      lookup: { 34: "İstanbul", 63: "Şanlıurfa" }
    }
  ]);

  const [data, setData] = useState([
    { name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 },
    { name: "Zerya Betül", surname: "Baran", birthYear: 2017, birthCity: 34 }
  ]);

  return (
    <MaterialTable
      title="Disable Field Editable Preview"
      columns={columns}
      data={data}
      actions={[
        {
           icon: "add",
           tooltip: "Add User",
           hidden: 10 < 5,
           isFreeAction: true,
           onClick: (event, rowData) => {
            // Perform add operation
           }
        },
        {
          icon: 'edit',
          tooltip: 'Edit User',
          hidden: true,
          onClick: (event, rowData) => {
            // Perform edit operation
          }
        },
        {
          icon: 'delete',
          tooltip: 'Delete User',
          disabled: true,
          onClick: (event, rowData) => {
            // Perform delete operation
          }
        }
      ]}
    />
  );
}

无法有条件地隐藏 material table 中的 isEditHiden/isDeleteHiden 之类的添加按钮

Can not hide add-button like isEditHiden/isDeleteHiden in material table conditionally

javascript

material-table