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
Basic datatable
Sort, search and paginate — typed sorting, multi-sort, highlighted matches, four pagination styles, states and URL state.THEME
01
Playground
60 clients — sort, search, paginate, stateVIEWdefaults
Studio clients — Showing 1–10 of 60
Lume Goodsben@lume.example | Berlin | 1 | $2,500 | Active | 18 Oct 2026Today | |
Nova Studioola@nova.example | Lisbon | 8 | $47,000 | Paused | 5 Oct 20262 weeks ago | |
Atelier Labsmax@atelier.example | Copenhagen | 3 | $46,500 | Active | 22 Sep 20264 weeks ago | |
Kiln Coffeemara@kiln.example | Barcelona | 10 | $46,000 | Archived | 9 Sep 20261 month ago | |
Orbit Hoteltheo@orbit.example | Paris | 5 | $45,500 | Active | 27 Aug 20262 months ago | |
Sable Clinicivy@sable.example | New York | 12 | $45,000 | Active | 14 Aug 20262 months ago | |
Halo Pressjo@halo.example | Milan | 7 | $44,500 | Paused | 1 Aug 20263 months ago | |
Juniper Worksiris@juniper.example | London | 2 | $44,000 | Active | 19 Jul 20263 months ago | |
Mosaic Goodsfinn@mosaic.example | Amsterdam | 9 | $43,500 | Archived | 6 Jul 20263 months ago | |
Drift Studiosam@drift.example | Vienna | 4 | $43,000 | Active | 23 Jun 20264 months ago | |
| You’ve reached the end · 60 clients | ||||||
Showing 1–10 of 60
URLavava.studio/clients?page=1&per=10
NOW SPEAKING
FOCUSClient, button, column header
SEARCHSearch clients, search field
NAVPagination, navigation. Page 1, current page
ClientsTable.tsxdefaults
1<DataTable
2 caption="Studio clients"
3 data={clients} columns={columns}
4 sort={{ multi: true }}
5 search={{ in: "all", highlight: true, debounce: 250 }}
6 pagination="pages" pageSize={10}
7 density="default"
8 syncToUrl
9/>
EVENT LOG
02
Variants
Sorting, search, pagination, totals, tabsSorting by typetext · number · size · date · Shift-click adds a second sort
Project files — 8 files
| Brand guidelines.pdf | 24.1 MB | 15 Oct 20263 days ago | |
| Logo pack.zip | ZIP | 8.4 MB | 6 Oct 20262 weeks ago |
| Hero shot 01.jpg | Image | 2.6 MB | 17 Oct 2026Yesterday |
| Hero shot 02.jpg | Image | 3.1 MB | 17 Oct 2026Yesterday |
| Proposal v3.docx | Doc | 412 KB | 22 Sep 20264 weeks ago |
| Moodboard.fig | Figma | 18.9 MB | 13 Oct 20265 days ago |
| Invoice INV-0428.pdf | 96 KB | 18 Oct 2026Today | |
| Type specimen.pdf | 1.2 MB | 7 Sep 20261 month ago | |
| You’ve reached the end · 8 files | |||
8 files
Search with highlightdebounced 250 ms · matches across columns
TRY
Clients, searchable — Showing 1–5 of 60
Lume Goodsben@lume.example | Berlin | 1 | $2,500 | Active | 18 Oct 2026Today |
Nova Studioola@nova.example | Lisbon | 8 | $47,000 | Paused | 5 Oct 20262 weeks ago |
Atelier Labsmax@atelier.example | Copenhagen | 3 | $46,500 | Active | 22 Sep 20264 weeks ago |
Kiln Coffeemara@kiln.example | Barcelona | 10 | $46,000 | Archived | 9 Sep 20261 month ago |
Orbit Hoteltheo@orbit.example | Paris | 5 | $45,500 | Active | 27 Aug 20262 months ago |
| You’ve reached the end · 60 clients | |||||
Showing 1–5 of 60
Pagination stylesfull · compact · load more · infinite
Clients, paginated — Showing 1–5 of 60
Lume Goodsben@lume.example | Berlin | 1 | $2,500 | Active | 18 Oct 2026Today |
Nova Studioola@nova.example | Lisbon | 8 | $47,000 | Paused | 5 Oct 20262 weeks ago |
Atelier Labsmax@atelier.example | Copenhagen | 3 | $46,500 | Active | 22 Sep 20264 weeks ago |
Kiln Coffeemara@kiln.example | Barcelona | 10 | $46,000 | Archived | 9 Sep 20261 month ago |
Orbit Hoteltheo@orbit.example | Paris | 5 | $45,500 | Active | 27 Aug 20262 months ago |
| You’ve reached the end · 60 clients | |||||
Showing 1–5 of 60
Footer with totalsrows per page · total of what’s filtered
Clients with totals — Showing 1–5 of 60
Lume Goodsben@lume.example | Berlin | 1 | $2,500 | Active | 18 Oct 2026Today |
Nova Studioola@nova.example | Lisbon | 8 | $47,000 | Paused | 5 Oct 20262 weeks ago |
Atelier Labsmax@atelier.example | Copenhagen | 3 | $46,500 | Active | 22 Sep 20264 weeks ago |
Kiln Coffeemara@kiln.example | Barcelona | 10 | $46,000 | Archived | 9 Sep 20261 month ago |
Orbit Hoteltheo@orbit.example | Paris | 5 | $45,500 | Active | 27 Aug 20262 months ago |
| You’ve reached the end · 60 clients | |||||
| Total · 60 clients | 390 | $1,920,000 | |||
Showing 1–5 of 60
Status tabscounts update with search
Clients by status — Showing 1–5 of 60
Lume Goodsben@lume.example | Berlin | 1 | $2,500 | Active | 18 Oct 2026Today |
Nova Studioola@nova.example | Lisbon | 8 | $47,000 | Paused | 5 Oct 20262 weeks ago |
Atelier Labsmax@atelier.example | Copenhagen | 3 | $46,500 | Active | 22 Sep 20264 weeks ago |
Kiln Coffeemara@kiln.example | Barcelona | 10 | $46,000 | Archived | 9 Sep 20261 month ago |
Orbit Hoteltheo@orbit.example | Paris | 5 | $45,500 | Active | 27 Aug 20262 months ago |
| You’ve reached the end · 60 clients | |||||
Showing 1–5 of 60
03
States
Loading, no results, no data, errorLoadingskeleton rows · aria-busy
Clients — Loading clients…
| You’ve reached the end · 60 clients | |||||
Loading clients…
No resultssay what was searched, offer a way out
Clients — 0 results
| You’ve reached the end · 0 clients | |||||
No results for “Tokyo”Check the spelling, or try a shorter word. | |||||
0 results
No datafirst-run: explain and offer the first action
Clients — 0 clients
| You’ve reached the end · 0 clients | |||||
No clients yetAdd your first one to get started. | |||||
0 clients
Errorkeep sort and search, offer Retry
Clients — Not loaded
| You’ve reached the end · 60 clients | |||||
Couldn’t load clientsCheck your connection — your sort and search are kept. | |||||
Not loaded
04
Behavior
Resets, keyboard, URLWhat resets whatnever surprise people
| Action | Page | Sort | Search |
|---|---|---|---|
| Sort a column | ↺ to 1 | changed | kept |
| Type a search | ↺ to 1 | kept | changed |
| Switch a status tab | ↺ to 1 | kept | kept |
| Change rows per page | ↺ to 1 | kept | kept |
| Go to a page | changed | kept | kept |
| Clear search | ↺ to 1 | kept | cleared |
Keyboard & focuseverything is a real button
TabSearch → sortable headers → rows → pagination
Enter / SpaceSort by the focused header
Shift + clickAdd a second sort (multi mode)
EscClear the search field
← → in regionScroll a wide table sideways
After pagingFocus moves to the top of the table
State in the URLshareable, survives reload
Sort, search, page and rows per page are written to the query string, so a link opens the same view. The playground above writes:?page=1&per=10Use replaceState for typing and pushState for page changes, so Back goes to the previous page, not the previous keystroke.05
In Avava
Clients, transactionsStudio clientstabs · search · sort · ⋯ actions
Studio clients — Showing 1–10 of 60
Lume Goodsben@lume.example | Berlin | 1 | $2,500 | Active | 18 Oct 2026Today | |
Nova Studioola@nova.example | Lisbon | 8 | $47,000 | Paused | 5 Oct 20262 weeks ago | |
Atelier Labsmax@atelier.example | Copenhagen | 3 | $46,500 | Active | 22 Sep 20264 weeks ago | |
Kiln Coffeemara@kiln.example | Barcelona | 10 | $46,000 | Archived | 9 Sep 20261 month ago | |
Orbit Hoteltheo@orbit.example | Paris | 5 | $45,500 | Active | 27 Aug 20262 months ago | |
Sable Clinicivy@sable.example | New York | 12 | $45,000 | Active | 14 Aug 20262 months ago | |
Halo Pressjo@halo.example | Milan | 7 | $44,500 | Paused | 1 Aug 20263 months ago | |
Juniper Worksiris@juniper.example | London | 2 | $44,000 | Active | 19 Jul 20263 months ago | |
Mosaic Goodsfinn@mosaic.example | Amsterdam | 9 | $43,500 | Archived | 6 Jul 20263 months ago | |
Drift Studiosam@drift.example | Vienna | 4 | $43,000 | Active | 23 Jun 20264 months ago | |
| You’ve reached the end · 60 clients | ||||||
Showing 1–10 of 60
Transactionsnewest first · signed amounts · totals
Transactions — Showing 1–10 of 40
| 18 Oct 2026Today | Payment · Lume GoodsINV-0440 | Client payment | +$800 |
| 15 Oct 20262 days ago | Adobe CCSoftware | Software | −$1,125 |
| 13 Oct 20264 days ago | Payment · Atelier RiveINV-0438 | Client payment | +$1,600 |
| 11 Oct 20266 days ago | IllustrationContractors | Contractors | −$495 |
| 8 Oct 20261 week ago | Coffee & snacksOffice | Office | −$180 |
| 6 Oct 20262 weeks ago | Payment · Lume GoodsINV-0435 | Client payment | +$2,800 |
| 4 Oct 20262 weeks ago | NotionSoftware | Software | −$900 |
| 1 Oct 20262 weeks ago | Hotel · Lisbon shootTravel | Travel | −$585 |
| 29 Sep 20263 weeks ago | Payment · Orbit LabsINV-0432 | Client payment | +$4,000 |
| 27 Sep 20263 weeks ago | IllustrationContractors | Contractors | −$1,305 |
| You’ve reached the end · 40 transactions | |||
| Net · 40 transactions | In $57,200 · Out $18,895 | +$38,305 | |
Showing 1–10 of 40
06
Rules & a11y
Pagination choice, screen readersPages, load more or infinite?pick by the job
Pages
Default for data people search and revisitClients, invoices, transactions
Load more
Browsing with some contextActivity, comments
Infinite
Pure browsing, no footer neededGalleries, feeds — rarely in admin
Screen readerssortable headers, announced results
✓<th aria-sort="ascending">Only on the sorted column; others have no aria-sort
✓<button> inside each sortable <th>The name is the column label; the arrow is aria-hidden
✓role="searchbox" + aria-controlsPoints at the table region
✓aria-live on “Showing 1–10 of 60”Announces new results after sort, search or paging
✓<nav aria-label="Pagination">Current page has aria-current="page"
✓aria-busy on the regionWhile loading or fetching more
DO✓Sort numbers and dates by value✓Return to page 1 after sort or search✓Keep sort, search and page in the URL✓Say what was searched when nothing matches✓Move focus to the top of the table after paging
DON’T✕Sort “$9,200” after “$18,500” as text✕Reset the search when people change the page✕Use infinite scroll for data people need to find again✕Hide the total count✕Make only the arrow icon clickable