如何在 material-table 中只制作 1 行 editable？

Question

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

我想要做的是能够编辑具有红色背景的行并且仅这些行。我不想将 editable 道具放在整个 table 上，因为那样会占用 space 和 每一行 的图标，但是我只希望能够使用这些特殊标志编辑行。

这是我的 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 制作的 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

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

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

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

如何在 material-table 中只制作 1 行 editable？

How to make just 1 row editable in material-table?

javascript

reactjs

material-ui

material-table