Data Table

Style

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

Hex doc

Phoenix

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

    <.data_table
  id="data-table-styling-color-accent"
  class="data-table ui-accent max-w-none"
  rows={@style_rows}
  row_id={&"data-table-styling-color-accent-#{&1.id}"}
  sort_by={@sort_by}
  sort_order={@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 ui-size-sm ui-trigger--square" aria-label={"Edit #{u.name}"}>
      <.heroicon name="hero-pencil-square" />
    </.action>
  </:action>
</.data_table>

    @list_users [
  %{id: 1, name: "Alice", email: "alice@example.com", role: "Admin", status: "Active"},
  %{id: 2, name: "Bob", email: "bob@example.com", role: "User", status: "Inactive"},
  %{id: 3, name: "Charlie", email: "charlie@example.com", role: "User", status: "Active"},
  %{id: 4, name: "Diana", email: "diana@example.com", role: "Manager", status: "Active"},
  %{id: 5, name: "Eve", email: "eve@example.com", role: "Admin", status: "Inactive"},
  %{id: 6, name: "Frank", email: "frank@example.com", role: "User", status: "Active"},
  %{id: 7, name: "Grace", email: "grace@example.com", role: "Manager", status: "Active"},
  %{id: 8, name: "Henry", email: "henry@example.com", role: "User", status: "Inactive"},
  %{id: 9, name: "Ivy", email: "ivy@example.com", role: "Admin", status: "Active"},
  %{id: 10, name: "Jack", email: "jack@example.com", role: "User", status: "Active"},
  %{id: 11, name: "Kate", email: "kate@example.com", role: "Manager", status: "Inactive"},
  %{id: 12, name: "Leo", email: "leo@example.com", role: "User", status: "Active"},
  %{id: 13, name: "Mia", email: "mia@example.com", role: "Admin", status: "Active"},
  %{id: 14, name: "Noah", email: "noah@example.com", role: "User", status: "Inactive"},
  %{id: 15, name: "Olivia", email: "olivia@example.com", role: "Manager", status: "Active"},
  %{id: 16, name: "Paul", email: "paul@example.com", role: "User", status: "Active"}
]

@style_sort_columns [:id, :name, :role, :status]

def mount(_params, _session, socket) do
  {:ok,
   socket
   |> assign(:style_rows, @list_users)
   |> Corex.DataTable.Sort.assign_for_sort(:style_rows,
     default_sort_by: :id,
     default_sort_order: :asc,
     sort_columns: @style_sort_columns
   )
   |> assign(:style_selected, [])}
end

def handle_event("style_sort", params, socket) do
  {:noreply, Corex.DataTable.Sort.handle_sort(socket, params, :style_rows)}
end

def handle_event("style_select", %{"id" => checkbox_id} = params, socket) do
  case String.split(checkbox_id, "-select-", parts: 2) do
    [table_id, _row_key] ->
      {:noreply,
       E2eWeb.DataTablePatternState.handle_select_ns(socket, params,
         rows: :style_rows,
         selected: :style_selected,
         table_id: table_id
       )}

    _ ->
      {:noreply, socket}
  end
end

def handle_event("style_select_all", %{"id" => checkbox_id} = params, socket) do
  table_id = String.replace_suffix(checkbox_id, "-select-all", "")

  {:noreply,
   E2eWeb.DataTablePatternState.handle_select_all_ns(socket, params,
     rows: :style_rows,
     selected: :style_selected,
     table_id: table_id,
     row_id: &"#{table_id}-#{&1.id}"
   )}
end

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

    <.data_table
  id="data-table-styling-size-lg"
  class="data-table ui-size-lg max-w-none"
  rows={@style_rows}
  row_id={&"data-table-styling-size-lg-#{&1.id}"}
  sort_by={@sort_by}
  sort_order={@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 ui-size-sm ui-trigger--square" aria-label={"Edit #{u.name}"}>
      <.heroicon name="hero-pencil-square" />
    </.action>
  </:action>
</.data_table>

    @list_users [
  %{id: 1, name: "Alice", email: "alice@example.com", role: "Admin", status: "Active"},
  %{id: 2, name: "Bob", email: "bob@example.com", role: "User", status: "Inactive"},
  %{id: 3, name: "Charlie", email: "charlie@example.com", role: "User", status: "Active"},
  %{id: 4, name: "Diana", email: "diana@example.com", role: "Manager", status: "Active"},
  %{id: 5, name: "Eve", email: "eve@example.com", role: "Admin", status: "Inactive"},
  %{id: 6, name: "Frank", email: "frank@example.com", role: "User", status: "Active"},
  %{id: 7, name: "Grace", email: "grace@example.com", role: "Manager", status: "Active"},
  %{id: 8, name: "Henry", email: "henry@example.com", role: "User", status: "Inactive"},
  %{id: 9, name: "Ivy", email: "ivy@example.com", role: "Admin", status: "Active"},
  %{id: 10, name: "Jack", email: "jack@example.com", role: "User", status: "Active"},
  %{id: 11, name: "Kate", email: "kate@example.com", role: "Manager", status: "Inactive"},
  %{id: 12, name: "Leo", email: "leo@example.com", role: "User", status: "Active"},
  %{id: 13, name: "Mia", email: "mia@example.com", role: "Admin", status: "Active"},
  %{id: 14, name: "Noah", email: "noah@example.com", role: "User", status: "Inactive"},
  %{id: 15, name: "Olivia", email: "olivia@example.com", role: "Manager", status: "Active"},
  %{id: 16, name: "Paul", email: "paul@example.com", role: "User", status: "Active"}
]

@style_sort_columns [:id, :name, :role, :status]

def mount(_params, _session, socket) do
  {:ok,
   socket
   |> assign(:style_rows, @list_users)
   |> Corex.DataTable.Sort.assign_for_sort(:style_rows,
     default_sort_by: :id,
     default_sort_order: :asc,
     sort_columns: @style_sort_columns
   )
   |> assign(:style_selected, [])}
end

def handle_event("style_sort", params, socket) do
  {:noreply, Corex.DataTable.Sort.handle_sort(socket, params, :style_rows)}
end

def handle_event("style_select", %{"id" => checkbox_id} = params, socket) do
  case String.split(checkbox_id, "-select-", parts: 2) do
    [table_id, _row_key] ->
      {:noreply,
       E2eWeb.DataTablePatternState.handle_select_ns(socket, params,
         rows: :style_rows,
         selected: :style_selected,
         table_id: table_id
       )}

    _ ->
      {:noreply, socket}
  end
end

def handle_event("style_select_all", %{"id" => checkbox_id} = params, socket) do
  table_id = String.replace_suffix(checkbox_id, "-select-all", "")

  {:noreply,
   E2eWeb.DataTablePatternState.handle_select_all_ns(socket, params,
     rows: :style_rows,
     selected: :style_selected,
     table_id: table_id,
     row_id: &"#{table_id}-#{&1.id}"
   )}
end

Max width

default (md)

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

none

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

full

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

9xs

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

8xs

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

7xs

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

6xs

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

5xs

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

4xs

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

3xs

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

2xs

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

2xl

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

3xl

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

4xl

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

5xl

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

6xl

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

7xl

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

8xl

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

9xl

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

    <.data_table
  id="data-table-styling-max-w-md"
  class="data-table max-w-md"
  rows={@style_rows}
  row_id={&"data-table-styling-max-w-md-#{&1.id}"}
  sort_by={@sort_by}
  sort_order={@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 ui-size-sm ui-trigger--square" aria-label={"Edit #{u.name}"}>
      <.heroicon name="hero-pencil-square" />
    </.action>
  </:action>
</.data_table>

    @list_users [
  %{id: 1, name: "Alice", email: "alice@example.com", role: "Admin", status: "Active"},
  %{id: 2, name: "Bob", email: "bob@example.com", role: "User", status: "Inactive"},
  %{id: 3, name: "Charlie", email: "charlie@example.com", role: "User", status: "Active"},
  %{id: 4, name: "Diana", email: "diana@example.com", role: "Manager", status: "Active"},
  %{id: 5, name: "Eve", email: "eve@example.com", role: "Admin", status: "Inactive"},
  %{id: 6, name: "Frank", email: "frank@example.com", role: "User", status: "Active"},
  %{id: 7, name: "Grace", email: "grace@example.com", role: "Manager", status: "Active"},
  %{id: 8, name: "Henry", email: "henry@example.com", role: "User", status: "Inactive"},
  %{id: 9, name: "Ivy", email: "ivy@example.com", role: "Admin", status: "Active"},
  %{id: 10, name: "Jack", email: "jack@example.com", role: "User", status: "Active"},
  %{id: 11, name: "Kate", email: "kate@example.com", role: "Manager", status: "Inactive"},
  %{id: 12, name: "Leo", email: "leo@example.com", role: "User", status: "Active"},
  %{id: 13, name: "Mia", email: "mia@example.com", role: "Admin", status: "Active"},
  %{id: 14, name: "Noah", email: "noah@example.com", role: "User", status: "Inactive"},
  %{id: 15, name: "Olivia", email: "olivia@example.com", role: "Manager", status: "Active"},
  %{id: 16, name: "Paul", email: "paul@example.com", role: "User", status: "Active"}
]

@style_sort_columns [:id, :name, :role, :status]

def mount(_params, _session, socket) do
  {:ok,
   socket
   |> assign(:style_rows, @list_users)
   |> Corex.DataTable.Sort.assign_for_sort(:style_rows,
     default_sort_by: :id,
     default_sort_order: :asc,
     sort_columns: @style_sort_columns
   )
   |> assign(:style_selected, [])}
end

def handle_event("style_sort", params, socket) do
  {:noreply, Corex.DataTable.Sort.handle_sort(socket, params, :style_rows)}
end

def handle_event("style_select", %{"id" => checkbox_id} = params, socket) do
  case String.split(checkbox_id, "-select-", parts: 2) do
    [table_id, _row_key] ->
      {:noreply,
       E2eWeb.DataTablePatternState.handle_select_ns(socket, params,
         rows: :style_rows,
         selected: :style_selected,
         table_id: table_id
       )}

    _ ->
      {:noreply, socket}
  end
end

def handle_event("style_select_all", %{"id" => checkbox_id} = params, socket) do
  table_id = String.replace_suffix(checkbox_id, "-select-all", "")

  {:noreply,
   E2eWeb.DataTablePatternState.handle_select_all_ns(socket, params,
     rows: :style_rows,
     selected: :style_selected,
     table_id: table_id,
     row_id: &"#{table_id}-#{&1.id}"
   )}
end

Max height

default (data-table)

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

9xs

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

8xs

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

7xs

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

6xs

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

5xs

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

4xs

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

3xs

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

2xs

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

2xl

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

3xl

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

4xl

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

5xl

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

6xl

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

7xl

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

8xl

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

9xl

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 row	6	Frank	User	Active
Select row	7	Grace	Manager	Active
Select row	8	Henry	User	Inactive
Select row	9	Ivy	Admin	Active
Select row	10	Jack	User	Active
Select row	11	Kate	Manager	Inactive
Select row	12	Leo	User	Active
Select row	13	Mia	Admin	Active
Select row	14	Noah	User	Inactive
Select row	15	Olivia	Manager	Active
Select row	16	Paul	User	Active

    <.data_table
  id="data-table-styling-max-h-xs"
  class="data-table ui-max-height-xs"
  rows={@style_rows}
  row_id={&"data-table-styling-max-h-xs-#{&1.id}"}
  sort_by={@sort_by}
  sort_order={@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 ui-size-sm ui-trigger--square" aria-label={"Edit #{u.name}"}>
      <.heroicon name="hero-pencil-square" />
    </.action>
  </:action>
</.data_table>

    @list_users [
  %{id: 1, name: "Alice", email: "alice@example.com", role: "Admin", status: "Active"},
  %{id: 2, name: "Bob", email: "bob@example.com", role: "User", status: "Inactive"},
  %{id: 3, name: "Charlie", email: "charlie@example.com", role: "User", status: "Active"},
  %{id: 4, name: "Diana", email: "diana@example.com", role: "Manager", status: "Active"},
  %{id: 5, name: "Eve", email: "eve@example.com", role: "Admin", status: "Inactive"},
  %{id: 6, name: "Frank", email: "frank@example.com", role: "User", status: "Active"},
  %{id: 7, name: "Grace", email: "grace@example.com", role: "Manager", status: "Active"},
  %{id: 8, name: "Henry", email: "henry@example.com", role: "User", status: "Inactive"},
  %{id: 9, name: "Ivy", email: "ivy@example.com", role: "Admin", status: "Active"},
  %{id: 10, name: "Jack", email: "jack@example.com", role: "User", status: "Active"},
  %{id: 11, name: "Kate", email: "kate@example.com", role: "Manager", status: "Inactive"},
  %{id: 12, name: "Leo", email: "leo@example.com", role: "User", status: "Active"},
  %{id: 13, name: "Mia", email: "mia@example.com", role: "Admin", status: "Active"},
  %{id: 14, name: "Noah", email: "noah@example.com", role: "User", status: "Inactive"},
  %{id: 15, name: "Olivia", email: "olivia@example.com", role: "Manager", status: "Active"},
  %{id: 16, name: "Paul", email: "paul@example.com", role: "User", status: "Active"}
]

@style_sort_columns [:id, :name, :role, :status]

def mount(_params, _session, socket) do
  {:ok,
   socket
   |> assign(:style_rows, @list_users)
   |> Corex.DataTable.Sort.assign_for_sort(:style_rows,
     default_sort_by: :id,
     default_sort_order: :asc,
     sort_columns: @style_sort_columns
   )
   |> assign(:style_selected, [])}
end

def handle_event("style_sort", params, socket) do
  {:noreply, Corex.DataTable.Sort.handle_sort(socket, params, :style_rows)}
end

def handle_event("style_select", %{"id" => checkbox_id} = params, socket) do
  case String.split(checkbox_id, "-select-", parts: 2) do
    [table_id, _row_key] ->
      {:noreply,
       E2eWeb.DataTablePatternState.handle_select_ns(socket, params,
         rows: :style_rows,
         selected: :style_selected,
         table_id: table_id
       )}

    _ ->
      {:noreply, socket}
  end
end

def handle_event("style_select_all", %{"id" => checkbox_id} = params, socket) do
  table_id = String.replace_suffix(checkbox_id, "-select-all", "")

  {:noreply,
   E2eWeb.DataTablePatternState.handle_select_all_ns(socket, params,
     rows: :style_rows,
     selected: :style_selected,
     table_id: table_id,
     row_id: &"#{table_id}-#{&1.id}"
   )}
end