PhiaUi.Components.ResponsiveTable (phia_ui v0.1.17)

Horizontally scrollable table with responsive data-label field metadata.

On small screens the table scrolls horizontally inside a constrained viewport without layout breakage. responsive_table_field/1 stores the column label in data-label — useful for CSS-driven mobile card views or assistive tech.

Sub-components

Function	HTML element	Purpose
`responsive_table/1`	`<div><table>`	Scrollable wrapper + table structure
`responsive_table_row/1`	`<tr>`	Standard table row
`responsive_table_field/1`	`<td>`	Cell with accessible `data-label` attr

Example

<.responsive_table>
  <:header>
    <.table_row>
      <.table_head>Name</.table_head>
      <.table_head>Email</.table_head>
      <.table_head>Role</.table_head>
      <.table_head>Joined</.table_head>
    </.table_row>
  </:header>

  <.responsive_table_row :for={user <- @users}>
    <.responsive_table_field label="Name">
      <span class="font-medium">{user.name}</span>
    </.responsive_table_field>
    <.responsive_table_field label="Email">{user.email}</.responsive_table_field>
    <.responsive_table_field label="Role">
      <.badge variant={:secondary}>{user.role}</.badge>
    </.responsive_table_field>
    <.responsive_table_field label="Joined">{user.inserted_at}</.responsive_table_field>
  </.responsive_table_row>
</.responsive_table>

Responsive CSS card view (optional)

To transform the table into a card stack on mobile, add these utilities to your CSS:

@media (max-width: 767px) {
  .phia-responsive-table thead { display: none; }
  .phia-responsive-table tr { display: block; border: 1px solid; border-radius: 0.5rem; margin-bottom: 0.75rem; }
  .phia-responsive-table td { display: flex; justify-content: space-between; }
  .phia-responsive-table td::before { content: attr(data-label); font-weight: 500; }
}

Then add class="phia-responsive-table" to responsive_table/1.

Summary

Functions

responsive_table(assigns)

Renders a horizontally scrollable table with header and body slots.

responsive_table_field(assigns)

Renders a <td> with a data-label attribute for responsive CSS card views.

responsive_table_row(assigns)

Renders a <tr> data row inside responsive_table/1.

Functions

responsive_table(assigns)

Renders a horizontally scrollable table with header and body slots.

The outer <div> uses overflow-x-auto to enable horizontal scrolling on narrow viewports without breaking the page layout.

Example

<.responsive_table>
  <:header>
    <.table_row>
      <.table_head>Name</.table_head>
      <.table_head>Status</.table_head>
    </.table_row>
  </:header>
  <.responsive_table_row :for={item <- @items}>
    <.responsive_table_field label="Name">{item.name}</.responsive_table_field>
    <.responsive_table_field label="Status">{item.status}</.responsive_table_field>
  </.responsive_table_row>
</.responsive_table>

Attributes

class (:string) - Additional CSS classes for the outer wrapper div. Defaults to nil.
Global attributes are accepted. HTML attributes forwarded to the outer <div> (e.g. class).

Slots

header (required) - Column header row — typically one table_row/1 with table_head/1 cells.
inner_block (required) - responsive_table_row/1 children.

responsive_table_field(assigns)

Renders a <td> with a data-label attribute for responsive CSS card views.

Standard padding (px-4 py-3) and align-middle match the base table_cell and data_grid_cell defaults for visual consistency.

Example

<.responsive_table_field label="Revenue">
  <span class="font-mono tabular-nums">$12,340</span>
</.responsive_table_field>

Attributes

label (:string) (required) - Column label stored as data-label on the <td>. Used by CSS to render labels in mobile card views via content: attr(data-label).
class (:string) - Additional CSS classes for the <td>. Defaults to nil.
Global attributes are accepted. HTML attributes forwarded to the <td> element.

Slots

inner_block (required) - Cell content — plain text, formatted values, badges, etc.

responsive_table_row(assigns)

Renders a <tr> data row inside responsive_table/1.

Example

<.responsive_table_row id={dom_id}>
  <.responsive_table_field label="Name">{user.name}</.responsive_table_field>
  <.responsive_table_field label="Email">{user.email}</.responsive_table_field>
</.responsive_table_row>

Attributes

class (:string) - Additional CSS classes for the <tr>. Defaults to nil.
Global attributes are accepted. HTML attributes forwarded to the <tr> (e.g. id for streams).

Slots

inner_block (required) - responsive_table_field/1 children.