Doggo Storybook 0.9.0

Storybook
- 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>

Basic Open in playground

name	age
George	8
Mary	5

<.table id="table-single-basic" rows={[%{id: 1, name: "George", age: 8}, %{id: 2, name: "Mary", age: 5}]}>
  <:col :let={p} label="name"><%= p.name %></:col>
  <:col :let={p} label="age"><%= p.age %></:col>
</.table>

Actions Open in playground

name	age
George	8	Edit
Mary	5	Edit

<.table id="table-single-actions" rows={[%{id: 1, name: "George", age: 8}, %{id: 2, name: "Mary", age: 5}]}>
  <:col :let={p} label="name"><%= p.name %></:col>
  <:col :let={p} label="age"><%= p.age %></:col>
  <:action>
    <.link>Edit</.link>
  </:action>
</.table>

Caption Open in playground

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

<.table id="table-single-caption" rows={[%{id: 1, name: "George", age: 8}, %{id: 2, name: "Mary", age: 5}]} caption="List of pets filtered by species">
  <:col :let={p} label="name"><%= p.name %></:col>
  <:col :let={p} label="age"><%= p.age %></:col>
</.table>

Foot Open in playground

name	age
George	8
Mary	5
Avg age	7.5

<.table id="table-single-foot" rows={[%{id: 1, name: "George", age: 8}, %{id: 2, name: "Mary", age: 5}]}>
  <: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>
</.table>