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-many-columns table
Column headers with links are sortable Name Column headers with links are sortable ID Column headers with links are sortable Company Column headers with links are sortable Rank Column headers with links are sortable On Call Column headers with links are sortable Vehicle Column headers with links are sortable Uniform
Column heading unavailable
Leela 0 Planet Express 2 false Old Bessie md
Fry 1 Planet Express 4 true none lg
Bender 2 PlanEx 3 false none
Mom 3 Mom Corp 1 true any sm

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="ID" field={:id} type="number">
  {user.id}
</:col>
<:col :let={user} label="Company" field={:company}>
  {user.company}
</:col>
<:col :let={user} label="Rank" field={:rank} type="number">
  {user.rank}
</:col>
<:col :let={user} label="On Call" field={:on_call}>
  {user.on_call}
</:col>
<:col :let={user} label="Vehicle" field={:vehicle}>
  {user.vehicle}
</:col>
<:col :let={user} label="Uniform" field={:uniform_size}>
  {user.uniform_size}
</:col>
<:action :let={user}>
  <.action_menu id={"user-action-menu-#{user.id}"} label="actions">
    <:item icon="calendar-blank" on_click={Phoenix.LiveView.JS.patch("/edit/#{user.id}")}>Edit</:item>
    <:item icon="calendar-blank" on_click={Phoenix.LiveView.JS.patch("/show/#{user.id}")}>Show</:item>
  </.action_menu>
</:action>
<:empty
  message="Services haven't been added for this supplier yet."
/>
foot :slot
mobile :slot