fix styling for non-sortable columns in sortable tables

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;
}

[wkeese]

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

[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.