如何使材料表中只有 1 行可编辑？

Question

目前我有一张使用material-table 的员工表。有一些带有某些标志的员工使背景行变红。这是它的样子：

我想要做的是能够编辑具有红色背景的行并且仅这些行。我不想将editable 道具放在整个表格上，因为这会占用每一行的图标空间，但我只想能够编辑这些特殊的行标志。

这是我的 React 代码。请注意，forgotClockOut 是我拥有的特殊标志。

<MaterialTable
    icons={icons}
    title="Daily Report"
    columns={[
        { title: 'Name', field: 'name' },
        {
            title: 'Time In',
            field: 'started',
            render: ({ started }) =>
                started
                    ? moment(started).format('h:mm A')
                    : 'Not yet',
            cellStyle: (value, { started, clockedOut }) => {
                if (!started) {
                    return null;
                }

                if (clockedOut) {
                    return { color: 'red' };
                }

                return { color: '#06c92d' };
            },
        },
        { title: 'Time Out', field: 'clockedOut', render: ({clockedOut}) => clockedOut ? moment(clockedOut).format('h:mm A') : 'Not yet'},
        { title: 'Time Worked', field: 'minutesWorked', render: ({minutesWorked}) => `${Math.floor(minutesWorked / 60)}h ${minutesWorked % 60}m`},
    ]}
    options={{
        rowStyle: ({forgotClockOut}) => {
            if(forgotClockOut) {
                return { backgroundColor: '#ffaaaa' };
            }
        }
    }}
    onRowClick={(event, rowData) => {
        const {forgotClockOut} = rowData;
        // ?? What to do here ??
    }}
    data={employees}
/>

有没有办法只编辑使用material-table 制作的表格中的某些行？

Answer 1

您可以使用 edit 属性来定义：

<MaterialTable
    editable={{
        isEditable: rowData => rowData.name === 'a', // only name(a) rows would be editable
}}/>

您可以在文档中看到：https://material-table.com/#/docs/features/editable

Answer 2

即使使用 prop isEditable 和 isDeletable，您也无法隐藏这 2 个图标。 如果您想完全隐藏它们，请尝试使用Conditionals Actions。

如果您需要快速解决此问题，您可以创建一个在隐藏道具条件下出现的动作。

const actions={
  [
    rowData => ({
      icon: 'delete',
      isFreeAction: false,
      tooltip: 'Delete User',
      hidden: !rowData.deletable
      onClick:() => {...}
      })
  ]}