如何禁用或隐藏Material React Table新建项模态框中的指定字段？

有两种常用方法可以实现需求：

方法一：通过列配置精准控制 #

在定义表格列的时候，针对需要服务器生成的字段，利用列配置项直接控制其在新建模态框中的显示与编辑权限：

const columns = [
  {
    accessorKey: 'serverGeneratedId',
    header: '服务器生成ID',
    // 完全禁用该字段的编辑权限（涵盖新建、编辑所有场景）
    enableEditing: false,
    // 若需仅在新建时隐藏该字段，可结合行状态判断
    hidden: ({ row }) => row.isNew,
  },
  // 其他列配置...
];

这种方式无需自定义模态框，仅通过列配置就能快速实现需求，适合简单场景。

方法二：自定义新建模态框内容 #

如果需要更灵活的表单结构控制，可以通过renderCreateRowModalContent属性自定义整个新建模态框的表单，直接剔除不需要用户操作的字段：

<MaterialReactTable
  columns={columns}
  data={data}
  enableEditing
  renderCreateRowModalContent={({ closeModal, row, saveRow }) => (
    <div className="modal-content">
      <h3>新建条目</h3>
      {/* 仅渲染需要用户输入的字段 */}
      <div>
        <label>名称</label>
        <input
          value={row.values.name}
          onChange={(e) => row.setValue('name', e.target.value)}
          placeholder="请输入名称"
        />
      </div>
      {/* 不渲染服务器生成的字段 */}
      <div className="modal-buttons">
        <button onClick={() => saveRow().then(closeModal)}>保存</button>
        <button onClick={closeModal}>取消</button>
      </div>
    </div>
  )}
/>

这种方法可以完全掌控新建表单的布局与字段，适合有复杂表单需求的场景。

内容的提问来源于stack exchange，提问作者PrasadB