如何在@tanstack/react-table中优雅处理空单元格值？

我的列定义里，除name字段外其余字段都是可选的：

const columnHelper = createColumnHelper<{
    name: string; 
    contact_person?: string; 
    phone_no?: string
}>();

export const countryColumns = () => [
    columnHelper.display({
        header: "S.N.",
        cell: ({ row }) => row.index + 1,
    }),
    columnHelper.accessor("name", {
        header: "Name",
    }),
    columnHelper.accessor("contact_person", {
        header: "Contact Person",
    }),
    columnHelper.accessor("phone_no", {
        header: "Phone Number",
    }),
    columnHelper.display({
        id: "actions",
        header: "Actions",
        cell: ({ row }) => (
            // 按钮元素
        ),
    }),
];

contact_person和phone_no是可选字段，表格中会出现空值情况。我试过两种处理方式，但都有问题：

1. 为每个可选字段单独配置cell逻辑

export const countryColumns = () => [
    columnHelper.display({
        header: "S.N.",
        cell: ({ row }) => row.index + 1,
    }),
    columnHelper.accessor("name", {
        header: "Name",
    }),
    columnHelper.accessor("contact_person", {
        header: "Contact Person",
        cell: info => info.getValue() ?? "---"
    }),
    columnHelper.accessor("phone_no", {
        header: "Phone Number",
        cell: info => info.getValue() ?? "---"
    }),
    columnHelper.display({
        id: "actions",
        header: "Actions",
        cell: ({ row }) => (
            // 按钮元素
        ),
    }),
];

这种方式需要逐个配置，太繁琐，有没有更简便的办法？

2. 在表格组件中统一处理

{row.getVisibleCells().map(cell => {
    return (
        <Td key={cell.id} pl={6}>
            {cell.getValue() ? flexRender(
                cell.column.columnDef.cell,
                cell.getContext(),
            ) : "---"}
        </Td>
    );
})}

但这种方式会把S.N.、Actions这类display列也渲染成---，只希望对accessor列生效，该怎么解决？

优化方案一：封装通用空值处理函数，批量生成accessor列 #

写一个工具函数，自动给可选字段的accessor列加上空值处理逻辑，避免重复代码：

// 通用空值处理的accessor生成函数
const createOptionalAccessor = (key: keyof typeof columnHelper, header: string) => {
    return columnHelper.accessor(key, {
        header,
        cell: info => info.getValue() ?? "---"
    });
};

export const countryColumns = () => [
    columnHelper.display({
        header: "S.N.",
        cell: ({ row }) => row.index + 1,
    }),
    columnHelper.accessor("name", {
        header: "Name",
    }),
    // 使用工具函数生成带空值处理的列
    createOptionalAccessor("contact_person", "Contact Person"),
    createOptionalAccessor("phone_no", "Phone Number"),
    columnHelper.display({
        id: "actions",
        header: "Actions",
        cell: ({ row }) => (
            // 按钮元素
        ),
    }),
];

优化方案二：在表格渲染时区分列类型 #

通过判断列的accessorKey是否存在，区分accessor列和display列，只对有accessorKey的列做空值处理：

{row.getVisibleCells().map(cell => {
    const cellValue = cell.getValue();
    // 只对存在accessorKey的列（即accessor列）做空值替换
    if (cell.column.columnDef.accessorKey) {
        return (
            <Td key={cell.id} pl={6}>
                {cellValue ?? "---"}
            </Td>
        );
    }
    // display列直接渲染原有内容
    return (
        <Td key={cell.id} pl={6}>
            {flexRender(cell.column.columnDef.cell, cell.getContext())}
        </Td>
    );
})}

优化方案三：扩展columnHelper，自定义带空值处理的accessor #

如果项目中大量需要处理空值的列，可以直接扩展columnHelper，创建专属的optionalAccessor方法：

// 扩展columnHelper，添加可选字段的accessor方法
const extendedColumnHelper = {
    ...columnHelper,
    optionalAccessor: (key: keyof typeof columnHelper, header: string) => {
        return columnHelper.accessor(key, {
            header,
            cell: info => info.getValue() ?? "---"
        });
    }
};

export const countryColumns = () => [
    extendedColumnHelper.display({
        header: "S.N.",
        cell: ({ row }) => row.index + 1,
    }),
    extendedColumnHelper.accessor("name", {
        header: "Name",
    }),
    // 使用自定义的optionalAccessor
    extendedColumnHelper.optionalAccessor("contact_person", "Contact Person"),
    extendedColumnHelper.optionalAccessor("phone_no", "Phone Number"),
    extendedColumnHelper.display({
        id: "actions",
        header: "Actions",
        cell: ({ row }) => (
            // 按钮元素
        ),
    }),
];

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