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

sortable:false

But still not working

Any help Thanks

rMonteiro · Accepted Answer · 2022-11-11 12:48:48Z

22

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
}

edited Nov 11, 2022 at 12:48

answered Jan 21, 2022 at 15:05

rMonteiro

1,7241 gold badge17 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ricardo Sanchez · Accepted Answer · 2022-06-06 09:22:47Z

9

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

edited Jun 6, 2022 at 9:22

Ricardo Sanchez

5,22213 gold badges62 silver badges98 bronze badges

answered Jul 7, 2020 at 13:42

Neeko

1,1591 gold badge10 silver badges26 bronze badges

1 Comment

Md. Parvez Alam Over a year ago

Thanks, I was looking for the doc link, but somehow I could not manage to find the link, I have just started react.js.. Thanks your answer worked, also for the doc link, which I usually prefer before asking to anyone

Ramón Maturano · Accepted Answer · 2022-03-04 23:07:38Z

4

Typescript version:

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

edited Mar 4, 2022 at 23:07

answered Mar 4, 2022 at 19:57

Ramón Maturano

412 bronze badges

Comments

Muhammad Waqar · Accepted Answer · 2022-11-11 02:22:42Z

3

This worked for me for react-table version ^7.7.0

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

Just add a enableSorting key in columns and toggle it according to your use case.

answered Nov 11, 2022 at 2:22

Muhammad Waqar

1939 bronze badges

Comments

ShinaBR2 · Accepted Answer · 2020-07-07 13:39:44Z

0

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

answered Jul 7, 2020 at 13:39

ShinaBR2

2,7253 gold badges16 silver badges28 bronze badges

Collectives™ on Stack Overflow

disable sort in react-table

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related