是否可以在 Ant Design 中禁用空表的标题？

Question

这是我的示例表

我的表格有分类器，所以我的标题是可点击的。我想要做的是如果表格是空的，我希望我的标题被禁用或不可点击。这可以用css吗？我还有其他方法可以做到这一点吗？下面是我用于列的代码。我的数据来自数据源。

const columns = [
    {
        title: 'LAST NAME',
        dataIndex: 'lastName',
        sorter: (a, b) => a.lastName.localeCompare(b.lastName),
        width: '15%'
    },
    {
        title: 'FIRST NAME',
        dataIndex: 'givenName',
        sorter: (a, b) => a.givenName.localeCompare(b.givenName),
        width: '15%'
    },
    {
        title: 'MIDDLE NAME',
        dataIndex: 'middleName',
        sorter: (a, b) => a.middleName.localeCompare(b.middleName),
        width: '15%'
    }, 
    {
        title: 'DATE OF BIRTH',
        dataIndex: 'dateOfBirth',
        sorter: (a, b) => a.dateOfBirth.localeCompare(b.dateOfBirth),
        width: '14%'
    },
    {
        title: 'GENDER',
        dataIndex: 'sex',
        sorter: (a, b) => a.sex.localeCompare(b.sex),
        width: '12%'
    },
    {
        title: 'ADDRESS',
        dataIndex: 'address',
        sorter: (a, b) => a.address.localeCompare(b.address),
    },
];

Answer 1

我要做的是提取我希望禁用的排序函数以将我的数据传递给它们，如果数据为空，则返回false。像这样：

    const columns = [
        {
            title: 'LAST NAME',
            dataIndex: 'lastName',
            sorter: getSorter(myDataSource),
            width: '15%'
        }
    ];

    getSorter = (myDataSource) => myDataSource.length > 0 ? (a, b) => a.lastName.localeCompare(b.lastName) : false;

所以：

1. 将数据源传递给负责创建排序函数的函数

2. 检查该数据源是否为空：

   2a。如果为空，则返回 false（这将删除排序选项）

   2b。如果不是，返回排序函数

Here 是 column 属性的文档，说明您可以将函数或布尔值传递给 sorter 属性。