Tables — ftl-themes components

Editable cells

Every cell state. On touch screens an idle editable cell shows a pencil; on desktop it underlines on hover and focus.

State	Cell	Markup
Idle, editable	Road trip to Lisbon	`td.is-editable`
Editing text		`td.is-editing > .input`
Editing select		`.select`
Editing date		`type="date"`
Editing number		`type="number"`
Editing checkbox	Paid	`.check`
Combobox (native)		`<input list>`
Combobox (popover list)		`[popover]`
Dirty	Road trip to Lisbon (2)	`.is-dirty`
Saving	Road trip to Lisbon (2)	`.is-saving`
Saving (htmx)	Road trip to Lisbon (2)	`.htmx-request`
Saved	Road trip to Lisbon (2)	`.is-saved`
Error	A name is required.	`aria-invalid`
Read-only	Booking ref. TP-20931	`.is-readonly`
Focusable cell	Arrow-key target	`tabindex="0"`

Whole row in edit mode

Trip	Status	Departs	Nights	Paid
Lisbon	Booked	2026-11-04	3	Paid
				Paid
Faro	Planned	2026-11-09	1	Paid

Wide table: scrolls sideways, first column stays

A .table-wrap scrolls the table inside its box; the first column is frozen and gains a shadow edge once scrolled.

Station	Region	Temp	Humidity	Wind	Gusts	Pressure	Rain 24h	Updated
Cabo da Roca	Lisbon	17.2 °C	81%	32 km/h NW	51 km/h	1016 hPa	0.4 mm	09:40
Sagres	Faro	19.8 °C	74%	27 km/h W	44 km/h	1015 hPa	0.0 mm	09:40
Serra da Estrela	Guarda	6.1 °C	92%	48 km/h N	77 km/h	1009 hPa	12.6 mm	09:35
Porto Airport	Porto	15.4 °C	86%	19 km/h SW	30 km/h	1013 hPa	3.1 mm	09:40

Stacked cards on small screens

.table.is-stacked turns each row into a card below the Tablet tier (480px, of its container or the screen). Narrow this window to see it.

Ticket	Subject	Status	Owner	Due
#4821	Can't export invoices to CSV	Pending	Ava Lindqvist	Oct 4
#4820	SSO loop on Safari 18	Open		Oct 3
#4819	Webhook retries never stop after a 410	Closed	Priya Raman	Sep 30

Frozen columns, sticky header

.is-frozen-2 keeps the selection column and the name in view; .is-sticky keeps the header. The top-left cells stay above both.

Select all	SKU	Product	Warehouse	On hand	Reserved	Reorder at	Supplier	Last count
Select	CAB-0042	Cat6 patch cable, 2 m	Leeds	1,204	96	300	Northwind Cabling	Sep 28
Select	PSU-1100	1100 W modular power supply	Leeds	38	12	40	Voltara	Sep 28
Select	SSD-2T-N	2 TB NVMe drive	Bristol	211	40	100	Quanta Storage	Sep 27
Select	FAN-120P	120 mm PWM fan	Bristol	1,880	0	500	Breeze Parts	Sep 27
Select	RAM-32D5	32 GB DDR5 module	Leeds	402	58	150	Kestrel Memory	Sep 26
Select	KVM-04	4-port KVM switch	Glasgow	17	2	10	Northwind Cabling	Sep 25
Select	UPS-1500	1500 VA rack UPS	Glasgow	9	3	8	Voltara	Sep 25

Column resize and reorder

Resize grips on the headers (the Name grip is a focusable separator), a column being dragged, and the drop indicator where it will land.

Name	Artist	Album	Length
Teardrop	Massive Attack	Mezzanine	5:29
Windowlicker	Aphex Twin	Windowlicker	6:07
Hyperballad	Björk	Post	5:21

Row groups with totals

Region / office	Seats	Revenue

Lisbon	48	€412,000
Berlin	112	€1,080,500
Dublin	35	€298,200
Europe total	195	€1,790,700

Toronto	60	€522,300
Austin	90	€801,000
Americas total	150	€1,323,300

Tree rows

Name	Size	Modified
	—	Oct 1
	—	Oct 1
tables.css	14 KB	Oct 2
menus.css	9 KB	Sep 30
	—	Sep 29
core.css	118 KB	Oct 2
README.md	6 KB	Sep 12

Selection column and bulk actions

The .bulk-bar before a table shows while a row in it is selected. Tick or untick a row.

Select all	From	Subject	Received
Select	Marta Silva	Q4 venue shortlist	09:12
Select	Billing	Your invoice INV-20419 is ready	08:47
Select	Jonas Weber	Re: travel policy update	Yesterday

Loading, empty and load-more

Name	Owner	Updated
Placeholder	Placeholder	Placeholder
Placeholder	Placeholder	Placeholder
Placeholder	Placeholder	Placeholder

Name	Owner	Updated
No documents match Clear the filter to see all 214 documents.

Event	Source	Time
Backup completed	nas-01	09:41:20
Certificate renewed	edge-proxy	09:38:02
Loading more events…

Density

Compact	Value
CPU	42%
Memory	7.1 GB

Default	Value
CPU	42%
Memory	7.1 GB

Comfortable	Value
CPU	42%
Memory	7.1 GB

Table in a modal

The modal's header and footer stay put; the table scrolls inside it with a sticky header. Shown in place here with a capped height, and as a real modal.

Ticket	Subject	Status	Owner
#4821	Can't export invoices	Pending	Ava
#4820	SSO loop on Safari	Open	Leo
#4819	Webhook retries	Closed	Priya
#4818	Dark mode contrast	Closed	Sam
#4817	CSV import drops rows	Pending	Ava
#4816	Rate limit too strict	Open	Leo
#4815	Avatar upload fails	Closed	Elena
#4814	Timezone off by one	Pending	Marcus

Month	Orders	Revenue	Refunds	Net	Margin
January	1,204	$48,160	$1,220	$46,940	31%
February	1,118	$44,720	$980	$43,740	30%
March	1,342	$53,680	$1,410	$52,270	32%
April	1,290	$51,600	$1,050	$50,550	31%
May	1,401	$56,040	$1,600	$54,440	33%
June	1,522	$60,880	$1,720	$59,160	34%
July	1,610	$64,400	$1,880	$62,520	34%
August	1,577	$63,080	$1,690	$61,390	33%
September	1,433	$57,320	$1,300	$56,020	32%
October	1,388	$55,520	$1,240	$54,280	32%
November	1,701	$68,040	$2,010	$66,030	35%
December	1,950	$78,000	$2,400	$75,600	36%