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-row-click table
NameDescription Actions Actions
Icon It's an icon!
Button I like BUTTONS!
Badge Wear it with honour, or don't.
Calendar Don't be late.

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={component} label="Name" field={:name} navigate={& &1.path}>
  {component.name}
</:col>
<:col :let={component} label="Description" field={:company}>
  {component.description}
</:col>
<:action>
  <.button ghost>Control</.button>
</:action>
<:action>
  <DesignSystem.action_menu id="table-row-click" label="Actions">
    <:item on_click={JS.navigate("/welcome")}>Welcome</:item>
  </DesignSystem.action_menu>
</:action>
<:empty
  message="Services haven't been added for this supplier yet."
/>
foot :slot
mobile :slot