如何使材料表中只有 1 行可編輯？

Question

目前，我有一張使用material-table的員工表。 有一些帶有某些標志的員工使背景行變紅。 這是它的樣子：

我想要做的是能夠編輯具有紅色背景的行並且只有這些行。 我不想將editable道具放在整個表格上，因為這會占用每一行的圖標空間，但我只想能夠使用這些特殊標志編輯行。

這是我的反應代碼。 請注意， 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

您可以使用編輯道具來定義：

<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:() => {...}
      })
  ]}