如何在Mantine React Table中编辑复杂嵌套对象？

要实现嵌套对象的编辑，核心是自定义编辑单元格组件，在编辑模态框中渲染对应字段的表单控件，并同步更新行数据。以下是具体实现步骤：

1. 编写自定义嵌套对象编辑组件 #

利用Mantine的表单组件和MRT提供的useEditCellContext钩子，获取编辑上下文并处理值的更新：

import { Checkbox, TextInput, Box } from '@mantine/core';
import { useEditCellContext } from 'mantine-react-table';

// 定义嵌套对象类型（TypeScript可选，JavaScript可省略）
type NestedConfig = {
  allowOverwrite: boolean;
  eq1: number;
  between1and6: number;
  higher5: number;
};

const NestedObjectEditComponent = () => {
  const { cell, row } = useEditCellContext();
  // 获取当前行的嵌套对象数据
  const nestedData = row.original[cell.column.id] as NestedConfig;

  // 更新嵌套对象的指定属性
  const updateNestedField = (key: keyof NestedConfig, value: any) => {
    row.setValue(cell.column.id, {
      ...nestedData,
      [key]: value,
    });
  };

  return (
    <Box>
      <Checkbox
        label="允许覆盖"
        checked={nestedData.allowOverwrite}
        onChange={(e) => updateNestedField('allowOverwrite', e.target.checked)}
        mb="md"
      />
      <TextInput
        label="eq1"
        value={nestedData.eq1}
        onChange={(e) => updateNestedField('eq1', Number(e.target.value))}
        mb="md"
        type="number"
      />
      <TextInput
        label="between1and6"
        value={nestedData.between1and6}
        onChange={(e) => updateNestedField('between1and6', Number(e.target.value))}
        mb="md"
        type="number"
      />
      <TextInput
        label="higher5"
        value={nestedData.higher5}
        onChange={(e) => updateNestedField('higher5', Number(e.target.value))}
        type="number"
      />
    </Box>
  );
};

2. 配置表格列，关联自定义编辑组件 #

在列配置中，指定editCell属性为自定义组件，同时可以自定义单元格的显示内容：

import { MantineReactTable, ColumnDef } from 'mantine-react-table';
import { Box } from '@mantine/core';

// 假设你的数据结构是这样的
type TableData = {
  id: number;
  // 这里是嵌套对象字段，key根据你的实际数据调整
  config: NestedConfig;
};

const columns: ColumnDef<TableData>[] = [
  {
    accessorKey: 'id',
    header: 'ID',
  },
  {
    accessorKey: 'config', // 对应数据中的嵌套对象key
    header: '配置项',
    // 自定义单元格显示内容
    cell: ({ cell }) => {
      const data = cell.getValue() as NestedConfig;
      return (
        <Box>
          <p>允许覆盖: {data.allowOverwrite ? '✅' : '❌'}</p>
          <p>eq1: {data.eq1}</p>
          <p>1-6区间值: {data.between1and6}</p>
          <p>高于5的值: {data.higher5}</p>
        </Box>
      );
    },
    // 指定自定义编辑组件
    editCell: () => <NestedObjectEditComponent />,
  },
];

// 在表格组件中使用配置
const MyTable = () => {
  const tableData: TableData[] = [
    // 你的数据数组
    {
      id: 1,
      config: {
        allowOverwrite: false,
        eq1: 0,
        between1and6: 1,
        higher5: 2,
      },
    },
  ];

  return <MantineReactTable columns={columns} data={tableData} enableRowEditing />;
};

关键注意事项 #

• 利用row.setValue更新嵌套对象时，要通过扩展运算符保留原有属性，避免覆盖整个对象
• 数字类型的输入需要手动转换类型（因为TextInput默认返回字符串）
• 布尔值字段使用Checkbox组件，直接绑定checked状态即可

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