GroupCollect 1.3.252
- 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-text-ellipsis table
Column headers with links are sortable Name Column headers with links are sortable Company Column headers with links are sortable Rank
Turanga Leela Planet Express Intergalactic Delivery Service 2
Philip J. Fry Planet Express Intergalactic Delivery Service 4
Bender Bending Rodriguez PlanEx 3
Mom Mom Corp Worldwide Industrial Conglomerate 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
kind :atom
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
text_ellipsis :boolean 
<:col :let={user} label="Name" field={:name} text_ellipsis>
  {user.name}
</:col>
<:col :let={user} label="Company" field={:company} text_ellipsis>
  {user.company}
</: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