DataTable

The built-in datatable tag — a feature-rich data grid wrapping icflorescu's mantine-datatable. Columns/records as JSON, live sorting and striped variants, and attribute pass-through.

A feature-rich data grid built on top of @mantine/core. Give it columns (a JSON array of column definitions) and records (a JSON array of row objects), and it renders a clean, themed, semantic table — server-side for the static rows, hydrating into an interactive island for sorting and selection.

A Community Component — wraps Mantine DataTable by icflorescu, MIT licensed, npm mantine-datatable.

Use it as {% datatable … %} in Markdown (it’s self-closing — it takes no body), or call it from Python logic (loops, snippets) via component('aardvark', 'datatable', …).

Demonstrations

Each columns entry has an accessor naming a field on the row objects in records; give it a title to override the auto-generated header, and textAlign / width to shape the column.

Striped, with hover highlight

Turn on striped for zebra rows and highlightOnHover so the row under the cursor stands out. Mark a column sortable and the header becomes clickable once the grid hydrates in the browser.

With other components

A DataTable sits naturally inside a Card or Paper surface — the table inherits the theme, and the surface gives it a titled frame.

Attributes

Omit any attribute to take its default. Bare flags (e.g. striped) become =True.

CSS Selector

The tag mounts an island wrapper you can target directly. The grid itself carries mantine-datatable’s own classes, but everything sits under the island marker:

/* The DataTable island wrapper */
[data-aardvark-island="DataTable"] {
  /* … */
}

mantine-datatable ships its own stylesheet (pulled in automatically via a CSS @import in the component’s co-located stylesheet), and the grid reads Mantine’s theme CSS variables, so it matches the rest of the site out of the box.

Injecting Attributes

Pass attr={…} to forward raw HTML attributes (data-, aria-, role, …) onto the rendered element, exactly like component('DataTable', attr={…}). These ride a separate channel from the React props above, so they reach the DOM untouched.