How to change Material UI TableSortLabel Arrow to the left side?

user_9723048 0
Viewed 1356

I have both right aligned and left aligned columns in my table that need sorted. I would prefer to have the icon be on the left of the header in cases where the column is right aligned. Otherwise there is an awkward space right aligned because the icon is just hidden, and not displayed none.

There is nothing in the TabelSortLabel API that allows this.

material-ui reactjs css
1 Answers

You can do It with flex-direction: row-reverse, based on the alignContent proprety

flexDirection: ({ header }: Props) => {
      return header?.alignContent && header?.alignContent === 'right' ? 'row-reverse' : 'row';
    },
user_154695240
Related