Skip to content

BoardLayout

A flexible board that arranges components into rows, each row containing any number of items with configurable widths. Useful for dashboards.

BoardLayout.builder()
.rows(List.of(
BoardLayoutRow.builder()
.items(List.of(
BoardLayoutItem.builder().content(kpi1).build(),
BoardLayoutItem.builder().content(kpi2).build(),
BoardLayoutItem.builder().content(kpi3).build()
))
.build(),
BoardLayoutRow.builder()
.items(List.of(
BoardLayoutItem.builder().content(chart).colspan(2).build(),
BoardLayoutItem.builder().content(table).build()
))
.build()
))
.build()
PropertyTypeDefaultDescription
idString—Optional component ID
rowsList<BoardLayoutRow>—Rows of the board
styleString—Inline CSS
cssClassesString—CSS class names
PropertyTypeDefaultDescription
itemsList<BoardLayoutItem>—Items in this row
PropertyTypeDefaultDescription
contentComponent—Component to place in this cell
colspanint1Number of columns this item spans
BoardLayout.builder()
.rows(List.of(
// KPI row: three tiles side by side
BoardLayoutRow.builder()
.items(List.of(
BoardLayoutItem.builder().content(new KPI("Revenue", "€ 42,000")).build(),
BoardLayoutItem.builder().content(new KPI("Orders", "1,234")).build(),
BoardLayoutItem.builder().content(new KPI("Customers", "567")).build()
))
.build(),
// Chart + list row
BoardLayoutRow.builder()
.items(List.of(
BoardLayoutItem.builder().content(revenueChart).colspan(2).build(),
BoardLayoutItem.builder().content(recentOrdersGrid).build()
))
.build()
))
.build()