0

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?

PrasadB
  • 57
  • 1
  • 6
  • That doesn't sound like anything built into MUI, can you show a code example? (See: [mre]) – DBS Aug 09 '23 at 16:02
  • Hi, please take a look at this [example](https://codesandbox.io/p/sandbox/github/KevinVandy/material-react-table/tree/main/apps/material-react-table-docs/examples/editing-crud/sandbox). For example, if you click on "Create New Account", you will see, all the fields are shown. I just want to hide some fields from the user as they are created at the server. – PrasadB Aug 09 '23 at 21:47

1 Answers1

0

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;

PrasadB
  • 57
  • 1
  • 6