Notifications2 new
View all-
Unread. Alex Reyes14:02
Uploaded Brand guidelines v3 for Atelier. Please check the type pages before the 15:00 review.
-
Unread. Jon Reyes12:40
Moved Nova to At risk: the campaign go-live still waits for the client sign-off on the hero visuals.
-
Ana Petit11:15
Added 12 photos from the Kiln product shoot to the Asset library.
-
Sara Ortiz10:05
The Lume printer confirmed dielines for Tuesday noon. Bleed is 3 mm on all panels.
-
Leo Park09:20
Orbit app UI is ready for review. The onboarding flow has two options to compare.
FORMS & TABLES · DATATABLES
Advanced datatable
Filter 200 invoices — column filters with live counts, an AND / OR filter builder, saved views, select-all-matching and filter states.THEME
01
Playground
200 invoices — filters, builder, views, selectionFILTERS
APPLY
DENSITY
STATE
Invoices — 200 of 200 invoices
| Filter Client | Filter Status, All | Filter Amount | Filter Due date | ||
|---|---|---|---|---|---|
| INV-1000Issued 18 Oct 2026 | Lume GoodsOlivia Lane | Draft | $2,250 | 1 Nov 2026Not sent | |
| INV-1001Issued 11 Sep 2026 | Juniper HotelMia Hart | Paid | $30,500 | 11 Oct 2026Paid | |
| INV-1002Issued 5 Aug 2026 | Tide CoffeeAlex Reyes | Paid | $30,250 | 4 Sep 2026Paid | |
| INV-1003Issued 29 Jun 2026 | Nova StudioNoah Fischer | Paid | $30,000 | 13 Jul 2026Paid | |
| INV-1004Issued 23 May 2026 | Mosaic PressJon Reyes | Paid | $29,750 | 22 Jun 2026Paid | |
| INV-1005Issued 16 Apr 2026 | Quill PressOlivia Lane | Paid | $29,500 | 16 May 2026Paid | |
| INV-1006Issued 10 Mar 2026 | Atelier RiveMia Hart | Paid | $29,250 | 24 Mar 2026Paid | |
| INV-1007Issued 1 Feb 2026 | Drift WorksAlex Reyes | Overdue | $29,000 | 3 Mar 2026229 days overdue | |
| INV-1008Issued 26 Dec 2025 | Basalt HotelNoah Fischer | Paid | $28,750 | 25 Jan 2026Paid | |
| INV-1009Issued 15 Sep 2026 | Kiln CoffeeJon Reyes | Overdue | $28,500 | 29 Sep 202619 days overdue |
200 of 200 invoices
URLavava.studio/invoices
NOW SPEAKING
FILTERFilter Status, All, button, has popup
CHIPNo active filters
SELECTSelect all on this page, checkbox, not checked
InvoicesTable.tsx
1<DataTable
2 caption="Invoices" data={invoices}
3 filters={{ placement: "row", apply: "instant" }}
4 views={savedViews} defaultView="all"
5 selectable="all-matching"
6 syncToUrl
7/>
EVENT LOG
02
Variants
Column menu, ranges, views, select all, empty resultColumn filter menufunnel in the header · search values · counts
Invoices · column menus — 200 of 200 invoices
| INV-1000Issued 18 Oct 2026 | Lume GoodsOlivia Lane | Draft | $2,250 | 1 Nov 2026Not sent | |
| INV-1001Issued 11 Sep 2026 | Juniper HotelMia Hart | Paid | $30,500 | 11 Oct 2026Paid | |
| INV-1002Issued 5 Aug 2026 | Tide CoffeeAlex Reyes | Paid | $30,250 | 4 Sep 2026Paid | |
| INV-1003Issued 29 Jun 2026 | Nova StudioNoah Fischer | Paid | $30,000 | 13 Jul 2026Paid | |
| INV-1004Issued 23 May 2026 | Mosaic PressJon Reyes | Paid | $29,750 | 22 Jun 2026Paid | |
| INV-1005Issued 16 Apr 2026 | Quill PressOlivia Lane | Paid | $29,500 | 16 May 2026Paid | |
| INV-1006Issued 10 Mar 2026 | Atelier RiveMia Hart | Paid | $29,250 | 24 Mar 2026Paid | |
| INV-1007Issued 1 Feb 2026 | Drift WorksAlex Reyes | Overdue | $29,000 | 3 Mar 2026229 days overdue | |
| INV-1008Issued 26 Dec 2025 | Basalt HotelNoah Fischer | Paid | $28,750 | 25 Jan 2026Paid | |
| INV-1009Issued 15 Sep 2026 | Kiln CoffeeJon Reyes | Overdue | $28,500 | 29 Sep 202619 days overdue |
200 of 200 invoices
Rangesamount with histogram and presets · date presets
Invoices · ranges — 200 of 200 invoices
| INV-1000Issued 18 Oct 2026 | Lume GoodsOlivia Lane | Draft | $2,250 | 1 Nov 2026Not sent | |
| INV-1001Issued 11 Sep 2026 | Juniper HotelMia Hart | Paid | $30,500 | 11 Oct 2026Paid | |
| INV-1002Issued 5 Aug 2026 | Tide CoffeeAlex Reyes | Paid | $30,250 | 4 Sep 2026Paid | |
| INV-1003Issued 29 Jun 2026 | Nova StudioNoah Fischer | Paid | $30,000 | 13 Jul 2026Paid | |
| INV-1004Issued 23 May 2026 | Mosaic PressJon Reyes | Paid | $29,750 | 22 Jun 2026Paid | |
| INV-1005Issued 16 Apr 2026 | Quill PressOlivia Lane | Paid | $29,500 | 16 May 2026Paid | |
| INV-1006Issued 10 Mar 2026 | Atelier RiveMia Hart | Paid | $29,250 | 24 Mar 2026Paid | |
| INV-1007Issued 1 Feb 2026 | Drift WorksAlex Reyes | Overdue | $29,000 | 3 Mar 2026229 days overdue | |
| INV-1008Issued 26 Dec 2025 | Basalt HotelNoah Fischer | Paid | $28,750 | 25 Jan 2026Paid | |
| INV-1009Issued 15 Sep 2026 | Kiln CoffeeJon Reyes | Overdue | $28,500 | 29 Sep 202619 days overdue |
200 of 200 invoices
Saved viewssave, rename by re-saving, delete, set default
Invoices · views — 200 of 200 invoices
| INV-1000Issued 18 Oct 2026 | Lume GoodsOlivia Lane | Draft | $2,250 | 1 Nov 2026Not sent | |
| INV-1001Issued 11 Sep 2026 | Juniper HotelMia Hart | Paid | $30,500 | 11 Oct 2026Paid | |
| INV-1002Issued 5 Aug 2026 | Tide CoffeeAlex Reyes | Paid | $30,250 | 4 Sep 2026Paid | |
| INV-1003Issued 29 Jun 2026 | Nova StudioNoah Fischer | Paid | $30,000 | 13 Jul 2026Paid | |
| INV-1004Issued 23 May 2026 | Mosaic PressJon Reyes | Paid | $29,750 | 22 Jun 2026Paid | |
| INV-1005Issued 16 Apr 2026 | Quill PressOlivia Lane | Paid | $29,500 | 16 May 2026Paid | |
| INV-1006Issued 10 Mar 2026 | Atelier RiveMia Hart | Paid | $29,250 | 24 Mar 2026Paid | |
| INV-1007Issued 1 Feb 2026 | Drift WorksAlex Reyes | Overdue | $29,000 | 3 Mar 2026229 days overdue | |
| INV-1008Issued 26 Dec 2025 | Basalt HotelNoah Fischer | Paid | $28,750 | 25 Jan 2026Paid | |
| INV-1009Issued 15 Sep 2026 | Kiln CoffeeJon Reyes | Overdue | $28,500 | 29 Sep 202619 days overdue |
200 of 200 invoices
Select everything that matchespage → all matching · live summary · bulk actions
StatusOverdue, Sent
Invoices · selection — Filtered by 1 condition · 64 of 200 invoices
| INV-1007Issued 1 Feb 2026 | Drift WorksAlex Reyes | Overdue | $29,000 | 3 Mar 2026229 days overdue | |
| INV-1009Issued 15 Sep 2026 | Kiln CoffeeJon Reyes | Overdue | $28,500 | 29 Sep 202619 days overdue | |
| INV-1011Issued 3 Jul 2026 | Clover ClinicMia Hart | Overdue | $28,000 | 2 Aug 202677 days overdue | |
| INV-1013Issued 20 Apr 2026 | NorthwindNoah Fischer | Overdue | $27,500 | 20 May 2026151 days overdue | |
| INV-1015Issued 5 Feb 2026 | SableOlivia Lane | Overdue | $27,000 | 19 Feb 2026241 days overdue | |
| INV-1024Issued 3 Jan 2026 | Mosaic PressJon Reyes | Overdue | $24,750 | 17 Jan 2026274 days overdue | |
| INV-1026Issued 17 Aug 2026 | Atelier RiveMia Hart | Overdue | $24,250 | 16 Sep 202632 days overdue | |
| INV-1028Issued 4 Jun 2026 | Basalt HotelNoah Fischer | Overdue | $23,750 | 4 Jul 2026106 days overdue | |
| INV-1030Issued 22 Mar 2026 | FormaOlivia Lane | Overdue | $23,250 | 5 Apr 2026196 days overdue | |
| INV-1032Issued 7 Jan 2026 | Orbit LabsAlex Reyes | Overdue | $22,750 | 6 Feb 2026254 days overdue |
Filtered by 1 condition · 64 of 200 invoices
When nothing matchessay which filter to drop
Client“lume”StatusDraftAmount≥ $50,000
Invoices · empty — Filtered by 3 conditions · 0 of 200 invoices
No invoices match these 3 filtersRemoving “Amount: ≥ $50,000” would show 1 invoice. | |||||
Filtered by 3 conditions · 0 of 200 invoices
03
States
Filtering, error, too broadFilteringold rows dim, a bar runs on top, aria-busy
StatusOverdue
Invoices — Filtered by 1 condition · 55 of 200 invoices
| INV-1007Issued 1 Feb 2026 | Drift WorksAlex Reyes | Overdue | $29,000 | 3 Mar 2026229 days overdue | |
| INV-1009Issued 15 Sep 2026 | Kiln CoffeeJon Reyes | Overdue | $28,500 | 29 Sep 202619 days overdue | |
| INV-1011Issued 3 Jul 2026 | Clover ClinicMia Hart | Overdue | $28,000 | 2 Aug 202677 days overdue | |
| INV-1013Issued 20 Apr 2026 | NorthwindNoah Fischer | Overdue | $27,500 | 20 May 2026151 days overdue | |
| INV-1015Issued 5 Feb 2026 | SableOlivia Lane | Overdue | $27,000 | 19 Feb 2026241 days overdue | |
| INV-1024Issued 3 Jan 2026 | Mosaic PressJon Reyes | Overdue | $24,750 | 17 Jan 2026274 days overdue | |
| INV-1026Issued 17 Aug 2026 | Atelier RiveMia Hart | Overdue | $24,250 | 16 Sep 202632 days overdue | |
| INV-1028Issued 4 Jun 2026 | Basalt HotelNoah Fischer | Overdue | $23,750 | 4 Jul 2026106 days overdue | |
| INV-1030Issued 22 Mar 2026 | FormaOlivia Lane | Overdue | $23,250 | 5 Apr 2026196 days overdue | |
| INV-1032Issued 7 Jan 2026 | Orbit LabsAlex Reyes | Overdue | $22,750 | 6 Feb 2026254 days overdue |
Filtered by 1 condition · 55 of 200 invoices
Errorkeep the filters, offer Retry
StatusOverdue
Invoices — Not loaded
Couldn’t apply filtersThe server didn’t respond. Your filters are kept — try again. | |||||
Not loaded
Too broadcap the result and ask for one more filter
Too many results to show at once.
Invoices — Showing the first 1,000 of 48,213 matching — add a filter to narrow
| INV-1000Issued 18 Oct 2026 | Lume GoodsOlivia Lane | Draft | $2,250 | 1 Nov 2026Not sent | |
| INV-1001Issued 11 Sep 2026 | Juniper HotelMia Hart | Paid | $30,500 | 11 Oct 2026Paid | |
| INV-1002Issued 5 Aug 2026 | Tide CoffeeAlex Reyes | Paid | $30,250 | 4 Sep 2026Paid | |
| INV-1003Issued 29 Jun 2026 | Nova StudioNoah Fischer | Paid | $30,000 | 13 Jul 2026Paid | |
| INV-1004Issued 23 May 2026 | Mosaic PressJon Reyes | Paid | $29,750 | 22 Jun 2026Paid | |
| INV-1005Issued 16 Apr 2026 | Quill PressOlivia Lane | Paid | $29,500 | 16 May 2026Paid | |
| INV-1006Issued 10 Mar 2026 | Atelier RiveMia Hart | Paid | $29,250 | 24 Mar 2026Paid | |
| INV-1007Issued 1 Feb 2026 | Drift WorksAlex Reyes | Overdue | $29,000 | 3 Mar 2026229 days overdue | |
| INV-1008Issued 26 Dec 2025 | Basalt HotelNoah Fischer | Paid | $28,750 | 25 Jan 2026Paid | |
| INV-1009Issued 15 Sep 2026 | Kiln CoffeeJon Reyes | Overdue | $28,500 | 29 Sep 202619 days overdue |
Showing the first 1,000 of 48,213 matching — add a filter to narrow
04
Behavior
Order, apply mode, state, keyboardOrder of operationswhat runs first
1
Search & column filtersEach narrows the set; they always combine with AND
2
ConditionsFrom the builder; joined with AND or OR between themselves
3
Saved viewA view is just a stored set of the two above
4
SortRuns on what’s left
5
PageLast — and resets to 1 whenever anything above changes
Instant or Apply?try both in the playground
InstantEach change refilters right away. Best for small, fast data and single filters — people see the effect of each click.
Apply buttonChanges collect as “pending” until Apply. Best for slow queries or when people set several filters at once; show what’s pending and allow Discard.
Where state livesURL vs profile
URLFilters, conditions, join, sort and page — shareable and survive reload
ProfileSaved views and the default view — follow the person across devices
SessionSelection and open popovers — never persisted
ServerFacet counts and totals for the full result, not just this page
Keyboardfilters without a mouse
EnterApply (in Apply mode) or add the condition
EscClose the filter popover; focus goes back to its button
SpaceToggle a value in the list
TabHeader → filter row → rows → pagination
Backspace on chip ×Remove that filter
05
In Avava
Receivables, activity logReceivablesoverdue first · by client · send reminders
OUTSTANDING$1,148,500
OVERDUE$977,500
CLIENTS LATE20
AVG. DAYS LATE135
StatusOverdue
Receivables — Filtered by 1 condition · 55 of 200 invoices
| Filter Client | Filter Status, Overdue | Filter Amount | Filter Due date | ||
|---|---|---|---|---|---|
| INV-1081Issued 25 Dec 2025 | Juniper HotelMia Hart | Overdue | $10,500 | 8 Jan 2026283 days overdue | |
| INV-1162Issued 28 Dec 2025 | Tide CoffeeAlex Reyes | Overdue | $20,250 | 11 Jan 2026280 days overdue | |
| INV-1024Issued 3 Jan 2026 | Mosaic PressJon Reyes | Overdue | $24,750 | 17 Jan 2026274 days overdue | |
| INV-1032Issued 7 Jan 2026 | Orbit LabsAlex Reyes | Overdue | $22,750 | 6 Feb 2026254 days overdue | |
| INV-1113Issued 10 Jan 2026 | NorthwindNoah Fischer | Overdue | $2,500 | 9 Feb 2026251 days overdue | |
| INV-1194Issued 13 Jan 2026 | Fable StudioJon Reyes | Overdue | $12,250 | 12 Feb 2026248 days overdue | |
| INV-1015Issued 5 Feb 2026 | SableOlivia Lane | Overdue | $27,000 | 19 Feb 2026241 days overdue | |
| INV-1064Issued 23 Jan 2026 | Mosaic PressJon Reyes | Overdue | $14,750 | 22 Feb 2026238 days overdue | |
| INV-1096Issued 8 Feb 2026 | Pine & CoMia Hart | Overdue | $6,750 | 22 Feb 2026238 days overdue | |
| INV-1145Issued 26 Jan 2026 | Quill PressOlivia Lane | Overdue | $24,500 | 25 Feb 2026235 days overdue |
Filtered by 1 condition · 55 of 200 invoices
Activity logwho did what, when
Activity log — 120 of 120 events
| Filter When | Filter Person, All | Filter Event, All | Filter On |
|---|---|---|---|
| 18 Oct 2026 · 15:00 | Olivia LaneCreative director | Created invoice | INV-1042 |
| 18 Oct 2026 · 09:42 | Jon ReyesDeveloper | Signed in | Web · Berlin |
| 18 Oct 2026 · 04:24 | Noah FischerProducer | Commented | Hotel identity |
| 17 Oct 2026 · 23:06 | Alex ReyesDesigner | Uploaded file | Lume rebrand |
| 17 Oct 2026 · 17:48 | Mia HartCopywriter | Edited project | INV-1107 |
| 17 Oct 2026 · 12:30 | Olivia LaneCreative director | Sent reminder | INV-1180 |
| 17 Oct 2026 · 07:12 | Jon ReyesDeveloper | Created invoice | Brand book v3.pdf |
| 17 Oct 2026 · 01:54 | Noah FischerProducer | Signed in | Web · Berlin |
| 16 Oct 2026 · 20:36 | Alex ReyesDesigner | Commented | INV-1042 |
| 16 Oct 2026 · 15:18 | Mia HartCopywriter | Uploaded file | Spring campaign |
120 of 120 events
06
Rules & a11y
Filter placement, naming, screen readersRow, chips or panel?pick by the number of filters
Row
2–5 filters that map to columnsInvoices, transactions
Chips
Many possible fields, few used at onceCRM, activity, search-heavy lists
Panel
Ranges and long value listsReports, catalogs
Naming conditionsread like a sentence
amount_gt 5000Amount is more than $5,000
status != PaidStatus is not Paid
due < 2026-10-01Due date is before 1 Oct
owner IN (OL)Owner is Olivia Lane
Screen readersannounce the result, not the click
✓aria-live result line“Filtered by 2 conditions · 18 of 200 invoices”
✓Filter buttons: aria-haspopup="dialog"Name includes the current value: “Filter Status, Overdue”
✓Chips: “Remove filter Status”A real button, not an icon only
✓aria-busy while refilteringRows stay in place, dimmed — no layout jump
✓Selection banner is role="status"“All 10 on this page are selected”
DO✓Show live counts next to every value✓Keep active filters visible as removable chips✓Tell people which filter to drop when nothing matches✓Offer “Select all N matching” after selecting a page✓Store filters in the URL and views in the profile
DON’T✕Hide which filters are on✕Reset filters when people change the page✕Make Apply the only way for a single quick filter✕Select all 48,000 rows silently✕Use codes like amount_gt in the UI