GroupCollect 1.3.142

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-sticky-headers table
Column headers with links are sortable Name Column headers with links are sortable Company Column headers with links are sortable Fruit Column headers with links are sortable Rank
Leela Planet Express 🍏 2
Fry Planet Express 🍌 4
Bender PlanEx 🍇 3
Mom Mom Corp 🍉 1
Zoidberg Planet Express 🥥 6
Farnsworth Planet Express 🫐 5
Amy Mars University 🥭 7
Hermes Planet Express 🍍 8
Scruffy Planet Express 🥝 9
Zapp DOOP 🍑 10
Kif DOOP 🫒 11
Lrrr Omicron Persei 8 🌶️ 12

Services haven't been added for this supplier yet.

Services haven't been added for this supplier 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={user} label="Name" field={:name}>
  {user.name}
</:col>
<:col :let={user} label="Company" field={:company}>
  {user.company}
</:col>
<:col :let={user} label="Fruit" field={:rank} type="short">
  {user.fruit}
</:col>
<:col :let={user} label="Rank" field={:rank} type="number">
  {user.rank}
</:col>
<:empty
  message="Services haven't been added for this supplier yet."
/>
foot :slot
mobile :slot