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

Question

In material-table there is option for hiding edit and delete button conditionally like

<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 =>

            })
        }
      }
    />

if isEditHidden or isDeleteHidden is true those button hide. I want to hide add button (beside search icon) also. But i couldn't find any option. Is there any option?

Answer 1

You need to remove editable props and actions props for custom actions if needed and then can use 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
          }
        }
      ]}
    />
  );
}