Is posible hide edit options for specific row in material-table?

Question

I have a configuration like this:

<MaterialTable
    editable={{
        isEditable: rowData => rowData.name === "a", // only name(a) rows would be editable
        isDeletable: rowData => rowData.name === "b", // only name(a) rows would be deletable
        onRowAdd: newData =>
            new Promise((resolve, reject) => {
                setTimeout(() => {
                    {
                        /* const data = this.state.data;
                        data.push(newData);
                        this.setState({ data }, () => resolve()); */
                    }
                    resolve();
                }, 1000);
            }),
        onRowUpdate: (newData, oldData) =>
            new Promise((resolve, reject) => {
                setTimeout(() => {
                    {
                        /* const data = this.state.data;
                        const index = data.indexOf(oldData);
                        data[index] = newData;                
                        this.setState({ data }, () => resolve()); */
                    }
                    resolve();
                }, 1000);
            }),
 }}
/>

And I would like instead of disabling the actions to edit, they will hide. The row that meets a specific condition does not show the buttons to edit and delete.

Is there any way to make this possible? Thanks.

Answer 1

• Try using 'isEditHidden' option for 'editable' property which will hide the edit action option instead of just disabling it

• Material Table Documentation for Editable feature

    <MaterialTable
        editable={{
            isEditable: rowData => rowData.name === 'a', // only name(a) rows would be editable
            isEditHidden: rowData => rowData.name === 'x',
            isDeletable: rowData => rowData.name === 'b', // only name(b) rows would be deletable,
            isDeleteHidden: rowData => rowData.name === 'y',
            onBulkUpdate: changes => 
                new Promise((resolve, reject) => {
                    setTimeout(() => {
                        /* setData([...data, newData]); */

                        resolve();
                    }, 1000);
                }),
            onRowAddCancelled: rowData => console.log('Row adding cancelled'),
            onRowUpdateCancelled: rowData => console.log('Row editing cancelled'),
            onRowAdd: newData =>
                new Promise((resolve, reject) => {
                    setTimeout(() => {
                        /* setData([...data, newData]); */

                        resolve();
                    }, 1000);
                }),
            onRowUpdate: (newData, oldData) =>
                new Promise((resolve, reject) => {
                    setTimeout(() => {
                        const dataUpdate = [...data];
                        const index = oldData.tableData.id;
                        dataUpdate[index] = newData;
                        setData([...dataUpdate]);

                        resolve();
                    }, 1000);
                }),
            onRowDelete: oldData =>
                new Promise((resolve, reject) => {
                    setTimeout(() => {
                        const dataDelete = [...data];
                        const index = oldData.tableData.id;
                        dataDelete.splice(index, 1);
                        setData([...dataDelete]);

                        resolve();
                    }, 1000);
                })
        }}
    />