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-empty-with-warning table
Column headers with links are sortable Name

You must add a location to chat or log a booking with this supplier.

Add location

You must add a location to chat or log a booking with this supplier.

Add location
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={location} label="Name" field={:name}>
  {location.name}
</:col>
<:empty
  message="You must add a location to chat or log a booking with this supplier."
  link_text="Add location"
  link_href="#"
  kind={:warning}
/>
foot :slot
mobile :slot