Table

Data table with sortable columns, row selection, and rich cell types — including avatars, badges, progress bars, avatar groups, file icons, and action buttons. Pass column definitions and row data; the table handles selection state internally.

Team members

Enable selectable for row checkboxes. Header checkbox toggles all rows. Demonstrates AvatarCell, BadgeCell with dot, TextCell, BadgesCell, and ActionIconsCell.

previewcode

Team members

100 users

	Name	Status	Role	Email address	Teams
	Olivia Rhye@olivia	Active	Product Designer	olivia@dennisisaac.com	Design Product Marketing +4
	Phoenix Baker@phoenix	Active	Product Manager	phoenix@dennisisaac.com	Design Product Marketing +4
	Lana Steiner@lana	Active	Frontend Developer	lana@dennisisaac.com	Design Product Marketing +4
	Demi Wilkinson@demi	Active	Backend Developer	demi@dennisisaac.com	Design Product Marketing +4
	CW Candice Wu@candice	Active	Fullstack Developer	candice@dennisisaac.com	Design Product Marketing +4
	NC Natali Craig@natali	Active	UX Designer	natali@dennisisaac.com	Design Product Marketing +4

Customers

Demonstrates AvatarGroupCell for overlapping user stacks with overflow count, and ProgressCell for licence usage. The action column uses ActionDropdownCell (3-dot icon).

previewcode

Customers

These companies have purchased in the last 12 months.

Company	Status	About	Users	License use
CA Catalogcatalogapp.io	Customer	Content curating appBrings all your news into one place	DW CW +5	70%
CI Circoolesgetcircooles.com	Churned	Design softwareSuper lightweight design app	KJ MP +8	60%
CO Command+Rcmdr.ai	Customer	Data predictionAI and machine learning data	RK TL +2	30%
HO Hourglasshourglass.app	Customer	Productivity appTime management and productivity	PH QI	80%
LA Layersgetlayers.io	Churned	Web app integrationsConnect web apps seamlessly	JM KN +1	20%
QU Quotientquotient.co	Customer	Sales CRMWeb-based sales doc management	AB CD +6	10%
SI Sisyphussisyphus.com	Customer	Automation and workflowInvoicing and expenses	QR ST +4	40%

Invoices

Status badge colours change per value. The action column uses TextActionCell for inline text links — pass isPrimary: true to highlight a specific action in the primary colour.

previewcode

Invoices

	Invoice	Date	Status	Customer	Purchase
	#3066	Jan 6, 2025	Paid	Olivia Rhyeolivia@dennisisaac.com	Monthly subscription	ArchiveDownload
	#3065	Jan 6, 2025	Paid	Phoenix Bakerphoenix@dennisisaac.com	Monthly subscription	ArchiveDownload
	#3064	Jan 6, 2025	Paid	LS Lana Steinerlana@dennisisaac.com	Monthly subscription	ArchiveDownload
	#3063	Jan 5, 2025	Paid	DW Demi Wilkinsondemi@dennisisaac.com	Monthly subscription	ArchiveDownload
	#3062	Jan 5, 2025	Refunded	Candice Wucandice@dennisisaac.com	Monthly subscription	ArchiveDownload
	#3061	Jan 5, 2025	Paid	NC Natali Craignatali@dennisisaac.com	Monthly subscription	ArchiveDownload
	#3060	Jan 4, 2025	Cancelled	Drew Canodrew@dennisisaac.com	Monthly subscription	ArchiveDownload

Striped rows

Add striped to alternate odd-row backgrounds. The table header becomes white to stay visually distinct from the tinted rows.

previewcode

Team members

100 users

	Name	Status	Role	Email address	Teams
	Olivia Rhye@olivia	Active	Product Designer	olivia@dennisisaac.com	Design Product Marketing +4
	Phoenix Baker@phoenix	Active	Product Manager	phoenix@dennisisaac.com	Design Product Marketing +4
	Lana Steiner@lana	Active	Frontend Developer	lana@dennisisaac.com	Design Product Marketing +4
	Demi Wilkinson@demi	Active	Backend Developer	demi@dennisisaac.com	Design Product Marketing +4
	CW Candice Wu@candice	Active	Fullstack Developer	candice@dennisisaac.com	Design Product Marketing +4
	NC Natali Craig@natali	Active	UX Designer	natali@dennisisaac.com	Design Product Marketing +4