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, keyboard
PIN
VIRTUAL
DENSITY
Rendering 22 of 2,000 rows · 1–8 in view
Lume Goods · RebrandLume GoodsOlivia LaneActive$3,000$00%8 Sep 2026
Nova Studio · CampaignNova StudioJon ReyesDone$47,500$17,57537%7 Oct 2026
Atelier Rive · SignageAtelier RiveNoah FischerIn review$47,000$34,78074%5 Nov 2026
Kiln Coffee · MotionKiln CoffeeAlex ReyesOverdue$46,500$51,615111%4 Dec 2026
Orbit Labs · WebsiteOrbit LabsMia HartPaused$46,000$15,18033%2 Jan 2027
Sable · App UISableOlivia LaneActive$45,500$31,85070%31 Jan 2027
Halo Clinic · ReportHalo ClinicJon ReyesDone$45,000$48,150107%1 Mar 2027
Juniper Hotel · PackagingJuniper HotelNoah FischerIn review$44,500$12,90529%1 Oct 2026
Mosaic Press · Brand bookMosaic PressAlex ReyesOverdue$44,000$29,04066%30 Oct 2026
Drift Works · LookbookDrift WorksMia HartPaused$43,500$44,805103%28 Nov 2026
Forma · RebrandFormaOlivia LaneActive$43,000$10,75025%27 Dec 2026
Northwind · CampaignNorthwindJon ReyesDone$42,500$26,35062%25 Jan 2027
Lume Goods · SignageLume GoodsNoah FischerIn review$42,000$41,58099%23 Feb 2027
Nova Studio · MotionNova StudioAlex ReyesOverdue$41,500$8,71521%25 Sep 2026
Atelier Rive · WebsiteAtelier RiveMia HartPaused$41,000$23,78058%24 Oct 2026
Kiln Coffee · App UIKiln CoffeeOlivia LaneActive$40,500$38,47595%22 Nov 2026
Orbit Labs · ReportOrbit LabsJon ReyesDone$40,000$6,80017%21 Dec 2026
Sable · PackagingSableNoah FischerIn review$39,500$21,33054%19 Jan 2027
Halo Clinic · Brand bookHalo ClinicAlex ReyesOverdue$39,000$35,49091%17 Feb 2027
Juniper Hotel · LookbookJuniper HotelMia HartPaused$38,500$5,00513%19 Sep 2026
Mosaic Press · RebrandMosaic PressOlivia LaneActive$38,000$19,00050%18 Oct 2026
Drift Works · CampaignDrift WorksJon ReyesDone$37,500$32,62587%16 Nov 2026
Arrows, Home / End, PgUp / PgDn, Ctrl + Home move between cells · drag a header to move it · drag its edge to resize
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
    Export, move or resize a column — events appear here.
    02

    Variants

    Export, print, visibility, reorder & resize, row order, 10k rows
    ExportCopy 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 · RebrandLume GoodsOlivia LaneActive$3,000$00%8 Sep 2026
    Nova Studio · CampaignNova StudioJon ReyesDone$47,500$17,57537%7 Oct 2026
    Atelier Rive · SignageAtelier RiveNoah FischerIn review$47,000$34,78074%5 Nov 2026
    Kiln Coffee · MotionKiln CoffeeAlex ReyesOverdue$46,500$51,615111%4 Dec 2026
    Orbit Labs · WebsiteOrbit LabsMia HartPaused$46,000$15,18033%2 Jan 2027
    Sable · App UISableOlivia LaneActive$45,500$31,85070%31 Jan 2027
    Halo Clinic · ReportHalo ClinicJon ReyesDone$45,000$48,150107%1 Mar 2027
    Juniper Hotel · PackagingJuniper HotelNoah FischerIn review$44,500$12,90529%1 Oct 2026
    Mosaic Press · Brand bookMosaic PressAlex ReyesOverdue$44,000$29,04066%30 Oct 2026
    Drift Works · LookbookDrift WorksMia HartPaused$43,500$44,805103%28 Nov 2026
    Forma · RebrandFormaOlivia LaneActive$43,000$10,75025%27 Dec 2026
    Northwind · CampaignNorthwindJon ReyesDone$42,500$26,35062%25 Jan 2027
    Lume Goods · SignageLume GoodsNoah FischerIn review$42,000$41,58099%23 Feb 2027
    Nova Studio · MotionNova StudioAlex ReyesOverdue$41,500$8,71521%25 Sep 2026
    Atelier Rive · WebsiteAtelier RiveMia HartPaused$41,000$23,78058%24 Oct 2026
    Kiln Coffee · App UIKiln CoffeeOlivia LaneActive$40,500$38,47595%22 Nov 2026
    Orbit Labs · ReportOrbit LabsJon ReyesDone$40,000$6,80017%21 Dec 2026
    Sable · PackagingSableNoah FischerIn review$39,500$21,33054%19 Jan 2027
    Arrows, Home / End, PgUp / PgDn, Ctrl + Home move between cells · drag a header to move it · drag its edge to resize
    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
    ProjectClientStatusBudgetDue
    Lume Goods · RebrandLume GoodsActive$3,0008 Sep 2026
    Nova Studio · CampaignNova StudioDone$47,5007 Oct 2026
    Atelier Rive · SignageAtelier RiveIn review$47,0005 Nov 2026
    Kiln Coffee · MotionKiln CoffeeOverdue$46,5004 Dec 2026
    Orbit Labs · WebsiteOrbit LabsPaused$46,0002 Jan 2027
    Sable · App UISableActive$45,50031 Jan 2027
    Halo Clinic · ReportHalo ClinicDone$45,0001 Mar 2027
    Juniper Hotel · PackagingJuniper HotelIn review$44,5001 Oct 2026
    Mosaic Press · Brand bookMosaic PressOverdue$44,00030 Oct 2026
    Drift Works · LookbookDrift WorksPaused$43,50028 Nov 2026
    Forma · RebrandFormaActive$43,00027 Dec 2026
    Northwind · CampaignNorthwindDone$42,50025 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 · RebrandLume GoodsOlivia LaneActive$3,000$00%8 Sep 2026
    Nova Studio · CampaignNova StudioJon ReyesDone$47,500$17,57537%7 Oct 2026
    Atelier Rive · SignageAtelier RiveNoah FischerIn review$47,000$34,78074%5 Nov 2026
    Kiln Coffee · MotionKiln CoffeeAlex ReyesOverdue$46,500$51,615111%4 Dec 2026
    Orbit Labs · WebsiteOrbit LabsMia HartPaused$46,000$15,18033%2 Jan 2027
    Sable · App UISableOlivia LaneActive$45,500$31,85070%31 Jan 2027
    Halo Clinic · ReportHalo ClinicJon ReyesDone$45,000$48,150107%1 Mar 2027
    Juniper Hotel · PackagingJuniper HotelNoah FischerIn review$44,500$12,90529%1 Oct 2026
    Mosaic Press · Brand bookMosaic PressAlex ReyesOverdue$44,000$29,04066%30 Oct 2026
    Drift Works · LookbookDrift WorksMia HartPaused$43,500$44,805103%28 Nov 2026
    Forma · RebrandFormaOlivia LaneActive$43,000$10,75025%27 Dec 2026
    Northwind · CampaignNorthwindJon ReyesDone$42,500$26,35062%25 Jan 2027
    Lume Goods · SignageLume GoodsNoah FischerIn review$42,000$41,58099%23 Feb 2027
    Nova Studio · MotionNova StudioAlex ReyesOverdue$41,500$8,71521%25 Sep 2026
    Atelier Rive · WebsiteAtelier RiveMia HartPaused$41,000$23,78058%24 Oct 2026
    Kiln Coffee · App UIKiln CoffeeOlivia LaneActive$40,500$38,47595%22 Nov 2026
    Orbit Labs · ReportOrbit LabsJon ReyesDone$40,000$6,80017%21 Dec 2026
    Sable · PackagingSableNoah FischerIn review$39,500$21,33054%19 Jan 2027
    Arrows, Home / End, PgUp / PgDn, Ctrl + Home move between cells · drag a header to move it · drag its edge to resize
    Reorder & resize columnsdrag headers · Alt + ← → · drag or double-click the edge
    Rendering 18 of 40 rows · 1–4 in view
    Lume Goods · RebrandLume GoodsOlivia LaneActive$3,000$00%8 Sep 2026
    Nova Studio · CampaignNova StudioJon ReyesDone$47,500$17,57537%7 Oct 2026
    Atelier Rive · SignageAtelier RiveNoah FischerIn review$47,000$34,78074%5 Nov 2026
    Kiln Coffee · MotionKiln CoffeeAlex ReyesOverdue$46,500$51,615111%4 Dec 2026
    Orbit Labs · WebsiteOrbit LabsMia HartPaused$46,000$15,18033%2 Jan 2027
    Sable · App UISableOlivia LaneActive$45,500$31,85070%31 Jan 2027
    Halo Clinic · ReportHalo ClinicJon ReyesDone$45,000$48,150107%1 Mar 2027
    Juniper Hotel · PackagingJuniper HotelNoah FischerIn review$44,500$12,90529%1 Oct 2026
    Mosaic Press · Brand bookMosaic PressAlex ReyesOverdue$44,000$29,04066%30 Oct 2026
    Drift Works · LookbookDrift WorksMia HartPaused$43,500$44,805103%28 Nov 2026
    Forma · RebrandFormaOlivia LaneActive$43,000$10,75025%27 Dec 2026
    Northwind · CampaignNorthwindJon ReyesDone$42,500$26,35062%25 Jan 2027
    Lume Goods · SignageLume GoodsNoah FischerIn review$42,000$41,58099%23 Feb 2027
    Nova Studio · MotionNova StudioAlex ReyesOverdue$41,500$8,71521%25 Sep 2026
    Atelier Rive · WebsiteAtelier RiveMia HartPaused$41,000$23,78058%24 Oct 2026
    Kiln Coffee · App UIKiln CoffeeOlivia LaneActive$40,500$38,47595%22 Nov 2026
    Orbit Labs · ReportOrbit LabsJon ReyesDone$40,000$6,80017%21 Dec 2026
    Sable · PackagingSableNoah FischerIn review$39,500$21,33054%19 Jan 2027
    Drag a header to move it, or focus it and press Alt + ← →. Drag a header’s right edge to resize; double-click it to fit; arrows when focused.
    Reorder rowsdrag the ⋮⋮ handle · Alt + ↑ ↓ · Undo
    Rendering 12 of 12 rows · virtualization off
    #1Lume Goods · RebrandOlivia LaneActive8 Sep 2026
    #2Nova Studio · CampaignJon ReyesDone7 Oct 2026
    #3Atelier Rive · SignageNoah FischerIn review5 Nov 2026
    #4Kiln Coffee · MotionAlex ReyesOverdue4 Dec 2026
    #5Orbit Labs · WebsiteMia HartPaused2 Jan 2027
    #6Sable · App UIOlivia LaneActive31 Jan 2027
    #7Halo Clinic · ReportJon ReyesDone1 Mar 2027
    #8Juniper Hotel · PackagingNoah FischerIn review1 Oct 2026
    #9Mosaic Press · Brand bookAlex ReyesOverdue30 Oct 2026
    #10Drift Works · LookbookMia HartPaused28 Nov 2026
    #11Forma · RebrandOlivia LaneActive27 Dec 2026
    #12Northwind · CampaignJon ReyesDone25 Jan 2027
    Drag a row by ⋮⋮, or focus ⋮⋮ and press Alt + ↑ ↓ — Undo is in the toast
    Virtual scroll · 10,000 rowsonly what’s in view is rendered
    Rendering 21 of 10,000 rows · 1–7 in view
    Lume Goods · RebrandLume GoodsOlivia LaneActive$3,000$00%8 Sep 2026
    Nova Studio · CampaignNova StudioJon ReyesDone$47,500$17,57537%7 Oct 2026
    Atelier Rive · SignageAtelier RiveNoah FischerIn review$47,000$34,78074%5 Nov 2026
    Kiln Coffee · MotionKiln CoffeeAlex ReyesOverdue$46,500$51,615111%4 Dec 2026
    Orbit Labs · WebsiteOrbit LabsMia HartPaused$46,000$15,18033%2 Jan 2027
    Sable · App UISableOlivia LaneActive$45,500$31,85070%31 Jan 2027
    Halo Clinic · ReportHalo ClinicJon ReyesDone$45,000$48,150107%1 Mar 2027
    Juniper Hotel · PackagingJuniper HotelNoah FischerIn review$44,500$12,90529%1 Oct 2026
    Mosaic Press · Brand bookMosaic PressAlex ReyesOverdue$44,000$29,04066%30 Oct 2026
    Drift Works · LookbookDrift WorksMia HartPaused$43,500$44,805103%28 Nov 2026
    Forma · RebrandFormaOlivia LaneActive$43,000$10,75025%27 Dec 2026
    Northwind · CampaignNorthwindJon ReyesDone$42,500$26,35062%25 Jan 2027
    Lume Goods · SignageLume GoodsNoah FischerIn review$42,000$41,58099%23 Feb 2027
    Nova Studio · MotionNova StudioAlex ReyesOverdue$41,500$8,71521%25 Sep 2026
    Atelier Rive · WebsiteAtelier RiveMia HartPaused$41,000$23,78058%24 Oct 2026
    Kiln Coffee · App UIKiln CoffeeOlivia LaneActive$40,500$38,47595%22 Nov 2026
    Orbit Labs · ReportOrbit LabsJon ReyesDone$40,000$6,80017%21 Dec 2026
    Sable · PackagingSableNoah FischerIn review$39,500$21,33054%19 Jan 2027
    Halo Clinic · Brand bookHalo ClinicAlex ReyesOverdue$39,000$35,49091%17 Feb 2027
    Juniper Hotel · LookbookJuniper HotelMia HartPaused$38,500$5,00513%19 Sep 2026
    Mosaic Press · RebrandMosaic PressOlivia LaneActive$38,000$19,00050%18 Oct 2026
    Only rows in view are in the DOM — the scrollbar still reflects all 10,000
    03

    States

    Exporting, done, failed, too few columns
    Exportingprogress, 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
    Too few columnsthe last two can’t be hidden
    04

    Behavior

    Persistence, virtualization, printing
    What 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 priorities
    Finance report · Q4Finance columns · export to Excel for accounting
    Rendering 20 of 400 rows · 1–6 in view
    P-00001Lume Goods · RebrandLume Goods$3,000$00%32 h
    P-00002Nova Studio · CampaignNova Studio$47,500$17,57537%500 h
    P-00003Atelier Rive · SignageAtelier Rive$47,000$34,78074%495 h
    P-00004Kiln Coffee · MotionKiln Coffee$46,500$51,615111%489 h
    P-00005Orbit Labs · WebsiteOrbit Labs$46,000$15,18033%484 h
    P-00006Sable · App UISable$45,500$31,85070%479 h
    P-00007Halo Clinic · ReportHalo Clinic$45,000$48,150107%474 h
    P-00008Juniper Hotel · PackagingJuniper Hotel$44,500$12,90529%468 h
    P-00009Mosaic Press · Brand bookMosaic Press$44,000$29,04066%463 h
    P-00010Drift Works · LookbookDrift Works$43,500$44,805103%458 h
    P-00011Forma · RebrandForma$43,000$10,75025%453 h
    P-00012Northwind · CampaignNorthwind$42,500$26,35062%447 h
    P-00013Lume Goods · SignageLume Goods$42,000$41,58099%442 h
    P-00014Nova Studio · MotionNova Studio$41,500$8,71521%437 h
    P-00015Atelier Rive · WebsiteAtelier Rive$41,000$23,78058%432 h
    P-00016Kiln Coffee · App UIKiln Coffee$40,500$38,47595%426 h
    P-00017Orbit Labs · ReportOrbit Labs$40,000$6,80017%421 h
    P-00018Sable · PackagingSable$39,500$21,33054%416 h
    P-00019Halo Clinic · Brand bookHalo Clinic$39,000$35,49091%411 h
    P-00020Juniper Hotel · LookbookJuniper Hotel$38,500$5,00513%405 h
    Finance preset · Export → Excel opens straight in accounting tools
    Backlog prioritiesdrag to rank · priority numbers follow
    Rendering 12 of 12 rows · virtualization off
    #1Orbit Labs · RebrandOlivia LaneActive$28,000
    #2Sable · CampaignJon ReyesDone$27,500
    #3Halo Clinic · SignageNoah FischerIn review$27,000
    #4Juniper Hotel · MotionAlex ReyesOverdue$26,500
    #5Mosaic Press · WebsiteMia HartPaused$26,000
    #6Drift Works · App UIOlivia LaneActive$25,500
    #7Forma · ReportJon ReyesDone$25,000
    #8Northwind · PackagingNoah FischerIn review$24,500
    #9Lume Goods · Brand bookAlex ReyesOverdue$24,000
    #10Nova Studio · LookbookMia HartPaused$23,500
    #11Atelier Rive · RebrandOlivia LaneActive$23,000
    #12Kiln Coffee · CampaignJon ReyesDone$22,500
    Top 3 are this sprint · drag or Alt + ↑ ↓ on ⋮⋮
    06

    Rules & a11y

    Export formats, screen readers
    Which 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