Material-table: How to enable editable just for one column?

Created on 13 Oct 2020  路  2Comments  路  Source: mbrn/material-table

I have a table with editable cells. Exactly as in the examples:

function CellEditable() {
  const { useState } = React;

  const [columns, setColumns] = useState([
    { title: 'Name', field: 'name' },
    { title: 'Surname', field: 'surname', initialEditValue: 'initial edit value' },
    { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
    {
      title: 'Birth Place',
      field: 'birthCity',
      lookup: { 34: '陌stanbul', 63: '艦anl谋urfa' },
    },
  ]);

  const [data, setData] = useState([
    { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
    { name: 'Zerya Bet眉l', surname: 'Baran', birthYear: 2017, birthCity: 34 },
  ]);

  return (
    <MaterialTable
      title="Cell Editable Preview"
      columns={columns}
      data={data}
      cellEditable={{
        onCellEditApproved: (newValue, oldValue, rowData, columnDef) => {
          return new Promise((resolve, reject) => {
            console.log('newValue: ' + newValue);
            setTimeout(resolve, 1000);
          });
        }
      }}
    />
  )
}

My problem is that just one column should be editable, not all of the cells. Does anyone has an idea how to do that?

question

All 2 comments

Simply add editable: 'never' for those columns that you don't want to edit.

Thanks that worked out!

Was this page helpful?
0 / 5 - 0 ratings