CODEWITHSUNDEEP
reactjsmaterial-uifrontendmui-datatablematerial-react-table
PrasadB
PrasadB

Reputation: 87

Is there a way to disable or hide fields of "create new" item modal of material react table?

Material React Table lets you disable editing fields by setting "enableEditing" to false. But when you click on "Create new item", the modal opens with all fields and editable. In my case, I want certain fields to be created at the server. Is there a way to hide or disable fields in the "create new" modal?

Upvotes: 1

Views: 1289

Answers (2)

Deno123
Deno123

Reputation: 31

To hide an input in the modal you can use the Edit property of the column like this:

...
      {
        accessorKey: 'id',
        header: 'ID',
        enableColumnOrdering: false,
        Edit: () => null, //disable editing on this column and hide it
        enableSorting: false,
        size: 80,
      },
...

This will hide the column on edit and creation.

Upvotes: 1

PrasadB
PrasadB

Reputation: 87

As I couldn't find any built-in props or properties, I followed the steps below;

  • Added "enableEditing" property to all the columns regardless of it's true or false.
...
      {
        accessorKey: 'id',
        header: 'ID',
        enableColumnOrdering: false,
        enableEditing: false, //disable editing on this column
        enableSorting: false,
        size: 80,
      },
      {
        accessorKey: 'firstName',
        header: 'First Name',
        enableEditing: true,
        editable: 'false',
        size: 140,
        muiTableBodyCellEditTextFieldProps: ({ cell }) => ({
          ...getCommonEditTextFieldProps(cell),
        }),
      },
...
  • Added a condition statement just before creating the input fields inside the modal
            {columns.map((column) => (
              column?.enableEditing &&
              <TextField
                key={column.accessorKey}
                label={column.header}
                name={column.accessorKey}
                onChange={(e) =>
                  setValues({ ...values, [e.target.name]: e.target.value })
                }
              />
            ))}

Check in Codesandbox;

Upvotes: 0

Related Questions