如何移除Material React Table排序选项中的‘Unsorted’选项？

针对你使用的material-react-table v1.14.0版本，有两种简单方法可以实现仅保留“Ascending”和“Descending”排序选项：

方法一：全局统一配置 #

在MaterialReactTable组件中，通过renderSortingDropdownItems属性自定义排序下拉菜单，过滤掉“Unsorted”选项：

import MaterialReactTable from 'material-react-table';
import MenuItem from '@mui/material/MenuItem'; // 需引入Material UI的MenuItem组件

const YourTable = () => {
  // 示例列配置
  const columns = [
    { accessorKey: 'id', header: 'ID' },
    { accessorKey: 'name', header: 'Name' },
    // 其他列定义...
  ];

  const tableData = [/* 你的表格数据 */];

  return (
    <MaterialReactTable
      columns={columns}
      data={tableData}
      renderSortingDropdownItems={({ sortingItems, internalColumn }) => {
        // 过滤掉值为'unsorted'的选项
        const filteredItems = sortingItems.filter(item => item.value !== 'unsorted');
        // 渲染剩余的升序、降序选项
        return filteredItems.map(item => (
          <MenuItem
            key={item.value}
            onClick={() => internalColumn.toggleSorting(item.value)}
          >
            {item.label}
          </MenuItem>
        ));
      }}
    />
  );
};

export default YourTable;

方法二：针对单个列配置 #

如果仅需对特定列隐藏“Unsorted”选项，可在列定义中直接指定sortingOptions：

const columns = [
  {
    accessorKey: 'name',
    header: 'Name',
    // 仅设置升序和降序选项
    sortingOptions: [
      { value: 'asc', label: 'Ascending' },
      { value: 'desc', label: 'Descending' },
    ],
  },
  // 其他列...
];

全局配置适合所有列统一规则，单列配置则更灵活，可根据你的实际需求选择。

内容的提问来源于stack exchange，提问作者Alwin Kishore J