Oat Data Table Demo
A Wicket DataTable with Oat columns for links, status badges, amounts, dates
and yes/no values, a menu of actions on each row, row selection with bulk actions, and a toolbar.
Invoices
Select rows to mark them as paid or delete them, open a row's "⋯" menu, sort by a
column, or search. Deleting asks first, with an OatConfirmDialog.
Empty Table with Placeholder
If the data provider is empty, the component created by setEmptyState is displayed.
| Number | Total |
|---|---|
No invoices foundTry adjusting your search or creating a new invoice. |
|
How to use
List<IColumn<Invoice, String>> columns = new ArrayList<>();
columns.add(new OatSelectionColumn<>(selected)); // checkboxes
columns.add(OatLinkColumn.toPage(Model.of("Number"), "number", Invoice::number,
InvoicePage.class, invoice -> new PageParameters().add("id", invoice.id())));
columns.add(new OatBadgeColumn<>(Model.of("Status"), "status", Invoice::status,
invoice -> invoice.status() == Status.PAID ? OatVariant.SUCCESS : OatVariant.DEFAULT));
columns.add(new OatNumberColumn<Invoice, String>(Model.of("Total"), "total", Invoice::total)
.setCurrency(Invoice::currency));
columns.add(new OatDateColumn<>(Model.of("Due"), "due", Invoice::due));
OatActionsColumn<Invoice, String> actions = new OatActionsColumn<>();
actions.addAction("Delete", (target, invoice) -> confirm.ask(...)).setVariant(OatVariant.DANGER);
columns.add(actions);
OatDataTable<Invoice, String> table = new OatDataTable<>("table", columns, provider, 10);
table.addBulkAction("Mark as paid", (target, rows) -> { invoices.markPaid(rows); table.clearSelection(target); });
table.setToolbar(id -> new SearchToolbar(id, search));
table.setEmptyState(id -> new OatEmptyState(id, "No invoices found"));