PineUiPhoenix.Extras.DataTable (Pine UI v0.2.1)

Copy Markdown View Source

A configuration-driven table, kept for compatibility with the v0.1.x API.

This is not a Pines element. It exists because v0.1.3 documented and exported data_table/1 and data_table_expandable/1 — but shipped them broken: basic/1 rendered a <div> containing only an HTML comment, and expandable/1 rendered the literal string .... Anyone who called them got an empty element.

Rather than delete a documented API, the functions are reimplemented here so they render something real. They describe columns as data:

<.data_table
  id="users"
  columns={[%{key: "name", label: "Name"}, %{key: "email", label: "Email"}]}
  data={@users}
/>

Prefer PineUiPhoenix.Components.Table

For anything new, use <.table>. Its :col slot takes markup rather than a :key, so a cell can contain a badge, a link or a nested component — which a key-based column map cannot express. <.table> is also the component this one delegates its rendering to.

Summary

Layout

data_table(assigns)

Renders a table from a column configuration.

data_table_expandable(assigns)

Renders a table whose rows expand to reveal extra detail.

Layout

data_table(assigns)

Renders a table from a column configuration.

A column's cell value is looked up by :key, which works for both string and atom keys. Pass a :render function for anything more involved:

%{key: "status", label: "Status", render: &humanise_status/1}

Attributes

  • id (:string) - Defaults to nil.
  • columns (:list) (required) - Maps with :key and :label; optional :align, :class, :render.
  • data (:list) (required) - Rows, as maps or structs.
  • striped (:boolean) - Defaults to false.
  • hoverable (:boolean) - Defaults to true.
  • dense (:boolean) - Defaults to false.
  • caption (:string) - Defaults to nil.
  • empty_state (:string) - Defaults to "No records found.".
  • row_click (:any) - A phx-click event name, or a 1-arity function. Defaults to nil.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

data_table_expandable(assigns)

Renders a table whose rows expand to reveal extra detail.

Each row gets a disclosure button; the detail row is a full-width <tr> toggled by Alpine. Written directly rather than through <.table> because the expanded row has to be a sibling <tr>, which the :col slot cannot express.

Attributes

  • id (:string) - Defaults to nil.
  • columns (:list) (required)
  • data (:list) (required)
  • caption (:string) - Defaults to nil.
  • empty_state (:string) - Defaults to "No records found.".
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • expanded_row (required) - Rendered in a full-width row beneath its parent.