使用 React Material Table 库，是否可以在添加新行的同时渲染自定义组件？我正在为预期结果列使用自定义组件（实际上是一个 Material UI 选择框）。添加新行时，我只看到 Requirement 列的字段，而不是 Expected Result 列。是否也可以为新行的预期结果列添加输入？

另一种选择是根本不使用自定义组件，而是使用类似于https://material-table.com/#/docs/features/editable的 Cell Editable Example 的内容。但是，与直接使用 Select 字段相比，我不喜欢编辑预期结果所需的额外点击。

import MaterialTable from 'material-table'
import { MenuItem, Select } from '@material-ui/core'
import React, { useState } from 'react'
import update from 'immutability-helper'

type PassFailNA = 'Pass' | 'Fail' | 'N/A'

type RowData = {
    requirementId: number,
    requirementName: string,
    expectedResult: PassFailNA,
    expectedResultId?: number
}

export function ExpectedResultsTable(props: {
    scenarioId: number
}) {
    const [tableData, setTableData] = useState<RowData[]>([{ requirementId: 1, requirementName: 'hello', expectedResult: 'Pass' }])
    const { enqueueSnackbar } = useSnackbar()

    const handleSelect = (id: number) => (event: React.ChangeEvent<{ name?: string; value: any }>) => {
        setTableData((tableData: RowData[]) => {
            const rowNum = tableData.findIndex(x => x.requirementId === id)
            return update<RowData[]>(tableData, {
                [rowNum]: { expectedResult: { $set: event.target.value } }
            })
        })
    }

    return (
        <MaterialTable<RowData>
            title=""
            columns={[
                {
                    title: 'Requirement',
                    field: 'requirementName'
                },
                {
                    title: 'Expected Result',
                    field: 'expectedResult',
                    render: (rowData) => (
                        <Select value={rowData.expectedResult} onChange={handleSelect(rowData.requirementId)}>
                            <MenuItem value="Pass">Pass</MenuItem>
                            <MenuItem value="Fail">Fail</MenuItem>
                            <MenuItem value="N/A">N/A</MenuItem>
                        </Select>
                    )
                }
            ]}
            data={tableData}
            editable={{
                onRowAdd: newRow =>
                    new Promise((resolve, reject) => {
                        setTimeout(() => {
                            setTableData(tableData => update(tableData, { $push: [{ ...newRow, expectedResult: 'N/A'}] }))
                            resolve()
                        }, 1000)
                    })
            }}
        />
    )
}