Renders a table with column and action slots. Works with lists and streams.

<.table id="users" rows={@users} row_click={&JS.navigate(~p"/users/#{&1}")}>
  <:col :let={user} label="Name">{user.name}</:col>
  <:col :let={user} label="Email" sort="email" sorted={@sort}>{user.email}</:col>
  <:action :let={user}>
    <.button size="sm" variant="ghost" navigate={~p"/users/#{user}"}>Edit</.button>
  </:action>
</.table>

Sortable columns: give sort a field name and sorted the current {field, :asc | :desc}; the header renders a button that pushes on_sort with phx-value-field and phx-value-dir, and the <th> carries aria-sort.

Selectable rows: selectable adds a checkbox column. Each checkbox is named <id>[] (override with select_name) with the row's id as value (override with row_value), so a surrounding form receives the selection as a list. Pass selected to render the current selection from the server; on_select runs when it changes, with phx-value-id + phx-value-selected for one row, phx-value-ids (comma separated) for a Shift+click range, or phx-value-all for the header checkbox:

<.table id="users" rows={@users} selectable selected={@selected} on_select={JS.push("select")}>

def handle_event("select", %{"all" => _, "selected" => on}, socket) ...
def handle_event("select", %{"id" => id, "selected" => on}, socket) ...

Keyboard: the checkboxes are the tab stops; Space toggles one, and the header checkbox toggles every row.

Attributes

• id (:string) (required)
• rows (:list) (required)
• row_id (:any) - the function for generating the row id. Defaults to nil.
• row_click (:any) - the function for handling phx-click on each row. Defaults to nil.
• row_item (:any) - the function for mapping each row before calling the :col and :action slots. Defaults to &Function.identity/1.
• caption (:string) - Defaults to nil.
• striped (:boolean) - Defaults to false.
• hover (:boolean) - Defaults to true.
• sticky (:boolean) - sticky header inside a scrolling wrapper. Defaults to false.
• density (:string) - Defaults to "default". Must be one of "default", or "compact".
• empty (:string) - defaults to "Nothing to show yet.". Defaults to nil.
• on_sort (Phoenix.LiveView.JS) - Defaults to nil.

• sorted (:any) - {field, :asc | :desc}. Defaults to nil.

• selectable (:boolean) - Defaults to false.
• selected (:list) - values of the selected rows. Defaults to [].
• select_name (:string) - checkbox name; defaults to "#{id}[]". Defaults to nil.
• row_value (:any) - function returning a row's checkbox value; defaults to the item's :id. Defaults to nil.
• on_select (Phoenix.LiveView.JS) - Defaults to nil.
• class (:any) - Defaults to nil.
• Global attributes are accepted.

Slots

• col (required) - Accepts attributes:
  • label (:string)

  • align (:string) - start | center | end.

  • numeric (:boolean)
  • sort (:string) - field name that makes this column sortable.
• action - the slot for showing user actions in the last table column.