Making a column not editable in MaterialTable using react

Question

I'm using a MaterialTable in the latest version (https://material-table.com) and I have 3 columns, and only one should be editable by the user:

const [columns, setColums] = useState([
    {title: "Number", field: 'itemNumber', editable: 'never'},
    {title: "Description", field: 'itemDescription', editable: 'never'},
    {title: "Amount", field: 'amount', editable:'always'},
    ]);
return (
       <MaterialTable
           title=""
           columns={columns}
           data={this.state.Items}
           editable={{
                onRowUpdate: (newData, oldData) =>
                     new Promise((resolve) => {
                         setTimeout(() => {
                             resolve();
                             this.onRowEditSave(newData);
                         }, 600);
                     }),
           />
       )

In onRowEditSave() i call a restservice, which is working when i dont use editable in colums.
In the second example of https://material-table.com/#/docs/features/editable can be seen, how it is supposed to be.

I get the errors :

Types of property 'editable' are incompatible.
Type 'string' is not assignable to type '"never" | "always" | "onUpdate" | "onAdd" | ((columnDef: Column, rowData: IReservedStockItem) => boolean) | undefined'.

(IReservedStockItem is the datastructur of this.state.Items)

Can someone please explain the error? Because I do not see any difference to the docs.

Answer 1

For anyone having the same problem: The problem was Typescript and the solution is to write in the columns definition:

editable: 'never' as string

Answer 2

This is what ended up working for me:

  const never:
  | "always"
  | "onUpdate"
  | "onAdd"
  | "never" = "never";
  
  const [columns, setColumns] = useState([
    { title: 'Name', field: 'name' },
    { title: 'Surname', field: 'surname' },
    { title: 'Birth Year', field: 'birthYear',  editable: never},
    {
      title: 'Birth Place',
      field: 'birthCity',
      lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
    },
  ]);

There's one more type that I excluded but I didn't need it yet:

((columnDef: Column<RowData>, rowData: RowData) => boolean);

Hope this helps and saves someone a few hours.