1

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} />
Jamie Hutber
  • 26,790
  • 46
  • 179
  • 291

2 Answers2

1

There is an official example for conditionally enabling editing

  const columns = [
    { header: 'ID', accessorKey: 'categoryId', enableEditing: false|true },
  ] 
Jamie Hutber
  • 26,790
  • 46
  • 179
  • 291
Kevin Vandy
  • 401
  • 3
  • 10
-1

Try setting the headerName editable to false like this.

 { headerName: 'ID', accessorKey: 'categoryId', width: 20, editable: false },
  { headerName: 'Name', accessorKey: 'categoryName', width: 220, editable: true }
allenmor
  • 25
  • 2
  • 7