Как мы можем отключить / скрыть значки добавления, редактирования и удаления в таблице материалов в реаги JS?

Question

Я выделил кнопки, которые нужно отключить / скрыть.

Answer 1

вы можете проверить этот документ для более подробной информации.

Редактируемый пример проверьте эту вкладку на этой странице

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

или эта мысль поможет вам

  components={{
        Action: 
            props => {
                    if(props.action.icon === 'edit'){
                        return(
                        <Button
                        onClick={(event) => props.action.onClick(event, props.data)}
                        color="primary"
                        variant="contained"
                        style={{textTransform: 'none'}}
                        size="small"
                        disabled
                        >
                        My Button 
                        </Button>
                        )
                    }
                    if(props.action.icon === 'save'){
                        return(
                            <Button
                            onClick={(event) => props.action.onClick(event, props.data)}
                            color="primary"
                            variant="contained"
                            style={{textTransform: 'none'}}
                            size="small"
                            >
                            My Button 
                            </Button>
                        )
                    }
                }

      }}

Answer 2

Вам нужно удалить редактируемый винт.

<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);
            }),
        onRowDelete: oldData =>
            new Promise((resolve, reject) => {
                setTimeout(() => {
                    {
                        /* let data = this.state.data;
                        const index = data.indexOf(oldData);
                        data.splice(index, 1);
                        this.setState({ data }, () => resolve()); */
                    }
                    resolve();
                }, 1000);
            })
    }}
/>

станет просто

<MaterialTable/>

Более подробную информацию вы можете найти в официальной документации .

Если это не поможет, пожалуйста, оставьте свой код.