Table

ID: mantra_starter:table

A table that carries the theme's column width roles. A role is declared once, on the column, and the component puts it on the header cell and on every body cell in that column -- which is the part that is tedious by hand and easy to get wrong, because auto layout sizes a column from the widest content in it, so a role on the header alone leaves a long body cell free to widen the column anyway. The table is wrapped in the scroll container, so it keeps its natural width and scrolls sideways rather than having its columns crushed.

Status: experimental

Name	Label	Type	Description
`caption`	Caption	String	Names the table to a screen reader without needing a heading.
`sticky`	Sticky header	Boolean	Keeps the header in place while the table scrolls. The table is given a bounded height and a scrollbar of its own when this is on -- a sticky header sticks to its scroll container, and a container with no height never scrolls, so the header would otherwise leave with the page.
`empty`	Empty text	String	Shown as a single row when there are no rows.
`columns`	Columns	Links	One entry per column, in order. `header` is the heading, `role` is the width role applied to the whole column.
`rows`	Rows	Unknown	⚠️ {"type":"array"}

Empty

No rows. The header is still printed, and `empty` fills a single cell spanning every column -- so a filter that matches nothing keeps the columns it was filtering rather than collapsing the table to one narrow cell.

Components matching the filter
Component	Status	Operations
No components match the filter.

Sticky header

The same table with `sticky` on. The table is given a bounded height and a scrollbar of its own -- a sticky header sticks to its scroll container, and a container with no height never scrolls, so the header would otherwise leave with the page. Scroll the table, not the page, to see it hold.

Every component in the theme
Component	Machine name	Status	Stories
Branding	branding	Stable	1
Button	button	Stable	2
Buttons demo	buttons_demo	Stable	1
Card	card	Experimental	2
Card grid	card_grid	Experimental	2
Content w/ sidebar	content_w_sidebar	Stable	1
Field	field	Stable	1
Gallery	gallery	Experimental	1
Heading	heading	Stable	3
Hero	hero	Experimental	2
Link	link	Stable	4
List	list	Stable	1
Menu	menu	Experimental	2
Pager	pager	Experimental	2
Primary nav	primary_nav	Stable	3
Reference	reference	Stable	2
Screenshot	screenshot	Stable	1
Search box	search_box	Experimental	1
Swiper	swiper	Experimental	1
Table	table	Experimental	3
Tabs	tabs	Experimental	2
Tag	tag	Stable	1

Default

Every role at once: a shrink-wrapped check box column, a growing title, a prose column sized at 24 characters, a column that is empty in every row, and shrink-wrapped operations.

Components, with a role on every column
	Component	Summary	Operations
☐	Card	An image, a heading and a short run of text, linked as a whole.	Edit
☐	Hero	The first thing on a page: a heading, a paragraph and at most one call to action.	Edit
☐	Primary navigation	The menu of the site, which collapses into a toggle below the breakpoint.	Edit