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