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-with-edit-actions table
Column headers with links are sortable Name Column headers with links are sortable Company Column headers with links are sortable Rank
Column heading unavailable
Leela Planet Express 2
Fry Planet Express 4
Bender PlanEx 3
Mom Mom Corp 1

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="Rank" field={:rank} type="number">
  {user.rank}
</: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