T
TanStack•3mo ago
ratty-blush

enable sort removal except for one column

i'm trying to get a table ux where: - subset of columns are sortable - a single column is the default sort (date) (this is the shape the data is loaded in) - all columns other than the default sort have sort removal enabled eg. the table is default sorted descending by date. if you click the "cost" header, it sorts cost descending, then next click ascending, then next click no sort. in this event, i'd like for the table to fall back to sorting by date descending. or in other words, sort removal should be disabled for the date column- i never want to achieve a state for which the data is not sorted by any columns. it should either be the chosen column via click, or default to date here's the relevant code- am i doing something way wrong? this doesn't seem like an unusual ux want 
const columns = [
  columnHelper.accessor("amount", {
    sortingFn: "basic",
    header: (props) => <SortButton column={props.column}>Cost</SortButton>,
  }),
  columnHelper.accessor("description", {
    sortingFn: "alphanumeric",
    header: (props) => <SortButton column={props.column}>Description</SortButton>,
  }),
  columnHelper.accessor("participants", {
    id: "paid-by",
    sortingFn: (rowA, rowB, columnId: string) => { // custom logic to sort by participant first name },
    header: (props) => {
      return <SortButton column={props.column}>Paid By</SortButton>;
    },
  }),
  columnHelper.accessor("participants", { ... }),
  columnHelper.accessor("date", {
    sortingFn: "datetime",
    sortDescFirst: false,
    header: (props) => <SortButton column={props.column}>Date</SortButton>,
  }),
  columnHelper.display({ id: "manage", }),
];
const columns = [
  columnHelper.accessor("amount", {
    sortingFn: "basic",
    header: (props) => <SortButton column={props.column}>Cost</SortButton>,
  }),
  columnHelper.accessor("description", {
    sortingFn: "alphanumeric",
    header: (props) => <SortButton column={props.column}>Description</SortButton>,
  }),
  columnHelper.accessor("participants", {
    id: "paid-by",
    sortingFn: (rowA, rowB, columnId: string) => { // custom logic to sort by participant first name },
    header: (props) => {
      return <SortButton column={props.column}>Paid By</SortButton>;
    },
  }),
  columnHelper.accessor("participants", { ... }),
  columnHelper.accessor("date", {
    sortingFn: "datetime",
    sortDescFirst: false,
    header: (props) => <SortButton column={props.column}>Date</SortButton>,
  }),
  columnHelper.display({ id: "manage", }),
];
table hook 
  const table = useReactTable({
    data: props.data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getRowId: (row) => row.id,
    meta: { ... },
    getSortedRowModel: getSortedRowModel(),
    initialState: { sorting: [{ id: "date", desc: true }] },
    enableSortingRemoval: false,
  });
  const table = useReactTable({
    data: props.data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getRowId: (row) => row.id,
    meta: { ... },
    getSortedRowModel: getSortedRowModel(),
    initialState: { sorting: [{ id: "date", desc: true }] },
    enableSortingRemoval: false,
  });
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?