Live Storybook

Table

Table Open in playground
Name Job Favourite Color
1 Cy Ganderton Quality Control Specialist Blue
2 Hart Hagerty Desktop Support Technician Purple
3 Brice Swyre Tax Accountant Red 
<div class="overflow-x-auto">
  <.table id="table-single-table">
    <.thead>
      <.tr>
        <.th>Name</.th>
        <.th>Job</.th>
        <.th>Favourite Color</.th>
      </.tr>
    </.thead>
    <.tbody>
      <!-- row 1 -->
      <.tr>
        <.th>1</.th>
        <.td>Cy Ganderton</.td>
        <.td>Quality Control Specialist</.td>
        <.td>Blue</.td>
      </.tr>
      <!-- row 2 -->
      <.tr>
        <.th>2</.th>
        <.td>Hart Hagerty</.td>
        <.td>Desktop Support Technician</.td>
        <.td>Purple</.td>
      </.tr>
      <!-- row 3 -->
      <.tr>
        <.th>3</.th>
        <.td>Brice Swyre</.td>
        <.td>Tax Accountant</.td>
        <.td>Red</.td>
      </.tr>
    </.tbody>
  </.table>
</div>
Table with column slots Open in playground
Id name Job Favourite Color
1 Cy Ganderton Quality Control Specialist Blue
2 Hart Hagerty Desktop Support Technician Purple
3 Brice Swyre Tax Accountant Red 
<div class="overflow-x-auto">
  <.table id="table-single-table-with-column-slots" rows={[%{favourite_color: "Blue", id: 1, job: "Quality Control Specialist", name: "Cy Ganderton"}, %{favourite_color: "Purple", id: 2, job: "Desktop Support Technician", name: "Hart Hagerty"}, %{favourite_color: "Red", id: 3, job: "Tax Accountant", name: "Brice Swyre"}]}>
    <:col :let={user} label="Id">
      <%= user.id %>
    </:col>
    <:col :let={user} label="name">
      <%= user.name %>
    </:col>
    <:col :let={user} label="Job">
      <%= user.job %>
    </:col>
    <:col :let={user} label="Favourite Color">
      <%= user.favourite_color %>
    </:col>
  </.table>
</div>
Zebra Open in playground
Id name Job Favourite Color
1 Cy Ganderton Quality Control Specialist Blue
2 Hart Hagerty Desktop Support Technician Purple
3 Brice Swyre Tax Accountant Red 
<div class="overflow-x-auto">
  <.table id="table-single-zebra" rows={[%{favourite_color: "Blue", id: 1, job: "Quality Control Specialist", name: "Cy Ganderton"}, %{favourite_color: "Purple", id: 2, job: "Desktop Support Technician", name: "Hart Hagerty"}, %{favourite_color: "Red", id: 3, job: "Tax Accountant", name: "Brice Swyre"}]} zebra>
    <:col :let={user} label="Id">
      <%= user.id %>
    </:col>
    <:col :let={user} label="name">
      <%= user.name %>
    </:col>
    <:col :let={user} label="Job">
      <%= user.job %>
    </:col>
    <:col :let={user} label="Favourite Color">
      <%= user.favourite_color %>
    </:col>
  </.table>
</div>
Table xs Open in playground
Id name Job Favourite Color
1 Cy Ganderton Quality Control Specialist Blue
2 Hart Hagerty Desktop Support Technician Purple
3 Brice Swyre Tax Accountant Red 
<div class="overflow-x-auto">
  <.table id="table-single-table-xs" rows={[%{favourite_color: "Blue", id: 1, job: "Quality Control Specialist", name: "Cy Ganderton"}, %{favourite_color: "Purple", id: 2, job: "Desktop Support Technician", name: "Hart Hagerty"}, %{favourite_color: "Red", id: 3, job: "Tax Accountant", name: "Brice Swyre"}]} size="xs">
    <:col :let={user} label="Id">
      <%= user.id %>
    </:col>
    <:col :let={user} label="name">
      <%= user.name %>
    </:col>
    <:col :let={user} label="Job">
      <%= user.job %>
    </:col>
    <:col :let={user} label="Favourite Color">
      <%= user.favourite_color %>
    </:col>
  </.table>
</div>