Tables
The most direct way to organize widgets in a tabular grid is
using WTable. This widget renders as an HTML
<table>
element.
Each table cell is a Container to which
contents can be added. The table will grow as necessary while you
add data to it.
Our first example shows a plain table, with default browser
styling.
If you only need to display a static table
(with a fixed number of rows and columns), then you might just
as well consider using a WTemplate containing the HTML
markup for a table, and providing the contents (widgets or
strings) by substituting placeholders.
In contrast, the WTable
class is suitable when the
table is to be constructed dynamically, based on information
that may be variable in size.
Finally, you may want to consider using a WTableView if you
would like to display large amounts of data (more than could fit
in memory!), or if you would like the user to be able to resort
the data or resize columns.
Top
Bootstrap styling
The bootstrap theme provides optional markup for the
table. These styles are enabled by adding the "table"
style class, and other optional style classes. The other styling
options are enabled by adding one of the following classes:
- table-bordered
- Adds borders
- table-hover
- Enables a row hover effect
- table-sm
- Makes the table more compact
- table-striped
- Adds alternating row colors
#include <Wt/WTable.h>
#include <Wt/WTableCell.h>
#include <Wt/WLineEdit.h>
#include <Wt/WText.h>
#include <Wt/WCheckBox.h>
using namespace Wt;
namespace {
struct Employee {
std::string firstName;
std::string lastName;
double pay;
Employee(const std::string& aFirstName,
const std::string& aLastName,
double aPay)
: firstName(aFirstName),
lastName(aLastName),
pay(aPay) { }
};
Employee employees[] = {
Employee("Mark", "Otto", 100),
Employee("Jacob", "Thornton", 50),
Employee("Larry the Bird", "", 10)
};
void addOptionToggle(WWidget *widget, const char *option,
const char *styleClass, WContainerWidget *parent) {
WCheckBox *checkBox = parent->addNew<WCheckBox>(option);
checkBox->setInline(false);
checkBox->changed().connect([=] {
widget->toggleStyleClass(styleClass, checkBox->isChecked());
});
}
}
auto table = std::make_unique<WTable>();
auto table_ = table.get();
table_->setHeaderCount(1);
table_->elementAt(0, 0)->addNew<WText>("#");
table_->elementAt(0, 1)->addNew<WText>("First Name");
table_->elementAt(0, 2)->addNew<WText>("Last Name");
table_->elementAt(0, 3)->addNew<WText>("Pay");
for (unsigned i = 0; i < 3; ++i) {
Employee& employee = employees[i];
int row = i + 1;
table_->elementAt(row,0)->
addNew<WText>(WString("{1}").arg(row));
table_->elementAt(row,1)->
addNew<WText>(employee.firstName);
table_->elementAt(row,2)->
addNew<WText>(employee.lastName);
table_->elementAt(row,3)->
addNew<WLineEdit>(WString("{1}").arg(employee.pay));
}
table_->addStyleClass("table");
auto resultPtr = std::make_unique<WContainerWidget>();
auto result = resultPtr.get();
result->addWidget(std::move(table));
result->addNew<WText>("Options:");
addOptionToggle(table_, "borders", "table-bordered", result);
addOptionToggle(table_, "hover", "table-hover", result);
addOptionToggle(table_, "small", "table-sm", result);
addOptionToggle(table_, "stripes", "table-striped", result);
Top