PineUiPhoenix.Components.Table (Pine UI v0.2.0)

Copy Markdown View Source

Tabular data.

A port of the Pines table. Pure Tailwind and pure markup — sorting and pagination are the server's job, which is where LiveView wants them anyway. Compose with PineUiPhoenix.Components.Pagination for paging.

<.table rows={@users}>
  <:col :let={user} label="Name"><%= user.name %></:col>
  <:col :let={user} label="Email"><%= user.email %></:col>
</.table>

The :col slot is modelled on Phoenix's own generated table component, so it will feel familiar and :let gives you the row struct directly.

Summary

Layout

table(assigns)

Renders a table.

Layout

table(assigns)

Renders a table.

Examples

<.table rows={@users}>
  <:col :let={u} label="Name"><%= u.name %></:col>
  <:col :let={u} label="Role"><.badge><%= u.role %></.badge></:col>
  <:col :let={u} label="Spend" align="right"><%= u.spend %></:col>
  <:action :let={u}>
    <.link navigate={~p"/users/#{u}"}>Edit</.link>
  </:action>
</.table>

With streams

<.table rows={@streams.users} row_id={fn {id, _} -> id end}>
  <:col :let={{_id, u}} label="Name"><%= u.name %></:col>
</.table>

Attributes

  • rows (:list) (required) - The row data. Each entry is passed to :col via :let.
  • caption (:string) - Accessible description of the table. Defaults to nil.
  • striped (:boolean) - Defaults to false.
  • hoverable (:boolean) - Defaults to true.
  • dense (:boolean) - Tightens the row padding. Defaults to false.
  • row_id (:any) - Function returning a DOM id for a row. Required when using LiveView streams. Defaults to nil.
  • row_click (:any) - Function returning a click handler for a row. Defaults to nil.
  • empty_message (:string) - Defaults to "No records found.".
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • col (required) - Accepts attributes:
    • label (:string)
    • class (:string) - Applied to this column's cells.
    • align (:string) - Must be one of "left", "center", or "right".
  • action - Rendered in a trailing, right-aligned column with no header text.
  • empty - Replaces empty_message when there are no rows.