在 react-table 中禁用排序

Question

let {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    prepareRow,
    page,
    canPreviousPage,
    canNextPage,
    nextPage,
    previousPage,
    state: { pageIndex, sortBy }
  } = useTable(
    {
      columns,
      data,
      sortable: {dsiabledSort}
      manualPagination: true,
      manualSortBy: true
    },
    useSortBy,
    usePagination
  );

dsiabledSort 是可变的，它要么为假要么为真，它设置为真，但仍然 table 有排序... 我也简单地尝试过

sortble:false

但还是不行

任何帮助谢谢

Answer 1

您能否再次检查以确保没有输入错误，例如 sortble 而不是 sortable: false？

而且我注意到在您的代码中 sortable: {dsiabledSort} 应该替换为 sortable: disabledSort（没有花括号）。

Answer 2

使用 useSortBy hook 和 disableSortBy 选项：

let {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    prepareRow,
    page,
    canPreviousPage,
    canNextPage,
    nextPage,
    previousPage,
    state: { pageIndex, sortBy }
} = useTable(
    {
       columns,
       data,
       manualPagination: true,
       manualSortBy: true,
       disableSortBy: dsiabledSort // Add disableSortBy here
    },
    useSortBy,
    usePagination
);

Answer 3

在 版本 7 上，如果要禁用对单个列的排序，请在列定义上使用 disableSortBy，例如：

{
    Header: 'Column Title',
    accessor: 'title',
    disableSortBy: true
}

Answer 4

打字稿版本：

const MyColumns: (Column<IMyRow> & UseSortByColumnOptions<IMyRow>)[] = useMemo(() => [
    {
      Header: 'Date',
      accessor: 'date',
      disableSortBy: true,
    }
], [])

在 react-table 中禁用排序

disable sort in react-table

javascript

reactjs

react-table