Search code examples
reactjsmaterial-uimaterial-designmaterial-table

Making a column not editable in MaterialTable using react


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.


Solution

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

    editable: 'never' as string