Doggo Storybook 0.9.0

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>
nameage
George 8
Mary 5
Avg age 7.5
Attribute Type Documentation Default Value
caption :string Content for the `<caption>` element.
class :any Any additional classes to be added. 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 function that receives a row item as an argument. This does not add the `phx-click` attribute to the `action` slot. Example: ```elixir row_click={&JS.navigate(~p"/users/#{&1}")} ```
row_id :any Overrides the default function that retrieves the row ID from a stream item.
row_item :any This function is called on the row item before it is passed to the :col and :action slots. &Function.identity/1
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. ```elixir <:action :let={user}> <.link navigate={~p"/users/#{user}"}>Show</.link> </:action> ```
Required col * :slot For each column to render, add one `<:col>` element. ```elixir <: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. 
<:col :let={p} label="name"><%= p.name %></:col>
<:col :let={p} label="age"><%= p.age %></:col>
<:foot>
  <tr>
    <td>Avg age</td>
    <td>7.5</td>
  </tr>
</:foot>
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> 
<:col :let={p} label="name"><%= p.name %></:col>
<:col :let={p} label="age"><%= p.age %></:col>
<:foot>
  <tr>
    <td>Avg age</td>
    <td>7.5</td>
  </tr>
</:foot>