Table

Tables are a great way to clearly display a collections of data grouped into columns and rows.
Basic table
Name Title Email
John Smith Engineer john.smith@example.com
Beth Springs Developer beth.springs@example.com
Peter Knowles Programmer Peter.knowles@example.com
Sarah Hill Marketer sarah.hill@example.com
            <.table>
  <.tr>
    <.th>Name</.th>
    <.th>Title</.th>
    <.th>Email</.th>
  </.tr>

  <.tr>
    <.td>
      John Smith
    </.td>
    <.td>Engineer</.td>
    <.td>john.smith@example.com</.td>
  </.tr>

  <.tr>
    <.td>
      Beth Springs
    </.td>
    <.td>Developer</.td>
    <.td>beth.springs@example.com</.td>
  </.tr>

  <.tr>
    <.td>
      Peter Knowles
    </.td>
    <.td>Programmer</.td>
    <.td>Peter.knowles@example.com</.td>
  </.tr>

  <.tr>
    <.td>
      Sarah Hill
    </.td>
    <.td>Marketer</.td>
    <.td>sarah.hill@example.com</.td>
  </.tr>
</.table>

          
Multi-lined table with avatars and badges
Name Title Phone Status
John Smith
john.smith@example.com
Engineer +1 0432 677 943 Active Edit
Beth Springs
beth.springs@example.com
Developer +1 0465 899 443 Pending Edit
Peter Knowles
peter.knowles@example.com
Programmer +1 0472 344 565 Cancelled Edit
Sarah Hill
sarah.hill@example.com
Marketer +1 0429 996 220 Deleted Edit
            <.table>
  <.tr>
    <.th>Name</.th>
    <.th>Title</.th>
    <.th>Phone</.th>
    <.th>Status</.th>
    <.th></.th>
  </.tr>

  <.tr>
    <.td>
      <.user_inner_td
        avatar_assigns={%{src: "https://res.cloudinary.com/wickedsites/image/upload/v1636595188/dummy_data/avatar_2_jhs6ww.png"}}
        label="John Smith"
        sub_label="john.smith@example.com"
      />
    </.td>
    <.td>Engineer</.td>
    <.td class="whitespace-nowrap">+1 0432 677 943</.td>
    <.td>
      <.badge color="success" label="Active" />
    </.td>
    <.td>
      <.a to="/" label="Edit" class="text-primary-600 dark:text-primary-400" />
    </.td>
  </.tr>

  <.tr>
    <.td>
      <.user_inner_td
        avatar_assigns={%{src: "https://res.cloudinary.com/wickedsites/image/upload/v1636595188/dummy_data/avatar_1_lc8plf.png"}}
        label="Beth Springs"
        sub_label="beth.springs@example.com"
      />
    </.td>
    <.td>Developer</.td>
    <.td class="whitespace-nowrap">+1 0465 899 443</.td>
    <.td>
      <.badge color="warning" label="Pending" />
    </.td>
    <.td>
      <.a to="/" label="Edit" class="text-primary-600 dark:text-primary-400" />
    </.td>
  </.tr>

  <.tr>
    <.td>
      <.user_inner_td
        avatar_assigns={%{src: "https://res.cloudinary.com/wickedsites/image/upload/v1636595189/dummy_data/avatar_14_rkiyfa.png"}}
        label="Peter Knowles"
        sub_label="peter.knowles@example.com"
      />
    </.td>
    <.td>Programmer</.td>
    <.td class="whitespace-nowrap">+1 0472 344 565</.td>
    <.td>
      <.badge color="gray" label="Cancelled" />
    </.td>
    <.td>
      <.a to="/" label="Edit" class="text-primary-600 dark:text-primary-400" />
    </.td>
  </.tr>

  <.tr>
    <.td>
      <.user_inner_td
        avatar_assigns={%{src: "https://res.cloudinary.com/wickedsites/image/upload/v1604268092/unnamed_sagz0l.jpg"}}
        label="Sarah Hill"
        sub_label="sarah.hill@example.com"
      />
    </.td>
    <.td>Marketer</.td>
    <.td class="whitespace-nowrap">+1 0429 996 220</.td>
    <.td>
      <.badge color="danger" label="Deleted" />
    </.td>

    <.td>
      <.a to="/" label="Edit" class="text-primary-600 dark:text-primary-400" />
    </.td>
  </.tr>
</.table>

          
Properties

Defaults are indicated in bold.

Name Type Options
avatar_assigns :map same props as avatar
inner_block :slot -
class :string -