Search code examples
javascriptreactjsmaterial-react-table

How to disable some specific columns from edit in react material react table?

By default with Material React Table all fields are editable. I would like be able to make some read-only. However I cannot see it in the documentation anywhere.

  import MaterialReactTable from 'material-react-table'  

  const columns = [
    { headerName: 'ID', accessorKey: 'categoryId', width: 20, },
    { headerName: 'Name', accessorKey: 'categoryName', width: 220, editable: true },
    {
      headerName: 'Game System',
      width: 220,
      accessorKey: 'gameSystemId',
      type: 'numeric',
      editable: true,
    },
  ]

  <MaterialReactTable columns={columns} loading={loading} data={allCategories} onEditingRowSave={onRowAdd} />
Solution

  • There is an official example for conditionally enabling editing

      const columns = [
    { header: 'ID', accessorKey: 'categoryId', enableEditing: false|true },
  ]