T
TanStack•3y ago
passive-yellow

Get sort state from columnDef?

Hey im trying to style the header of a column depending on whether its id matches any in the sort state array. I see theres: 
column.getIsSorted()
column.getIsSorted()
which returns the direction of the columns sort, but I cant figure out how to get the full table's sort state. Any ideas? Thank you! 
columnHelper.accessor("lastModified", {
    header: ({ column }) => {
      return (
        <Button
          className={cn(
            // style logic
          )}
          onClick={() => {
            column.toggleSorting(
              column.getIsSorted() === "asc"
            )
          }}
        >
          Last Updated
        </Button>
      );
    },
    cell: (info) => (
      <span className="whitespace-nowrap text-center">
        {info.getValue() ? <ReactTimeago date={info.getValue()!} /> : "Never"}
      </span>
    ),
    footer: (props) => props.column.id,
    sortingFn: "datetime",
    enableSorting: true,
  }),
columnHelper.accessor("lastModified", {
    header: ({ column }) => {
      return (
        <Button
          className={cn(
            // style logic
          )}
          onClick={() => {
            column.toggleSorting(
              column.getIsSorted() === "asc"
            )
          }}
        >
          Last Updated
        </Button>
      );
    },
    cell: (info) => (
      <span className="whitespace-nowrap text-center">
        {info.getValue() ? <ReactTimeago date={info.getValue()!} /> : "Never"}
      </span>
    ),
    footer: (props) => props.column.id,
    sortingFn: "datetime",
    enableSorting: true,
  }),
1 Reply
passive-yellow
passive-yellowOP•3y ago
Is this not possible in columnDefs maybe, the sorting example puts this logic where the table gets rendered (data-table.tsx) ohhhh isSorted() 😂 didnt realise it had a false state

Did you find this page helpful?