Data tables Material

Syntax

Form	Syntax	Usage
Table	`\| Colonne \| Colonne \|`	Table Markdown.
Alignment	`\| :--- \| ---: \| :---: \|`	Left, right, center.
Large	`{ .full-width }`	Full width.
Mini	`{ .mini-width align=right }`	Compact table.
Responsive column	`[pho]`, `[tab]`, `[dsk]`	Show the column only in the selected viewport.
Responsive exclusion	`[-pho]`, `[-tab]`, `[-dsk]`	Hide the column in the selected viewport.
Inline	code, liens, icones, emoji	Rich cells.

Simple table

SyntaxResult

| Method   | Description                          |
| -------- | ------------------------------------ |
| `GET`    | :material-check: Fetch resource      |
| `PUT`    | :material-check-all: Update resource |
| `DELETE` | :material-close: Delete resource     |

{: .mini-width align=right }

This text can remain beside a mini table when horizontal space is sufficient.

Method	Description
`GET`	Fetch resource
`PUT`	Update resource
`DELETE`	Delete resource

This text can remain beside a mini table when horizontal space is sufficient.

Column alignment

SyntaxResult

| Left  | Center  | Right |
| :---- | :-----: | ----: |
| Alpha | Running |    42 |
| Beta  | Paused  | 1 024 |
| Gamma | Done    |    12 |

{: .full-width }

Left	Center	Right
Alpha	Running	42
Beta	Paused	1 024
Gamma	Done	12

Inline content

SyntaxResult

| Service | Status                                   | Notes |
| ------- | ---------------------------------------- | ----- |
| API     | :material-check-circle-outline: Online   | Uses `GET /health` |
| Worker  | :material-progress-clock: Pending        | Queue is processing |
| Billing | :material-alert-circle-outline: Review   | Needs manual check |

{: .full-width-centered }

Service	Status	Notes
API	Online	Uses `GET /health`
Worker	Pending	Queue is processing
Billing	Review	Needs manual check

Responsive columns

Add responsive markers to header cells. FrontMark removes the markers from the visible labels and applies their visibility rule to every cell in the column. Columns without a marker remain visible in every viewport.

Marker	Visible viewport
`[pho]`	Phone only, up to `767px`.
`[tab]`	Tablet only, from `768px` through `1199px`.
`[dsk]`	Desktop only, from `1200px`.
`[-pho]`	Tablet and desktop.
`[-tab]`	Phone and desktop.
`[-dsk]`	Phone and tablet.
`[pho][tab]`	Phone and tablet; positive markers can be combined.

SyntaxResult

| Name | Phone [pho] | Summary [-pho] | Status [tab] | Actions [dsk] |
| --- | --- | --- | --- | --- |
| Alice | 06 00 00 00 00 | Account administrator | Active | Edit |
| Bob | 07 00 00 00 00 | Technical contact | Pending | Review |

{: .full-width-centered }

Name	Phone	Summary	Status	Actions
Alice	06 00 00 00 00	Account administrator	Active	Edit
Bob	07 00 00 00 00	Technical contact	Pending	Review

Positive markers define the allowed viewports; negative markers remove a viewport. For a contradictory pair such as [tab][-tab], the exclusion wins. Markers are supported in header cells only. The same syntax works in normal tables and in tables nested inside tabs, containers, cards, or admonitions.

Retour en haut