Conditionally enable edit in lightning:datatable

Question

I'm trying to do a dynamic editable field, this is what I've got:

Component

<lightning:datatable columns="{!v.columns}"
            data="{! v.data }"
            keyField="{! v.keyField }"
            onsave="{! c.handleSaveEdition }"
            />

data

[
    {field1: 't1c1', field2: 't1c2', field3: 't1c3', field3Editable: true},
    {field1: 't2c1', field2: 't2c2', field3: 't3c3', field3Editable: true},
    {field1: 't2c1', field2: 't2c2', field3: 't3c3', field3Editable: false},
];

column

[
    {label: 'Col 1', fieldName: 'field1', type: 'text', sortable: false},
    {label: 'Col 2', fieldName: 'field2', type: 'text', sortable: false},
    {label: 'Col 3', fieldName: 'field3', type: 'text', sortable: false, editable: {fieldName: 'field3Editable'}},
];

but even with the last "field3Editable" from data seted as false the field appears as editable.

Answer 1

Per documentation, the editable attribute for lightning:datatable is applicable directly at the column level, and it does not mention anything at cell level, excerpt below:

Specifies whether a column supports inline editing. The default is false.

With a quick test, I could confirm that you won't be able to disable a particular cell in a lightning:datatable with the syntax you have currently. With what you have currently editable: {fieldName: 'field3Editable'} is not the right syntax based on the documentation. The attribute itself should be set to editable: true or editable: false.

The syntax that you have currently seems to be always evaluated as editable: true by the platform, most likely it simply ignores any error and sets it to true. Even if you say have something as editable: {nonExistentFieldName: 'nonExistentFieldValue'} you will be still able to see that the cells are editable.

If you want to disable any particular cell, you may have to look at alternative solutions here as you may not be able to achieve it using lightning:datatable.

Answer 2

There is a way to disable a particular cell in a datatable. Using CSS you can grey out the cell.

[
    {label: 'Col 1', fieldName: 'field1', type: 'text', sortable: false},
    {label: 'Col 2', fieldName: 'field2', type: 'text', sortable: false},
    {label: 'Col 3', fieldName: 'field3', type: 'text', sortable: false, editable: true , **cellAttributes: { class: { fieldName: 'disable' } }**},
];

[
    {field1: 't1c1', field2: 't1c2', field3: 't1c3', disable: ''},
    {field1: 't2c1', field2: 't2c2', field3: 't3c3', disable: ''},
    {field1: 't2c1', field2: 't2c2', field3: 't3c3', disable: 'greyOut'},
];

CSS:

.THIS .greyOut{    
   pointer-events: none; 
   background: #CCC; 
   color: #333; 
   border: 1px solid #666 
}