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	-