Tables

Data table with column definitions, per-column cell slot overrides, row actions, and striped / bordered / checkbox variants.

Preview

Default

Name Title Email Role Actions
Lindsay Walton Front-end Developer lindsay.walton@example.com Member Edit, Lindsay Walton
Courtney Henry Designer courtney.henry@example.com Admin Edit, Courtney Henry
Tom Cook Director of Product tom.cook@example.com Member Edit, Tom Cook

Striped, with custom name cell

Name Title Role
Whitney Francis Copywriter Admin
Leonard Krasner Senior Designer Owner
Floyd Miles Principal Designer Member

Bordered

Plan Memory Price
Hobby 4 GB RAM $40/mo
Startup 8 GB RAM $80/mo
Business 16 GB RAM $160/mo

With checkboxes

Name Title Email
Lindsay Walton Front-end Developer lindsay.walton@example.com
Courtney Henry Designer courtney.henry@example.com

React preview

LiveView (HEEx) 

alias DesignSystem.UI.Tables

<Tables.table
  variant="striped"
  columns={[
    %{key: :name, label: "Name"},
    %{key: :title, label: "Title"},
    %{key: :email, label: "Email"},
    %{key: :role, label: "Role", align: :right}
  ]}
  rows={@users}
>
  <:cell :let={user} col={:name}>
    <span class="font-semibold text-indigo-600">{user.name}</span>
  </:cell>
  <:actions :let={user}>
    <.link href={~p"/users/#{user.id}/edit"} class="text-indigo-600">
      Edit<span class="sr-only">, {user.name}</span>
    </.link>
  </:actions>
</Tables.table>

React (JSX) 

import { Table } from "../ui/index.mjs"

<Table
  variant="striped"
  columns={[
    { key: "name", label: "Name" },
    { key: "title", label: "Title" },
    { key: "email", label: "Email" },
    { key: "role", label: "Role", align: "right" },
  ]}
  rows={users}
  rowKey="email"
  cells={{
    name: (u) => <span className="font-semibold text-indigo-600">{u.name}</span>,
  }}
  actions={(u) => (
    <a href={`/users/${u.id}/edit`} className="text-indigo-600">
      Edit<span className="sr-only">, {u.name}</span>
    </a>
  )}
/>