The Table Widget

Displays data in rows and columns with configurable headers, alignment, and separators. Tables are built from TableColumn definitions and a 2D array of row widgets.

Interface

use super::{HAlign, Length, VAlign, Widget};
type TableColumn = {
  header: &Widget,
  width: &Length,
  halign: &HAlign,
  valign: &VAlign
};

type Table = {
  columns: &Array<TableColumn>,
  rows: &Array<Array<Widget>>,
  width: &Length,
  padding: &[f64, null],
  separator: &[f64, null]
};

val table_column: fn(
  ?#width: &Length,
  ?#halign: &HAlign,
  ?#valign: &VAlign,
  header: &Widget
) -> TableColumn;

val table: fn(
  ?#width: &Length,
  ?#padding: &[f64, null],
  ?#separator: &[f64, null],
  columns: &Array<TableColumn>,
  rows: &Array<Array<Widget>>
) -> Widget

table_column Parameters

• #width – Width of this column. Accepts Length values: `Fill, `FillPortion(i64), `Shrink, or `Fixed(f64). Defaults to `Shrink.
• #halign – Horizontal alignment of content within this column: `Left, `Center, or `Right. Defaults to `Left.
• #valign – Vertical alignment of content within this column: `Top, `Center, or `Bottom. Defaults to `Top.
• positional &Widget – The header widget for this column, typically a styled text widget.

table Parameters

• #width – Total width of the table. Accepts Length values. Defaults to `Shrink.
• #padding – Padding in pixels around each cell, 0.0 for none, or null for iced’s default (10 px across, 5 px down).
• #separator – Thickness in pixels of the lines between rows and between columns, 0.0 for none, or null for iced’s default (1 px).
• positional &Array<TableColumn> – Column definitions created with table_column.
• positional &Array<Array<Widget>> – Row data. Each inner array has one widget per column.

Examples

Product Table

use gui::{window, column::column, table::{table, table_column}, text::text};
mod icon;

let cols = &[
    table_column(#width: &`Fixed(200.0), &text(&"Name")),
    table_column(#width: &`Fixed(100.0), #halign: &`Right, &text(&"Price")),
    table_column(#width: &`Fixed(80.0), #halign: &`Center, &text(&"Qty"))
];

let rows = &[
    [text(&"Apples"), text(&"$1.20"), text(&"5")],
    [text(&"Bananas"), text(&"$0.50"), text(&"12")],
    [text(&"Cherries"), text(&"$3.00"), text(&"2")]
];

let layout = column(
    #spacing: &20.0,
    #padding: &`All(30.0),
    #width: &`Fill,
    &[
        text(#size: &24.0, &"Table Demo"),
        table(#padding: &8.0, #separator: &1.0, cols, rows)
    ]
);

[&window(#icon: &icon::icon, #title: &"Table Widget", &layout)]

See Also

• column – for simple vertical layouts
• grid – for uniform grid layouts
• types – for Length, HAlign, VAlign