Material-table: Editable column depending on condition

[eniro]

IsEditable prop is fine for rows, but I think that something similar for columns would be nice as well.
What I need to do is have a condition based on data of the same row which will define which columns of the same row would be editable and which not.

for example:
editableCols: rowData => rowData.Type === 'Collection' ? rowData.col === 'Name' && rowData.col === 'Age' : rowData.col === 'City'

[Domino987]

You can use editable to pass a function to each field to evaluate in dependance to the data for each row:
editable: ( _ ,rowData ) => rowData && rowData.type === 'Collection',
This would make this field of that row editable if the data of that row has thet type 'Collection'. Any you can do that for each row.

[eniro]

Thank you, exactly what I was looking for.

[ZiedHf]

@Domino987 I'm looking for something similar, but I want to toggle editable basing on another cell value of the same row, when the user is editing.
Like a checkbox, for example, which toggle the next cell editable attribute to false or true.
Is this possible ?

[Domino987]

@ZiedHf can you elaborate on your specific usecase?

[ZiedHf]

@Domino987 Sorry I didn't elaborate enough.

Let's say that we have two columns : Name (string) and active (checkbox)
When the user is editing a specific row and then he uncheck active the table disable the first column name and delete its value.

The default behavior of editable is working based on the value of the first render when the user switch to the editable mode.

I'm not sure but I think I should specify my own Component since there is another props editcomponent. I'm trying to figure out a way to do this ..

function KEditComponent(props: any) {
  const { columnDef, rowData, value, onChange } = props;
 // get the values of Select
  const lookup = get(columnDef, "lookup", []);
  const menuItems = Object.keys(lookup).map(id => <MenuItem key={id} value={id}>{lookup[id]}</MenuItem>);
// Disable the select if the column type == 1
  const isDisabled = [1, "1"].includes(get(rowData, "type")); 
 // This will provoke an error, Maximum update depth exceeded. I must change this to state.
  if (!value && isDisabled) onChange(null);
  return (<Select
    id="org-unit-parent"
    value={value}
    onChange={e => onChange(get(e, "target.value"))}
    disabled={isDisabled}
  >
    {menuItems}
  </Select>);
}

[Domino987]

@ZiedHf For that , you can simply use the onRowChange callback for the editComponent prop of the column.
Here is a working sandbox: https://codesandbox.io/s/zen-taussig-53ppp
By changing the name on the condition of the checkbox and passing it back to the onRowChange , material-table updates all of the fields of the row.
Hope this helps. Maybe ask this on SO next time since its not a real issue but a question. Thanks

[dashName]

You can use editable to pass a function to each field to evaluate in dependance to the data for each row:
editable: ( _ ,rowData ) => rowData && rowData.type === 'Collection',
This would make this field of that row editable if the data of that row has thet type 'Collection'. Any you can do that for each row.

do we have a way to show onRowAdd conditionally similar to isEditable in editable.I want to allow add for only certain condition.

[Domino987]

What do you want to depend it on?

[dashName]

What do you want to depend it on?

based on user role which is coming from my redux store.

<MaterialTable icons={{ ...tableIcons, Edit: () => {return (<tableIcons.Edit style={{color:'#031d44'}}/>)}, Add: () => { return ( <div className="add-container" > <SVG name="plus-icon" fill="#FFFFFF" width="24px"/> <span> ADD </span> </div> ) }, editable={{ isEditable: rowData => rowData.isvalid === true, // only rows would be editable onRowUpdate: (newData, oldData) => …. }), onRowAdd: newData => ….. }), }} />

or if there is a way to hide onRowAdd method in editable conditionally that would help too.

[DominikEngel]

Yes you can make it conditional by just returning undefined for onRowAdd instead of a function like that:

 onRowAdd: user.role === 'admin' ? newData =>
          new Promise((resolve, reject) => {
            setTimeout(() => {
              setData([...data, newData]);

              resolve();
            }, 1000)
          }) : undefined,

[dashName]

user.role === 'admin'

Thanks you so much.This is what i needed.