disable sort in react-table

user_2508672 0
Viewed 9510
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

sortable:false

But still not working

Any help Thanks

react-table reactjs javascript
4 Answers

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
}
user_22303250

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: disabledSort // Add disableSortBy here
    },
    useSortBy,
    usePagination
);
user_27105300

Typescript version:

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

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).

user_82703950
Related