Question 73984 in Reactjs Question posted in
The new location for the React Documentation can be found here.

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

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} />
Tags:

2

Answers


  1. 0

    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 }
    Login or Signup to reply.
  2. 0

    There is an official example for conditionally enabling editing

      const columns = [
    { header: 'ID', accessorKey: 'categoryId', enableEditing: false|true },
  ]
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search