Project

General

Profile

Created layout aware class derived from WTableView that accepts relative (percentage) column widths

Added by Matt Russell over 7 years ago

I found myself writing layoutSizeChanged on every table I was implementing because WTableView doesn't accept relative column widths (and I can't even think of a situation where I'd want only absolute column widths)

Looking through these forums, I found a lot of postings frustrated with the same thing, so I wrote (attached) a class that implements layout awareness. All you have to do is extend this, and then setColumnWidth() will work with a Wt::WLength of type Wt::WLength::Percentage

Note, often I use these tables with a Wt::Dbo::QueryModel, so I tend to setup the column widths in a member function other than the constructor (::init()).

So, for example,

ReportTableView::ReportTableView(Wt::WContainerWidget* parent)
    : TableView(parent) { }

auto ReportTableView::init() -> void {

    // ...

    // Column widths
    setColumnWidth(kTaskTypeColumn,       Wt::WLength(40, Wt::WLength::Percentage));
    setColumnWidth(kDateCreatedColumn,    Wt::WLength(kDefaultDateTimeWidth, Wt::WLength::Pixel));
    setColumnWidth(kDateScheduledColumn,  Wt::WLength(kDefaultDateTimeWidth, Wt::WLength::Pixel));
    setColumnWidth(kDataCollectedColumn,  Wt::WLength(kDefaultDateTimeWidth, Wt::WLength::Pixel));
    setColumnWidth(kStatusColumn,         Wt::WLength(59.9, Wt::WLength::Percentage));
    setColumnWidth(kActionColumn,         Wt::WLength(91.2, Wt::WLength::Pixel));
}

And make sure init() is called after setModel() is called.

This will create a table widget where 4 of the columns have an absolute width, and 2 of them have a relative width. The percentages should add to ~100, and are interpreted as "percent of non-fixed with in table"

This table also sets a height based on number of rows one wants displayed, and tries to account for the vertical scroll bar - i.e. if a table without a horizontal scroll bar exceeds it's set height, it'll still try to size the columns so that when a vertical scroll bar appears, a horizontal scroll bar doesn't.

If the TableView was implemented as a straight up table tag, everything here would be unnecessary, but it isn't..

Code isn't under any license. Happy to receive feedback. Posting it back to the forum as the forum has helped me out a lot.

TableView.h (1.96 KB) TableView.h TableView header
TableView.cpp (2.33 KB) TableView.cpp TableView Implementation

Replies (3)

RE: Created layout aware class derived from WTableView that accepts relative (percentage) column widths - Added by Velvet Jones about 2 years ago

...and 5 years later you get a response. Thank you! Worked better than mine, swapped it out and it looks great. Had to bring it up to speed for Wt 4.4.0.

RE: Created layout aware class derived from WTableView that accepts relative (percentage) column widths - Added by Aaron Wright 4 months ago

Thanks for the example. I'm always wondering how to get the last column to take up the rest of the space, and this gives a good way to get that done.

RE: Created layout aware class derived from WTableView that accepts relative (percentage) column widths - Added by Mark Travis 4 months ago

Oh, that's what that is! I haven't gotten to the Bootstrap 5 CSS clean-up effort on this project. I was assuming I'd address this then. Thanks Aaron for bubbling it to the top and thanks Matt for the code!

    (1-3/3)