Can I display two WTableView objects side by side??
Added by Mark Travis almost 3 years ago
I have a WStandardItemModel that I am using to display some tabular data. I'd like to add a column to display an extra column of derived data, but I don't want to add it to the current WStandardItemModel as that would require some re-architecting in other areas. The idea I came up with would be to display a one-column WStandardItemModel via WTableView to the right of the multi-column WTableView. The rows should line up and there will be a gap between the multi-column table and the single-column table.
I can't get it to work, so I want to make sure it's even possible before I spend any more time.
I created a WContainerWidget to hold the two WTableView objects. I assigned "addStyleClass("d-inline");" to the WContainerWidget.
I set the width of each table to 75%/25% respectively. (ie. table->setWidth(Wt::WLength("75%"));
The attached file is how Google Chrome is processing it. Seems like it should work, but it's still displaying them one over the other instead of side-by-side.
| 2022-07-10_12-09-46.jpg (133 KB) 2022-07-10_12-09-46.jpg | Google Chrome Inspector |
Replies (4)
RE: Can I display two WTableView objects side by side?? - Added by Roel Standaert almost 3 years ago
What d-inline does is add the display: inline; CSS property: https://getbootstrap.com/docs/5.2/utilities/display/#examples
What you probably mean to use is d-flex: https://getbootstrap.com/docs/5.2/utilities/flex/
Here's a little example I cooked up: https://gitlab.com/-/snippets/2368364
RE: Can I display two WTableView objects side by side?? - Added by Mark Travis almost 3 years ago
Perfect, thanks! Exactly what I was looking for. Though now I realize I can't scroll them both together so I'm going to have to suck it up and add the column to the original model.
However, I DO have another place for this concept, which was my next sprint to complete, so this is very much appreciated!
Eventually, I need to create a small playground that is nothing but WTableView with Bootstrap 5 formatting to learn the specifics of how that is handled.
If I don't format it at all, it looks like what is in the documentation. If I add anything such as "table-bordered", everything shifts over to Bootstrap 5 formatting and I have to re-decorate everything.
RE: Can I display two WTableView objects side by side?? - Added by Roel Standaert almost 3 years ago
There is likely some JavaScript hack that can be used to sync the scroll position live, but I couldn't immediately figure it out.
If I don't format it at all, it looks like what is in the documentation. If I add anything such as "table-bordered", everything shifts over to Bootstrap 5 formatting and I have to re-decorate everything.
I'm not sure what you mean by that.
RE: Can I display two WTableView objects side by side?? - Added by Mark Travis almost 3 years ago
Weird, I just tried to duplicate the formatting issue I was seeing by changing the styleclass in the code and then changing the XML in the template and neither one caused the formatting change I saw a couple of days ago. If it happens again, I'll post an example. Otherwise, must have been user error.