Table Vertical Column Headings

💬 Queries and Resources
, ,
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