Table column/header names, text wrapping long header names

[grodger]

Hi all. I was wondering if anyone has a solution to wrapping text in the table headers (the table component). My column values are quite a bit narrower than the header names, leading to a lot of wasted space and requiring horizontal scrolling to view all the columns and values. Ideally, the long column headers would be word wrapped; they are long as they need to be descriptive so I cannot really shorten them. Thanks for your help in advance!

[lovasoa]

Unfortunately, there's no built-in attribute in SQLPage's table component for wrapping headers yet. Definitely worth keeping that feature request open though - it's a common need!

How to do it using custom css

The good news is you can totally fix this with custom CSS right now. Just add this to your shell component:

SELECT 
    'shell' AS component,
    'Your Page Title' AS title,
    '/assets/table-headers.css' AS css;

Then create /assets/table-headers.css with:

th {
    white-space: normal;
    word-wrap: break-word;
    max-width: 150px;
    vertical-align: top;
    line-height: 1.3;
}

This will wrap those long descriptive headers nicely while keeping your column data narrow - should solve both the wasted space and horizontal scrolling issues you're dealing with. You can adjust the max-width value to whatever works best for your specific use case.