# `PhiaUi.Components.ResponsiveTable`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/data/responsive_table.ex#L1)

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`.

# `responsive_table`

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`

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`

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.

---

*Consult [api-reference.md](api-reference.md) for complete listing*