[TableSortLabel] Remove sort icon when not active

Table sort labels reserve space for the sort icon even when the column isn’t the active sort. This prevents layout changes when clicking on a column for sorting, but this also uses horizontal space. I think the icon should be hidden rather than of 0% opacity.

• This is a v1.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

When a table header is not active for sort, the arrow is hidden (with `display: ‘none’), i.e. it takes no horizontal space

Current Behavior

When a table header is not active for sort, the arrow is displayed, but with 0% opacity. If this actually hides the arrow, it also uses horizontal space.

Examples

Material Design doesn’t specify that the space for the arrow should be reserved. I understand that it helps for a nicer animation (by transitioning the opacity), but the effect on horizontal space it too high a price.

Context

Especially for number columns, where the header is often larger than the content, horizontal space is sparse. Imagine a table with many columns, each containing only numbers. the spacing between each column (due to the space reserved for the arrow if active) makes the table too large to fit in one screen without scrolling

[oliviertassinari]

One more thought. We could add a property to enable this behavior. I think that it’s generic enough to be considered. What do you think about it?

[arjunagl]

Hello @fzaninotto I am new to material-ui and trying to contribute. I tried to pass in the custom style as you have mentioned by passing in a custom style

const styles = {
    icon: {
        display: 'none',
    },
    active: {
        '& $icon': {
            display: 'inline',
        },
    },
};

I am trying to do this in the examples and I’m using the EnhancedTable.js example. Maybe I’m trying it wrong, however what I’m trying to do is the following

                <TableSortLabel
                    active={orderBy === row.id}
                    style={styles}
                    direction={order}
                    onClick={this.createSortHandler(row.id)}
                  >

This does not work as expected since I’m passing in classes actually. When I try to pass in the same using classes also it does not work, since classes are expecting class names as strings. Since I’m new to this its very likely that I’m doing something wrong. Any help.