FORMS & TABLES · DATATABLES

Editable datatable

Edit the studio price list in place — cell, row or spreadsheet mode, instant or batch save, validation, paste from Excel, undo / redo, conflicts and rollback.

THEME

Playground

40 studio services — edit mode, save mode, validation, rollback

EDIT

SAVE

DENSITY

Make the next save fail

All changes saved

Service	Category	Price	Hours	Rate	Tags	Updated
Brand strategy workshop	Branding	$2,400	25 h	$96/h	strategy	18 Oct 2026
Logo design	Branding	$3,200	34 h	$94/h	logocore	11 Sep 2026
Visual identity system	Branding	$9,800	103 h	$95/h	identitycore	5 Aug 2026
Brand guidelines	Branding	$4,200	44 h	$95/h	guides	29 Jun 2026
Packaging design · per SKU	Packaging	$850	9 h	$94/h	retail	23 May 2026
Label refresh	Packaging	$620	7 h	$89/h	retail	16 Apr 2026
Website design · 5 pages	Web	$7,400	78 h	$95/h	webcore	10 Mar 2026
Landing page	Web	$2,100	22 h	$95/h	web	1 Feb 2026
UX audit	Web	$1,800	19 h	$95/h	ux	22 Sep 2026
Design system starter	Web	$6,200	65 h	$95/h	uisystem	16 Aug 2026
Social media kit	Branding	$1,400	15 h	$93/h	social	10 Jul 2026
Motion logo	Motion	$1,600	17 h	$94/h	motion	3 Jun 2026
Explainer video · 60 s	Motion	$5,400	57 h	$95/h	video	27 Apr 2026
Product photography · half day	Photo	$1,900	20 h	$95/h	photo	21 Mar 2026
Lookbook shoot	Photo	$4,600	48 h	$96/h	photofashion	12 Feb 2026
Print collateral	Print	$980	10 h	$98/h	print	3 Oct 2026
Annual report layout	Print	$5,200	55 h	$95/h	printreport	27 Aug 2026
Signage system	Print	$7,800	82 h	$95/h	wayfinding	21 Jul 2026
Copywriting · web	Web	$1,500	16 h	$94/h	copy	14 Jun 2026
Naming	Branding	$2,800	29 h	$97/h	strategy	8 May 2026
Brand strategy workshop · Pro	Branding	$3,840	40 h	$96/h	strategy	1 Apr 2026
Logo design · Pro	Branding	$5,120	54 h	$95/h	logocore	23 Feb 2026
Visual identity system · Pro	Branding	$15,680	165 h	$95/h	identitycore	14 Oct 2026
Brand guidelines · Pro	Branding	$6,720	71 h	$95/h	guides	7 Sep 2026
Packaging design · per SKU · Pro	Packaging	$1,360	14 h	$97/h	retail	1 Aug 2026
Label refresh · Pro	Packaging	$990	10 h	$99/h	retail	25 Jun 2026
Website design · 5 pages · Pro	Web	$11,840	125 h	$95/h	webcore	19 May 2026
Landing page · Pro	Web	$3,360	35 h	$96/h	web	12 Apr 2026
UX audit · Pro	Web	$2,880	30 h	$96/h	ux	6 Mar 2026
Design system starter · Pro	Web	$9,920	104 h	$95/h	uisystem	28 Jan 2026
Social media kit · Pro	Branding	$2,240	24 h	$93/h	social	18 Sep 2026
Motion logo · Pro	Motion	$2,560	27 h	$95/h	motion	12 Aug 2026
Explainer video · 60 s · Pro	Motion	$8,640	91 h	$95/h	video	6 Jul 2026
Product photography · half day · Pro	Photo	$3,040	32 h	$95/h	photo	30 May 2026
Lookbook shoot · Pro	Photo	$7,360	77 h	$96/h	photofashion	23 Apr 2026
Print collateral · Pro	Print	$1,570	17 h	$92/h	print	17 Mar 2026
Annual report layout · Pro	Print	$8,320	88 h	$95/h	printreport	8 Feb 2026
Signage system · Pro	Print	$12,480	131 h	$95/h	wayfinding	29 Sep 2026
Copywriting · web · Pro	Web	$2,400	25 h	$96/h	copy	23 Aug 2026
Naming · Pro	Branding	$4,480	47 h	$95/h	strategy	17 Jul 2026

Click a cell to select, click again or press Enter to edit · Esc cancels

NOW SPEAKING

CELL“Service, Brand strategy workshop, editable, row 1 of 40”

STATUS“All changes saved”

ERROR“No errors”

PriceList.tsx

1<DataTable

2 caption="Studio price list" data={services}

3 editable={{ mode: "cell", save: "instant" }}

4 columns={[

5 { key: "price", type: "money", min: 0, required: true },

6 { key: "rate", compute: r => r.price / r.hours },

7 …

8 ]}

9 onSave={saveCells} onConflict={resolve}

10 undo

11/>

