Doggo Storybook 0.10.2

Table

Renders a simple table.

Read more Read less

Usage

<.table id="pets" rows={@pets}>
  <:col :let={p} label="name"><%= p.name %></:col>
  <:col :let={p} label="age"><%= p.age %></:col>
</.table>
List of pets filtered by species
nameage
George 8
Mary 5
Attribute Type Documentation Default Value
caption :string

Content for the <caption> element.
class :any

Any additional classes to be added.

 Read more Read less
[]

Variations of the component should be expressed via modifier attributes, and it is preferable to use styles on the parent container to arrange components on the page, but if you have to, you can use this attribute to pass additional utility classes to the component.

The value can be a string or a list of strings.
Required id * :string
rest :global

Any additional HTML attributes.
row_click :any

Sets the phx-click function attribute for each row td. Expects to be a

 Read more Read less

function that receives a row item as an argument. This does not add the phx-click attribute to the action slot.

Example:

row_click={&JS.navigate(~p"/users/#{&1}")}
row_id :any

Overrides the default function that retrieves the row ID from a stream item.

 Read more Read less
row_item :any

This function is called on the row item before it is passed to the :col

 Read more Read less
&Function.identity/1

and :action slots.
Required rows * :list

The list of items to be displayed in rows.
action :slot

The slot for showing user actions in the last table column. These columns do not receive the row_click attribute.

<:action :let={user}>
  <.link navigate={~p"/users/#{user}"}>Show</.link>
</:action>
Show slot attributes Hide slot attributes
label :string

The content for the header column.
col_attrs :list

If set, a <colgroup> element is rendered and the attributes are added to the <col> element of the respective column.
Required col * :slot

For each column to render, add one <:col> element.

<:col :let={pet} label="Name" field={:name} col_style="width: 20%;">
  <%= pet.name %>
</:col>

Any additional assigns will be added as attributes to the <td> elements.
Show slot attributes Hide slot attributes
label :any

The content for the header column.
col_attrs :list

If set, a <colgroup> element is rendered and the attributes are added to the <col> element of the respective column.

 
<:col :let={p} label="name"><%= p.name %></:col>
<:col :let={p} label="age"><%= p.age %></:col>
foot :slot

You can optionally add a foot. The inner block will be rendered inside a tfoot element.

<Flop.Phoenix.table>
  <:foot>
    <tr><td>Total: <span class="total"><%= @total %></span></td></tr>
  </:foot>
</Flop.Phoenix.table>