Carbon: fix styling for non-sortable columns in sortable tables

[wkeese]

Summary

AFAICT the data table (even data table v2) doesn't support tables where only some columns are sortable.

Justification

Our product needs to control which columns are and aren't sortable. They don't want to allow sorting on arbitrarily long text (note/description columns etc.) because it's bad for performance and it's just not useful.

Desired UX and success metrics

The.#{$prefix}--data-table--sort class currently goes on the table root node, and changes the padding on every <th> from 1rem to 0. It assumes that every <th> contains a <button> with 1rem padding.

But this breaks when only some of the columns are sortable, because the columns without sorting don't have a <button> and therefore don't have any padding... and alignment is off.

The quickest solution is adding CSS like

.#{$prefix}--data-table--sort th > .#{$prefix}--table-header-label {
    padding-left: $spacing-05;
    padding-right: $spacing-05;
}

However, maybe you should stop putting padding on the <th> altogether, and just always put it on the <th>'s child, regardless of if it's a <button> or a plain .#{$prefix}--table-header-label. If _data-table-core.scss did that, then _data-table-sort.scss wouldn't have to override the CSS set by _data-table-core.scss.

As a bonus, that would fix hidden issues when a sortable table contains a non-sortable table as one of its expando rows. Currently that nested table is getting caught by the parent table's CSS, i.e. the CSS below (from _data-table-sort.scss) is inadvertently affecting nested tables.

.#{$prefix}--data-table--sort th, ... {
    padding: 0;
}

[emyarod]

regarding the request for non-sortable columns in sortable tables, have you tried selectively applying isSortable={true} or isSortable={false} to your <TableHeader>s? (assuming your project is using Carbon React and not vanilla)

[wkeese]

That's interesting, I didn't know about that flag.

We're not actually using the React implementation, but I can see from the code that isSortable=false simply renders the column header like a basic non-sortable table, i.e. without the bx--table-sort, bx--table-sort--active, and bx--table-sort--ascending classes.

That's what I was doing locally which led me to write this ticket because of the alignment issues... so I would guess that React has the same problem.

[emyarod]

ok I see, so this issue is for the styling of non sortable columns since the sorting behavior (or removal of sorting) in columns is working properly, is that right?

[wkeese]

Right... I'll update the ticket title to be clearer.

[wkeese]

Things get worse when you change the row height (i.e. the size property). Here's a screenshot from our app where only the first column is sortable.

[emyarod]

the original issue should be resolved in #6181 but I can resolve the issues with table header sizes separately since it doesn't seem to be a regression

[wkeese]

Cool, thanks for fixing that. I filed #6261 to track the other (non-regression) issue.