[bug]: enableHiding and enableSorting not correctly reflected inside data-table-column-header

[John Emmerechts]

Describe the bug

If inside the xxx-table-column we add enableSorting:true and enableHiding:false to a column definition, the column header keep showing hide option in the dropdown menu.

We can do the following to reflect enableHide:false :

{column.getCanHide() ? (
   <>
      <DropdownMenuSeparator />
       <DropdownMenuItem
          aria-label="Hide column"
          onClick={() => column.toggleVisibility(false)}
       >
          <EyeNoneIcon
             className="mr-2 size-3.5 text-muted-foreground/70"
             aria-hidden="true"
          />
          Hide
       </DropdownMenuItem>
     </>
) : null}

also :
If enableHiding: true but enableSorting:false we loose the sorting dropdown containing the quick access to the hide option.

I propose the following :

  if (!column.getCanSort()  && !column.getCanHide()) {
    return <div className={cn(className)}>{title}</div>
  }
  
  return (
    <div className={cn("flex items-center space-x-2", className)}>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button
           aria-label={
              column.getCanSort() 
                ? column.getIsSorted() === "desc"
                  ? `Sorted descending. Click to sort ascending.`
                  : column.getIsSorted() === "asc"
                    ? `Sorted ascending. Click to sort descending.`
                    : `Not sorted. Click to sort ascending.`
                : undefined
            }
            variant="ghost"
            size="sm"
            className="-ml-3 h-8 data-[state=open]:bg-accent"
          >
            <span>{title}</span>
            {column.getCanSort() ? (
                column.getIsSorted() === "desc" ? (
                  <RxArrowDown className="ml-2 size-4" aria-hidden="true" />
                ) : column.getIsSorted() === "asc" ? (
                  <RxArrowUp className="ml-2 size-4" aria-hidden="true" />
                ) : (
                  <RxCaretSort className="ml-2 size-4" aria-hidden="true" />
                )
            ) : (
              <RxCaretSort className="ml-2 size-4" aria-hidden="true" />
            )}
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="start">
          {column.getCanSort() ? (
            <>
              <DropdownMenuItem
                aria-label="Sort ascending"
                onClick={() => column.toggleSorting(false)}
              >
                <ArrowUpIcon
                  className="mr-2 size-3.5 text-muted-foreground/70"
                  aria-hidden="true"
                />
                Asc
              </DropdownMenuItem>
              <DropdownMenuItem
                aria-label="Sort descending"
                onClick={() => column.toggleSorting(true)}
              >
                <ArrowDownIcon
                  className="mr-2 size-3.5 text-muted-foreground/70"
                  aria-hidden="true"
                />
                Desc
              </DropdownMenuItem>
           </>
          ) : null}
          
          {column.getCanSort() && column.getCanHide() ? (
             <DropdownMenuSeparator />
            )  : null}
          
         {column.getCanHide() ? (
            <DropdownMenuItem
              aria-label="Hide column"
              onClick={() => column.toggleVisibility(false)}
            >
              <EyeNoneIcon
                className="mr-2 size-3.5 text-muted-foreground/70"
                aria-hidden="true"
              />
              Hide
            </DropdownMenuItem>
         )  : null}
         
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  )

Note : we should maybe also add a clearSorting that would go back to the initial sorting ? this one I m not sure if it is necessary.

How to reproduce

add enableSorting: true and enableHiding: false to a column def

Link to reproduction

Additional information

No response

[Sadman Sakib]

thanks for reporting it.

your approach worked really well.

i fix it just now.