Table

The built-in table tag — a Mantine Table with striping, borders, hover, captions, and a sticky header. Usage, options, and live examples.

{% table %} is a built-in tag for data tables — the Mantine Table element. A plain Markdown table still works; reach for this tag when you want striping, borders, row hover, a caption, or a sticky header. Give the header cells in head (pipe-separated) and the body in rows (rows separated by ; or newlines, cells by |, or a JSON array of arrays); each cell renders inline Markdown.

Use it as {% table %} in Markdown, or call it from Python logic (loops, snippets) via component('aardvark', 'table', …).

Demonstrations

A basic table needs only head and rows:

Striping and hover

striped shades alternate rows (pass odd or even to choose which) and highlightOnHover lights up the row under the cursor:

Borders

Toggle the outer border (withTableBorder), column dividers (withColumnBorders), and row dividers (withRowBorders, on by default — set false to remove them):

Caption and inline Markdown

Add a caption (set captionSide to top or bottom, the default). Cells render inline Markdown, so `code` and **bold** format:

Spacing, width, and JSON rows

horizontalSpacing / verticalSpacing size the cell padding with Mantine tokens, and minWidth sets the width below which the table scrolls horizontally. Pass rows as a JSON array of arrays when a cell contains a literal | or ;:

Sticky header

stickyHeader pins the header while the body scrolls; maxHeight caps the scroll window (px, default 320) and stickyHeaderOffset pushes the pinned header down past a fixed navbar:

With other components

Build a table from a loop in Python, or pass Text and Title inside a containing layout. Here the rows come from a Python list, joined into the ;/| shorthand:

Attributes

Omit any attribute to take its Mantine default.

CSS Selectors

Target the rendered element through its island marker, [data-aardvark-island="Table"], or through the Mantine Styles API classes. (Table uses element-named parts rather than a -root.) The relevant classes:

/* Every rendered Table carries this island marker */
[data-aardvark-island="Table"] { }

/* Mantine Styles API classes */
.mantine-Table-table { }
.mantine-Table-thead { }
.mantine-Table-tbody { }
.mantine-Table-tr { }
.mantine-Table-th { }
.mantine-Table-td { }

Injecting Attributes

attr={…} forwards raw HTML attributes — including event handlers — straight onto the rendered element, so you can wire DOM behavior the tag does not expose. The handler can be a full multi-line script, not just one expression — this one logs the value to the console and shows it in an alert: