[TableSortLabel] sort icon still can be hidden when hideSortIcon={false}

[MonstraG]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:
https://codesandbox.io/s/cool-leftpad-c3lckl?file=/src/App.tsx

Steps:
hover and click the labels

Current behavior 😯

When hideSortIcon is false, arrow is still hidden on a label you're not interacting with

Expected behavior 🤔

When hideSortIcon is false, arrow is shown in some way at all times

Context 🔦

Some of columns in my table are not sortable, and it is impossible to know if they are, unless you hover the column

Your environment 🌎

see sandbox

[MonstraG]

Hmm, it seems like it was designed to be this way, and this is more of a feature request - allow, trough some combination of props, to be able to see which columns can be sorted or not at a glance.

[MonstraG]

I was able to achieve my desired behavior with this:

import ImportExportIcon from "@mui/icons-material/ImportExport";
import TableSortLabel, { tableSortLabelClasses } from "@mui/material/TableSortLabel";

type MyTableSortLabelProps = {
  columnId: number;
  columnUnsortable?: boolean;
  orderBy: number;
  orderDir: "asc" | "desc";
  onClickSort: (column: number) => void;
  children: React.ReactNode;
};

export const MyTableSortLabel: React.FC<MyTableSortLabelProps> = ({
  columnId,
  columnUnsortable,
  orderBy,
  orderDir,
  onClickSort,
  children
}) => {
  if (columnUnsortable) {
    return <>{children}</>;
  }

  const active = orderBy === columnId;
  return (
    <TableSortLabel
      active={active}
      direction={active ? orderDir : "asc"}
      onClick={() => onClickSort(columnId)}
      sx={{
        [`.${tableSortLabelClasses.icon}`]: {
          opacity: 0.5
        }
      }}
      IconComponent={active ? undefined : ImportExportIcon}
    >
      {children}
    </TableSortLabel>
  );
};

This still can be implemented, or we could just document this as a recipie in on the page. Or this issue can just be closed.

[ZeeshanTamboli]

The docs for hideSortIcon prop state that:

Hide sort icon when active is false.

---

So as per the docs:

When hideSortIcon is false, arrow is still hidden on a label you're not interacting with

It's the intended behaviour. If you are not interacting with it, active is false, so the arrow is hidden.

When hideSortIcon is false, arrow is shown in some way at all times

For that the label should be active. See - https://codesandbox.io/s/relaxed-orla-wwlpcv?file=/src/App.tsx:1243-1291