GroupCollect 1.3.215
- 1.1.0

Table

Renders a table.

Read more Read less

This component is a pre-styled wrapper around Flop.Phoenix.table/1. A subset of attributes are available and others have been renamed to follow our terminology.

Examples

<.table id="users" rows={@users}>
  <:col :let={user} label="id"><%= user.id %></:col>
  <:col :let={user} label="username"><%= user.username %></:col>
</.table>

Sorting

# To make a row sortable, include the field attribute on the col slot:

<.table id="users" rows={@users}>
  <:col :let={user} field={:name}>
    <%= user.name %>
  </:col>
</.table>

You must also include a handle_params callback in your LiveView.

table-single-tabular-figures table
Column headers with links are sortable Name Column headers with links are sortable Amount Column headers with links are sortable Expiry date Column headers with links are sortable Time
Leela $3,670 01/31/2026 9:00 AM
Fry $50,560 04/05/2026 10:30 AM
Bender $0 12/03/2026 12:45 PM
Mom $3,400 12/04/2026 4:05 PM

Bookings haven't been added yet.

Bookings haven't been added yet.

Attribute Type Documentation Default Value
Required id * :string
meta %Meta{}
Required path * :any
on_sort %JS{} %Phoenix.LiveView.JS{ops: []}
event :string
target :string
caption :string
Required rows * :list
row_id :any
row_item :any &Function.identity/1
action :any []
show_header :boolean true
sticky :boolean false
Required empty * :slot
Show slot attributes Hide slot attributes
Required message * :string
link_text :string
link_href :string
Required col * :slot
Show slot attributes Hide slot attributes
label :string
field :atom
show :boolean
directions :any
card_slot :string
navigate {:fun, 1}

A function that returns a path. It is given the current row as context.

eg: navigate={& ~p"/path/to/#{&1.name}"}

The cell will be wrapped like so:

<.a navigate="/path" unstyled>{col.content}</.a>

Additionally, a JS hook will kick in that will make the entire row clickable.
type :string 
<:col :let={booking} label="Name" field={:name}>
  {booking.name}
</:col>
<:col :let={booking} label="Amount" field={:amount} type="number">
  {booking.amount}
</:col>
<:col :let={booking} label="Expiry date" field={:expiry_date} type="number">
  {booking.expiry_date}
</:col>
<:col :let={booking} label="Time" field={:time} type="number">
  {booking.time}
</:col>
<:empty
  message="Bookings haven't been added yet."
/>
foot :slot
mobile :slot