Tables and lists¶
Use a table when readers compare the same properties across records. Use a list when each record has a small independent story. Names and counts in the examples are sample data, not a live catalogue.
The examples use the shared theme and setup. Keep the
.fltheme-components wrapper around Basecoat and du- component markup.
Data tables · MaterialX¶
MaterialX renders this pattern from Markdown. The source panel contains the actual authoring syntax, including attribute lists where they apply. Keep the renderer extensions enabled on the destination.
| Sample style | Weight | Form |
|---|---|---|
| Regular | 400 | Upright |
| Italic | 400 | Italic |
| Bold | 700 | Upright |
<table>
<thead>
<tr>
<th style="text-align: left;">Sample style</th>
<th style="text-align: right;">Weight</th>
<th style="text-align: center;">Form</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">Regular</td>
<td style="text-align: right;">400</td>
<td style="text-align: center;">Upright</td>
</tr>
<tr>
<td style="text-align: left;">Italic</td>
<td style="text-align: right;">400</td>
<td style="text-align: center;">Italic</td>
</tr>
<tr>
<td style="text-align: left;">Bold</td>
<td style="text-align: right;">700</td>
<td style="text-align: center;">Upright</td>
</tr>
</tbody>
</table>| Sample style | Weight | Form |
| :--- | ---: | :---: |
| Regular | 400 | Upright |
| Italic | 400 | Italic |
| Bold | 700 | Upright |Syntax and variants in MaterialX
List · daisyUI¶
Use a list when records share the same compact shape but do not need column alignment. Native lists remain the semantic container.
- Regular
Sample style, weight 400
- Bold
Sample style, weight 700
<div class="fltheme-components">
<ul class="du-list"><li class="du-list-row"><div><strong>Regular</strong><p>Sample style, weight 400</p></div></li><li class="du-list-row"><div><strong>Bold</strong><p>Sample style, weight 700</p></div></li></ul>
</div>Syntax and variants in daisyUI
Table · Basecoat¶
Compare records with meaningful row and column relationships.
Behaviour and access. Use caption, thead, th and scope to describe the data. Wrap wide tables in a scrolling container instead of clipping them. Sorting and filtering require application logic.
| Style | Weight |
|---|---|
| Regular | 400 |
<div class="fltheme-components">
<div class="table-container"><table class="table"><caption>Font styles</caption><thead><tr><th scope="col">Style</th><th scope="col">Weight</th></tr></thead><tbody><tr><td>Regular</td><td>400</td></tr></tbody></table></div>
</div>Syntax and variants in Basecoat
Table · daisyUI¶
Use daisyUI table classes when the author needs component states such as zebra rows or pinned headers and columns.
| Token | Role | Required | Owner |
|---|---|---|---|
--color-base-100 | Page surface | Yes | daisyUI |
--color-base-content | Body text | Yes | daisyUI |
--color-primary | Primary action | Yes | daisyUI |
--fl-measure | Prose width | Yes | FontLab |
<div class="fltheme-components">
<div aria-label="Theme token comparison" class="fl-ui overflow-x-auto" role="region" tabindex="0">
<table class="du-table du-table-zebra du-table-pin-rows du-table-pin-cols">
<caption>Theme token comparison; scroll horizontally on a narrow screen.</caption>
<thead><tr><th scope="col">Token</th><th scope="col">Role</th><th scope="col">Required</th><th scope="col">Owner</th></tr></thead>
<tbody>
<tr><th scope="row"><code>--color-base-100</code></th><td>Page surface</td><td>Yes</td><td>daisyUI</td></tr>
<tr><th scope="row"><code>--color-base-content</code></th><td>Body text</td><td>Yes</td><td>daisyUI</td></tr>
<tr><th scope="row"><code>--color-primary</code></th><td>Primary action</td><td>Yes</td><td>daisyUI</td></tr>
<tr><th scope="row"><code>--fl-measure</code></th><td>Prose width</td><td>Yes</td><td>FontLab</td></tr>
</tbody>
</table>
</div>
</div>Syntax and variants in daisyUI
Data tables: authoring details¶
Column alignment¶
Alignment follows the data: names read from the left, quantities align right, and compact categories may be centred.
| Document | Pages | Status |
|---|---|---|
| Craft of Writing | 18 | Ready |
| Product Documentation | 14 | Review |
| Marketing Copywriting | 12 | Draft |
<table>
<thead>
<tr>
<th style="text-align: left;">Document</th>
<th style="text-align: right;">Pages</th>
<th style="text-align: center;">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">Craft of Writing</td>
<td style="text-align: right;">18</td>
<td style="text-align: center;">Ready</td>
</tr>
<tr>
<td style="text-align: left;">Product Documentation</td>
<td style="text-align: right;">14</td>
<td style="text-align: center;">Review</td>
</tr>
<tr>
<td style="text-align: left;">Marketing Copywriting</td>
<td style="text-align: right;">12</td>
<td style="text-align: center;">Draft</td>
</tr>
</tbody>
</table>| Document | Pages | Status |
| :--- | ---: | :---: |
| Craft of Writing | 18 | Ready |
| Product Documentation | 14 | Review |
| Marketing Copywriting | 12 | Draft |Sortable tables¶
Sortable tables require an unpinned third-party runtime, so this site does not turn headers into sorting controls. If sorting becomes necessary, pin and test the runtime first, then add keyboard-operable buttons with announced direction and preserve the original source order.
Import table from file¶
Importing a table requires an additional data-loading plugin outside the locked renderer stack. Keep data in authored Markdown for now; do not imply that a CSV or spreadsheet import will run during this build.