EVENT LOG

Edit a cell — saves, errors and undo appear here.

Variants

Keyboard, paste, add, delete, changed cells, computed

Spreadsheet keyboardclick a cell, then use the keys — typing starts editing

← → ↑ ↓moveEnter / F2edit · save + downTabsave + rightEsccancelTypereplace (spreadsheet)⌘Z / ⇧⌘Zundo / redo

All changes saved

Service	Category	Price	Hours	Rate
Brand strategy workshop	Branding	$2,400	25 h	$96/h
Logo design	Branding	$3,200	34 h	$94/h
Visual identity system	Branding	$9,800	103 h	$95/h
Brand guidelines	Branding	$4,200	44 h	$95/h
Packaging design · per SKU	Packaging	$850	9 h	$94/h
Label refresh	Packaging	$620	7 h	$89/h

Arrows move · type to replace · Enter / F2 to edit · ⌘Z undo

Paste from Excelselect a cell, paste a block — bad values are flagged, not saved

All changes saved

Service	Category	Price	Hours	Rate
Brand strategy workshop	Branding	$2,400	25 h	$96/h
Logo design	Branding	$3,200	34 h	$94/h
Visual identity system	Branding	$9,800	103 h	$95/h
Brand guidelines	Branding	$4,200	44 h	$95/h
Packaging design · per SKU	Packaging	$850	9 h	$94/h
Label refresh	Packaging	$620	7 h	$89/h

Select a cell, then ⌘V a block from Excel — or press “Simulate paste” (the price “abc” is rejected)

Add a rowa new row opens in edit mode

All changes saved

Service	Category	Price	Hours	Rate
Brand strategy workshop	Branding	$2,400	25 h	$96/h
Logo design	Branding	$3,200	34 h	$94/h
Visual identity system	Branding	$9,800	103 h	$95/h

Click a cell to select, click again or press Enter to edit · Esc cancels

Delete with Undo× on a row · Undo in the toast

All changes saved

Service	Category	Price	Hours	Rate
Website design · 5 pages	Web	$7,400	78 h	$95/h
Landing page	Web	$2,100	22 h	$95/h
UX audit	Web	$1,800	19 h	$95/h
Design system starter	Web	$6,200	65 h	$95/h
Social media kit	Branding	$1,400	15 h	$93/h

Click a cell to select, click again or press Enter to edit · Esc cancels

Changed cellsbatch mode · dot + “was → now” on hover

3 unsaved changes

Service	Category	Price	Hours	Rate
Motion logo	Motion	$1,900	17 h	$112/h
Explainer video · 60 s	Motion	$5,400	57 h	$95/h
Explainer video · 90 s	Photo	$6,800	20 h	$340/h
Lookbook shoot	Photo	$4,600	48 h	$96/h
Print collateral	Print	$980	10 h	$98/h
Annual report layout	Print	$5,200	55 h	$95/h

Click a cell to select, click again or press Enter to edit · Esc cancels

Computed columnsQty × Price = Total · totals update live

All changes saved

Item	Qty	Price	Total
Logo design	1	$3,200	$3,200
Brand guidelines	1	$4,200	$4,200
Packaging · per SKU	6	$850	$5,100
Social media kit	2	$1,400	$2,800
Subtotal · VAT 19% · Total	10	$2,907	$18,207

Change Qty or Price — Total, VAT and the grand total recalculate

States

Saving, saved, error, conflict, read-only

Savingspinner in the cell; input stays readable

Service	Category	Price
Brand strategy workshop	Branding	$2,400
Logo design	Branding	$3,200
Visual identity system	Branding	$9,800

Saveda short green flash, then nothing

Service	Category	Price
Brand strategy workshop	Branding	$2,400
Logo design	Branding	$3,200
Visual identity system	Branding	$9,800

Invalidsay why in the cell; don’t save

Service	Category	Price
Brand strategy workshop	Branding	$2,400
Logo design	Branding	$3,200Price must be at least $0
Visual identity system	Branding	$9,800

Conflictsomeone else changed it — let people choose

Price for “Logo design” was changed by Alex Reyes 2 min ago: theirs $3,400, yours $3,600.

Service	Category	Price
Brand strategy workshop	Branding	$2,400
Logo design	Branding	$3,200
Visual identity system	Branding	$9,800

Read-onlyno edit rights: no pencils, no inputs

Read-only — you don’t have edit rights

Service	Category	Price
Brand strategy workshop	Branding	$2,400
Logo design	Branding	$3,200
Visual identity system	Branding	$9,800

Behavior

Instant vs batch, leaving, focus

Instant or batch?pick by risk

InstantEach cell saves on its own, optimistically. Best for low-risk fields people fix one at a time — show a spinner, a short “saved” flash, and roll back with Retry on failure.

BatchEdits collect as pending with a count, Save all and Discard. Best for prices, budgets and anything people change in sets and want to review first.

Leaving with unsaved changestry it after editing the playground in Batch mode

