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
57
Pending
19
Refunded
19
| Order | Buyer | Channel | Status | Total | ||
|---|---|---|---|---|---|---|
| #4808 | Ada Lovelace | Direct | refunded | $107.32 |
|
|
| #4816 | Ada Lovelace | Shopify | shipped | $304.18 |
|
|
| #4824 | Ada Lovelace | eBay | pending | $50.49 |
|
|
| #4832 | Ada Lovelace | Direct | refunded | $389.94 |
|
|
| #4840 | Ada Lovelace | Shopify | shipped | $27.08 |
|
|
| #4848 | Ada Lovelace | eBay | pending | $331.97 |
|
|
| #4856 | Ada Lovelace | Direct | refunded | $377.87 |
|
|
| #4801 | Alan Dijkstra | Shopify | shipped | $56.62 |
|
|
| #4809 | Alan Dijkstra | eBay | pending | $400.14 |
|
|
| #4817 | Alan Dijkstra | Direct | refunded | $389.70 |
|
|
| #4825 | Alan Dijkstra | Shopify | shipped | $362.90 |
|
|
| #4833 | Alan Dijkstra | eBay | pending | $235.11 |
|
|
| #4841 | Alan Dijkstra | Direct | refunded | $357.97 |
|
|
| #4849 | Alan Dijkstra | Shopify | shipped | $319.62 |
|
|
| #4857 | Alan Dijkstra | eBay | pending | $234.22 |
|
|
| #4804 | Barbara Liskov | Shopify | shipped | $78.39 |
|
|
| #4812 | Barbara Liskov | eBay | pending | $268.53 |
|
|
| #4820 | Barbara Liskov | Direct | refunded | $48.51 |
|
|
| #4828 | Barbara Liskov | Shopify | shipped | $324.27 |
|
|
| #4836 | Barbara Liskov | eBay | pending | $380.48 |
|
|
| #4844 | Barbara Liskov | Direct | refunded | $357.03 |
|
|
| #4852 | Barbara Liskov | Shopify | shipped | $101.21 |
|
|
| #4805 | Donald Thompson | Direct | refunded | $77.02 |
|
|
| #4813 | Donald Thompson | Shopify | shipped | $80.10 |
|
|
| #4821 | Donald Thompson | eBay | pending | $237.47 |
|
|
| #4829 | Donald Thompson | Direct | refunded | $274.45 |
|
|
| #4837 | Donald Thompson | Shopify | shipped | $141.59 |
|
|
| #4845 | Donald Thompson | eBay | pending | $362.35 |
|
|
| #4853 | Donald Thompson | Direct | refunded | $257.28 |
|
|
| #4803 | Edsger Turing | eBay | pending | $61.03 |
|
|
| #4811 | Edsger Turing | Direct | refunded | $217.58 |
|
|
| #4819 | Edsger Turing | Shopify | shipped | $287.34 |
|
|
| #4827 | Edsger Turing | eBay | pending | $70.10 |
|
|
| #4835 | Edsger Turing | Direct | refunded | $378.94 |
|
|
| #4843 | Edsger Turing | Shopify | shipped | $242.25 |
|
|
| #4851 | Edsger Turing | eBay | pending | $372.13 |
|
|
| #4802 | Grace Perlman | Direct | refunded | $321.68 |
|
|
| #4810 | Grace Perlman | Shopify | shipped | $240.13 |
|
|
| #4818 | Grace Perlman | eBay | pending | $89.93 |
|
|
| #4826 | Grace Perlman | Direct | refunded | $51.27 |
|
|
| #4834 | Grace Perlman | Shopify | shipped | $223.78 |
|
|
| #4842 | Grace Perlman | eBay | pending | $178.68 |
|
|
| #4850 | Grace Perlman | Direct | refunded | $71.79 |
|
|
| #4807 | Ken Knuth | Shopify | shipped | $64.18 |
|
|
| #4815 | Ken Knuth | eBay | pending | $49.27 |
|
|
| #4823 | Ken Knuth | Direct | refunded | $9.49 |
|
|
| #4831 | Ken Knuth | Shopify | shipped | $386.22 |
|
|
| #4839 | Ken Knuth | eBay | pending | $156.04 |
|
|
| #4847 | Ken Knuth | Direct | refunded | $6.37 |
|
|
| #4855 | Ken Knuth | Shopify | shipped | $88.57 |
|
|
| #4806 | Radia Hopper | eBay | pending | $65.44 |
|
|
| #4814 | Radia Hopper | Direct | refunded | $285.17 |
|
|
| #4822 | Radia Hopper | Shopify | shipped | $162.45 |
|
|
| #4830 | Radia Hopper | eBay | pending | $182.46 |
|
|
| #4838 | Radia Hopper | Direct | refunded | $317.11 |
|
|
| #4846 | Radia Hopper | Shopify | shipped | $316.33 |
|
|
| #4854 | Radia Hopper | eBay | pending | $202.03 |
|
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>