Data Table · Style

Semantic ink on column headers, size scale on headers and cells, and host max-width utilities. Tables include sort, selection, and actions.

Color

Select all	ID	Name	Role	Status
Select row	1	Alice	Admin	Active
Select row	2	Bob	User	Inactive
Select row	3	Charlie	User	Active
Select row	4	Diana	Manager	Active
Select row	5	Eve	Admin	Inactive

Select all	ID	Name	Role	Status
Select row	1	Alice	Admin	Active
Select row	2	Bob	User	Inactive
Select row	3	Charlie	User	Active
Select row	4	Diana	Manager	Active
Select row	5	Eve	Admin	Inactive

Select all	ID	Name	Role	Status
Select row	1	Alice	Admin	Active
Select row	2	Bob	User	Inactive
Select row	3	Charlie	User	Active
Select row	4	Diana	Manager	Active
Select row	5	Eve	Admin	Inactive

Select all	ID	Name	Role	Status
Select row	1	Alice	Admin	Active
Select row	2	Bob	User	Inactive
Select row	3	Charlie	User	Active
Select row	4	Diana	Manager	Active
Select row	5	Eve	Admin	Inactive

Select all	ID	Name	Role	Status
Select row	1	Alice	Admin	Active
Select row	2	Bob	User	Inactive
Select row	3	Charlie	User	Active
Select row	4	Diana	Manager	Active
Select row	5	Eve	Admin	Inactive

Select all	ID	Name	Role	Status
Select row	1	Alice	Admin	Active
Select row	2	Bob	User	Inactive
Select row	3	Charlie	User	Active
Select row	4	Diana	Manager	Active
Select row	5	Eve	Admin	Inactive

    <.data_table
  class="data-table data-table--accent max-w-none"
  rows={@style_rows}
  row_id={&"data-table-styling-color-accent-#{&1.id}"}
  sort_by={@style_sort_by}
  sort_order={@style_sort_order}
  on_sort="style_sort"
  selectable
  selected={@style_selected}
  on_select="style_select"
  on_select_all="style_select_all"
  checkbox_class="checkbox"
>
  <:checkbox_indicator>
    <.heroicon name="hero-check" />
  </:checkbox_indicator>
  <:sort_icon :let={%{direction: direction}}>
    <.heroicon name={
      case direction do
        :asc -> "hero-chevron-up"
        :desc -> "hero-chevron-down"
        :none -> "hero-chevron-up-down"
      end
    } />
  </:sort_icon>
  <:col :let={u} label="ID" name={:id}>{u.id}</:col>
  <:col :let={u} label="Name" name={:name}>{u.name}</:col>
  <:col :let={u} label="Role" name={:role}>{u.role}</:col>
  <:col :let={u} label="Status" name={:status}>{u.status}</:col>
  <:action :let={u}>
    <.action class="button button--sm" aria-label={"Edit #{u.name}"}>
      <.heroicon name="hero-pencil-square" />
    </.action>
  </:action>
</.data_table>

Size

Select all	ID	Name	Role	Status
Select row	1	Alice	Admin	Active
Select row	2	Bob	User	Inactive
Select row	3	Charlie	User	Active
Select row	4	Diana	Manager	Active
Select row	5	Eve	Admin	Inactive

Select all	ID	Name	Role	Status
Select row	1	Alice	Admin	Active
Select row	2	Bob	User	Inactive
Select row	3	Charlie	User	Active
Select row	4	Diana	Manager	Active
Select row	5	Eve	Admin	Inactive

Select all	ID	Name	Role	Status
Select row	1	Alice	Admin	Active
Select row	2	Bob	User	Inactive
Select row	3	Charlie	User	Active
Select row	4	Diana	Manager	Active
Select row	5	Eve	Admin	Inactive

Select all	ID	Name	Role	Status
Select row	1	Alice	Admin	Active
Select row	2	Bob	User	Inactive
Select row	3	Charlie	User	Active
Select row	4	Diana	Manager	Active
Select row	5	Eve	Admin	Inactive

    <.data_table
  class="data-table data-table--lg max-w-none"
  rows={@style_rows}
  row_id={&"data-table-styling-size-lg-#{&1.id}"}
  sort_by={@style_sort_by}
  sort_order={@style_sort_order}
  on_sort="style_sort"
  selectable
  selected={@style_selected}
  on_select="style_select"
  on_select_all="style_select_all"
  checkbox_class="checkbox"
>
  <:checkbox_indicator>
    <.heroicon name="hero-check" />
  </:checkbox_indicator>
  <:sort_icon :let={%{direction: direction}}>
    <.heroicon name={
      case direction do
        :asc -> "hero-chevron-up"
        :desc -> "hero-chevron-down"
        :none -> "hero-chevron-up-down"
      end
    } />
  </:sort_icon>
  <:col :let={u} label="ID" name={:id}>{u.id}</:col>
  <:col :let={u} label="Name" name={:name}>{u.name}</:col>
  <:col :let={u} label="Role" name={:role}>{u.role}</:col>
  <:col :let={u} label="Status" name={:status}>{u.status}</:col>
  <:action :let={u}>
    <.action class="button button--sm" aria-label={"Edit #{u.name}"}>
      <.heroicon name="hero-pencil-square" />
    </.action>
  </:action>
</.data_table>

Max width

Select all	ID	Name	Role	Status
Select row	1	Alice	Admin	Active
Select row	2	Bob	User	Inactive
Select row	3	Charlie	User	Active
Select row	4	Diana	Manager	Active
Select row	5	Eve	Admin	Inactive

Select all	ID	Name	Role	Status
Select row	1	Alice	Admin	Active
Select row	2	Bob	User	Inactive
Select row	3	Charlie	User	Active
Select row	4	Diana	Manager	Active
Select row	5	Eve	Admin	Inactive

Select all	ID	Name	Role	Status
Select row	1	Alice	Admin	Active
Select row	2	Bob	User	Inactive
Select row	3	Charlie	User	Active
Select row	4	Diana	Manager	Active
Select row	5	Eve	Admin	Inactive

Select all	ID	Name	Role	Status
Select row	1	Alice	Admin	Active
Select row	2	Bob	User	Inactive
Select row	3	Charlie	User	Active
Select row	4	Diana	Manager	Active
Select row	5	Eve	Admin	Inactive

    <.data_table
  class="data-table max-w-md"
  rows={@style_rows}
  row_id={&"data-table-styling-max-w-md-#{&1.id}"}
  sort_by={@style_sort_by}
  sort_order={@style_sort_order}
  on_sort="style_sort"
  selectable
  selected={@style_selected}
  on_select="style_select"
  on_select_all="style_select_all"
  checkbox_class="checkbox"
>
  <:checkbox_indicator>
    <.heroicon name="hero-check" />
  </:checkbox_indicator>
  <:sort_icon :let={%{direction: direction}}>
    <.heroicon name={
      case direction do
        :asc -> "hero-chevron-up"
        :desc -> "hero-chevron-down"
        :none -> "hero-chevron-up-down"
      end
    } />
  </:sort_icon>
  <:col :let={u} label="ID" name={:id}>{u.id}</:col>
  <:col :let={u} label="Name" name={:name}>{u.name}</:col>
  <:col :let={u} label="Role" name={:role}>{u.role}</:col>
  <:col :let={u} label="Status" name={:status}>{u.status}</:col>
  <:action :let={u}>
    <.action class="button button--sm" aria-label={"Edit #{u.name}"}>
      <.heroicon name="hero-pencil-square" />
    </.action>
  </:action>
</.data_table>