是否可以在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属性。