disable sort in 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 is variable it will be either false or true, its set to true, but still table have sorting... I also tried simply

sortble:false

But still not working

Any help Thanks

Answer 1

Use the useSortBy hook with the disableSortBy option:

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 2

Can you check again to make sure no wrong typing such as sortble instead of sortable: false ?

And I have noticed that in your code sortable: {dsiabledSort} should be replace by sortable: disabledSort (without curly braces).

Answer 3

On Version 7 if you want to disable sort on a single column use disableSortBy on columns definition, for example:

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