PineUiPhoenix.DataTable (Pine UI v0.1.3)
View SourceProvides data table components for displaying tabular data with sorting and filtering.
The DataTable module offers components for creating interactive tables that allow users to sort, filter, and paginate through tabular data.
Summary
Functions
Renders a basic data table component.
This component creates a table for displaying tabular data with optional sorting, filtering, and pagination.
Examples
<.basic
id="users-table"
columns={[
%{key: "name", label: "Name", sortable: true},
%{key: "email", label: "Email"},
%{key: "role", label: "Role", filterable: true}
]}
data={@users}
/>
<.basic
id="products-table"
columns={@columns}
data={@products}
sortable={true}
filterable={true}
paginate={true}
per_page={10}
/>
Options
:id
- Unique identifier for the table (required):columns
- List of column configuration maps (required):data
- List of data items to display in the table (required):sortable
- Whether sorting is enabled globally (optional, defaults to false):filterable
- Whether filtering is enabled globally (optional, defaults to false):paginate
- Whether pagination is enabled (optional, defaults to false):per_page
- Number of items per page when pagination is enabled (optional, defaults to 10):selectable
- Whether rows can be selected with checkboxes (optional, defaults to false):class
- Additional CSS classes for the table container (optional):table_class
- CSS classes for the table element (optional):empty_state
- Content to display when there are no rows to show (optional):row_click
- Event name or function to call when a row is clicked (optional):on_selection_change
- Event name or function to call when selection changes (optional)
Renders a data table with expandable rows.
This component creates a table where rows can be expanded to show additional details.
Examples
<.expandable
id="orders-table"
columns={[
%{key: "order_id", label: "Order ID"},
%{key: "customer", label: "Customer"},
%{key: "date", label: "Date"},
%{key: "status", label: "Status"}
]}
data={@orders}
>
<:expanded_row :let={row}>
<div class="p-4 bg-gray-50">
<h3 class="font-medium">Order Details</h3>
<p>Items: <%= row.items.length %></p>
<p>Total: $<%= row.total %></p>
</div>
</:expanded_row>
</.expandable>
Options
:id
- Unique identifier for the table (required):columns
- List of column configuration maps (required):data
- List of data items to display in the table (required):sortable
- Whether sorting is enabled globally (optional, defaults to false):filterable
- Whether filtering is enabled globally (optional, defaults to false):paginate
- Whether pagination is enabled (optional, defaults to false):per_page
- Number of items per page when pagination is enabled (optional, defaults to 10):class
- Additional CSS classes for the table container (optional):table_class
- CSS classes for the table element (optional):empty_state
- Content to display when there are no rows to show (optional):expanded_row
- Slot for customizing the expanded row content (required)