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
|
|
ID
|
Name
|
Role
|
Status
|
الإجراءات |
|---|---|---|---|---|---|
|
|
1 | Alice | Admin | Active |
|
|
|
2 | Bob | User | Inactive |
|
|
|
3 | Charlie | User | Active |
|
|
|
4 | Diana | Manager | Active |
|
|
|
5 | Eve | Admin | Inactive |
|
|
|
ID
|
Name
|
Role
|
Status
|
الإجراءات |
|---|---|---|---|---|---|
|
|
1 | Alice | Admin | Active |
|
|
|
2 | Bob | User | Inactive |
|
|
|
3 | Charlie | User | Active |
|
|
|
4 | Diana | Manager | Active |
|
|
|
5 | Eve | Admin | Inactive |
|
|
|
ID
|
Name
|
Role
|
Status
|
الإجراءات |
|---|---|---|---|---|---|
|
|
1 | Alice | Admin | Active |
|
|
|
2 | Bob | User | Inactive |
|
|
|
3 | Charlie | User | Active |
|
|
|
4 | Diana | Manager | Active |
|
|
|
5 | Eve | Admin | Inactive |
|
|
|
ID
|
Name
|
Role
|
Status
|
الإجراءات |
|---|---|---|---|---|---|
|
|
1 | Alice | Admin | Active |
|
|
|
2 | Bob | User | Inactive |
|
|
|
3 | Charlie | User | Active |
|
|
|
4 | Diana | Manager | Active |
|
|
|
5 | Eve | Admin | Inactive |
|
|
|
ID
|
Name
|
Role
|
Status
|
الإجراءات |
|---|---|---|---|---|---|
|
|
1 | Alice | Admin | Active |
|
|
|
2 | Bob | User | Inactive |
|
|
|
3 | Charlie | User | Active |
|
|
|
4 | Diana | Manager | Active |
|
|
|
5 | Eve | Admin | Inactive |
|
|
|
ID
|
Name
|
Role
|
Status
|
الإجراءات |
|---|---|---|---|---|---|
|
|
1 | Alice | Admin | Active |
|
|
|
2 | Bob | User | Inactive |
|
|
|
3 | Charlie | User | Active |
|
|
|
4 | Diana | Manager | Active |
|
|
|
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
|
|
ID
|
Name
|
Role
|
Status
|
الإجراءات |
|---|---|---|---|---|---|
|
|
1 | Alice | Admin | Active |
|
|
|
2 | Bob | User | Inactive |
|
|
|
3 | Charlie | User | Active |
|
|
|
4 | Diana | Manager | Active |
|
|
|
5 | Eve | Admin | Inactive |
|
|
|
ID
|
Name
|
Role
|
Status
|
الإجراءات |
|---|---|---|---|---|---|
|
|
1 | Alice | Admin | Active |
|
|
|
2 | Bob | User | Inactive |
|
|
|
3 | Charlie | User | Active |
|
|
|
4 | Diana | Manager | Active |
|
|
|
5 | Eve | Admin | Inactive |
|
|
|
ID
|
Name
|
Role
|
Status
|
الإجراءات |
|---|---|---|---|---|---|
|
|
1 | Alice | Admin | Active |
|
|
|
2 | Bob | User | Inactive |
|
|
|
3 | Charlie | User | Active |
|
|
|
4 | Diana | Manager | Active |
|
|
|
5 | Eve | Admin | Inactive |
|
|
|
ID
|
Name
|
Role
|
Status
|
الإجراءات |
|---|---|---|---|---|---|
|
|
1 | Alice | Admin | Active |
|
|
|
2 | Bob | User | Inactive |
|
|
|
3 | Charlie | User | Active |
|
|
|
4 | Diana | Manager | Active |
|
|
|
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
|
|
ID
|
Name
|
Role
|
Status
|
الإجراءات |
|---|---|---|---|---|---|
|
|
1 | Alice | Admin | Active |
|
|
|
2 | Bob | User | Inactive |
|
|
|
3 | Charlie | User | Active |
|
|
|
4 | Diana | Manager | Active |
|
|
|
5 | Eve | Admin | Inactive |
|
|
|
ID
|
Name
|
Role
|
Status
|
الإجراءات |
|---|---|---|---|---|---|
|
|
1 | Alice | Admin | Active |
|
|
|
2 | Bob | User | Inactive |
|
|
|
3 | Charlie | User | Active |
|
|
|
4 | Diana | Manager | Active |
|
|
|
5 | Eve | Admin | Inactive |
|
|
|
ID
|
Name
|
Role
|
Status
|
الإجراءات |
|---|---|---|---|---|---|
|
|
1 | Alice | Admin | Active |
|
|
|
2 | Bob | User | Inactive |
|
|
|
3 | Charlie | User | Active |
|
|
|
4 | Diana | Manager | Active |
|
|
|
5 | Eve | Admin | Inactive |
|
|
|
ID
|
Name
|
Role
|
Status
|
الإجراءات |
|---|---|---|---|---|---|
|
|
1 | Alice | Admin | Active |
|
|
|
2 | Bob | User | Inactive |
|
|
|
3 | Charlie | User | Active |
|
|
|
4 | Diana | Manager | Active |
|
|
|
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>