Material-table: Editable: edit only selected fields/columns

[wandrzejczak]

Hello,

Example:
https://mbrn.github.io/material-table/#/docz-examples-15-example-editable

Currently:
When I add Edit option all fields are available to be edited

Expectation:
Possible to disable specific columns to avoid editing them.
For example, I'd wish to have the option to disable Birth year/place should not be changed, only Name and Surname should.

Wojtek.

[mbrn]

Hi @wandrzejczak ,

I will add many options to editable feature such as disable, validation, custom component and so on.

I will add all of them asap.

[wandrzejczak]

Hi @mbrn,

Thank you!

p.s.
I really like your implementation of the table grid, simple and elegant :)
Aswome job, thanks for all your effort :)

Wojtek.

[mbrn]

@wandrzejczak

You can star repo :) Thanks. I love opensource communities.

[spazzarama]

@wandrzejczak @mbrn I have the same requirement and have created a pull request with a solution.

I didn't find this issue until after making the change - I was searching for "readonly" :), so hopefully it suits what you had in mind.

The change allows you to make a column readonly when editing, while remaining editable when adding a new row.

[mbrn]

Thanks @spazzarama

Let me test it and i will publish it today.

[mbrn]

I published it with 1.29.0

[spazzarama]

@mbrn thanks

[alyssonmessias]

The change to the "editable" property was not changed in the documentation.

It still has the old example: "readonly: true". And now to work it should use "editable: true".

https://material-table.com/#/docs/features/editable

[alyssonmessias]

This readonly property of the columns component is not working. When included, the field is still editable.

[mbrn]

We change it as editable. Can you try it?

[alyssonmessias]

Thanks, i try was now and It worked using the options:
editable?: ('always' | 'onUpdate' | 'onAdd' | 'never');

That find in https://github.com/mbrn/material-table/commit/0a0cdf69a19d66d2e60b111150da0c673effccc0

You can was be add this information in documentation?
https://material-table.com/#/docs/all-props

columns > editable ('always' | 'onUpdate' | 'onAdd' | 'never')

[mbrn]

Hi @alyssonmessias ,

I added to documentation. It will be published tomorrow.

[hdwivedi9]

Hey @mbrn ,
How can I make certain columns editable based on rowData value. Like if I have a table with three columns id, role, status & I want rows with editable role and status if their id > 10 and I want remaining rows with id <= 10 to only have editable status and not editable role

[mbrn]

Hi @hdwivedi9 ,

You can use custom edit component. https://material-table.com/#/docs/features/editable

[hdwivedi9]

@mbrn yeah I tried using that but there is no way to handle conditions(rowData.id>10) to make certain columns editable. If there is an onClick() event handler on edit icons then it is possible otherwise I can't see a way to do this.

[mbrn]

Actually it is possible:

It calls your editComponent with rowData. You can return MTableEditField (import {MTableEditField} from 'material-table') or return value directly according to your condition.

  <EditComponent
                key={columnDef.tableData.id}
                columnDef={cellProps}
                value={value}
                rowData={this.state.data}
                onChange={value => {
                  const data = { ...this.state.data };
                  setByString(data, columnDef.field, value);
                  // data[columnDef.field] = value;
                  this.setState({ data });
                }}
                onRowDataChange={data => {
                  this.setState({ data });
                }}
              />

[hdwivedi9]

@mbrn Thanks for the solution

[chidananda-mn]

Hello All,

https://material-table.com/#/docs/features/editable
In the above docs ,under Cell Editable Example-> am unable update the value after editing any suggestion