AvenUI.Components.Table (AvenUI v1.0.0)

Copy Markdown View Source

Data table component with sortable columns, striping, and LiveView pagination.

Designed for high-performance rendering — uses stream and stream_insert compatible row slots. Columns are declared with named slots; sort state is managed by the parent LiveView.

Examples

<%# Basic usage %>
<.table rows={@deployments}>
  <:col :let={row} label="Commit">
    <code class="text-xs font-mono"><%= row.sha %></code>
  </:col>
  <:col :let={row} label="Branch"><%= row.branch %></:col>
  <:col :let={row} label="Status">
    <.badge variant={status_variant(row.status)}><%= row.status %></.badge>
  </:col>
  <:action :let={row}>
    <.button variant="ghost" size="xs" phx-click="restart" phx-value-id={row.id}>
      Restart
    </.button>
  </:action>
</.table>

<%# With sorting — pass sort_field and sort_dir to enable sort headers %>
<.table rows={@users} sort_field={@sort_field} sort_dir={@sort_dir}>
  <:col :let={user} label="Name" field="name" sortable>
    <div class="flex items-center gap-2">
      <.avatar initials={initials(user.name)} size="sm" />
      <%= user.name %>
    </div>
  </:col>
  <:col :let={user} label="Joined" field="inserted_at" sortable>
    <%= Calendar.strftime(user.inserted_at, "%b %d, %Y") %>
  </:col>
</.table>

<%# With LiveView streams (phx-update="stream") %>
<.table id="deployments-table" rows={@streams.deployments} stream>
  <:col :let={{id, row}} label="ID"><%= id %></:col>
  <:col :let={{_id, row}} label="Branch"><%= row.branch %></:col>
</.table>

Summary

Functions

pagination(assigns)

Pagination component — pairs with the table for server-side paging.

table(assigns)

Renders a data table with sortable columns and optional actions.

Functions

pagination(assigns)

Pagination component — pairs with the table for server-side paging.

Example

<.pagination
  page={@page}
  total_pages={@total_pages}
  phx-click="paginate"
/>

Attributes

  • page (:integer) (required)
  • total_pages (:integer) (required)
  • class (:string) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["phx-click", "phx-target"].

table(assigns)

Renders a data table with sortable columns and optional actions.

Attributes

  • id (:string) - Defaults to nil.
  • rows (:list) (required)
  • stream (:boolean) - Enable phx-update='stream' on tbody. Defaults to false.
  • sort_field (:string) - Currently sorted field name. Defaults to nil.
  • sort_dir (:string) - Defaults to "asc". Must be one of "asc", or "desc".
  • striped (:boolean) - Defaults to false.
  • class (:string) - Defaults to nil.

Slots

  • col (required) - Accepts attributes:
    • label (:string)
    • field (:string) - Field name for sorting.
    • sortable (:boolean)
    • class (:string)
    • align (:string) - Must be one of "left", "center", or "right".
  • action - Action cell rendered at the far right of each row.
  • empty - Content shown when rows is empty.