Corex · Elixir Phoenix Framework UI Library

Minimal

ID	Name	Role	Email
1	Alice	Admin	alice@example.com
2	Bob	User	bob@example.com
3	Charlie	Editor	charlie@example.com

    <.data_table id="basic-table" class="data-table" rows={@list_rows}>
  <:col :let={row} label="ID">{row.id}</:col>
  <:col :let={row} label="Name">{row.name}</:col>
  <:col :let={row} label="Role">{row.role}</:col>
  <:col :let={row} label="Email">{row.email}</:col>
</.data_table>

With action

ID	Name	Role	Email
1	Alice	Admin	alice@example.com
2	Bob	User	bob@example.com
3	Charlie	Editor	charlie@example.com

    <.data_table id="basic-table" class="data-table" rows={@list_rows}>
  <:col :let={row} label="ID">{row.id}</:col>
  <:col :let={row} label="Name">{row.name}</:col>
  <:col :let={row} label="Role">{row.role}</:col>
  <:col :let={row} label="Email">{row.email}</:col>
  <:action :let={row}>
    <.action phx-click="edit" phx-value-id={row.id}>Edit</.action>
    <.action phx-click="delete" phx-value-id={row.id}>Delete</.action>
  </:action>
</.data_table>

Empty

ID	Name
No rows

    <.data_table
  class="data-table max-w-none"
  rows={[]}
>
  <:col :let={row} label="ID">{row.id}</:col>
  <:col :let={row} label="Name">{row.name}</:col>
  <:empty>
    <p>No rows</p>
  </:empty>
</.data_table>