Data table
The admin table: Flop-driven sort/pagination, built-in debounced search and filter selects, tabs with filter presets, a collapsible stat overview, bulk selection, and a cards view — with the entire table state living in the URL. Everything below is live against an in-memory dataset.
Revenue (all)
$12031.57
Orders
10
Pending
19
Refunded
19
#4808
refunded
Ada Lovelace
Direct · $107.32
#4816
shipped
Ada Lovelace
Shopify · $304.18
#4824
pending
Ada Lovelace
eBay · $50.49
#4832
refunded
Ada Lovelace
Direct · $389.94
#4840
shipped
Ada Lovelace
Shopify · $27.08
#4848
pending
Ada Lovelace
eBay · $331.97
#4856
refunded
Ada Lovelace
Direct · $377.87
#4801
shipped
Alan Dijkstra
Shopify · $56.62
#4809
pending
Alan Dijkstra
eBay · $400.14
#4817
refunded
Alan Dijkstra
Direct · $389.70
About this table
Demo dataset. In a real app, rows/meta come from one
Flop.validate_and_run/3 call; this page hand-parses the same
URL params to stay database-free.
<.data_table id="orders" rows={@orders} meta={@meta} path={~p"/orders"}
selected_ids={@selected} search_field={:q}>
<:stat label="Revenue (30d)" value={@revenue} />
<:tab label="Pending" count={@counts.pending}
filters={[%{field: "status", value: "pending"}]} />
<:filter field={:channel} options={@channels} />
<:col :let={o} label="Order" field={:reference} sortable>{o.reference}</:col>
<:bulk_action label="Archive" icon="inbox" event="bulk-archive" />
<:row_action :let={o}>…</:row_action>
<:card :let={o}>…</:card>
</.data_table>