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-mobile table
Column headers with links are sortable Name Column headers with links are sortable Company Column headers with links are sortable Rank
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.

Bender

Company

PlanEx

Fry

Company

Planet Express

Leela

Company

Planet Express

Mom

Company

Mom Corp

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>

<:mobile>
  <.stack space="base">
    <.table_card
      :for={{name, company} <- %{"Leela" => "Planet Express", "Fry" => "Planet Express", "Bender" => "PlanEx", "Mom" => "Mom Corp"}}
      title={name}
      id={name <> "-action_menu"}
    >
      <:item label="Company">{company}</:item>
      <:action on_click={%JS{}}>Action 1</:action>
      <:button on_click={%JS{}}>Control</:button>
    </.table_card>
  </.stack>
</:mobile>

<:empty
  message="Services haven't been added for this supplier yet."
/>
foot :slot
mobile :slot 
<: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>

<:mobile>
  <.stack space="base">
    <.table_card
      :for={{name, company} <- %{"Leela" => "Planet Express", "Fry" => "Planet Express", "Bender" => "PlanEx", "Mom" => "Mom Corp"}}
      title={name}
      id={name <> "-action_menu"}
    >
      <:item label="Company">{company}</:item>
      <:action on_click={%JS{}}>Action 1</:action>
      <:button on_click={%JS{}}>Control</:button>
    </.table_card>
  </.stack>
</:mobile>

<:empty
  message="Services haven't been added for this supplier yet."
/>