Table Vertical Column Headings

Queries and Resources
, ,
#1

Hello all :wave:,

I've got quite a few columns in my table that I want to have shown, however some of these are only true/false values so don't require a lot of column space. In Excel I set the column header text to vertical so I can condense the column width as much as possible; I've managed to use the custom css in the styles and scripts settings to change the column headings to vertical, however this is applied across all the column headings (and likely to any other tables I might subsequently add).

I've looked at trying to apply an id to the specific column headings so that the custom css will only be applied to the elements I flag, but I can't seem to get the javascript to work - is something like this possible? Ideally it would be nice if I could create a condition that if the column type == boolean then apply the vertical-text style to the column heading, or even just a checkbox I could flag on/off for each column value.

Image below to show what I mean by vertical text in the column headings.

image
image1558×600 25.8 KB

Any help/suggestions would be awesome!

-L

#2

This is a tricky one :sweat_smile: tables are ordered by rows in the CSS, I wasn't able to find a particularly neat workaround but it seems like the following works!

You can pass dynamic values to your CSS using {{}} so you can construct the selectors you need dynamically in the app itself and then just pass those to your file.

It looks as though all columns come are wrapped in an element that has a testid attribute set to ColumnHeader::Container_<COLUMN_NAME>. So, for instance, you can select the packed column with the [testid=ColumnHeader::Container_packed] selector. So, one way to do this is to grab a list of the names for those columns which are of a particular type using your tables columnFormat property, then, construct a comma-separated list of selectors to pass to your CSS.

Here's some code for a transformer that does that:

const booleanColumns = _.pickBy({{table1.columnFormats}}, type => type === "CheckboxDataCell");
const columnNames = Object.keys(booleanColumns);
const selectors = columnNames.map(name => `[data-testid="ColumnHeader::Container_${name}"]`);
return selectors.join();

You can then write the following in your custom CSS:

{{booleanColumnSelectors.value}}{
  transform: rotate(90deg);
}

It's not ideal but let me know if that works! I've included an example you can play around with.
rotated_boolean_columns.json

1 Like