Data

Table

Composes native table markup inside a named scroll region; the application owns its records and calculations.

idle

Usage

import {
	Table,
	TableBody,
	TableCaption,
	TableCell,
	TableContainer,
	TableHead,
	TableHeader,
	TableRow,
} from "@mizen-labs/ui";

Anatomy

The parts and how they nest, taken from the preview above.

<TableContainer>
	<Table>
		<TableCaption />
		<TableHeader>
			<TableRow>
				<TableHead />
			</TableRow>
		</TableHeader>
		<TableBody>
			<TableRow>
				<TableHead />
				<TableCell />
			</TableRow>
		</TableBody>
	</Table>
</TableContainer>

Examples

Monthly operating budget

Recommendations

Guidance	Practice
Do	Use row headers for identifying columns and align numeric values consistently.
Do	Keep wide records inside the named TableContainer scroll region.

Usage boundaries

Guidance	Boundary
Scope	Table provides semantic presentation, not sorting or row-selection state.
Scope	Use Data Table when the task needs filtering, sorting, selection, or virtualization.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`TableContainer aria-label / aria-labelledby`	`string`	`Required`	Names the keyboard-scrollable region around the table.
`TableContainer.scroll`	`"horizontal" \| "both"`	`"horizontal"`	Sets the scroll axes; two-axis scrolling is bounded to 28rem high.
`Table / TableHeader / TableBody / TableFooter`	`table / thead / tbody / tfoot`	`—`	Compose native table sections. The header sticks by default.
`Table.grid`	`boolean \| "interactive"`	`false`	Spreadsheet presentation: column rules and compact rows. "interactive" adds the ARIA grid role; use it only with a keyboard model, as DataTable does.
`Table.width / TableContainer.focusable`	`number / boolean`	`None / true`	width fixes the layout to sized columns; focusable={false} drops the scroll region's tab stop when a grid inside moves focus itself.
`TableRow.selected`	`boolean`	`false`	Shows caller-owned selected-row styling without adding selection behavior.
`TableHead.scope`	`"col" \| "colgroup" \| "row" \| "rowgroup"`	`"col"`	Declares a column heading or row heading. Use row scope for the first cell in a data row.
`TableHead / TableCell.align`	`"start" \| "center" \| "end"`	`"start"`	Aligns cell content.
`TableHead / TableCell.numeric`	`boolean`	`false`	Aligns numeric values at the logical end with tabular numerals; explicit align takes precedence.
`TableHead / TableCell.sticky`	`boolean`	`false`	Pins a first-column cell on wide screens; it unpins below 40rem. Apply it to the header, row headings, and footer cell.
`TableCaption`	`caption`	`—`	Provides a visible caption and accessible table context.

Data

Table

Composes native table markup inside a named scroll region; the application owns its records and calculations.

idle

Usage

import {
	Table,
	TableBody,
	TableCaption,
	TableCell,
	TableContainer,
	TableHead,
	TableHeader,
	TableRow,
} from "@mizen-labs/ui";

Anatomy

The parts and how they nest, taken from the preview above.

<TableContainer>
	<Table>
		<TableCaption />
		<TableHeader>
			<TableRow>
				<TableHead />
			</TableRow>
		</TableHeader>
		<TableBody>
			<TableRow>
				<TableHead />
				<TableCell />
			</TableRow>
		</TableBody>
	</Table>
</TableContainer>

Examples

Monthly operating budget

Recommendations

Guidance	Practice
Do	Use row headers for identifying columns and align numeric values consistently.
Do	Keep wide records inside the named TableContainer scroll region.

Usage boundaries

Guidance	Boundary
Scope	Table provides semantic presentation, not sorting or row-selection state.
Scope	Use Data Table when the task needs filtering, sorting, selection, or virtualization.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`TableContainer aria-label / aria-labelledby`	`string`	`Required`	Names the keyboard-scrollable region around the table.
`TableContainer.scroll`	`"horizontal" \| "both"`	`"horizontal"`	Sets the scroll axes; two-axis scrolling is bounded to 28rem high.
`Table / TableHeader / TableBody / TableFooter`	`table / thead / tbody / tfoot`	`—`	Compose native table sections. The header sticks by default.
`Table.grid`	`boolean \| "interactive"`	`false`	Spreadsheet presentation: column rules and compact rows. "interactive" adds the ARIA grid role; use it only with a keyboard model, as DataTable does.
`Table.width / TableContainer.focusable`	`number / boolean`	`None / true`	width fixes the layout to sized columns; focusable={false} drops the scroll region's tab stop when a grid inside moves focus itself.
`TableRow.selected`	`boolean`	`false`	Shows caller-owned selected-row styling without adding selection behavior.
`TableHead.scope`	`"col" \| "colgroup" \| "row" \| "rowgroup"`	`"col"`	Declares a column heading or row heading. Use row scope for the first cell in a data row.
`TableHead / TableCell.align`	`"start" \| "center" \| "end"`	`"start"`	Aligns cell content.
`TableHead / TableCell.numeric`	`boolean`	`false`	Aligns numeric values at the logical end with tabular numerals; explicit align takes precedence.
`TableHead / TableCell.sticky`	`boolean`	`false`	Pins a first-column cell on wide screens; it unpins below 40rem. Apply it to the header, row headings, and footer cell.
`TableCaption`	`caption`	`—`	Provides a visible caption and accessible table context.