Switch the playground to Batch and change a price first.

Focus ruleswhere focus goes

After saveStays on the cell; Enter moves down, Tab moves right

After cancelBack to the cell, value restored

After errorStays in the input with the message under it

After addThe first cell of the new row opens for typing

After deleteThe row below — and Undo in the toast

In Avava

Price list, timesheet

Studio price listbatch save · categories · rate per hour

All changes saved

Service	Category	Price	Hours	Rate
Brand strategy workshop	Branding	$2,400	25 h	$96/h
Logo design	Branding	$3,200	34 h	$94/h
Visual identity system	Branding	$9,800	103 h	$95/h
Brand guidelines	Branding	$4,200	44 h	$95/h
Packaging design · per SKU	Packaging	$850	9 h	$94/h
Label refresh	Packaging	$620	7 h	$89/h
Website design · 5 pages	Web	$7,400	78 h	$95/h
Landing page	Web	$2,100	22 h	$95/h
UX audit	Web	$1,800	19 h	$95/h
Design system starter	Web	$6,200	65 h	$95/h
Social media kit	Branding	$1,400	15 h	$93/h
Motion logo	Motion	$1,600	17 h	$94/h
Explainer video · 60 s	Motion	$5,400	57 h	$95/h
Product photography · half day	Photo	$1,900	20 h	$95/h
Lookbook shoot	Photo	$4,600	48 h	$96/h
Print collateral	Print	$980	10 h	$98/h
Annual report layout	Print	$5,200	55 h	$95/h
Signage system	Print	$7,800	82 h	$95/h
Copywriting · web	Web	$1,500	16 h	$94/h
Naming	Branding	$2,800	29 h	$97/h
Brand strategy workshop · Pro	Branding	$3,840	40 h	$96/h
Logo design · Pro	Branding	$5,120	54 h	$95/h
Visual identity system · Pro	Branding	$15,680	165 h	$95/h
Brand guidelines · Pro	Branding	$6,720	71 h	$95/h
Packaging design · per SKU · Pro	Packaging	$1,360	14 h	$97/h
Label refresh · Pro	Packaging	$990	10 h	$99/h
Website design · 5 pages · Pro	Web	$11,840	125 h	$95/h
Landing page · Pro	Web	$3,360	35 h	$96/h
UX audit · Pro	Web	$2,880	30 h	$96/h
Design system starter · Pro	Web	$9,920	104 h	$95/h
Social media kit · Pro	Branding	$2,240	24 h	$93/h
Motion logo · Pro	Motion	$2,560	27 h	$95/h
Explainer video · 60 s · Pro	Motion	$8,640	91 h	$95/h
Product photography · half day · Pro	Photo	$3,040	32 h	$95/h
Lookbook shoot · Pro	Photo	$7,360	77 h	$96/h
Print collateral · Pro	Print	$1,570	17 h	$92/h
Annual report layout · Pro	Print	$8,320	88 h	$95/h
Signage system · Pro	Print	$12,480	131 h	$95/h
Copywriting · web · Pro	Web	$2,400	25 h	$96/h
Naming · Pro	Branding	$4,480	47 h	$95/h

Batch: edits collect until Save — try changing a few prices

Timesheet · this weekgrid mode · row and day totals · over 8 h in coral

All changes saved

Project	Mon	Tue	Wed	Thu	Fri	Total
Lume rebrand	3 h	4 h	5 h	3 h	4 h	19 h
Nova spring campaign	3 h	4 h	2 h	3 h	4 h	16 h
Atelier brand book	3 h	1 h	2 h	3 h	1 h	10 h
Juniper hotel identity	2 h	3 h	4 h	2 h	3 h	14 h
Internal · admin	2 h	3 h	1 h	2 h	3 h	11 h
Day total	13 h	15 h	14 h	13 h	15 h	70 h

Type numbers straight into the grid · days over 8 h and weeks over 40 h turn coral

Rules & a11y

Cell vs form, screen readers

In the cell or in a form?pick by size of the edit

Cell

1–2 fields, quick fixesPrice, status, owner

Row

Several related fields togetherName + category + price

Form

Long text, files, many rulesDescriptions, contracts

Screen readersgrid semantics and announcements

✓<table role="grid">Cells are gridcell with one roving tabindex

✓aria-readonly on calculated cellsPencil / fx icons are aria-hidden

✓aria-invalid + role="alert" messageThe message sits in the cell, next to the value

✓Status in aria-live“Saving…”, “All changes saved”, “3 unsaved changes”

✓Esc always restoresNothing is lost by trying

DO✓Save on Enter, Tab or leaving the cell✓Roll back clearly — and offer Retry✓Mark changed cells until they’re saved✓Validate in the cell and say how to fix it✓Support ⌘Z for every edit

DON’T✕Lose what someone typed on an error✕Make calculated columns look editable✕Save silently with no “saved” feedback✕Overwrite a teammate’s change without asking✕Trap Tab inside the grid forever