Doggo Storybook 0.15.1

Introduction
Buttons
Data
- Accordion
- Card
- Date
- Datetime
- Fallback
- Property List
- Table
- Tabs
- Tag
- Time
- Tree
Feedback
Form
Layout
Media
Menu
Miscellaneous
Navigation

Table

Renders a simple table.

Usage

<.table id="pets" rows={@pets}>
  <:col :let={p} label="name"><%= p.name %></:col>
  <:col :let={p} label="age"><%= p.age %></:col>
</.table>

Row actions

row_click sets phx-click on each cell, which reaches pointer users only. Where you use it, repeat the action as a link or button inside the row, so that it can also be reached by keyboard.

<.table id="pets" rows={@pets} row_click={&JS.navigate(~p"/pets/#{&1}")}>
  <:col :let={p} label="name">
    <.link navigate={~p"/pets/#{p}"}><%= p.name %></.link>
  </:col>
</.table>

List of pets filtered by species
name	age
George	8
Mary	5

Attribute	Type	Documentation	Default
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. This is a pointer convenience only. A `td` is not focusable, has no interactive role and takes no key events, so the action is unavailable to keyboard and screen reader users. Every action reachable through `row_click` must therefore also be reachable from a link or button inside the row, in a `:col` or `:action` slot. Example: <.table id="users" rows={@users} row_click={&JS.navigate(~p"/users/#{&1}")}> <:col :let={user} label="Name"> <.link navigate={~p"/users/#{user}"}>{user.name}</.link> </:col> </.table>
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>