Current projects and their owners.
Project	Owner	Open issues
Design system	Maya Chen	4
Documentation	Alex Rivera	2
Reference app	Jordan Lee	7

2026 planned monthly costs in USD.
Cost category	Jan	Feb	Mar	Apr	May	Jun	Jul	Aug	Sep	Oct	Nov	Dec
01 Salaries	860,000	860,000	860,000	860,000	860,000	860,000	860,000	860,000	860,000	860,000	860,000	860,000
02 Employer taxes	258,000	258,000	258,000	258,000	258,000	258,000	258,000	258,000	258,000	258,000	258,000	258,000
03 Health and benefits	75,000	75,000	75,000	75,000	75,000	75,000	75,000	75,000	75,000	75,000	75,000	75,000
04 Contractors	190,000	190,000	190,000	190,000	190,000	190,000	190,000	190,000	190,000	190,000	190,000	190,000
05 Office rent	245,000	245,000	245,000	245,000	245,000	245,000	245,000	245,000	245,000	245,000	245,000	245,000
06 Utilities	28,000	28,000	28,000	28,000	28,000	28,000	28,000	28,000	28,000	28,000	28,000	28,000
07 Cloud infrastructure	95,000	95,000	95,000	95,000	95,000	95,000	95,000	95,000	95,000	95,000	95,000	95,000
08 Software licenses	62,000	62,000	62,000	62,000	62,000	62,000	62,000	62,000	62,000	62,000	62,000	62,000
09 Security tools	22,000	22,000	22,000	22,000	22,000	22,000	22,000	22,000	22,000	22,000	22,000	22,000
10 Hardware refresh	35,000	35,000	35,000	35,000	35,000	35,000	35,000	35,000	35,000	35,000	35,000	35,000
11 Research incentives	40,000	40,000	40,000	40,000	40,000	40,000	40,000	40,000	40,000	40,000	40,000	40,000
12 Marketing campaigns	95,000	95,000	95,000	95,000	95,000	95,000	95,000	95,000	95,000	95,000	95,000	95,000
13 Travel	38,000	38,000	38,000	38,000	38,000	38,000	38,000	38,000	38,000	38,000	38,000	38,000
14 Training	18,000	18,000	18,000	18,000	18,000	18,000	18,000	18,000	18,000	18,000	18,000	18,000
15 Legal services	26,000	26,000	26,000	26,000	26,000	26,000	26,000	26,000	26,000	26,000	26,000	26,000
16 Accounting	20,000	20,000	20,000	20,000	20,000	20,000	20,000	20,000	20,000	20,000	20,000	20,000
17 Insurance	16,000	16,000	16,000	16,000	16,000	16,000	16,000	16,000	16,000	16,000	16,000	16,000
18 Payment fees	12,000	12,000	12,000	12,000	12,000	12,000	12,000	12,000	12,000	12,000	12,000	12,000
19 Shipping	5,000	5,000	5,000	5,000	5,000	5,000	5,000	5,000	5,000	5,000	5,000	5,000
20 Recruiting	24,000	24,000	24,000	24,000	24,000	24,000	24,000	24,000	24,000	24,000	24,000	24,000
21 Team events	14,000	14,000	14,000	14,000	14,000	14,000	14,000	14,000	14,000	14,000	14,000	14,000
22 Office supplies	9,000	9,000	9,000	9,000	9,000	9,000	9,000	9,000	9,000	9,000	9,000	9,000
23 Accessibility audits	18,000	18,000	18,000	18,000	18,000	18,000	18,000	18,000	18,000	18,000	18,000	18,000
24 Contingency reserve	50,000	50,000	50,000	50,000	50,000	50,000	50,000	50,000	50,000	50,000	50,000	50,000
Total planned	2,255,000	2,255,000	2,255,000	2,255,000	2,255,000	2,255,000	2,255,000	2,255,000	2,255,000	2,255,000	2,255,000	2,255,000

2026 planned monthly costs in USD.

Cost category

Jan

Feb

Mar

Apr

May

Jun

Jul

Aug

Sep

Oct

Nov

Dec

01 Salaries

860,000

02 Employer taxes

258,000

03 Health and benefits

75,000

04 Contractors

190,000

05 Office rent

245,000

06 Utilities

28,000

07 Cloud infrastructure

95,000

08 Software licenses

62,000

09 Security tools

22,000

10 Hardware refresh

35,000

11 Research incentives

40,000

12 Marketing campaigns

95,000

13 Travel

38,000

14 Training

18,000

15 Legal services

26,000

16 Accounting

20,000

17 Insurance

16,000

18 Payment fees

12,000

19 Shipping

5,000

20 Recruiting

24,000

21 Team events

14,000

22 Office supplies

9,000

23 Accessibility audits

18,000

24 Contingency reserve

50,000

Total planned

2,255,000