禁用 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是一个变量，它可以是false或true，它被设置为true，但表格仍然可以排序...

我也尝试了简单的方法。

sortable:false

但是依然没有起作用

有什么帮助吗？谢谢

- Md. Parvez Alam

Answer 1

在版本7中，如果您想在单个列上禁用排序，请在列定义中使用disableSortBy，例如：

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

- rMonteiro

Answer 2

使用 useSortBy 钩子 以及 disableSortBy 选项：

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

- Neeko

---

谢谢，我一直在找文档链接，但不知何故找不到，我刚开始学习react.js。谢谢你的答案，也感谢提供文档链接，我通常在向别人询问之前会先查看文档。 - Md. Parvez Alam

Answer 3

Typescript 版本：

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

- Ramón Maturano

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community

Answer 4

这对于react-table版本^7.7.0适用

 {
    header: () => <span>#</span>,
    accessorKey: "serialNo",
    enableSorting: false,
    cell: (row) => {
      return <div>{row?.row?.index + 1}</div>;
    },
  },

只需在列中添加一个enableSorting键，并根据您的用例切换它。

- Muhammad Waqar

Answer 5

你能再检查一下，确保没有错别字，例如将 sortable: false 写成了 sortble 吗？

我注意到在你的代码中，sortable: {dsiabledSort} 应该被替换为 sortable: disabledSort（不用花括号）。

- ShinaBR2