How do you adjust the column width on a TableView?
Added by Keiko Ishioka about 7 years ago
I'm able to specify the initial column widths by calling setColumnWidth() on each column, however, I'm not sure how to let the user adjust the column width size on the displayed table. Setting setColumnResizeEnabled() to true doesn't seem to help and I've looked at some of the other options, but nothing seems to work. Please advise. Thanks!
Replies (8)
RE: How do you adjust the column width on a TableView? - Added by Mark Petryk about 7 years ago
calling setColumnResizeEnabled(true) should work. Can you paste some of your relevant code and perhaps an image of your header? The grip handles on the head should be active.
RE: How do you adjust the column width on a TableView? - Added by Keiko Ishioka about 7 years ago
Thanks for the reply! Here's some code snippets:
metricTable = new MetricsTable("MetricsTable", MetricsContainer);
metricTable~~GetTableView()~~>setId("MetricsTable");
//Add column names
std::vectorstd::string ColumnNames;
ColumnNames.push_back("Date Created");
ColumnNames.push_back("User ID");
ColumnNames.push_back("Section ID");
ColumnNames.push_back("Action Name");
ColumnNames.push_back("PCAP Name");
ColumnNames.push_back("Server");
ColumnNames.push_back("Codec");
metricTable->SetHeaderColumnNames(ColumnNames);
// Note that when the column widths aren't set here, the table may have truncated data and still no way to expand the column size
metricTable~~GetTableView()>setColumnWidth(0, 250);GetTableView()
metricTable>setColumnWidth(1, 250);GetTableView()
metricTable>setColumnWidth(2, 250);GetTableView()
metricTable>setColumnWidth(3, 250);GetTableView()
metricTable>setColumnWidth(4, 250);GetTableView()
metricTable>setColumnWidth(5, 250);GetTableView()~~>setColumnWidth(6, 250);
metricTable
metricTable~~GetTableView()~~>setColumnResizeEnabled(true);
MetricsTable is defined as following:
MetricsTable::MetricsTable(const std::string& mime, Wt::WContainerWidget* parent) : Table(mime, parent)
{
LoadErrorStatus=false;
}
Table class has 2 members:
TableView* tableView_;
TableModel* tableModel_;
Table Definition:
Table::Table(const std::string& mime, Wt::WContainerWidget* parent) :
tableView_(new TableView(this, parent)),
tableModel_(new TableModel(this, mime, parent))
{
tableView*->SetTableModel(tableModel*);
}
Note that the sort buttons on the headers are working, but I can't seem to modify the column size. Also, note that when I take out the column size settings in my code, I end up with a table that doesn't fit the whole page (header2.png - note the pink is the background it's supposed to fill in), even though I have width set to 100% in CSS file:
#MetricsTable
{
width:100%;
height:50vh;
border: 1px solid #DDD;
background-color: pink;
color: red;
border-color: orange;
overflow: auto;
z-index: --1;
margin-left:auto;
margin-right:auto;
}
header1.PNG (3.83 KB) header1.PNG | Column sizes set | ||
header2.PNG (3.99 KB) header2.PNG |
RE: How do you adjust the column width on a TableView? - Added by Mark Petryk about 7 years ago
And you're saying those handles in between the columns you cannot grab? You should be able to point to right around where the two little sorting arrows are and grab a hold of that column and widen it...
RE: How do you adjust the column width on a TableView? - Added by Keiko Ishioka about 7 years ago
That's correct, I cannot grab the handles in between the columns to adjust the size, however, I can click on those sorting arrows to sort the columns. That's why I'm puzzled..
RE: How do you adjust the column width on a TableView? - Added by Mark Petryk about 7 years ago
I cannot see what the issue might be. I would recommend building a simple test case, outside of your projects, stand-alone, to test the theory of columnResizeEnabled functionality and then inspect the result to see if you can spot where the differences are... that's the best I can come up with.
RE: How do you adjust the column width on a TableView? - Added by Keiko Ishioka about 7 years ago
Okay thanks. Also, do you have any suggestions on how to expand the table size to the width of the container without using setColumnWidth()?
RE: How do you adjust the column width on a TableView? - Added by Mark Petryk about 7 years ago
That can get more complicated.
In order to make a table-view 'fit' within a container, you have to add a layout to your container. Therefore, your codes would look something like:
(i'm assuming Wt-3)
auto cw = new Wt::WContainerWidget();
auto lw = new Wt::WVBoxLayout();
cw-> setLayout( lw );
lw-> addWidget( tableView_ );
Now, the trick to getting this to work is ALL of the container widgets, right up to the root container widget, is required to have a layout set up like this. I have found this requirement to be extremely difficult, as I was seldom using layouts in my highly nested projects.
My recommendation would be to set up a small test project, and then connect the table to the container with a layout, and see how that affects your sizing.
If you get it right, you can resize your browser to your hearts content and the table will always remain in view with functional scroll bars and everything.
RE: How do you adjust the column width on a TableView? - Added by Keiko Ishioka about 7 years ago
Great, thanks for that tip!! I was missing the layout part and wasn't aware of that requirement either. Thanks for your help!!