howdy_ui - v1.0.0

howdy/ui/data_table

Data tables: rows of records with sortable columns and selectable rows.

let columns = [
  data_table.column("id", "Invoice", fn(invoice) { text(invoice.id) }),
  data_table.column("customer", "Customer", fn(invoice) { text(invoice.customer) })
    |> data_table.sortable(fn(a, b) { string.compare(a.customer, b.customer) }),
  data_table.column("amount", "Amount", fn(invoice) { text(money(invoice.amount)) })
    |> data_table.sortable(fn(a, b) { int.compare(a.amount, b.amount) })
    |> data_table.numeric,
]

data_table.new(columns, invoices)
|> data_table.sort(model.sort, by: data_table.Events(SortBy))
|> data_table.selectable(
  key: fn(invoice) { invoice.id },
  selected: model.selected,
  toggle: fn(id) { [event.on_check(fn(_) { Toggle(id) })] },
  toggle_all: [event.on_check(ToggleAll)],
)
|> data_table.empty([text("No invoices yet.")])
|> data_table.view

Sorting, selection and paging live on the server: the table shows the rows it is given, sorted by the current Sort with the column’s own comparison. A header click asks for the next sort, through a link on a page or a message in a live view. Put a search box above the table and howdy/ui/pagination below it to filter and page the rows you pass in.

Types

Column

opaque </> 
pub opaque type Column(row, msg)

DataTable

opaque </> 
pub opaque type DataTable(row, msg)

Direction

</> 
pub type Direction {
  Ascending
  Descending
}

Constructors 

  • Ascending
  • Descending

Sort

</>

Which column the rows are sorted by, and which way.

pub type Sort {
  Sort(column: String, direction: Direction)
}

Constructors

SortBy

</>

What a sortable header does when clicked: follow a link, or send a message. Each is given the sort to ask for next.

pub type SortBy(msg) {
  Links(fn(Sort) -> String)
  Events(fn(Sort) -> msg)
}

Constructors 

  • Links(fn(Sort) -> String)
  • Events(fn(Sort) -> msg)

Values

caption

</> 
pub fn caption(
  table: DataTable(row, msg),
  children: List(element.Element(msg)),
) -> DataTable(row, msg)

A caption under the table, which also names it for screen readers.

caption_class

</> 
pub fn caption_class() -> css.Class

cell_class

</> 
pub fn cell_class() -> css.Class

check_cell_class

</> 
pub fn check_cell_class() -> css.Class

checkbox_class

</> 
pub fn checkbox_class() -> css.Class

classes

</> 
pub fn classes() -> List(css.Class)

Every class this module uses, for howdy/ui/export.

column

</> 
pub fn column(
  key: String,
  header: String,
  cell: fn(row) -> element.Element(msg),
) -> Column(row, msg)

A column. key names it in a Sort.

columns_menu

</> 
pub fn columns_menu(
  table: DataTable(row, msg),
  id id: String,
  label label: String,
  toggle toggle: fn(String, Bool) -> List(
    attribute.Attribute(msg),
  ),
) -> element.Element(msg)

A “Columns” button with a menu that turns each column on or off. id names the menu; toggle gives the attributes of a column’s menu item, such as a click handler, given its key and whether it is shown now. Keep the hidden keys in your model and pass them to hide.

empty

</> 
pub fn empty(
  table: DataTable(row, msg),
  children: List(element.Element(msg)),
) -> DataTable(row, msg)

What to show when there are no rows, instead of the words’ no_results.

empty_class

</> 
pub fn empty_class() -> css.Class

head_class

</> 
pub fn head_class() -> css.Class

hide

</> 
pub fn hide(
  table: DataTable(row, msg),
  keys: List(String),
) -> DataTable(row, msg)

Leave out the columns with these keys, such as those a person has turned off with columns_menu.

indicator_class

</> 
pub fn indicator_class() -> css.Class

new

</> 
pub fn new(
  columns: List(Column(row, msg)),
  rows: List(row),
) -> DataTable(row, msg)

numeric

</> 
pub fn numeric(column: Column(row, msg)) -> Column(row, msg)

Align the column to the end, for numbers.

row_class

</> 
pub fn row_class() -> css.Class

scroll_class

</> 
pub fn scroll_class() -> css.Class

selectable

</> 
pub fn selectable(
  table: DataTable(row, msg),
  key key: fn(row) -> String,
  selected selected: List(String),
  toggle toggle: fn(String) -> List(attribute.Attribute(msg)),
  toggle_all toggle_all: List(attribute.Attribute(msg)),
) -> DataTable(row, msg)

Add a checkbox to each row and one to the header for all rows. key identifies a row; rows whose key is in selected are checked. toggle gives the attributes of a row’s checkbox, such as a check handler, and toggle_all those of the header’s.

sort

</> 
pub fn sort(
  table: DataTable(row, msg),
  sort: option.Option(Sort),
  by by: SortBy(msg),
) -> DataTable(row, msg)

Sort the rows by sort, and make the headers of sortable columns ask for a new sort through by.

sort_class

</> 
pub fn sort_class() -> css.Class

sortable

</> 
pub fn sortable(
  column: Column(row, msg),
  compare: fn(row, row) -> order.Order,
) -> Column(row, msg)

Let the column be sorted, comparing rows with compare.

sorted_rows

</> 
pub fn sorted_rows(table: DataTable(row, msg)) -> List(row)

The rows as table shows them: sorted by its current sort.

table_class

</> 
pub fn table_class() -> css.Class

view

</> 
pub fn view(table: DataTable(row, msg)) -> element.Element(msg)

words

</> 
pub fn words(
  table: DataTable(row, msg),
  words: words.Words,
) -> DataTable(row, msg)

Speak another language: the empty message and the selection checkboxes’ labels. English by default.

✨ Search Document