Raxol.UI.Components.Table (Raxol v2.6.1)

Table component for displaying and interacting with tabular data.

Features

Pagination
Sorting
Filtering
Custom column formatting
Row selection
Custom theming and styling (see below)

Public API

Props

:id (required): Unique identifier for the table.
:columns (required): List of column definitions. Each column is a map with:
- :id (atom, required): Key for the column.
- :label (string, required): Header label.
- :width (integer or :auto, optional): Column width in display cells.
- :align (:left | :center | :right, optional): Text alignment.
- :format (function, optional): Custom formatting function for cell values.
- :style (map, optional): Style overrides for all cells in this column.
- :header_style (map, optional): Style overrides for this column's header cell.
:data (required): List of row maps (each map must have keys matching column ids).
:options (map, optional):
- :paginate (boolean): Enable pagination.
- :searchable (boolean): Enable filtering.
- :sortable (boolean): Enable sorting (header shows ↑/↓; sort via update({:sort, col}, …) or header click ids).
- :page_size (integer): Rows per page.
- :border (:grid | :inner | :none): table chrome (default :grid).
  - :grid — outer frame + column + header rules (full box-drawing).
  - :inner — column separators + header mid-rule only (no top/bottom).
  - :none — padded content only; optional header rule via :header_separator.
- :header_separator (boolean): when border: :none, draw a single ─ rule under the header (default true). Ignored for :grid/ :inner (those always draw the header mid-rule).
:style (map, optional): Style overrides for the table box and header (see below).
- :header (map, optional): Style overrides for all header cells.
:theme (map, optional): Theme map for the table. Keys can include:
- :box (map): Style for the outer box.
- :header (map): Style for all header cells.
- :row (map): Style for all rows.
- :selected_row (map): Style for the selected row.

Theming and Style Precedence

Per-column :style and :header_style override theme and table-level styles for their respective cells.
:style prop overrides theme for the box and header.
:theme provides defaults for box, header, row, and selected row.
Hardcoded defaults (e.g., header bold, selected row blue/white) are used if not overridden.

Example: Custom Theming and Styling

columns = [
  %{id: :id, label: "ID", style: %{color: :magenta}, header_style: %{bg: :cyan}},
  %{id: :name, label: "Name"},
  %{id: :age, label: "Age"}
]
data = [%{id: 1, name: "Alice", age: 30}, ...]
theme = %{
  box: %{border_color: :green},
  header: %{underline: true},
  row: %{bg: :yellow},
  selected_row: %{bg: :red, fg: :black}
}
style = %{header: %{italic: true}}

Table.init(%{
  id: :my_table,
  columns: columns,
  data: data,
  theme: theme,
  style: style,
  options: %{paginate: true, page_size: 5}
})

Summary

Functions

handle_event(arg1, state, context)

Handles events for the table component.

init(props)

Initializes the table component with the given props.

paginate_data(data, page, page_size)

Returns a page slice of data.

render(state)

render(state, context)

Renders the table component.

update(arg, state)

Updates the table state based on the given message.

Types

border_mode()

@type border_mode() :: :grid | :inner | :none

column()

@type column() :: %{
  id: atom(),
  label: String.t(),
  width: non_neg_integer() | :auto,
  align: :left | :center | :right,
  format: (term() -> String.t()) | nil
}

options()

@type options() :: %{
  paginate: boolean(),
  searchable: boolean(),
  sortable: boolean(),
  page_size: non_neg_integer(),
  border: border_mode(),
  header_separator: boolean()
}