是否可以隐藏材料表中特定行的编辑选项？答案

【问题标题】：Is posible hide edit options for specific row in material-table?是否可以隐藏材料表中特定行的编辑选项？
【发布时间】：2020-03-05 20:34:19
【问题描述】：

我有这样的配置：


<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);
            }),
 }}
/>

我不想禁用要编辑的操作，而是将它们隐藏起来。满足特定条件的行不显示编辑和删除按钮。

有没有办法让这成为可能？谢谢。

【问题讨论】：

标签： reactjs material-ui material-table

【解决方案1】：

尝试对 'editable' 属性使用 'isEditHidden' 选项，这将隐藏编辑操作选项，而不是仅仅禁用它
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);
                })
        }}
    />

【讨论】：