T
TanStack•3y ago
passive-yellow

How to make one of the column not sortable?

I want to make column on the left ("#") is not sortable, how to do it?
No description
4 Replies
passive-yellow
passive-yellowOP•3y ago
import {
  FlexRender,
  getCoreRowModel,
  getSortedRowModel,
  getPaginationRowModel,
  useVueTable,
  createColumnHelper,
  type SortingState
} from '@tanstack/vue-table'
import { ref } from 'vue';

const columnHelper = createColumnHelper()
const columns: any = [
  columnHelper.accessor('id', {
    header: '#',
    sortable: false
  }),
  columnHelper.accessor('a', {
    header: 'A'
  }),
  columnHelper.accessor('b', {
    header: 'B'
  }),
  columnHelper.accessor('c', {
    header: 'C'
  }),
  columnHelper.group({
    header: 'Grouped',
    columns: [
      columnHelper.accessor('d', {
        header: 'D'
      }),
      columnHelper.accessor('e', {
        header: 'E'
      }),
      columnHelper.accessor('f', {
        header: 'F'
      }),
    ]
  })
]
import {
  FlexRender,
  getCoreRowModel,
  getSortedRowModel,
  getPaginationRowModel,
  useVueTable,
  createColumnHelper,
  type SortingState
} from '@tanstack/vue-table'
import { ref } from 'vue';

const columnHelper = createColumnHelper()
const columns: any = [
  columnHelper.accessor('id', {
    header: '#',
    sortable: false
  }),
  columnHelper.accessor('a', {
    header: 'A'
  }),
  columnHelper.accessor('b', {
    header: 'B'
  }),
  columnHelper.accessor('c', {
    header: 'C'
  }),
  columnHelper.group({
    header: 'Grouped',
    columns: [
      columnHelper.accessor('d', {
        header: 'D'
      }),
      columnHelper.accessor('e', {
        header: 'E'
      }),
      columnHelper.accessor('f', {
        header: 'F'
      }),
    ]
  })
]
wise-white
wise-white•3y ago
There is a enableSorting flag, which if you set to false will disable sorting on that column.
No description
passive-yellow
passive-yellowOP•3y ago
I just want to disable sort for a specific column only, not the entire table column.
wise-white
wise-white•3y ago
Yes, that option is available on a per column basis. You add the enableSorting: false flag to the column you DON'T want to be sortable.

Did you find this page helpful?