FORMS & TABLES · DATATABLES
Extensions
2,000 projects — export, print, show / hide / reorder / resize columns, pinned columns, row reordering, keyboard cell navigation and virtual scrolling.THEME
01
Playground
2,000 projects — export, columns, pinning, virtualization, keyboardPIN
VIRTUAL
DENSITY
Rendering 22 of 2,000 rows · 1–8 in view
| Lume Goods · Rebrand | Lume Goods | Olivia Lane | Active | $3,000 | $0 | 0% | 8 Sep 2026 |
| Nova Studio · Campaign | Nova Studio | Jon Reyes | Done | $47,500 | $17,575 | 37% | 7 Oct 2026 |
| Atelier Rive · Signage | Atelier Rive | Noah Fischer | In review | $47,000 | $34,780 | 74% | 5 Nov 2026 |
| Kiln Coffee · Motion | Kiln Coffee | Alex Reyes | Overdue | $46,500 | $51,615 | 111% | 4 Dec 2026 |
| Orbit Labs · Website | Orbit Labs | Mia Hart | Paused | $46,000 | $15,180 | 33% | 2 Jan 2027 |
| Sable · App UI | Sable | Olivia Lane | Active | $45,500 | $31,850 | 70% | 31 Jan 2027 |
| Halo Clinic · Report | Halo Clinic | Jon Reyes | Done | $45,000 | $48,150 | 107% | 1 Mar 2027 |
| Juniper Hotel · Packaging | Juniper Hotel | Noah Fischer | In review | $44,500 | $12,905 | 29% | 1 Oct 2026 |
| Mosaic Press · Brand book | Mosaic Press | Alex Reyes | Overdue | $44,000 | $29,040 | 66% | 30 Oct 2026 |
| Drift Works · Lookbook | Drift Works | Mia Hart | Paused | $43,500 | $44,805 | 103% | 28 Nov 2026 |
| Forma · Rebrand | Forma | Olivia Lane | Active | $43,000 | $10,750 | 25% | 27 Dec 2026 |
| Northwind · Campaign | Northwind | Jon Reyes | Done | $42,500 | $26,350 | 62% | 25 Jan 2027 |
| Lume Goods · Signage | Lume Goods | Noah Fischer | In review | $42,000 | $41,580 | 99% | 23 Feb 2027 |
| Nova Studio · Motion | Nova Studio | Alex Reyes | Overdue | $41,500 | $8,715 | 21% | 25 Sep 2026 |
| Atelier Rive · Website | Atelier Rive | Mia Hart | Paused | $41,000 | $23,780 | 58% | 24 Oct 2026 |
| Kiln Coffee · App UI | Kiln Coffee | Olivia Lane | Active | $40,500 | $38,475 | 95% | 22 Nov 2026 |
| Orbit Labs · Report | Orbit Labs | Jon Reyes | Done | $40,000 | $6,800 | 17% | 21 Dec 2026 |
| Sable · Packaging | Sable | Noah Fischer | In review | $39,500 | $21,330 | 54% | 19 Jan 2027 |
| Halo Clinic · Brand book | Halo Clinic | Alex Reyes | Overdue | $39,000 | $35,490 | 91% | 17 Feb 2027 |
| Juniper Hotel · Lookbook | Juniper Hotel | Mia Hart | Paused | $38,500 | $5,005 | 13% | 19 Sep 2026 |
| Mosaic Press · Rebrand | Mosaic Press | Olivia Lane | Active | $38,000 | $19,000 | 50% | 18 Oct 2026 |
| Drift Works · Campaign | Drift Works | Jon Reyes | Done | $37,500 | $32,625 | 87% | 16 Nov 2026 |
NOW SPEAKING
FOCUS“Project, Lume Goods · Rebrand, row 1 of 2,000, column 1 of 8”
COLUMNS“8 columns · drag or Alt + ← → to move”
EXPORT“Nothing exported yet”
ProjectsTable.tsx
1<DataTable
2 caption="Projects" data={projects} // 2,000 rows
3 virtualize={true} rowHeight={52}
4 pinColumns={{ left: ["name"], right: [] }}
5 columns={columns} columnOrder={order}
6 resizableColumns reorderableColumns
7 export={["copy", "csv", "xlsx", "pdf", "print"]}
8 keyboardNavigation="cells"
9 persistLayout="profile"
10/>
EVENT LOG
02
Variants
Export, print, visibility, reorder & resize, row order, 10k rowsExportCopy and CSV run for real · Excel as .xls · PDF via print
Rendering 18 of 40 rows · 1–4 in view
Export
FORMAT
ROWS
COLUMNS
40 rows × 8 columns · ≈ 3 KB · projects-q4.csv
| Lume Goods · Rebrand | Lume Goods | Olivia Lane | Active | $3,000 | $0 | 0% | 8 Sep 2026 |
| Nova Studio · Campaign | Nova Studio | Jon Reyes | Done | $47,500 | $17,575 | 37% | 7 Oct 2026 |
| Atelier Rive · Signage | Atelier Rive | Noah Fischer | In review | $47,000 | $34,780 | 74% | 5 Nov 2026 |
| Kiln Coffee · Motion | Kiln Coffee | Alex Reyes | Overdue | $46,500 | $51,615 | 111% | 4 Dec 2026 |
| Orbit Labs · Website | Orbit Labs | Mia Hart | Paused | $46,000 | $15,180 | 33% | 2 Jan 2027 |
| Sable · App UI | Sable | Olivia Lane | Active | $45,500 | $31,850 | 70% | 31 Jan 2027 |
| Halo Clinic · Report | Halo Clinic | Jon Reyes | Done | $45,000 | $48,150 | 107% | 1 Mar 2027 |
| Juniper Hotel · Packaging | Juniper Hotel | Noah Fischer | In review | $44,500 | $12,905 | 29% | 1 Oct 2026 |
| Mosaic Press · Brand book | Mosaic Press | Alex Reyes | Overdue | $44,000 | $29,040 | 66% | 30 Oct 2026 |
| Drift Works · Lookbook | Drift Works | Mia Hart | Paused | $43,500 | $44,805 | 103% | 28 Nov 2026 |
| Forma · Rebrand | Forma | Olivia Lane | Active | $43,000 | $10,750 | 25% | 27 Dec 2026 |
| Northwind · Campaign | Northwind | Jon Reyes | Done | $42,500 | $26,350 | 62% | 25 Jan 2027 |
| Lume Goods · Signage | Lume Goods | Noah Fischer | In review | $42,000 | $41,580 | 99% | 23 Feb 2027 |
| Nova Studio · Motion | Nova Studio | Alex Reyes | Overdue | $41,500 | $8,715 | 21% | 25 Sep 2026 |
| Atelier Rive · Website | Atelier Rive | Mia Hart | Paused | $41,000 | $23,780 | 58% | 24 Oct 2026 |
| Kiln Coffee · App UI | Kiln Coffee | Olivia Lane | Active | $40,500 | $38,475 | 95% | 22 Nov 2026 |
| Orbit Labs · Report | Orbit Labs | Jon Reyes | Done | $40,000 | $6,800 | 17% | 21 Dec 2026 |
| Sable · Packaging | Sable | Noah Fischer | In review | $39,500 | $21,330 | 54% | 19 Jan 2027 |
Print previewclean page: title, date, page count, no UI chrome
Opens a clean printable copy of these rows in a new window.
Projects · Q4 2026Avava Studio · exported 18 Oct 2026, 09:40
Page 1 of 2| Project | Client | Status | Budget | Due |
|---|---|---|---|---|
| Lume Goods · Rebrand | Lume Goods | Active | $3,000 | 8 Sep 2026 |
| Nova Studio · Campaign | Nova Studio | Done | $47,500 | 7 Oct 2026 |
| Atelier Rive · Signage | Atelier Rive | In review | $47,000 | 5 Nov 2026 |
| Kiln Coffee · Motion | Kiln Coffee | Overdue | $46,500 | 4 Dec 2026 |
| Orbit Labs · Website | Orbit Labs | Paused | $46,000 | 2 Jan 2027 |
| Sable · App UI | Sable | Active | $45,500 | 31 Jan 2027 |
| Halo Clinic · Report | Halo Clinic | Done | $45,000 | 1 Mar 2027 |
| Juniper Hotel · Packaging | Juniper Hotel | In review | $44,500 | 1 Oct 2026 |
| Mosaic Press · Brand book | Mosaic Press | Overdue | $44,000 | 30 Oct 2026 |
| Drift Works · Lookbook | Drift Works | Paused | $43,500 | 28 Nov 2026 |
| Forma · Rebrand | Forma | Active | $43,000 | 27 Dec 2026 |
| Northwind · Campaign | Northwind | Done | $42,500 | 25 Jan 2027 |
Confidential · for internal useavava.studio/projects
Column visibilitypresets · reset · at least 2 visible
Rendering 18 of 40 rows · 1–4 in view
IDhidden
Project#1
Client#2
Owner#3
Status#4
Budget#5
Spent#6
Used#7
Hourshidden
Starthidden
Due#8
| Lume Goods · Rebrand | Lume Goods | Olivia Lane | Active | $3,000 | $0 | 0% | 8 Sep 2026 |
| Nova Studio · Campaign | Nova Studio | Jon Reyes | Done | $47,500 | $17,575 | 37% | 7 Oct 2026 |
| Atelier Rive · Signage | Atelier Rive | Noah Fischer | In review | $47,000 | $34,780 | 74% | 5 Nov 2026 |
| Kiln Coffee · Motion | Kiln Coffee | Alex Reyes | Overdue | $46,500 | $51,615 | 111% | 4 Dec 2026 |
| Orbit Labs · Website | Orbit Labs | Mia Hart | Paused | $46,000 | $15,180 | 33% | 2 Jan 2027 |
| Sable · App UI | Sable | Olivia Lane | Active | $45,500 | $31,850 | 70% | 31 Jan 2027 |
| Halo Clinic · Report | Halo Clinic | Jon Reyes | Done | $45,000 | $48,150 | 107% | 1 Mar 2027 |
| Juniper Hotel · Packaging | Juniper Hotel | Noah Fischer | In review | $44,500 | $12,905 | 29% | 1 Oct 2026 |
| Mosaic Press · Brand book | Mosaic Press | Alex Reyes | Overdue | $44,000 | $29,040 | 66% | 30 Oct 2026 |
| Drift Works · Lookbook | Drift Works | Mia Hart | Paused | $43,500 | $44,805 | 103% | 28 Nov 2026 |
| Forma · Rebrand | Forma | Olivia Lane | Active | $43,000 | $10,750 | 25% | 27 Dec 2026 |
| Northwind · Campaign | Northwind | Jon Reyes | Done | $42,500 | $26,350 | 62% | 25 Jan 2027 |
| Lume Goods · Signage | Lume Goods | Noah Fischer | In review | $42,000 | $41,580 | 99% | 23 Feb 2027 |
| Nova Studio · Motion | Nova Studio | Alex Reyes | Overdue | $41,500 | $8,715 | 21% | 25 Sep 2026 |
| Atelier Rive · Website | Atelier Rive | Mia Hart | Paused | $41,000 | $23,780 | 58% | 24 Oct 2026 |
| Kiln Coffee · App UI | Kiln Coffee | Olivia Lane | Active | $40,500 | $38,475 | 95% | 22 Nov 2026 |
| Orbit Labs · Report | Orbit Labs | Jon Reyes | Done | $40,000 | $6,800 | 17% | 21 Dec 2026 |
| Sable · Packaging | Sable | Noah Fischer | In review | $39,500 | $21,330 | 54% | 19 Jan 2027 |
Reorder & resize columnsdrag headers · Alt + ← → · drag or double-click the edge
Rendering 18 of 40 rows · 1–4 in view
| Lume Goods · Rebrand | Lume Goods | Olivia Lane | Active | $3,000 | $0 | 0% | 8 Sep 2026 |
| Nova Studio · Campaign | Nova Studio | Jon Reyes | Done | $47,500 | $17,575 | 37% | 7 Oct 2026 |
| Atelier Rive · Signage | Atelier Rive | Noah Fischer | In review | $47,000 | $34,780 | 74% | 5 Nov 2026 |
| Kiln Coffee · Motion | Kiln Coffee | Alex Reyes | Overdue | $46,500 | $51,615 | 111% | 4 Dec 2026 |
| Orbit Labs · Website | Orbit Labs | Mia Hart | Paused | $46,000 | $15,180 | 33% | 2 Jan 2027 |
| Sable · App UI | Sable | Olivia Lane | Active | $45,500 | $31,850 | 70% | 31 Jan 2027 |
| Halo Clinic · Report | Halo Clinic | Jon Reyes | Done | $45,000 | $48,150 | 107% | 1 Mar 2027 |
| Juniper Hotel · Packaging | Juniper Hotel | Noah Fischer | In review | $44,500 | $12,905 | 29% | 1 Oct 2026 |
| Mosaic Press · Brand book | Mosaic Press | Alex Reyes | Overdue | $44,000 | $29,040 | 66% | 30 Oct 2026 |
| Drift Works · Lookbook | Drift Works | Mia Hart | Paused | $43,500 | $44,805 | 103% | 28 Nov 2026 |
| Forma · Rebrand | Forma | Olivia Lane | Active | $43,000 | $10,750 | 25% | 27 Dec 2026 |
| Northwind · Campaign | Northwind | Jon Reyes | Done | $42,500 | $26,350 | 62% | 25 Jan 2027 |
| Lume Goods · Signage | Lume Goods | Noah Fischer | In review | $42,000 | $41,580 | 99% | 23 Feb 2027 |
| Nova Studio · Motion | Nova Studio | Alex Reyes | Overdue | $41,500 | $8,715 | 21% | 25 Sep 2026 |
| Atelier Rive · Website | Atelier Rive | Mia Hart | Paused | $41,000 | $23,780 | 58% | 24 Oct 2026 |
| Kiln Coffee · App UI | Kiln Coffee | Olivia Lane | Active | $40,500 | $38,475 | 95% | 22 Nov 2026 |
| Orbit Labs · Report | Orbit Labs | Jon Reyes | Done | $40,000 | $6,800 | 17% | 21 Dec 2026 |
| Sable · Packaging | Sable | Noah Fischer | In review | $39,500 | $21,330 | 54% | 19 Jan 2027 |
Reorder rowsdrag the ⋮⋮ handle · Alt + ↑ ↓ · Undo
Rendering 12 of 12 rows · virtualization off
| #1 | Lume Goods · Rebrand | Olivia Lane | Active | 8 Sep 2026 | |
| #2 | Nova Studio · Campaign | Jon Reyes | Done | 7 Oct 2026 | |
| #3 | Atelier Rive · Signage | Noah Fischer | In review | 5 Nov 2026 | |
| #4 | Kiln Coffee · Motion | Alex Reyes | Overdue | 4 Dec 2026 | |
| #5 | Orbit Labs · Website | Mia Hart | Paused | 2 Jan 2027 | |
| #6 | Sable · App UI | Olivia Lane | Active | 31 Jan 2027 | |
| #7 | Halo Clinic · Report | Jon Reyes | Done | 1 Mar 2027 | |
| #8 | Juniper Hotel · Packaging | Noah Fischer | In review | 1 Oct 2026 | |
| #9 | Mosaic Press · Brand book | Alex Reyes | Overdue | 30 Oct 2026 | |
| #10 | Drift Works · Lookbook | Mia Hart | Paused | 28 Nov 2026 | |
| #11 | Forma · Rebrand | Olivia Lane | Active | 27 Dec 2026 | |
| #12 | Northwind · Campaign | Jon Reyes | Done | 25 Jan 2027 |
Virtual scroll · 10,000 rowsonly what’s in view is rendered
Rendering 21 of 10,000 rows · 1–7 in view
| Lume Goods · Rebrand | Lume Goods | Olivia Lane | Active | $3,000 | $0 | 0% | 8 Sep 2026 |
| Nova Studio · Campaign | Nova Studio | Jon Reyes | Done | $47,500 | $17,575 | 37% | 7 Oct 2026 |
| Atelier Rive · Signage | Atelier Rive | Noah Fischer | In review | $47,000 | $34,780 | 74% | 5 Nov 2026 |
| Kiln Coffee · Motion | Kiln Coffee | Alex Reyes | Overdue | $46,500 | $51,615 | 111% | 4 Dec 2026 |
| Orbit Labs · Website | Orbit Labs | Mia Hart | Paused | $46,000 | $15,180 | 33% | 2 Jan 2027 |
| Sable · App UI | Sable | Olivia Lane | Active | $45,500 | $31,850 | 70% | 31 Jan 2027 |
| Halo Clinic · Report | Halo Clinic | Jon Reyes | Done | $45,000 | $48,150 | 107% | 1 Mar 2027 |
| Juniper Hotel · Packaging | Juniper Hotel | Noah Fischer | In review | $44,500 | $12,905 | 29% | 1 Oct 2026 |
| Mosaic Press · Brand book | Mosaic Press | Alex Reyes | Overdue | $44,000 | $29,040 | 66% | 30 Oct 2026 |
| Drift Works · Lookbook | Drift Works | Mia Hart | Paused | $43,500 | $44,805 | 103% | 28 Nov 2026 |
| Forma · Rebrand | Forma | Olivia Lane | Active | $43,000 | $10,750 | 25% | 27 Dec 2026 |
| Northwind · Campaign | Northwind | Jon Reyes | Done | $42,500 | $26,350 | 62% | 25 Jan 2027 |
| Lume Goods · Signage | Lume Goods | Noah Fischer | In review | $42,000 | $41,580 | 99% | 23 Feb 2027 |
| Nova Studio · Motion | Nova Studio | Alex Reyes | Overdue | $41,500 | $8,715 | 21% | 25 Sep 2026 |
| Atelier Rive · Website | Atelier Rive | Mia Hart | Paused | $41,000 | $23,780 | 58% | 24 Oct 2026 |
| Kiln Coffee · App UI | Kiln Coffee | Olivia Lane | Active | $40,500 | $38,475 | 95% | 22 Nov 2026 |
| Orbit Labs · Report | Orbit Labs | Jon Reyes | Done | $40,000 | $6,800 | 17% | 21 Dec 2026 |
| Sable · Packaging | Sable | Noah Fischer | In review | $39,500 | $21,330 | 54% | 19 Jan 2027 |
| Halo Clinic · Brand book | Halo Clinic | Alex Reyes | Overdue | $39,000 | $35,490 | 91% | 17 Feb 2027 |
| Juniper Hotel · Lookbook | Juniper Hotel | Mia Hart | Paused | $38,500 | $5,005 | 13% | 19 Sep 2026 |
| Mosaic Press · Rebrand | Mosaic Press | Olivia Lane | Active | $38,000 | $19,000 | 50% | 18 Oct 2026 |
03
States
Exporting, done, failed, too few columnsExportingprogress, not a frozen button
Preparing 2,000 rows…CSV · ~180 KB
Donename the file, offer it again
✓ projects-q4.csv · 182 KBSaved to Downloads
Failednothing half-downloaded; offer Retry
Export failed — nothing was downloadedThe server timed out after 30 s
Too few columnsthe last two can’t be hidden
Keep at least 2 columns visibleUnchecking “Project” was undone
04
Behavior
Persistence, virtualization, printingWhat is rememberedper person, per table
Visible columnsProfile — follows you across devices
Order & widthsProfile; “Reset to default” clears it
Scroll positionSession only
Export optionsLast format and columns are pre-selected
Virtualizationfast, with two catches
DOMOnly rows in view + 6 above and 12 below
⌘FCan’t find rows that aren’t rendered — offer search or “Jump to row”
Screen readersaria-rowcount = total; aria-rowindex on each row
Row heightFixed per density so the scrollbar stays honest
Printingpaper is not a screen
RemovedToolbar, checkboxes, hover, pinned shadows
AddedTitle, date, row count, page numbers
RowsAll selected rows, not just the ones in view
Long tablesRepeat the header on every page
05
In Avava
Finance report, backlog prioritiesFinance report · Q4Finance columns · export to Excel for accounting
Rendering 20 of 400 rows · 1–6 in view
| P-00001 | Lume Goods · Rebrand | Lume Goods | $3,000 | $0 | 0% | 32 h |
| P-00002 | Nova Studio · Campaign | Nova Studio | $47,500 | $17,575 | 37% | 500 h |
| P-00003 | Atelier Rive · Signage | Atelier Rive | $47,000 | $34,780 | 74% | 495 h |
| P-00004 | Kiln Coffee · Motion | Kiln Coffee | $46,500 | $51,615 | 111% | 489 h |
| P-00005 | Orbit Labs · Website | Orbit Labs | $46,000 | $15,180 | 33% | 484 h |
| P-00006 | Sable · App UI | Sable | $45,500 | $31,850 | 70% | 479 h |
| P-00007 | Halo Clinic · Report | Halo Clinic | $45,000 | $48,150 | 107% | 474 h |
| P-00008 | Juniper Hotel · Packaging | Juniper Hotel | $44,500 | $12,905 | 29% | 468 h |
| P-00009 | Mosaic Press · Brand book | Mosaic Press | $44,000 | $29,040 | 66% | 463 h |
| P-00010 | Drift Works · Lookbook | Drift Works | $43,500 | $44,805 | 103% | 458 h |
| P-00011 | Forma · Rebrand | Forma | $43,000 | $10,750 | 25% | 453 h |
| P-00012 | Northwind · Campaign | Northwind | $42,500 | $26,350 | 62% | 447 h |
| P-00013 | Lume Goods · Signage | Lume Goods | $42,000 | $41,580 | 99% | 442 h |
| P-00014 | Nova Studio · Motion | Nova Studio | $41,500 | $8,715 | 21% | 437 h |
| P-00015 | Atelier Rive · Website | Atelier Rive | $41,000 | $23,780 | 58% | 432 h |
| P-00016 | Kiln Coffee · App UI | Kiln Coffee | $40,500 | $38,475 | 95% | 426 h |
| P-00017 | Orbit Labs · Report | Orbit Labs | $40,000 | $6,800 | 17% | 421 h |
| P-00018 | Sable · Packaging | Sable | $39,500 | $21,330 | 54% | 416 h |
| P-00019 | Halo Clinic · Brand book | Halo Clinic | $39,000 | $35,490 | 91% | 411 h |
| P-00020 | Juniper Hotel · Lookbook | Juniper Hotel | $38,500 | $5,005 | 13% | 405 h |
Backlog prioritiesdrag to rank · priority numbers follow
Rendering 12 of 12 rows · virtualization off
| #1 | Orbit Labs · Rebrand | Olivia Lane | Active | $28,000 | |
| #2 | Sable · Campaign | Jon Reyes | Done | $27,500 | |
| #3 | Halo Clinic · Signage | Noah Fischer | In review | $27,000 | |
| #4 | Juniper Hotel · Motion | Alex Reyes | Overdue | $26,500 | |
| #5 | Mosaic Press · Website | Mia Hart | Paused | $26,000 | |
| #6 | Drift Works · App UI | Olivia Lane | Active | $25,500 | |
| #7 | Forma · Report | Jon Reyes | Done | $25,000 | |
| #8 | Northwind · Packaging | Noah Fischer | In review | $24,500 | |
| #9 | Lume Goods · Brand book | Alex Reyes | Overdue | $24,000 | |
| #10 | Nova Studio · Lookbook | Mia Hart | Paused | $23,500 | |
| #11 | Atelier Rive · Rebrand | Olivia Lane | Active | $23,000 | |
| #12 | Kiln Coffee · Campaign | Jon Reyes | Done | $22,500 |
06
Rules & a11y
Export formats, screen readersWhich export?by who opens the file
CSV
Data people will processImports, scripts, other tools
Excel
Accountants and managersOpens with columns intact
PDF
Sharing a fixed snapshotClients, archives
Copy
Quick paste into docs or chatA few rows, right now
Screen readersannounce changes people can’t see
✓aria-rowcount / aria-rowindexVirtual rows still report their real position
✓aria-colindex on cellsStays correct after columns move or hide
✓Live: “Column Budget moved to position 3”Moves and resizes are announced
✓Resize handle: role="separator"Focusable; ← → resize, Enter fits
✓Row handle: Alt + ↑ ↓Every drag has a keyboard twin
DO✓Export what people see: filters, order and visible columns✓Show progress and name the file when it’s done✓Keep a keyboard way for every drag✓Remember column layout per person✓Keep the first column pinned on wide tables
DON’T✕Export 100k rows without warning✕Let people hide every column✕Rely on ⌘F in a virtual list✕Print the toolbar and hover states✕Reorder rows without Undo