Table Header Height and Text Wrapping

Community Show & Tell
1

Hey all!

Would love to have a height adjustment and text-wrap on table headers built into the table component. For now, I have found a decent workaround based on CSS property selectors.

div[data-row-index="-1"]{
  height:80px !important;
}

span[data-testid*="HeaderCellContents"]{
  text-wrap: wrap !important;
}

I switched from using a class-based selector, as shown below since it breaks every time the HTML structure of the table changes. Hopefully, this workaround is a bit more permanent.

div.ElqjHy.s9Atii {
height:80px !important;
}


span.coAUOe.XtItHx {
text-wrap: wrap !important;
}
1 Like
2

Super helpful, thanks for sharing @BSmith!

1 Like
3

Hello @BSmith!

Thank you for sharing this work around, I can definitely make a feature request for adding these two styling options for table column headers.

Will keep you posted on any updates from our team on this feature request :saluting_face:

1 Like