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	Holds the header at the top of the screen while the page scrolls past the table, and lets it go again at the last row. The table keeps its natural height and the page keeps its own scrollbar: the header is moved down the table by a script rather than stuck to a scroll box, so nothing about the table's layout changes when this is on.
`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"}

Responsive columns

Core's responsive table option, declared per column. The last three columns are marked `low` and the summary `medium`, so a narrow window shows the component and its machine name alone, a medium one adds the summary, and only a wide one shows the lot. Narrow the window to see it: the columns leave the table rather than being scrolled to, and core adds a "Show all columns" toggle above the table to get them back. The toggle is stuck to the left edge of the scroll container, so it stays put when a wide table is scrolled sideways.

Components, with the columns a narrow screen can do without
Component	Machine name	Summary	Status	Stories	Operations
Card	card	An image, a heading and a short run of text, linked as a whole.	Experimental	2	Edit
Hero	hero	The first thing on a page: a heading, a paragraph and at most one call to action.	Experimental	2	Edit
Primary navigation	primary_nav	The menu of the site, which collapses into a toggle below the breakpoint.	Stable	3	Edit
Table	table	A table whose columns carry the theme's width roles.	Experimental	4	Edit

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. Scroll the *page*: the table keeps its full height and no scrollbar of its own, and the header is carried down the table by a script until the last row, where it stops. Scroll the table sideways while it is holding and the header goes with its own columns, which is the half a viewport-fixed header gets wrong.

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