ResponsiveTable

MMO.core · 1 symbol · generated 5 Oct 2026

namespace

ResponsiveTable

MMO.core.ResponsiveTable

MMO.core.ResponsiveTable = {…}

Namespace: MMO.core

Every table reads on a phone. A table wider than the box it sits in turns each of its rows into a card (`data-stacked` on the table, painted by `controls::table-stack`): nobody scrolls sideways to find which column a number belongs to. Css cannot look up the header a cell sits under, so this writes it on every body cell: data-label the whole header path, "Semaine 40 · 2026" -- the label the card shows next to the value data-group-start on every cell, header ones included, that opens a column group (a header spanning several columns): the line between two groups and, when every group repeats the same headers (a period x year grid), `data-matrix` on the table, `--table-matrix` the size of a group, `data-group` ("Semaine 40") on the first cell of each group, `data-leaf` ("2026") on the cells of the first group and `data-lead` on the cells outside any group: the card is then a small table of its own, one line per group. A `data-label` written by the page wins over the header's. A table opts out with `class="no-stack"` or `data-stack="off"`, as does a layout table (`role="presentation"`). The document is watched from the start; an element watches its own shadow root.

MMO.core.ResponsiveTable.watch(this.shadowRoot);

Index

	SKIP
	needs
	labelled
	roots
	queue
	frame
	resizer
	watch(root)	Label and fit every table under a root, then follow the tables added to it or changed later.
	schedule(table)	Relabel and refit a table on the next frame, once whatever is changing it has finished.
	columns(table)	The header grid: one entry per column, the header cells above it from top to bottom.
	text(cell)
	label(table)	Write on every cell the header it sits under (`the` namespace).
	fit(table)	Stack a table that does not fit its box, unstack one that would fit again.

Constants1

SKIP

ResponsiveTable.js:28

SKIP = 'table.no-stack, table[data-stack="off"], table[role="presentation"], table[role="none"]'

Type: string

Properties6

needs

ResponsiveTable.js:31

needs = new WeakMap()

Type: WeakMap<HTMLTableElement, number>

labelled

ResponsiveTable.js:33

labelled = new WeakSet()

Type: WeakSet<Element>

roots

ResponsiveTable.js:35

roots = new WeakSet()

Type: WeakSet<Node>

queue

ResponsiveTable.js:37

queue = new Set()

Type: Set<HTMLTableElement>

frame

ResponsiveTable.js:38

frame = null

resizer

ResponsiveTable.js:40

resizer = null

Type: ResizeObserver

Methods6

watch(root)

ResponsiveTable.js:47

Label and fit every table under a root, then follow the tables added to it or changed later.

watch(root)

root	`Document` \| `ShadowRoot` \| `Element`
returns	`void`

schedule(table)

ResponsiveTable.js:80

Relabel and refit a table on the next frame, once whatever is changing it has finished.

schedule(table)

table	`HTMLTableElement`
returns	`void`

columns(table)

ResponsiveTable.js:102

The header grid: one entry per column, the header cells above it from top to bottom.

columns(table)

table	`HTMLTableElement`
returns	`Array<Array<HTMLTableCellElement>>`

text(cell)

ResponsiveTable.js:134

text(cell)

cell	`HTMLTableCellElement`	a header cell
returns	`string`	what it says, "" for a blank one

label(table)

ResponsiveTable.js:143

Write on every cell the header it sits under (the namespace).

label(table)

table	`HTMLTableElement`
returns	`void`

fit(table)

ResponsiveTable.js:210

Stack a table that does not fit its box, unstack one that would fit again.

fit(table)

table	`HTMLTableElement`
returns	`void`