WorkRoot/WRNexusJS
2
0
Fork 0
Code Issues Pull Requests Actions 33 Packages Projects Releases Wiki Activity
Files
232d8e67343e260eff042d74ef657eccef6fc51c
WRNexusJS/examples/component-showcase/app/pages/components/data-table.wrn
T
ClintchizandClaude Opus 5 361129b6ac perf(build): budget the runtime on what ships, not on source bytes 
The runtime budgets measured raw source, which counts comments -- and the
production build minifies, so comments cost a visitor nothing. The metric
therefore rewarded deleting explanatory comments over writing smaller code,
and could not tell a real feature from a wall of prose.

They now measure the minified output, which is what is actually served:
/__wrnexus/reactive.js is its own file, minified, with an immutable year-long
cache. The reactive runtime is 69684 minified against a 80000 budget, from
175246 raw -- roughly 21kB gzipped, fetched once.

Also fixes two real bugs found while testing the showcase:

  - object-valued props were serialised as a bare {...} attribute, which the
    compiler read as interpolation and tried to parse as JavaScript. That
    returned 500 for /components/navbar. Arrays start with [ and were never
    affected, which is why only object props broke. All 108 pages now render.

  - the runtime walked text nodes inside textarea, script and style, so a
    JSON sample in a textarea was evaluated away.

Navbar styles move out of ui.css into the component, matching the rest of the
navigation group. No declarations changed: 4519 before and after.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-08-07 21:20:19 +05:30

920 lines
142 KiB
Plaintext
Raw Blame History

// Generated by scripts/generate-showcase.mjs. Do not edit directly.
page DataTableDetail {
layout = "showcase"
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
state playground_columns = JSON.parse(ctx.url.searchParams.get("pg_columns") ?? "\"[{\\\"key\\\": \\\"name\\\", \\\"label\\\": \\\"Account\\\", \\\"sortable\\\": true}, {\\\"key\\\": \\\"plan\\\", \\\"label\\\": \\\"Plan\\\", \\\"sortable\\\": true}, {\\\"key\\\": \\\"owner\\\", \\\"label\\\": \\\"Owner\\\"}, {\\\"key\\\": \\\"seats\\\", \\\"label\\\": \\\"Seats\\\", \\\"align\\\": \\\"end\\\", \\\"sortable\\\": true}, {\\\"key\\\": \\\"statusHtml\\\", \\\"label\\\": \\\"Status\\\", \\\"align\\\": \\\"center\\\", \\\"html\\\": true}]\"")
state playground_rows = JSON.parse(ctx.url.searchParams.get("pg_rows") ?? "\"[{\\\"id\\\": 1, \\\"name\\\": \\\"Northwind\\\", \\\"plan\\\": \\\"Scale\\\", \\\"owner\\\": \\\"A. Okafor\\\", \\\"seats\\\": 6, \\\"status\\\": \\\"Active\\\", \\\"statusHtml\\\": \\\"<span class=\\\\\\\"showcase-pill showcase-pill--success\\\\\\\">Active</span>\\\"}, {\\\"id\\\": 2, \\\"name\\\": \\\"Acme Industrial\\\", \\\"plan\\\": \\\"Team\\\", \\\"owner\\\": \\\"R. Silva\\\", \\\"seats\\\": 13, \\\"status\\\": \\\"Trial\\\", \\\"statusHtml\\\": \\\"<span class=\\\\\\\"showcase-pill showcase-pill--info\\\\\\\">Trial</span>\\\"}, {\\\"id\\\": 3, \\\"name\\\": \\\"Globex\\\", \\\"plan\\\": \\\"Enterprise\\\", \\\"owner\\\": \\\"M. Chen\\\", \\\"seats\\\": 20, \\\"status\\\": \\\"Past due\\\", \\\"statusHtml\\\": \\\"<span class=\\\\\\\"showcase-pill showcase-pill--danger\\\\\\\">Past due</span>\\\"}, {\\\"id\\\": 4, \\\"name\\\": \\\"Initech\\\", \\\"plan\\\": \\\"Starter\\\", \\\"owner\\\": \\\"J. Dubois\\\", \\\"seats\\\": 27, \\\"status\\\": \\\"Active\\\", \\\"statusHtml\\\": \\\"<span class=\\\\\\\"showcase-pill showcase-pill--success\\\\\\\">Active</span>\\\"}, {\\\"id\\\": 5, \\\"name\\\": \\\"Umbrella\\\", \\\"plan\\\": \\\"Scale\\\", \\\"owner\\\": \\\"P. Novak\\\", \\\"seats\\\": 34, \\\"status\\\": \\\"Trial\\\", \\\"statusHtml\\\": \\\"<span class=\\\\\\\"showcase-pill showcase-pill--info\\\\\\\">Trial</span>\\\"}, {\\\"id\\\": 6, \\\"name\\\": \\\"Stark Labs\\\", \\\"plan\\\": \\\"Team\\\", \\\"owner\\\": \\\"A. Okafor\\\", \\\"seats\\\": 41, \\\"status\\\": \\\"Past due\\\", \\\"statusHtml\\\": \\\"<span class=\\\\\\\"showcase-pill showcase-pill--danger\\\\\\\">Past due</span>\\\"}, {\\\"id\\\": 7, \\\"name\\\": \\\"Wayne Foods\\\", \\\"plan\\\": \\\"Enterprise\\\", \\\"owner\\\": \\\"R. Silva\\\", \\\"seats\\\": 48, \\\"status\\\": \\\"Active\\\", \\\"statusHtml\\\": \\\"<span class=\\\\\\\"showcase-pill showcase-pill--success\\\\\\\">Active</span>\\\"}, {\\\"id\\\": 8, \\\"name\\\": \\\"Soylent\\\", \\\"plan\\\": \\\"Starter\\\", \\\"owner\\\": \\\"M. Chen\\\", \\\"seats\\\": 55, \\\"status\\\": \\\"Trial\\\", \\\"statusHtml\\\": \\\"<span class=\\\\\\\"showcase-pill showcase-pill--info\\\\\\\">Trial</span>\\\"}, {\\\"id\\\": 9, \\\"name\\\": \\\"Hooli\\\", \\\"plan\\\": \\\"Scale\\\", \\\"owner\\\": \\\"J. Dubois\\\", \\\"seats\\\": 62, \\\"status\\\": \\\"Past due\\\", \\\"statusHtml\\\": \\\"<span class=\\\\\\\"showcase-pill showcase-pill--danger\\\\\\\">Past due</span>\\\"}, {\\\"id\\\": 10, \\\"name\\\": \\\"Vehement\\\", \\\"plan\\\": \\\"Team\\\", \\\"owner\\\": \\\"P. Novak\\\", \\\"seats\\\": 69, \\\"status\\\": \\\"Active\\\", \\\"statusHtml\\\": \\\"<span class=\\\\\\\"showcase-pill showcase-pill--success\\\\\\\">Active</span>\\\"}, {\\\"id\\\": 11, \\\"name\\\": \\\"Massive Dynamic\\\", \\\"plan\\\": \\\"Enterprise\\\", \\\"owner\\\": \\\"A. Okafor\\\", \\\"seats\\\": 76, \\\"status\\\": \\\"Trial\\\", \\\"statusHtml\\\": \\\"<span class=\\\\\\\"showcase-pill showcase-pill--info\\\\\\\">Trial</span>\\\"}, {\\\"id\\\": 12, \\\"name\\\": \\\"Cyberdyne\\\", \\\"plan\\\": \\\"Starter\\\", \\\"owner\\\": \\\"R. Silva\\\", \\\"seats\\\": 83, \\\"status\\\": \\\"Past due\\\", \\\"statusHtml\\\": \\\"<span class=\\\\\\\"showcase-pill showcase-pill--danger\\\\\\\">Past due</span>\\\"}, {\\\"id\\\": 13, \\\"name\\\": \\\"Tyrell\\\", \\\"plan\\\": \\\"Scale\\\", \\\"owner\\\": \\\"M. Chen\\\", \\\"seats\\\": 90, \\\"status\\\": \\\"Active\\\", \\\"statusHtml\\\": \\\"<span class=\\\\\\\"showcase-pill showcase-pill--success\\\\\\\">Active</span>\\\"}, {\\\"id\\\": 14, \\\"name\\\": \\\"Aperture\\\", \\\"plan\\\": \\\"Team\\\", \\\"owner\\\": \\\"J. Dubois\\\", \\\"seats\\\": 97, \\\"status\\\": \\\"Trial\\\", \\\"statusHtml\\\": \\\"<span class=\\\\\\\"showcase-pill showcase-pill--info\\\\\\\">Trial</span>\\\"}, {\\\"id\\\": 15, \\\"name\\\": \\\"Black Mesa\\\", \\\"plan\\\": \\\"Enterprise\\\", \\\"owner\\\": \\\"P. Novak\\\", \\\"seats\\\": 104, \\\"status\\\": \\\"Past due\\\", \\\"statusHtml\\\": \\\"<span class=\\\\\\\"showcase-pill showcase-pill--danger\\\\\\\">Past due</span>\\\"}]\"")
state playground_rowKey = ctx.url.searchParams.get("pg_rowKey") ?? "id"
state playground_remote = (ctx.url.searchParams.get("pg_remote") ?? "false") === "true"
state playground_loadingLabel = ctx.url.searchParams.get("pg_loadingLabel") ?? "Data Table"
state playground_errorLabel = ctx.url.searchParams.get("pg_errorLabel") ?? "Data Table"
state playground_retryLabel = ctx.url.searchParams.get("pg_retryLabel") ?? "Data Table"
state playground_caption = ctx.url.searchParams.get("pg_caption") ?? "Accounts"
state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default data table for a modern application."
state playground_searchable = (ctx.url.searchParams.get("pg_searchable") ?? "true") === "true"
state playground_searchPlaceholder = ctx.url.searchParams.get("pg_searchPlaceholder") ?? "Enter a sample value"
state playground_paginated = (ctx.url.searchParams.get("pg_paginated") ?? "true") === "true"
state playground_pageSize = Number(ctx.url.searchParams.get("pg_pageSize") ?? "5")
state playground_paginationStyle = ctx.url.searchParams.get("pg_paginationStyle") ?? "compact"
state playground_pageSizes = JSON.parse(ctx.url.searchParams.get("pg_pageSizes") ?? "[5,10,25]")
state playground_selectable = (ctx.url.searchParams.get("pg_selectable") ?? "true") === "true"
state playground_actions = JSON.parse(ctx.url.searchParams.get("pg_actions") ?? "\"[{\\\"id\\\": \\\"refresh\\\", \\\"label\\\": \\\"Refresh\\\", \\\"icon\\\": \\\"icon-[lucide--refresh-cw]\\\", \\\"when\\\": \\\"always\\\"}, {\\\"id\\\": \\\"read\\\", \\\"label\\\": \\\"Mark as read\\\", \\\"icon\\\": \\\"icon-[lucide--mail-open]\\\", \\\"when\\\": \\\"selection\\\"}, {\\\"id\\\": \\\"archive\\\", \\\"label\\\": \\\"Archive\\\", \\\"icon\\\": \\\"icon-[lucide--archive]\\\", \\\"when\\\": \\\"selection\\\"}, {\\\"id\\\": \\\"delete\\\", \\\"label\\\": \\\"Delete\\\", \\\"icon\\\": \\\"icon-[lucide--trash-2]\\\", \\\"when\\\": \\\"selection\\\", \\\"tone\\\": \\\"danger\\\"}]\"")
state playground_striped = (ctx.url.searchParams.get("pg_striped") ?? "true") === "true"
state playground_bordered = (ctx.url.searchParams.get("pg_bordered") ?? "true") === "true"
state playground_gridlines = ctx.url.searchParams.get("pg_gridlines") ?? "rows"
state playground_density = ctx.url.searchParams.get("pg_density") ?? "default"
state playground_emptyLabel = ctx.url.searchParams.get("pg_emptyLabel") ?? "Data Table"
state playground_noResultsLabel = ctx.url.searchParams.get("pg_noResultsLabel") ?? "Data Table"
state playground_clearSearchLabel = ctx.url.searchParams.get("pg_clearSearchLabel") ?? "Data Table"
state playground_stickyFirstColumn = (ctx.url.searchParams.get("pg_stickyFirstColumn") ?? "false") === "true"
state playground_layout = ctx.url.searchParams.get("pg_layout") ?? "rows"
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
seo {
title = "Data Table"
description = "Sortable, filterable, paginated data table with row selection."
}
view {
<nav class="docs-breadcrumbs" aria-label="Breadcrumb">
<a href="/">Components</a><span aria-hidden="true">/</span><a href="/tables">Tables</a><span aria-hidden="true">/</span><span>Data Table</span>
</nav>
<header class="detail-hero">
<div class="detail-hero-copy">
<span class="showcase-eyebrow">Tables component</span>
<h1>Data Table</h1>
<p>Sortable, filterable, paginated data table with row selection.</p>
<div class="detail-badges"><span>29 props</span><span>1 slots</span><span>8 outputs</span><span>Theme ready</span><span>Responsive</span></div>
</div>
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
</header>
<section id="playground" class="detail-section playground-section" data-playground data-playground-component="DataTable" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="sort,search,pageChange,select,change,rowClick,action,request">
<div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Data Table</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
<div class="playground-workbench">
<div class="playground-preview">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="playground-preview-source" data-playground-preview><DataTable color='{playground_color}' size='{playground_size}' columns='{playground_columns}' rows='{playground_rows}' rowKey='{playground_rowKey}' remote='{playground_remote}' loadingLabel='{playground_loadingLabel}' errorLabel='{playground_errorLabel}' retryLabel='{playground_retryLabel}' caption='{playground_caption}' description='{playground_description}' searchable='{playground_searchable}' searchPlaceholder='{playground_searchPlaceholder}' paginated='{playground_paginated}' pageSize='{playground_pageSize}' paginationStyle='{playground_paginationStyle}' pageSizes='{playground_pageSizes}' selectable='{playground_selectable}' actions='{playground_actions}' striped='{playground_striped}' bordered='{playground_bordered}' gridlines='{playground_gridlines}' density='{playground_density}' emptyLabel='{playground_emptyLabel}' noResultsLabel='{playground_noResultsLabel}' clearSearchLabel='{playground_clearSearchLabel}' stickyFirstColumn='{playground_stickyFirstColumn}' layout='{playground_layout}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;DataTable
columns='[
<span>&#123;</span>
"id": "data-table-0-1",
"key": "data-table-0-1",
"value": "primary",
"label": "Primary workflow",
"title": "Primary workflow",
"description": "A clean default configuration for everyday product interfaces.",
"text": "A configurable sample message.",
"href": "#data-table-demo",
"actionHref": "#data-table-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 16,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "data-table-0-2",
"key": "data-table-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#data-table-demo",
"actionHref": "#data-table-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
rows='[
<span>&#123;</span>
"id": "data-table-0-1",
"key": "data-table-0-1",
"value": "primary",
"label": "Primary workflow",
"title": "Primary workflow",
"description": "A clean default configuration for everyday product interfaces.",
"text": "A configurable sample message.",
"href": "#data-table-demo",
"actionHref": "#data-table-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 16,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "data-table-0-2",
"key": "data-table-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#data-table-demo",
"actionHref": "#data-table-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
loadingLabel="Data Table"
errorLabel="Data Table"
retryLabel="Data Table"
description="A polished default data table for a modern application."
searchPlaceholder="Enter a sample value"
pageSize="3"
pageSizes='[
<span>&#123;</span>
"id": "data-table-0-1",
"key": "data-table-0-1",
"value": "primary",
"label": "Primary workflow",
"title": "Primary workflow",
"description": "A clean default configuration for everyday product interfaces.",
"text": "A configurable sample message.",
"href": "#data-table-demo",
"actionHref": "#data-table-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 16,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "data-table-0-2",
"key": "data-table-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#data-table-demo",
"actionHref": "#data-table-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
actions='[
<span>&#123;</span>
"id": "data-table-0-1",
"key": "data-table-0-1",
"value": "primary",
"label": "Primary workflow",
"title": "Primary workflow",
"description": "A clean default configuration for everyday product interfaces.",
"text": "A configurable sample message.",
"href": "#data-table-demo",
"actionHref": "#data-table-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 16,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "data-table-0-2",
"key": "data-table-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#data-table-demo",
"actionHref": "#data-table-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
emptyLabel="Data Table"
noResultsLabel="Data Table"
clearSearchLabel="Data Table"
/&gt;</code></pre>
</section>
<div class="playground-status" data-playground-status aria-live="polite"></div>
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
</div>
<form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>29 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-data-table-color"><span><strong>color</strong><small>string</small></span><select id="playground-data-table-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="danger">danger</option><option value="info">info</option><option value="warning">warning</option></select></label><label class="playground-field" for="playground-data-table-size"><span><strong>size</strong><small>string</small></span><select id="playground-data-table-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-data-table-columns"><span><strong>columns</strong><small>unknown[]</small></span><textarea id="playground-data-table-columns" name="pg_columns" rows="5" spellcheck="false" data-playground-json>[&#123;"key": "name", "label": "Account", "sortable": true&#125;, &#123;"key": "plan", "label": "Plan", "sortable": true&#125;, &#123;"key": "owner", "label": "Owner"&#125;, &#123;"key": "seats", "label": "Seats", "align": "end", "sortable": true&#125;, &#123;"key": "statusHtml", "label": "Status", "align": "center", "html": true&#125;]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-data-table-rows"><span><strong>rows</strong><small>unknown[]</small></span><textarea id="playground-data-table-rows" name="pg_rows" rows="5" spellcheck="false" data-playground-json>[&#123;"id": 1, "name": "Northwind", "plan": "Scale", "owner": "A. Okafor", "seats": 6, "status": "Active", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--success\"&gt;Active&lt;/span&gt;"&#125;, &#123;"id": 2, "name": "Acme Industrial", "plan": "Team", "owner": "R. Silva", "seats": 13, "status": "Trial", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--info\"&gt;Trial&lt;/span&gt;"&#125;, &#123;"id": 3, "name": "Globex", "plan": "Enterprise", "owner": "M. Chen", "seats": 20, "status": "Past due", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--danger\"&gt;Past due&lt;/span&gt;"&#125;, &#123;"id": 4, "name": "Initech", "plan": "Starter", "owner": "J. Dubois", "seats": 27, "status": "Active", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--success\"&gt;Active&lt;/span&gt;"&#125;, &#123;"id": 5, "name": "Umbrella", "plan": "Scale", "owner": "P. Novak", "seats": 34, "status": "Trial", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--info\"&gt;Trial&lt;/span&gt;"&#125;, &#123;"id": 6, "name": "Stark Labs", "plan": "Team", "owner": "A. Okafor", "seats": 41, "status": "Past due", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--danger\"&gt;Past due&lt;/span&gt;"&#125;, &#123;"id": 7, "name": "Wayne Foods", "plan": "Enterprise", "owner": "R. Silva", "seats": 48, "status": "Active", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--success\"&gt;Active&lt;/span&gt;"&#125;, &#123;"id": 8, "name": "Soylent", "plan": "Starter", "owner": "M. Chen", "seats": 55, "status": "Trial", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--info\"&gt;Trial&lt;/span&gt;"&#125;, &#123;"id": 9, "name": "Hooli", "plan": "Scale", "owner": "J. Dubois", "seats": 62, "status": "Past due", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--danger\"&gt;Past due&lt;/span&gt;"&#125;, &#123;"id": 10, "name": "Vehement", "plan": "Team", "owner": "P. Novak", "seats": 69, "status": "Active", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--success\"&gt;Active&lt;/span&gt;"&#125;, &#123;"id": 11, "name": "Massive Dynamic", "plan": "Enterprise", "owner": "A. Okafor", "seats": 76, "status": "Trial", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--info\"&gt;Trial&lt;/span&gt;"&#125;, &#123;"id": 12, "name": "Cyberdyne", "plan": "Starter", "owner": "R. Silva", "seats": 83, "status": "Past due", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--danger\"&gt;Past due&lt;/span&gt;"&#125;, &#123;"id": 13, "name": "Tyrell", "plan": "Scale", "owner": "M. Chen", "seats": 90, "status": "Active", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--success\"&gt;Active&lt;/span&gt;"&#125;, &#123;"id": 14, "name": "Aperture", "plan": "Team", "owner": "J. Dubois", "seats": 97, "status": "Trial", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--info\"&gt;Trial&lt;/span&gt;"&#125;, &#123;"id": 15, "name": "Black Mesa", "plan": "Enterprise", "owner": "P. Novak", "seats": 104, "status": "Past due", "statusHtml": "&lt;span class=\"showcase-pill showcase-pill--danger\"&gt;Past due&lt;/span&gt;"&#125;]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-data-table-rowKey"><span><strong>row Key</strong><small>string</small></span><input id="playground-data-table-rowKey" name="pg_rowKey" type="text" value="id" /></label><label class="playground-toggle" for="playground-data-table-remote"><span><strong>remote</strong><small>boolean</small></span><input id="playground-data-table-remote" name="pg_remote" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-data-table-loadingLabel"><span><strong>loading Label</strong><small>string</small></span><input id="playground-data-table-loadingLabel" name="pg_loadingLabel" type="text" value="Data Table" /></label><label class="playground-field" for="playground-data-table-errorLabel"><span><strong>error Label</strong><small>string</small></span><input id="playground-data-table-errorLabel" name="pg_errorLabel" type="text" value="Data Table" /></label><label class="playground-field" for="playground-data-table-retryLabel"><span><strong>retry Label</strong><small>string</small></span><input id="playground-data-table-retryLabel" name="pg_retryLabel" type="text" value="Data Table" /></label><label class="playground-field" for="playground-data-table-caption"><span><strong>caption</strong><small>string</small></span><input id="playground-data-table-caption" name="pg_caption" type="text" value="Accounts" /></label><label class="playground-field" for="playground-data-table-description"><span><strong>description</strong><small>string</small></span><input id="playground-data-table-description" name="pg_description" type="text" value="A polished default data table for a modern application." /></label><label class="playground-toggle" for="playground-data-table-searchable"><span><strong>searchable</strong><small>boolean</small></span><input id="playground-data-table-searchable" name="pg_searchable" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-data-table-searchPlaceholder"><span><strong>search Placeholder</strong><small>string</small></span><input id="playground-data-table-searchPlaceholder" name="pg_searchPlaceholder" type="text" value="Enter a sample value" /></label><label class="playground-toggle" for="playground-data-table-paginated"><span><strong>paginated</strong><small>boolean</small></span><input id="playground-data-table-paginated" name="pg_paginated" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-data-table-pageSize"><span><strong>page Size</strong><small>number</small></span><input id="playground-data-table-pageSize" name="pg_pageSize" type="number" value="5" /></label><label class="playground-field" for="playground-data-table-paginationStyle"><span><strong>pagination Style</strong><small>string</small></span><select id="playground-data-table-paginationStyle" name="pg_paginationStyle"><option value="compact" selected>compact</option><option value="numbered">numbered</option></select></label><label class="playground-field" for="playground-data-table-pageSizes"><span><strong>page Sizes</strong><small>number[]</small></span><textarea id="playground-data-table-pageSizes" name="pg_pageSizes" rows="5" spellcheck="false" data-playground-json>[
5,
10,
25
]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-data-table-selectable"><span><strong>selectable</strong><small>boolean</small></span><input id="playground-data-table-selectable" name="pg_selectable" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-data-table-actions"><span><strong>actions</strong><small>unknown[]</small></span><textarea id="playground-data-table-actions" name="pg_actions" rows="5" spellcheck="false" data-playground-json>[&#123;"id": "refresh", "label": "Refresh", "icon": "icon-[lucide--refresh-cw]", "when": "always"&#125;, &#123;"id": "read", "label": "Mark as read", "icon": "icon-[lucide--mail-open]", "when": "selection"&#125;, &#123;"id": "archive", "label": "Archive", "icon": "icon-[lucide--archive]", "when": "selection"&#125;, &#123;"id": "delete", "label": "Delete", "icon": "icon-[lucide--trash-2]", "when": "selection", "tone": "danger"&#125;]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-data-table-striped"><span><strong>striped</strong><small>boolean</small></span><input id="playground-data-table-striped" name="pg_striped" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-data-table-bordered"><span><strong>bordered</strong><small>boolean</small></span><input id="playground-data-table-bordered" name="pg_bordered" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-data-table-gridlines"><span><strong>gridlines</strong><small>string</small></span><select id="playground-data-table-gridlines" name="pg_gridlines"><option value="rows" selected>rows</option><option value="grid">grid</option></select></label><label class="playground-field" for="playground-data-table-density"><span><strong>density</strong><small>string</small></span><select id="playground-data-table-density" name="pg_density"><option value="default" selected>default</option><option value="compact">compact</option><option value="comfortable">comfortable</option></select></label><label class="playground-field" for="playground-data-table-emptyLabel"><span><strong>empty Label</strong><small>string</small></span><input id="playground-data-table-emptyLabel" name="pg_emptyLabel" type="text" value="Data Table" /></label><label class="playground-field" for="playground-data-table-noResultsLabel"><span><strong>no Results Label</strong><small>string</small></span><input id="playground-data-table-noResultsLabel" name="pg_noResultsLabel" type="text" value="Data Table" /></label><label class="playground-field" for="playground-data-table-clearSearchLabel"><span><strong>clear Search Label</strong><small>string</small></span><input id="playground-data-table-clearSearchLabel" name="pg_clearSearchLabel" type="text" value="Data Table" /></label><label class="playground-toggle" for="playground-data-table-stickyFirstColumn"><span><strong>sticky First Column</strong><small>boolean</small></span><input id="playground-data-table-stickyFirstColumn" name="pg_stickyFirstColumn" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-data-table-layout"><span><strong>layout</strong><small>string</small></span><select id="playground-data-table-layout" name="pg_layout"><option value="rows" selected>rows</option><option value="content">content</option><option value="split">split</option><option value="stacked">stacked</option><option value="balanced">balanced</option><option value="visual">visual</option></select></label><label class="playground-field" for="playground-data-table-class"><span><strong>class</strong><small>string</small></span><input id="playground-data-table-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
</form>
</div>
</section>
<div class="detail-layout">
<main class="detail-content">
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Recommended</span><h2>Sortable, searchable and paged</h2><p>Click a header to sort, type to filter, and page through the results. Every derivation is a shared function, so the first page is server rendered and stays live after hydration.</p></div>
<span class="demo-case-number">01</span>
</header>
<div class="demo-workbench">
<div id="data-table-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><DataTable size="default" columns="[{&quot;key&quot;: &quot;name&quot;, &quot;label&quot;: &quot;Account&quot;, &quot;sortable&quot;: true}, {&quot;key&quot;: &quot;plan&quot;, &quot;label&quot;: &quot;Plan&quot;, &quot;sortable&quot;: true}, {&quot;key&quot;: &quot;owner&quot;, &quot;label&quot;: &quot;Owner&quot;}, {&quot;key&quot;: &quot;seats&quot;, &quot;label&quot;: &quot;Seats&quot;, &quot;align&quot;: &quot;end&quot;, &quot;sortable&quot;: true}, {&quot;key&quot;: &quot;status&quot;, &quot;label&quot;: &quot;Status&quot;, &quot;align&quot;: &quot;center&quot;}]" rows="[{&quot;id&quot;: 1, &quot;name&quot;: &quot;Northwind&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 6, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 2, &quot;name&quot;: &quot;Acme Industrial&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 13, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 3, &quot;name&quot;: &quot;Globex&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 20, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 4, &quot;name&quot;: &quot;Initech&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;J. Dubois&quot;, &quot;seats&quot;: 27, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 5, &quot;name&quot;: &quot;Umbrella&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;P. Novak&quot;, &quot;seats&quot;: 34, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 6, &quot;name&quot;: &quot;Stark Labs&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 41, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 7, &quot;name&quot;: &quot;Wayne Foods&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 48, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 8, &quot;name&quot;: &quot;Soylent&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 55, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 9, &quot;name&quot;: &quot;Hooli&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;J. Dubois&quot;, &quot;seats&quot;: 62, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 10, &quot;name&quot;: &quot;Vehement&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;P. Novak&quot;, &quot;seats&quot;: 69, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 11, &quot;name&quot;: &quot;Massive Dynamic&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 76, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 12, &quot;name&quot;: &quot;Cyberdyne&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 83, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 13, &quot;name&quot;: &quot;Tyrell&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 90, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 14, &quot;name&quot;: &quot;Aperture&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;J. Dubois&quot;, &quot;seats&quot;: 97, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 15, &quot;name&quot;: &quot;Black Mesa&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;P. Novak&quot;, &quot;seats&quot;: 104, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}]" remote="false" loadingLabel="Data Table" errorLabel="Data Table" retryLabel="Data Table" caption="Accounts" description="15 records across four plans." searchable="true" searchPlaceholder="Enter a sample value" paginated="true" pageSize="5" pageSizes='[5,10,25]' selectable="true" actions='[]' striped="true" bordered="true" emptyLabel="Data Table" noResultsLabel="Data Table" clearSearchLabel="Data Table" stickyFirstColumn="false" class="showcase-instance showcase-instance--1" /></div>
</div>
<section class="demo-code" aria-label="Sortable, searchable and paged usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;DataTable
columns="[<span>&#123;</span>\"key\": \"name\", \"label\": \"Account\", \"sortable\": true<span>&#125;</span>, <span>&#123;</span>\"key\": \"plan\", \"label\": \"Plan\", \"sortable\": true<span>&#125;</span>, <span>&#123;</span>\"key\": \"owner\", \"label\": \"Owner\"<span>&#125;</span>, <span>&#123;</span>\"key\": \"seats\", \"label\": \"Seats\", \"align\": \"end\", \"sortable\": true<span>&#125;</span>, <span>&#123;</span>\"key\": \"status\", \"label\": \"Status\", \"align\": \"center\"<span>&#125;</span>]"
rows="[<span>&#123;</span>\"id\": 1, \"name\": \"Northwind\", \"plan\": \"Scale\", \"owner\": \"A. Okafor\", \"seats\": 6, \"status\": \"Active\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--success\\"&gt;Active&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 2, \"name\": \"Acme Industrial\", \"plan\": \"Team\", \"owner\": \"R. Silva\", \"seats\": 13, \"status\": \"Trial\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--info\\"&gt;Trial&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 3, \"name\": \"Globex\", \"plan\": \"Enterprise\", \"owner\": \"M. Chen\", \"seats\": 20, \"status\": \"Past due\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--danger\\"&gt;Past due&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 4, \"name\": \"Initech\", \"plan\": \"Starter\", \"owner\": \"J. Dubois\", \"seats\": 27, \"status\": \"Active\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--success\\"&gt;Active&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 5, \"name\": \"Umbrella\", \"plan\": \"Scale\", \"owner\": \"P. Novak\", \"seats\": 34, \"status\": \"Trial\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--info\\"&gt;Trial&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 6, \"name\": \"Stark Labs\", \"plan\": \"Team\", \"owner\": \"A. Okafor\", \"seats\": 41, \"status\": \"Past due\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--danger\\"&gt;Past due&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 7, \"name\": \"Wayne Foods\", \"plan\": \"Enterprise\", \"owner\": \"R. Silva\", \"seats\": 48, \"status\": \"Active\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--success\\"&gt;Active&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 8, \"name\": \"Soylent\", \"plan\": \"Starter\", \"owner\": \"M. Chen\", \"seats\": 55, \"status\": \"Trial\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--info\\"&gt;Trial&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 9, \"name\": \"Hooli\", \"plan\": \"Scale\", \"owner\": \"J. Dubois\", \"seats\": 62, \"status\": \"Past due\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--danger\\"&gt;Past due&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 10, \"name\": \"Vehement\", \"plan\": \"Team\", \"owner\": \"P. Novak\", \"seats\": 69, \"status\": \"Active\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--success\\"&gt;Active&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 11, \"name\": \"Massive Dynamic\", \"plan\": \"Enterprise\", \"owner\": \"A. Okafor\", \"seats\": 76, \"status\": \"Trial\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--info\\"&gt;Trial&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 12, \"name\": \"Cyberdyne\", \"plan\": \"Starter\", \"owner\": \"R. Silva\", \"seats\": 83, \"status\": \"Past due\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--danger\\"&gt;Past due&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 13, \"name\": \"Tyrell\", \"plan\": \"Scale\", \"owner\": \"M. Chen\", \"seats\": 90, \"status\": \"Active\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--success\\"&gt;Active&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 14, \"name\": \"Aperture\", \"plan\": \"Team\", \"owner\": \"J. Dubois\", \"seats\": 97, \"status\": \"Trial\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--info\\"&gt;Trial&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 15, \"name\": \"Black Mesa\", \"plan\": \"Enterprise\", \"owner\": \"P. Novak\", \"seats\": 104, \"status\": \"Past due\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--danger\\"&gt;Past due&lt;/span&gt;\"<span>&#125;</span>]"
loadingLabel="Data Table"
errorLabel="Data Table"
retryLabel="Data Table"
caption="Accounts"
description="15 records across four plans."
searchPlaceholder="Enter a sample value"
pageSize="5"
pageSizes='[
5,
10,
25
]'
selectable="true"
actions='[]'
emptyLabel="Data Table"
noResultsLabel="Data Table"
clearSearchLabel="Data Table"
/&gt;</code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Advanced</span><h2>Bulk actions on selection</h2><p>An inbox pattern: Refresh is always available, while Mark as read, Archive and Delete appear only once something is ticked. Each handler receives the selected records, and an action output fires for every click.</p></div>
<span class="demo-case-number">02</span>
</header>
<div class="demo-workbench">
<div id="data-table-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><DataTable size="sm" columns="[{&quot;key&quot;: &quot;owner&quot;, &quot;label&quot;: &quot;From&quot;, &quot;sortable&quot;: true}, {&quot;key&quot;: &quot;name&quot;, &quot;label&quot;: &quot;Subject&quot;, &quot;sortable&quot;: true}, {&quot;key&quot;: &quot;plan&quot;, &quot;label&quot;: &quot;Folder&quot;, &quot;align&quot;: &quot;center&quot;}, {&quot;key&quot;: &quot;statusHtml&quot;, &quot;label&quot;: &quot;State&quot;, &quot;align&quot;: &quot;center&quot;, &quot;html&quot;: true}]" rows="[{&quot;id&quot;: 1, &quot;name&quot;: &quot;Northwind&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 6, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 2, &quot;name&quot;: &quot;Acme Industrial&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 13, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 3, &quot;name&quot;: &quot;Globex&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 20, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 4, &quot;name&quot;: &quot;Initech&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;J. Dubois&quot;, &quot;seats&quot;: 27, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 5, &quot;name&quot;: &quot;Umbrella&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;P. Novak&quot;, &quot;seats&quot;: 34, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 6, &quot;name&quot;: &quot;Stark Labs&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 41, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 7, &quot;name&quot;: &quot;Wayne Foods&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 48, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 8, &quot;name&quot;: &quot;Soylent&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 55, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 9, &quot;name&quot;: &quot;Hooli&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;J. Dubois&quot;, &quot;seats&quot;: 62, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 10, &quot;name&quot;: &quot;Vehement&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;P. Novak&quot;, &quot;seats&quot;: 69, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 11, &quot;name&quot;: &quot;Massive Dynamic&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 76, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 12, &quot;name&quot;: &quot;Cyberdyne&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 83, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 13, &quot;name&quot;: &quot;Tyrell&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 90, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 14, &quot;name&quot;: &quot;Aperture&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;J. Dubois&quot;, &quot;seats&quot;: 97, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 15, &quot;name&quot;: &quot;Black Mesa&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;P. Novak&quot;, &quot;seats&quot;: 104, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}]" remote="false" loadingLabel="Compact example" errorLabel="Compact example" retryLabel="Compact example" caption="Inbox" description="Tick a row to reveal the selection-only actions." searchable="true" searchPlaceholder="Search mail" paginated="true" pageSize="6" pageSizes='[6,12,25]' selectable="true" actions="[{&quot;id&quot;: &quot;refresh&quot;, &quot;label&quot;: &quot;Refresh&quot;, &quot;icon&quot;: &quot;icon-[lucide--refresh-cw]&quot;, &quot;when&quot;: &quot;always&quot;}, {&quot;id&quot;: &quot;read&quot;, &quot;label&quot;: &quot;Mark as read&quot;, &quot;icon&quot;: &quot;icon-[lucide--mail-open]&quot;, &quot;when&quot;: &quot;selection&quot;}, {&quot;id&quot;: &quot;archive&quot;, &quot;label&quot;: &quot;Archive&quot;, &quot;icon&quot;: &quot;icon-[lucide--archive]&quot;, &quot;when&quot;: &quot;selection&quot;}, {&quot;id&quot;: &quot;delete&quot;, &quot;label&quot;: &quot;Delete&quot;, &quot;icon&quot;: &quot;icon-[lucide--trash-2]&quot;, &quot;when&quot;: &quot;selection&quot;, &quot;tone&quot;: &quot;danger&quot;}]" striped="true" bordered="true" emptyLabel="Compact example" noResultsLabel="Compact example" clearSearchLabel="Compact example" stickyFirstColumn="false" class="showcase-instance showcase-instance--2" /></div>
</div>
<section class="demo-code" aria-label="Bulk actions on selection usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;DataTable
size="sm"
columns="[<span>&#123;</span>\"key\": \"owner\", \"label\": \"From\", \"sortable\": true<span>&#125;</span>, <span>&#123;</span>\"key\": \"name\", \"label\": \"Subject\", \"sortable\": true<span>&#125;</span>, <span>&#123;</span>\"key\": \"plan\", \"label\": \"Folder\", \"align\": \"center\"<span>&#125;</span>, <span>&#123;</span>\"key\": \"statusHtml\", \"label\": \"State\", \"align\": \"center\", \"html\": true<span>&#125;</span>]"
rows="[<span>&#123;</span>\"id\": 1, \"name\": \"Northwind\", \"plan\": \"Scale\", \"owner\": \"A. Okafor\", \"seats\": 6, \"status\": \"Active\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--success\\"&gt;Active&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 2, \"name\": \"Acme Industrial\", \"plan\": \"Team\", \"owner\": \"R. Silva\", \"seats\": 13, \"status\": \"Trial\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--info\\"&gt;Trial&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 3, \"name\": \"Globex\", \"plan\": \"Enterprise\", \"owner\": \"M. Chen\", \"seats\": 20, \"status\": \"Past due\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--danger\\"&gt;Past due&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 4, \"name\": \"Initech\", \"plan\": \"Starter\", \"owner\": \"J. Dubois\", \"seats\": 27, \"status\": \"Active\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--success\\"&gt;Active&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 5, \"name\": \"Umbrella\", \"plan\": \"Scale\", \"owner\": \"P. Novak\", \"seats\": 34, \"status\": \"Trial\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--info\\"&gt;Trial&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 6, \"name\": \"Stark Labs\", \"plan\": \"Team\", \"owner\": \"A. Okafor\", \"seats\": 41, \"status\": \"Past due\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--danger\\"&gt;Past due&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 7, \"name\": \"Wayne Foods\", \"plan\": \"Enterprise\", \"owner\": \"R. Silva\", \"seats\": 48, \"status\": \"Active\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--success\\"&gt;Active&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 8, \"name\": \"Soylent\", \"plan\": \"Starter\", \"owner\": \"M. Chen\", \"seats\": 55, \"status\": \"Trial\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--info\\"&gt;Trial&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 9, \"name\": \"Hooli\", \"plan\": \"Scale\", \"owner\": \"J. Dubois\", \"seats\": 62, \"status\": \"Past due\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--danger\\"&gt;Past due&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 10, \"name\": \"Vehement\", \"plan\": \"Team\", \"owner\": \"P. Novak\", \"seats\": 69, \"status\": \"Active\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--success\\"&gt;Active&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 11, \"name\": \"Massive Dynamic\", \"plan\": \"Enterprise\", \"owner\": \"A. Okafor\", \"seats\": 76, \"status\": \"Trial\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--info\\"&gt;Trial&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 12, \"name\": \"Cyberdyne\", \"plan\": \"Starter\", \"owner\": \"R. Silva\", \"seats\": 83, \"status\": \"Past due\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--danger\\"&gt;Past due&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 13, \"name\": \"Tyrell\", \"plan\": \"Scale\", \"owner\": \"M. Chen\", \"seats\": 90, \"status\": \"Active\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--success\\"&gt;Active&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 14, \"name\": \"Aperture\", \"plan\": \"Team\", \"owner\": \"J. Dubois\", \"seats\": 97, \"status\": \"Trial\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--info\\"&gt;Trial&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 15, \"name\": \"Black Mesa\", \"plan\": \"Enterprise\", \"owner\": \"P. Novak\", \"seats\": 104, \"status\": \"Past due\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--danger\\"&gt;Past due&lt;/span&gt;\"<span>&#125;</span>]"
loadingLabel="Compact example"
errorLabel="Compact example"
retryLabel="Compact example"
caption="Inbox"
description="Tick a row to reveal the selection-only actions."
searchPlaceholder="Search mail"
pageSize="6"
pageSizes='[
6,
12,
25
]'
selectable="true"
actions="[<span>&#123;</span>\"id\": \"refresh\", \"label\": \"Refresh\", \"icon\": \"icon-[lucide--refresh-cw]\", \"when\": \"always\"<span>&#125;</span>, <span>&#123;</span>\"id\": \"read\", \"label\": \"Mark as read\", \"icon\": \"icon-[lucide--mail-open]\", \"when\": \"selection\"<span>&#125;</span>, <span>&#123;</span>\"id\": \"archive\", \"label\": \"Archive\", \"icon\": \"icon-[lucide--archive]\", \"when\": \"selection\"<span>&#125;</span>, <span>&#123;</span>\"id\": \"delete\", \"label\": \"Delete\", \"icon\": \"icon-[lucide--trash-2]\", \"when\": \"selection\", \"tone\": \"danger\"<span>&#125;</span>]"
emptyLabel="Compact example"
noResultsLabel="Compact example"
clearSearchLabel="Compact example"
/&gt;</code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Recommended</span><h2>Numbered pagination</h2><p>Page numbers instead of arrows, windowed around the current page so a large table never renders hundreds of buttons.</p></div>
<span class="demo-case-number">03</span>
</header>
<div class="demo-workbench">
<div id="data-table-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><DataTable size="lg" columns="[{&quot;key&quot;: &quot;name&quot;, &quot;label&quot;: &quot;Account&quot;, &quot;sortable&quot;: true}, {&quot;key&quot;: &quot;plan&quot;, &quot;label&quot;: &quot;Plan&quot;, &quot;sortable&quot;: true}, {&quot;key&quot;: &quot;owner&quot;, &quot;label&quot;: &quot;Owner&quot;}, {&quot;key&quot;: &quot;seats&quot;, &quot;label&quot;: &quot;Seats&quot;, &quot;align&quot;: &quot;end&quot;, &quot;sortable&quot;: true}, {&quot;key&quot;: &quot;status&quot;, &quot;label&quot;: &quot;Status&quot;, &quot;align&quot;: &quot;center&quot;}]" rows="[{&quot;id&quot;: 1, &quot;name&quot;: &quot;Northwind&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 6, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 2, &quot;name&quot;: &quot;Acme Industrial&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 13, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 3, &quot;name&quot;: &quot;Globex&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 20, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 4, &quot;name&quot;: &quot;Initech&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;J. Dubois&quot;, &quot;seats&quot;: 27, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 5, &quot;name&quot;: &quot;Umbrella&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;P. Novak&quot;, &quot;seats&quot;: 34, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 6, &quot;name&quot;: &quot;Stark Labs&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 41, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 7, &quot;name&quot;: &quot;Wayne Foods&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 48, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 8, &quot;name&quot;: &quot;Soylent&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 55, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 9, &quot;name&quot;: &quot;Hooli&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;J. Dubois&quot;, &quot;seats&quot;: 62, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 10, &quot;name&quot;: &quot;Vehement&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;P. Novak&quot;, &quot;seats&quot;: 69, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 11, &quot;name&quot;: &quot;Massive Dynamic&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 76, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 12, &quot;name&quot;: &quot;Cyberdyne&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 83, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 13, &quot;name&quot;: &quot;Tyrell&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 90, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 14, &quot;name&quot;: &quot;Aperture&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;J. Dubois&quot;, &quot;seats&quot;: 97, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 15, &quot;name&quot;: &quot;Black Mesa&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;P. Novak&quot;, &quot;seats&quot;: 104, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}]" remote="false" loadingLabel="Advanced example" errorLabel="Advanced example" retryLabel="Advanced example" caption="Accounts" description="15 records, four per page." searchable="true" searchPlaceholder="Search by name, email, or identifier" paginated="true" pageSize="4" paginationStyle="numbered" pageSizes='[4,8,15]' selectable="false" actions='[]' striped="true" bordered="true" emptyLabel="Advanced example" noResultsLabel="Advanced example" clearSearchLabel="Advanced example" stickyFirstColumn="false" class="showcase-instance showcase-instance--3" /></div>
</div>
<section class="demo-code" aria-label="Numbered pagination usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;DataTable
size="lg"
columns="[<span>&#123;</span>\"key\": \"name\", \"label\": \"Account\", \"sortable\": true<span>&#125;</span>, <span>&#123;</span>\"key\": \"plan\", \"label\": \"Plan\", \"sortable\": true<span>&#125;</span>, <span>&#123;</span>\"key\": \"owner\", \"label\": \"Owner\"<span>&#125;</span>, <span>&#123;</span>\"key\": \"seats\", \"label\": \"Seats\", \"align\": \"end\", \"sortable\": true<span>&#125;</span>, <span>&#123;</span>\"key\": \"status\", \"label\": \"Status\", \"align\": \"center\"<span>&#125;</span>]"
rows="[<span>&#123;</span>\"id\": 1, \"name\": \"Northwind\", \"plan\": \"Scale\", \"owner\": \"A. Okafor\", \"seats\": 6, \"status\": \"Active\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--success\\"&gt;Active&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 2, \"name\": \"Acme Industrial\", \"plan\": \"Team\", \"owner\": \"R. Silva\", \"seats\": 13, \"status\": \"Trial\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--info\\"&gt;Trial&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 3, \"name\": \"Globex\", \"plan\": \"Enterprise\", \"owner\": \"M. Chen\", \"seats\": 20, \"status\": \"Past due\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--danger\\"&gt;Past due&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 4, \"name\": \"Initech\", \"plan\": \"Starter\", \"owner\": \"J. Dubois\", \"seats\": 27, \"status\": \"Active\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--success\\"&gt;Active&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 5, \"name\": \"Umbrella\", \"plan\": \"Scale\", \"owner\": \"P. Novak\", \"seats\": 34, \"status\": \"Trial\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--info\\"&gt;Trial&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 6, \"name\": \"Stark Labs\", \"plan\": \"Team\", \"owner\": \"A. Okafor\", \"seats\": 41, \"status\": \"Past due\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--danger\\"&gt;Past due&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 7, \"name\": \"Wayne Foods\", \"plan\": \"Enterprise\", \"owner\": \"R. Silva\", \"seats\": 48, \"status\": \"Active\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--success\\"&gt;Active&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 8, \"name\": \"Soylent\", \"plan\": \"Starter\", \"owner\": \"M. Chen\", \"seats\": 55, \"status\": \"Trial\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--info\\"&gt;Trial&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 9, \"name\": \"Hooli\", \"plan\": \"Scale\", \"owner\": \"J. Dubois\", \"seats\": 62, \"status\": \"Past due\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--danger\\"&gt;Past due&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 10, \"name\": \"Vehement\", \"plan\": \"Team\", \"owner\": \"P. Novak\", \"seats\": 69, \"status\": \"Active\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--success\\"&gt;Active&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 11, \"name\": \"Massive Dynamic\", \"plan\": \"Enterprise\", \"owner\": \"A. Okafor\", \"seats\": 76, \"status\": \"Trial\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--info\\"&gt;Trial&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 12, \"name\": \"Cyberdyne\", \"plan\": \"Starter\", \"owner\": \"R. Silva\", \"seats\": 83, \"status\": \"Past due\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--danger\\"&gt;Past due&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 13, \"name\": \"Tyrell\", \"plan\": \"Scale\", \"owner\": \"M. Chen\", \"seats\": 90, \"status\": \"Active\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--success\\"&gt;Active&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 14, \"name\": \"Aperture\", \"plan\": \"Team\", \"owner\": \"J. Dubois\", \"seats\": 97, \"status\": \"Trial\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--info\\"&gt;Trial&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 15, \"name\": \"Black Mesa\", \"plan\": \"Enterprise\", \"owner\": \"P. Novak\", \"seats\": 104, \"status\": \"Past due\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--danger\\"&gt;Past due&lt;/span&gt;\"<span>&#125;</span>]"
loadingLabel="Advanced example"
errorLabel="Advanced example"
retryLabel="Advanced example"
caption="Accounts"
description="15 records, four per page."
searchPlaceholder="Search by name, email, or identifier"
pageSize="4"
paginationStyle="numbered"
pageSizes='[
4,
8,
15
]'
actions='[]'
emptyLabel="Advanced example"
noResultsLabel="Advanced example"
clearSearchLabel="Advanced example"
/&gt;</code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Advanced</span><h2>Full gridlines and custom cell markup</h2><p>gridlines="grid" adds column rules as well as row rules. The Status column is rendered from markup rather than text, so a cell can hold a badge, a link or any other component output.</p></div>
<span class="demo-case-number">04</span>
</header>
<div class="demo-workbench">
<div id="data-table-demo-4" class="demo-canvas demo-canvas--4">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><DataTable size="lg" columns="[{&quot;key&quot;: &quot;name&quot;, &quot;label&quot;: &quot;Account&quot;, &quot;sortable&quot;: true}, {&quot;key&quot;: &quot;plan&quot;, &quot;label&quot;: &quot;Plan&quot;, &quot;sortable&quot;: true}, {&quot;key&quot;: &quot;owner&quot;, &quot;label&quot;: &quot;Owner&quot;}, {&quot;key&quot;: &quot;seats&quot;, &quot;label&quot;: &quot;Seats&quot;, &quot;align&quot;: &quot;end&quot;, &quot;sortable&quot;: true}, {&quot;key&quot;: &quot;statusHtml&quot;, &quot;label&quot;: &quot;Status&quot;, &quot;align&quot;: &quot;center&quot;, &quot;html&quot;: true}]" rows="[{&quot;id&quot;: 1, &quot;name&quot;: &quot;Northwind&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 6, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 2, &quot;name&quot;: &quot;Acme Industrial&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 13, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 3, &quot;name&quot;: &quot;Globex&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 20, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 4, &quot;name&quot;: &quot;Initech&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;J. Dubois&quot;, &quot;seats&quot;: 27, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 5, &quot;name&quot;: &quot;Umbrella&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;P. Novak&quot;, &quot;seats&quot;: 34, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 6, &quot;name&quot;: &quot;Stark Labs&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 41, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 7, &quot;name&quot;: &quot;Wayne Foods&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 48, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 8, &quot;name&quot;: &quot;Soylent&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 55, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 9, &quot;name&quot;: &quot;Hooli&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;J. Dubois&quot;, &quot;seats&quot;: 62, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 10, &quot;name&quot;: &quot;Vehement&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;P. Novak&quot;, &quot;seats&quot;: 69, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 11, &quot;name&quot;: &quot;Massive Dynamic&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 76, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 12, &quot;name&quot;: &quot;Cyberdyne&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 83, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 13, &quot;name&quot;: &quot;Tyrell&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 90, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 14, &quot;name&quot;: &quot;Aperture&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;J. Dubois&quot;, &quot;seats&quot;: 97, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 15, &quot;name&quot;: &quot;Black Mesa&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;P. Novak&quot;, &quot;seats&quot;: 104, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}]" remote="false" loadingLabel="Advanced example" errorLabel="Advanced example" retryLabel="Advanced example" caption="Accounts" description="Status is supplied as markup through a html column." searchable="true" searchPlaceholder="Enter a sample value" paginated="true" pageSize="5" pageSizes='[5,10,25]' selectable="false" actions='[]' striped="false" bordered="true" gridlines="grid" emptyLabel="Advanced example" noResultsLabel="Advanced example" clearSearchLabel="Advanced example" stickyFirstColumn="false" class="showcase-instance showcase-instance--4" /></div>
</div>
<section class="demo-code" aria-label="Full gridlines and custom cell markup usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;DataTable
size="lg"
columns="[<span>&#123;</span>\"key\": \"name\", \"label\": \"Account\", \"sortable\": true<span>&#125;</span>, <span>&#123;</span>\"key\": \"plan\", \"label\": \"Plan\", \"sortable\": true<span>&#125;</span>, <span>&#123;</span>\"key\": \"owner\", \"label\": \"Owner\"<span>&#125;</span>, <span>&#123;</span>\"key\": \"seats\", \"label\": \"Seats\", \"align\": \"end\", \"sortable\": true<span>&#125;</span>, <span>&#123;</span>\"key\": \"statusHtml\", \"label\": \"Status\", \"align\": \"center\", \"html\": true<span>&#125;</span>]"
rows="[<span>&#123;</span>\"id\": 1, \"name\": \"Northwind\", \"plan\": \"Scale\", \"owner\": \"A. Okafor\", \"seats\": 6, \"status\": \"Active\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--success\\"&gt;Active&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 2, \"name\": \"Acme Industrial\", \"plan\": \"Team\", \"owner\": \"R. Silva\", \"seats\": 13, \"status\": \"Trial\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--info\\"&gt;Trial&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 3, \"name\": \"Globex\", \"plan\": \"Enterprise\", \"owner\": \"M. Chen\", \"seats\": 20, \"status\": \"Past due\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--danger\\"&gt;Past due&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 4, \"name\": \"Initech\", \"plan\": \"Starter\", \"owner\": \"J. Dubois\", \"seats\": 27, \"status\": \"Active\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--success\\"&gt;Active&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 5, \"name\": \"Umbrella\", \"plan\": \"Scale\", \"owner\": \"P. Novak\", \"seats\": 34, \"status\": \"Trial\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--info\\"&gt;Trial&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 6, \"name\": \"Stark Labs\", \"plan\": \"Team\", \"owner\": \"A. Okafor\", \"seats\": 41, \"status\": \"Past due\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--danger\\"&gt;Past due&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 7, \"name\": \"Wayne Foods\", \"plan\": \"Enterprise\", \"owner\": \"R. Silva\", \"seats\": 48, \"status\": \"Active\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--success\\"&gt;Active&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 8, \"name\": \"Soylent\", \"plan\": \"Starter\", \"owner\": \"M. Chen\", \"seats\": 55, \"status\": \"Trial\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--info\\"&gt;Trial&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 9, \"name\": \"Hooli\", \"plan\": \"Scale\", \"owner\": \"J. Dubois\", \"seats\": 62, \"status\": \"Past due\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--danger\\"&gt;Past due&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 10, \"name\": \"Vehement\", \"plan\": \"Team\", \"owner\": \"P. Novak\", \"seats\": 69, \"status\": \"Active\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--success\\"&gt;Active&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 11, \"name\": \"Massive Dynamic\", \"plan\": \"Enterprise\", \"owner\": \"A. Okafor\", \"seats\": 76, \"status\": \"Trial\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--info\\"&gt;Trial&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 12, \"name\": \"Cyberdyne\", \"plan\": \"Starter\", \"owner\": \"R. Silva\", \"seats\": 83, \"status\": \"Past due\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--danger\\"&gt;Past due&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 13, \"name\": \"Tyrell\", \"plan\": \"Scale\", \"owner\": \"M. Chen\", \"seats\": 90, \"status\": \"Active\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--success\\"&gt;Active&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 14, \"name\": \"Aperture\", \"plan\": \"Team\", \"owner\": \"J. Dubois\", \"seats\": 97, \"status\": \"Trial\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--info\\"&gt;Trial&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 15, \"name\": \"Black Mesa\", \"plan\": \"Enterprise\", \"owner\": \"P. Novak\", \"seats\": 104, \"status\": \"Past due\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--danger\\"&gt;Past due&lt;/span&gt;\"<span>&#125;</span>]"
loadingLabel="Advanced example"
errorLabel="Advanced example"
retryLabel="Advanced example"
caption="Accounts"
description="Status is supplied as markup through a html column."
searchPlaceholder="Enter a sample value"
pageSize="5"
pageSizes='[
5,
10,
25
]'
actions='[]'
striped="false"
gridlines="grid"
emptyLabel="Advanced example"
noResultsLabel="Advanced example"
clearSearchLabel="Advanced example"
/&gt;</code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Compact</span><h2>Fixed widths and alignment</h2><p>Columns can set their own width and alignment: text left, counts right, short labels centred. Widths are plain CSS, so percentages, rem and ch all work.</p></div>
<span class="demo-case-number">05</span>
</header>
<div class="demo-workbench">
<div id="data-table-demo-5" class="demo-canvas demo-canvas--5">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><DataTable size="lg" columns="[{&quot;key&quot;: &quot;name&quot;, &quot;label&quot;: &quot;Account&quot;, &quot;sortable&quot;: true, &quot;width&quot;: &quot;40%&quot;}, {&quot;key&quot;: &quot;seats&quot;, &quot;label&quot;: &quot;Seats&quot;, &quot;align&quot;: &quot;end&quot;, &quot;sortable&quot;: true, &quot;width&quot;: &quot;20%&quot;}, {&quot;key&quot;: &quot;plan&quot;, &quot;label&quot;: &quot;Plan&quot;, &quot;align&quot;: &quot;center&quot;, &quot;width&quot;: &quot;20%&quot;}, {&quot;key&quot;: &quot;status&quot;, &quot;label&quot;: &quot;Status&quot;, &quot;align&quot;: &quot;end&quot;, &quot;width&quot;: &quot;20%&quot;}]" rows="[{&quot;id&quot;: 1, &quot;name&quot;: &quot;Northwind&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 6, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 2, &quot;name&quot;: &quot;Acme Industrial&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 13, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 3, &quot;name&quot;: &quot;Globex&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 20, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 4, &quot;name&quot;: &quot;Initech&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;J. Dubois&quot;, &quot;seats&quot;: 27, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 5, &quot;name&quot;: &quot;Umbrella&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;P. Novak&quot;, &quot;seats&quot;: 34, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 6, &quot;name&quot;: &quot;Stark Labs&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 41, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 7, &quot;name&quot;: &quot;Wayne Foods&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 48, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 8, &quot;name&quot;: &quot;Soylent&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 55, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 9, &quot;name&quot;: &quot;Hooli&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;J. Dubois&quot;, &quot;seats&quot;: 62, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 10, &quot;name&quot;: &quot;Vehement&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;P. Novak&quot;, &quot;seats&quot;: 69, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 11, &quot;name&quot;: &quot;Massive Dynamic&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 76, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 12, &quot;name&quot;: &quot;Cyberdyne&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 83, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 13, &quot;name&quot;: &quot;Tyrell&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 90, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 14, &quot;name&quot;: &quot;Aperture&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;J. Dubois&quot;, &quot;seats&quot;: 97, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 15, &quot;name&quot;: &quot;Black Mesa&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;P. Novak&quot;, &quot;seats&quot;: 104, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}]" remote="false" loadingLabel="Advanced example" errorLabel="Advanced example" retryLabel="Advanced example" caption="Column sizing" description="A richer configuration demonstrating additional content and hierarchy." searchable="false" searchPlaceholder="Enter a sample value" paginated="true" pageSize="5" pageSizes='[5,10,25]' selectable="false" actions='[]' striped="true" bordered="true" density="comfortable" emptyLabel="Advanced example" noResultsLabel="Advanced example" clearSearchLabel="Advanced example" stickyFirstColumn="false" class="showcase-instance showcase-instance--5" /></div>
</div>
<section class="demo-code" aria-label="Fixed widths and alignment usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;DataTable
size="lg"
columns="[<span>&#123;</span>\"key\": \"name\", \"label\": \"Account\", \"sortable\": true, \"width\": \"40%\"<span>&#125;</span>, <span>&#123;</span>\"key\": \"seats\", \"label\": \"Seats\", \"align\": \"end\", \"sortable\": true, \"width\": \"20%\"<span>&#125;</span>, <span>&#123;</span>\"key\": \"plan\", \"label\": \"Plan\", \"align\": \"center\", \"width\": \"20%\"<span>&#125;</span>, <span>&#123;</span>\"key\": \"status\", \"label\": \"Status\", \"align\": \"end\", \"width\": \"20%\"<span>&#125;</span>]"
rows="[<span>&#123;</span>\"id\": 1, \"name\": \"Northwind\", \"plan\": \"Scale\", \"owner\": \"A. Okafor\", \"seats\": 6, \"status\": \"Active\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--success\\"&gt;Active&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 2, \"name\": \"Acme Industrial\", \"plan\": \"Team\", \"owner\": \"R. Silva\", \"seats\": 13, \"status\": \"Trial\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--info\\"&gt;Trial&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 3, \"name\": \"Globex\", \"plan\": \"Enterprise\", \"owner\": \"M. Chen\", \"seats\": 20, \"status\": \"Past due\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--danger\\"&gt;Past due&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 4, \"name\": \"Initech\", \"plan\": \"Starter\", \"owner\": \"J. Dubois\", \"seats\": 27, \"status\": \"Active\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--success\\"&gt;Active&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 5, \"name\": \"Umbrella\", \"plan\": \"Scale\", \"owner\": \"P. Novak\", \"seats\": 34, \"status\": \"Trial\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--info\\"&gt;Trial&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 6, \"name\": \"Stark Labs\", \"plan\": \"Team\", \"owner\": \"A. Okafor\", \"seats\": 41, \"status\": \"Past due\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--danger\\"&gt;Past due&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 7, \"name\": \"Wayne Foods\", \"plan\": \"Enterprise\", \"owner\": \"R. Silva\", \"seats\": 48, \"status\": \"Active\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--success\\"&gt;Active&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 8, \"name\": \"Soylent\", \"plan\": \"Starter\", \"owner\": \"M. Chen\", \"seats\": 55, \"status\": \"Trial\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--info\\"&gt;Trial&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 9, \"name\": \"Hooli\", \"plan\": \"Scale\", \"owner\": \"J. Dubois\", \"seats\": 62, \"status\": \"Past due\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--danger\\"&gt;Past due&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 10, \"name\": \"Vehement\", \"plan\": \"Team\", \"owner\": \"P. Novak\", \"seats\": 69, \"status\": \"Active\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--success\\"&gt;Active&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 11, \"name\": \"Massive Dynamic\", \"plan\": \"Enterprise\", \"owner\": \"A. Okafor\", \"seats\": 76, \"status\": \"Trial\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--info\\"&gt;Trial&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 12, \"name\": \"Cyberdyne\", \"plan\": \"Starter\", \"owner\": \"R. Silva\", \"seats\": 83, \"status\": \"Past due\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--danger\\"&gt;Past due&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 13, \"name\": \"Tyrell\", \"plan\": \"Scale\", \"owner\": \"M. Chen\", \"seats\": 90, \"status\": \"Active\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--success\\"&gt;Active&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 14, \"name\": \"Aperture\", \"plan\": \"Team\", \"owner\": \"J. Dubois\", \"seats\": 97, \"status\": \"Trial\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--info\\"&gt;Trial&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 15, \"name\": \"Black Mesa\", \"plan\": \"Enterprise\", \"owner\": \"P. Novak\", \"seats\": 104, \"status\": \"Past due\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--danger\\"&gt;Past due&lt;/span&gt;\"<span>&#125;</span>]"
loadingLabel="Advanced example"
errorLabel="Advanced example"
retryLabel="Advanced example"
caption="Column sizing"
description="A richer configuration demonstrating additional content and hierarchy."
searchable="false"
searchPlaceholder="Enter a sample value"
pageSize="5"
pageSizes='[
5,
10,
25
]'
actions='[]'
density="comfortable"
emptyLabel="Advanced example"
noResultsLabel="Advanced example"
clearSearchLabel="Advanced example"
/&gt;</code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Advanced</span><h2>Comparison layout</h2><p>layout="comparison" transposes the table: fields run down the left and each record gets its own column. The label column stays put while the rest scrolls sideways.</p></div>
<span class="demo-case-number">06</span>
</header>
<div class="demo-workbench">
<div id="data-table-demo-6" class="demo-canvas demo-canvas--6">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><DataTable size="lg" columns="[{&quot;key&quot;: &quot;name&quot;, &quot;label&quot;: &quot;Plan&quot;}, {&quot;key&quot;: &quot;plan&quot;, &quot;label&quot;: &quot;Tier&quot;}, {&quot;key&quot;: &quot;owner&quot;, &quot;label&quot;: &quot;Owner&quot;}, {&quot;key&quot;: &quot;seats&quot;, &quot;label&quot;: &quot;Seats&quot;, &quot;align&quot;: &quot;end&quot;, &quot;type&quot;: &quot;number&quot;}, {&quot;key&quot;: &quot;status&quot;, &quot;label&quot;: &quot;Status&quot;, &quot;align&quot;: &quot;center&quot;}]" rows="[{&quot;id&quot;: 1, &quot;name&quot;: &quot;Northwind&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 6, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 2, &quot;name&quot;: &quot;Acme Industrial&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 13, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 3, &quot;name&quot;: &quot;Globex&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 20, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 4, &quot;name&quot;: &quot;Initech&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;J. Dubois&quot;, &quot;seats&quot;: 27, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 5, &quot;name&quot;: &quot;Umbrella&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;P. Novak&quot;, &quot;seats&quot;: 34, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 6, &quot;name&quot;: &quot;Stark Labs&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 41, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 7, &quot;name&quot;: &quot;Wayne Foods&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 48, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 8, &quot;name&quot;: &quot;Soylent&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 55, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 9, &quot;name&quot;: &quot;Hooli&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;J. Dubois&quot;, &quot;seats&quot;: 62, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 10, &quot;name&quot;: &quot;Vehement&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;P. Novak&quot;, &quot;seats&quot;: 69, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 11, &quot;name&quot;: &quot;Massive Dynamic&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 76, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 12, &quot;name&quot;: &quot;Cyberdyne&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 83, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 13, &quot;name&quot;: &quot;Tyrell&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 90, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 14, &quot;name&quot;: &quot;Aperture&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;J. Dubois&quot;, &quot;seats&quot;: 97, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 15, &quot;name&quot;: &quot;Black Mesa&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;P. Novak&quot;, &quot;seats&quot;: 104, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}]" remote="false" loadingLabel="Advanced example" errorLabel="Advanced example" retryLabel="Advanced example" caption="Feature" description="A richer configuration demonstrating additional content and hierarchy." searchable="false" searchPlaceholder="Enter a sample value" paginated="true" pageSize="3" pageSizes='[3,5,8]' selectable="false" actions='[]' striped="true" bordered="true" emptyLabel="Advanced example" noResultsLabel="Advanced example" clearSearchLabel="Advanced example" stickyFirstColumn="false" layout="comparison" class="showcase-instance showcase-instance--6" /></div>
</div>
<section class="demo-code" aria-label="Comparison layout usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;DataTable
size="lg"
columns="[<span>&#123;</span>\"key\": \"name\", \"label\": \"Plan\"<span>&#125;</span>, <span>&#123;</span>\"key\": \"plan\", \"label\": \"Tier\"<span>&#125;</span>, <span>&#123;</span>\"key\": \"owner\", \"label\": \"Owner\"<span>&#125;</span>, <span>&#123;</span>\"key\": \"seats\", \"label\": \"Seats\", \"align\": \"end\", \"type\": \"number\"<span>&#125;</span>, <span>&#123;</span>\"key\": \"status\", \"label\": \"Status\", \"align\": \"center\"<span>&#125;</span>]"
rows="[<span>&#123;</span>\"id\": 1, \"name\": \"Northwind\", \"plan\": \"Scale\", \"owner\": \"A. Okafor\", \"seats\": 6, \"status\": \"Active\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--success\\"&gt;Active&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 2, \"name\": \"Acme Industrial\", \"plan\": \"Team\", \"owner\": \"R. Silva\", \"seats\": 13, \"status\": \"Trial\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--info\\"&gt;Trial&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 3, \"name\": \"Globex\", \"plan\": \"Enterprise\", \"owner\": \"M. Chen\", \"seats\": 20, \"status\": \"Past due\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--danger\\"&gt;Past due&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 4, \"name\": \"Initech\", \"plan\": \"Starter\", \"owner\": \"J. Dubois\", \"seats\": 27, \"status\": \"Active\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--success\\"&gt;Active&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 5, \"name\": \"Umbrella\", \"plan\": \"Scale\", \"owner\": \"P. Novak\", \"seats\": 34, \"status\": \"Trial\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--info\\"&gt;Trial&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 6, \"name\": \"Stark Labs\", \"plan\": \"Team\", \"owner\": \"A. Okafor\", \"seats\": 41, \"status\": \"Past due\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--danger\\"&gt;Past due&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 7, \"name\": \"Wayne Foods\", \"plan\": \"Enterprise\", \"owner\": \"R. Silva\", \"seats\": 48, \"status\": \"Active\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--success\\"&gt;Active&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 8, \"name\": \"Soylent\", \"plan\": \"Starter\", \"owner\": \"M. Chen\", \"seats\": 55, \"status\": \"Trial\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--info\\"&gt;Trial&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 9, \"name\": \"Hooli\", \"plan\": \"Scale\", \"owner\": \"J. Dubois\", \"seats\": 62, \"status\": \"Past due\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--danger\\"&gt;Past due&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 10, \"name\": \"Vehement\", \"plan\": \"Team\", \"owner\": \"P. Novak\", \"seats\": 69, \"status\": \"Active\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--success\\"&gt;Active&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 11, \"name\": \"Massive Dynamic\", \"plan\": \"Enterprise\", \"owner\": \"A. Okafor\", \"seats\": 76, \"status\": \"Trial\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--info\\"&gt;Trial&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 12, \"name\": \"Cyberdyne\", \"plan\": \"Starter\", \"owner\": \"R. Silva\", \"seats\": 83, \"status\": \"Past due\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--danger\\"&gt;Past due&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 13, \"name\": \"Tyrell\", \"plan\": \"Scale\", \"owner\": \"M. Chen\", \"seats\": 90, \"status\": \"Active\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--success\\"&gt;Active&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 14, \"name\": \"Aperture\", \"plan\": \"Team\", \"owner\": \"J. Dubois\", \"seats\": 97, \"status\": \"Trial\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--info\\"&gt;Trial&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 15, \"name\": \"Black Mesa\", \"plan\": \"Enterprise\", \"owner\": \"P. Novak\", \"seats\": 104, \"status\": \"Past due\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--danger\\"&gt;Past due&lt;/span&gt;\"<span>&#125;</span>]"
loadingLabel="Advanced example"
errorLabel="Advanced example"
retryLabel="Advanced example"
caption="Feature"
description="A richer configuration demonstrating additional content and hierarchy."
searchable="false"
searchPlaceholder="Enter a sample value"
pageSize="3"
pageSizes='[
3,
5,
8
]'
actions='[]'
emptyLabel="Advanced example"
noResultsLabel="Advanced example"
clearSearchLabel="Advanced example"
layout="comparison"
/&gt;</code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Recommended</span><h2>Sticky first column</h2><p>With many columns the table scrolls sideways; stickyFirstColumn keeps the record name in view so a row never loses its label.</p></div>
<span class="demo-case-number">07</span>
</header>
<div class="demo-workbench">
<div id="data-table-demo-7" class="demo-canvas demo-canvas--7">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><DataTable size="lg" columns="[{&quot;key&quot;: &quot;name&quot;, &quot;label&quot;: &quot;Account&quot;, &quot;sortable&quot;: true}, {&quot;key&quot;: &quot;plan&quot;, &quot;label&quot;: &quot;Plan&quot;, &quot;sortable&quot;: true}, {&quot;key&quot;: &quot;owner&quot;, &quot;label&quot;: &quot;Owner&quot;}, {&quot;key&quot;: &quot;seats&quot;, &quot;label&quot;: &quot;Seats&quot;, &quot;align&quot;: &quot;end&quot;, &quot;sortable&quot;: true}, {&quot;key&quot;: &quot;status&quot;, &quot;label&quot;: &quot;Status&quot;, &quot;align&quot;: &quot;center&quot;}]" rows="[{&quot;id&quot;: 1, &quot;name&quot;: &quot;Northwind&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 6, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 2, &quot;name&quot;: &quot;Acme Industrial&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 13, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 3, &quot;name&quot;: &quot;Globex&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 20, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 4, &quot;name&quot;: &quot;Initech&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;J. Dubois&quot;, &quot;seats&quot;: 27, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 5, &quot;name&quot;: &quot;Umbrella&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;P. Novak&quot;, &quot;seats&quot;: 34, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 6, &quot;name&quot;: &quot;Stark Labs&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 41, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 7, &quot;name&quot;: &quot;Wayne Foods&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 48, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 8, &quot;name&quot;: &quot;Soylent&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 55, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 9, &quot;name&quot;: &quot;Hooli&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;J. Dubois&quot;, &quot;seats&quot;: 62, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 10, &quot;name&quot;: &quot;Vehement&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;P. Novak&quot;, &quot;seats&quot;: 69, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 11, &quot;name&quot;: &quot;Massive Dynamic&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 76, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 12, &quot;name&quot;: &quot;Cyberdyne&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 83, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 13, &quot;name&quot;: &quot;Tyrell&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 90, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 14, &quot;name&quot;: &quot;Aperture&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;J. Dubois&quot;, &quot;seats&quot;: 97, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 15, &quot;name&quot;: &quot;Black Mesa&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;P. Novak&quot;, &quot;seats&quot;: 104, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}]" remote="false" loadingLabel="Advanced example" errorLabel="Advanced example" retryLabel="Advanced example" caption="Accounts" description="Scroll the table horizontally on a narrow screen." searchable="true" searchPlaceholder="Enter a sample value" paginated="true" pageSize="5" pageSizes='[5,10,25]' selectable="false" actions='[]' striped="true" bordered="true" emptyLabel="Advanced example" noResultsLabel="Advanced example" clearSearchLabel="Advanced example" stickyFirstColumn="true" class="showcase-instance showcase-instance--7" /></div>
</div>
<section class="demo-code" aria-label="Sticky first column usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;DataTable
size="lg"
columns="[<span>&#123;</span>\"key\": \"name\", \"label\": \"Account\", \"sortable\": true<span>&#125;</span>, <span>&#123;</span>\"key\": \"plan\", \"label\": \"Plan\", \"sortable\": true<span>&#125;</span>, <span>&#123;</span>\"key\": \"owner\", \"label\": \"Owner\"<span>&#125;</span>, <span>&#123;</span>\"key\": \"seats\", \"label\": \"Seats\", \"align\": \"end\", \"sortable\": true<span>&#125;</span>, <span>&#123;</span>\"key\": \"status\", \"label\": \"Status\", \"align\": \"center\"<span>&#125;</span>]"
rows="[<span>&#123;</span>\"id\": 1, \"name\": \"Northwind\", \"plan\": \"Scale\", \"owner\": \"A. Okafor\", \"seats\": 6, \"status\": \"Active\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--success\\"&gt;Active&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 2, \"name\": \"Acme Industrial\", \"plan\": \"Team\", \"owner\": \"R. Silva\", \"seats\": 13, \"status\": \"Trial\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--info\\"&gt;Trial&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 3, \"name\": \"Globex\", \"plan\": \"Enterprise\", \"owner\": \"M. Chen\", \"seats\": 20, \"status\": \"Past due\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--danger\\"&gt;Past due&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 4, \"name\": \"Initech\", \"plan\": \"Starter\", \"owner\": \"J. Dubois\", \"seats\": 27, \"status\": \"Active\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--success\\"&gt;Active&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 5, \"name\": \"Umbrella\", \"plan\": \"Scale\", \"owner\": \"P. Novak\", \"seats\": 34, \"status\": \"Trial\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--info\\"&gt;Trial&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 6, \"name\": \"Stark Labs\", \"plan\": \"Team\", \"owner\": \"A. Okafor\", \"seats\": 41, \"status\": \"Past due\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--danger\\"&gt;Past due&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 7, \"name\": \"Wayne Foods\", \"plan\": \"Enterprise\", \"owner\": \"R. Silva\", \"seats\": 48, \"status\": \"Active\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--success\\"&gt;Active&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 8, \"name\": \"Soylent\", \"plan\": \"Starter\", \"owner\": \"M. Chen\", \"seats\": 55, \"status\": \"Trial\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--info\\"&gt;Trial&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 9, \"name\": \"Hooli\", \"plan\": \"Scale\", \"owner\": \"J. Dubois\", \"seats\": 62, \"status\": \"Past due\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--danger\\"&gt;Past due&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 10, \"name\": \"Vehement\", \"plan\": \"Team\", \"owner\": \"P. Novak\", \"seats\": 69, \"status\": \"Active\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--success\\"&gt;Active&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 11, \"name\": \"Massive Dynamic\", \"plan\": \"Enterprise\", \"owner\": \"A. Okafor\", \"seats\": 76, \"status\": \"Trial\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--info\\"&gt;Trial&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 12, \"name\": \"Cyberdyne\", \"plan\": \"Starter\", \"owner\": \"R. Silva\", \"seats\": 83, \"status\": \"Past due\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--danger\\"&gt;Past due&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 13, \"name\": \"Tyrell\", \"plan\": \"Scale\", \"owner\": \"M. Chen\", \"seats\": 90, \"status\": \"Active\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--success\\"&gt;Active&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 14, \"name\": \"Aperture\", \"plan\": \"Team\", \"owner\": \"J. Dubois\", \"seats\": 97, \"status\": \"Trial\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--info\\"&gt;Trial&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 15, \"name\": \"Black Mesa\", \"plan\": \"Enterprise\", \"owner\": \"P. Novak\", \"seats\": 104, \"status\": \"Past due\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--danger\\"&gt;Past due&lt;/span&gt;\"<span>&#125;</span>]"
loadingLabel="Advanced example"
errorLabel="Advanced example"
retryLabel="Advanced example"
caption="Accounts"
description="Scroll the table horizontally on a narrow screen."
searchPlaceholder="Enter a sample value"
pageSize="5"
pageSizes='[
5,
10,
25
]'
actions='[]'
emptyLabel="Advanced example"
noResultsLabel="Advanced example"
clearSearchLabel="Advanced example"
stickyFirstColumn="true"
/&gt;</code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Compact</span><h2>Compact density, no pagination</h2><p>Every row at once, tighter rows, no footer.</p></div>
<span class="demo-case-number">08</span>
</header>
<div class="demo-workbench">
<div id="data-table-demo-8" class="demo-canvas demo-canvas--8">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><DataTable size="lg" columns="[{&quot;key&quot;: &quot;name&quot;, &quot;label&quot;: &quot;Account&quot;, &quot;sortable&quot;: true}, {&quot;key&quot;: &quot;plan&quot;, &quot;label&quot;: &quot;Plan&quot;, &quot;sortable&quot;: true}, {&quot;key&quot;: &quot;owner&quot;, &quot;label&quot;: &quot;Owner&quot;}, {&quot;key&quot;: &quot;seats&quot;, &quot;label&quot;: &quot;Seats&quot;, &quot;align&quot;: &quot;end&quot;, &quot;sortable&quot;: true}, {&quot;key&quot;: &quot;status&quot;, &quot;label&quot;: &quot;Status&quot;, &quot;align&quot;: &quot;center&quot;}]" rows="[{&quot;id&quot;: 1, &quot;name&quot;: &quot;Northwind&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 6, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 2, &quot;name&quot;: &quot;Acme Industrial&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 13, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 3, &quot;name&quot;: &quot;Globex&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 20, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 4, &quot;name&quot;: &quot;Initech&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;J. Dubois&quot;, &quot;seats&quot;: 27, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 5, &quot;name&quot;: &quot;Umbrella&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;P. Novak&quot;, &quot;seats&quot;: 34, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 6, &quot;name&quot;: &quot;Stark Labs&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 41, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 7, &quot;name&quot;: &quot;Wayne Foods&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 48, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 8, &quot;name&quot;: &quot;Soylent&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 55, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 9, &quot;name&quot;: &quot;Hooli&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;J. Dubois&quot;, &quot;seats&quot;: 62, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 10, &quot;name&quot;: &quot;Vehement&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;P. Novak&quot;, &quot;seats&quot;: 69, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 11, &quot;name&quot;: &quot;Massive Dynamic&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;A. Okafor&quot;, &quot;seats&quot;: 76, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 12, &quot;name&quot;: &quot;Cyberdyne&quot;, &quot;plan&quot;: &quot;Starter&quot;, &quot;owner&quot;: &quot;R. Silva&quot;, &quot;seats&quot;: 83, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}, {&quot;id&quot;: 13, &quot;name&quot;: &quot;Tyrell&quot;, &quot;plan&quot;: &quot;Scale&quot;, &quot;owner&quot;: &quot;M. Chen&quot;, &quot;seats&quot;: 90, &quot;status&quot;: &quot;Active&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--success\&quot;&gt;Active&lt;/span&gt;&quot;}, {&quot;id&quot;: 14, &quot;name&quot;: &quot;Aperture&quot;, &quot;plan&quot;: &quot;Team&quot;, &quot;owner&quot;: &quot;J. Dubois&quot;, &quot;seats&quot;: 97, &quot;status&quot;: &quot;Trial&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--info\&quot;&gt;Trial&lt;/span&gt;&quot;}, {&quot;id&quot;: 15, &quot;name&quot;: &quot;Black Mesa&quot;, &quot;plan&quot;: &quot;Enterprise&quot;, &quot;owner&quot;: &quot;P. Novak&quot;, &quot;seats&quot;: 104, &quot;status&quot;: &quot;Past due&quot;, &quot;statusHtml&quot;: &quot;&lt;span class=\&quot;showcase-pill showcase-pill--danger\&quot;&gt;Past due&lt;/span&gt;&quot;}]" remote="false" loadingLabel="Advanced example" errorLabel="Advanced example" retryLabel="Advanced example" caption="All accounts" description="A richer configuration demonstrating additional content and hierarchy." searchable="false" searchPlaceholder="Enter a sample value" paginated="false" pageSize="31" pageSizes='[5,10,25]' selectable="false" actions='[]' striped="false" bordered="true" density="compact" emptyLabel="Advanced example" noResultsLabel="Advanced example" clearSearchLabel="Advanced example" stickyFirstColumn="false" class="showcase-instance showcase-instance--8" /></div>
</div>
<section class="demo-code" aria-label="Compact density, no pagination usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;DataTable
size="lg"
columns="[<span>&#123;</span>\"key\": \"name\", \"label\": \"Account\", \"sortable\": true<span>&#125;</span>, <span>&#123;</span>\"key\": \"plan\", \"label\": \"Plan\", \"sortable\": true<span>&#125;</span>, <span>&#123;</span>\"key\": \"owner\", \"label\": \"Owner\"<span>&#125;</span>, <span>&#123;</span>\"key\": \"seats\", \"label\": \"Seats\", \"align\": \"end\", \"sortable\": true<span>&#125;</span>, <span>&#123;</span>\"key\": \"status\", \"label\": \"Status\", \"align\": \"center\"<span>&#125;</span>]"
rows="[<span>&#123;</span>\"id\": 1, \"name\": \"Northwind\", \"plan\": \"Scale\", \"owner\": \"A. Okafor\", \"seats\": 6, \"status\": \"Active\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--success\\"&gt;Active&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 2, \"name\": \"Acme Industrial\", \"plan\": \"Team\", \"owner\": \"R. Silva\", \"seats\": 13, \"status\": \"Trial\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--info\\"&gt;Trial&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 3, \"name\": \"Globex\", \"plan\": \"Enterprise\", \"owner\": \"M. Chen\", \"seats\": 20, \"status\": \"Past due\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--danger\\"&gt;Past due&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 4, \"name\": \"Initech\", \"plan\": \"Starter\", \"owner\": \"J. Dubois\", \"seats\": 27, \"status\": \"Active\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--success\\"&gt;Active&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 5, \"name\": \"Umbrella\", \"plan\": \"Scale\", \"owner\": \"P. Novak\", \"seats\": 34, \"status\": \"Trial\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--info\\"&gt;Trial&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 6, \"name\": \"Stark Labs\", \"plan\": \"Team\", \"owner\": \"A. Okafor\", \"seats\": 41, \"status\": \"Past due\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--danger\\"&gt;Past due&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 7, \"name\": \"Wayne Foods\", \"plan\": \"Enterprise\", \"owner\": \"R. Silva\", \"seats\": 48, \"status\": \"Active\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--success\\"&gt;Active&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 8, \"name\": \"Soylent\", \"plan\": \"Starter\", \"owner\": \"M. Chen\", \"seats\": 55, \"status\": \"Trial\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--info\\"&gt;Trial&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 9, \"name\": \"Hooli\", \"plan\": \"Scale\", \"owner\": \"J. Dubois\", \"seats\": 62, \"status\": \"Past due\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--danger\\"&gt;Past due&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 10, \"name\": \"Vehement\", \"plan\": \"Team\", \"owner\": \"P. Novak\", \"seats\": 69, \"status\": \"Active\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--success\\"&gt;Active&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 11, \"name\": \"Massive Dynamic\", \"plan\": \"Enterprise\", \"owner\": \"A. Okafor\", \"seats\": 76, \"status\": \"Trial\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--info\\"&gt;Trial&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 12, \"name\": \"Cyberdyne\", \"plan\": \"Starter\", \"owner\": \"R. Silva\", \"seats\": 83, \"status\": \"Past due\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--danger\\"&gt;Past due&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 13, \"name\": \"Tyrell\", \"plan\": \"Scale\", \"owner\": \"M. Chen\", \"seats\": 90, \"status\": \"Active\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--success\\"&gt;Active&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 14, \"name\": \"Aperture\", \"plan\": \"Team\", \"owner\": \"J. Dubois\", \"seats\": 97, \"status\": \"Trial\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--info\\"&gt;Trial&lt;/span&gt;\"<span>&#125;</span>, <span>&#123;</span>\"id\": 15, \"name\": \"Black Mesa\", \"plan\": \"Enterprise\", \"owner\": \"P. Novak\", \"seats\": 104, \"status\": \"Past due\", \"statusHtml\": \"&lt;span class=\\"showcase-pill showcase-pill--danger\\"&gt;Past due&lt;/span&gt;\"<span>&#125;</span>]"
loadingLabel="Advanced example"
errorLabel="Advanced example"
retryLabel="Advanced example"
caption="All accounts"
description="A richer configuration demonstrating additional content and hierarchy."
searchable="false"
searchPlaceholder="Enter a sample value"
paginated="false"
pageSize="31"
pageSizes='[
5,
10,
25
]'
actions='[]'
striped="false"
density="compact"
emptyLabel="Advanced example"
noResultsLabel="Advanced example"
clearSearchLabel="Advanced example"
/&gt;</code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Advanced</span><h2>Empty state</h2><p>What a table shows before any records arrive.</p></div>
<span class="demo-case-number">09</span>
</header>
<div class="demo-workbench">
<div id="data-table-demo-9" class="demo-canvas demo-canvas--9">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><DataTable size="lg" columns="[{&quot;key&quot;: &quot;name&quot;, &quot;label&quot;: &quot;Account&quot;, &quot;sortable&quot;: true}, {&quot;key&quot;: &quot;plan&quot;, &quot;label&quot;: &quot;Plan&quot;, &quot;sortable&quot;: true}, {&quot;key&quot;: &quot;owner&quot;, &quot;label&quot;: &quot;Owner&quot;}, {&quot;key&quot;: &quot;seats&quot;, &quot;label&quot;: &quot;Seats&quot;, &quot;align&quot;: &quot;end&quot;, &quot;sortable&quot;: true}, {&quot;key&quot;: &quot;status&quot;, &quot;label&quot;: &quot;Status&quot;, &quot;align&quot;: &quot;center&quot;}]" rows="[]" remote="false" loadingLabel="Advanced example" errorLabel="Advanced example" retryLabel="Advanced example" caption="Accounts" description="A richer configuration demonstrating additional content and hierarchy." searchable="true" searchPlaceholder="Enter a sample value" paginated="true" pageSize="35" pageSizes='[5,10,25]' selectable="false" actions='[]' striped="true" bordered="true" emptyLabel="No accounts match this filter yet" noResultsLabel="Advanced example" clearSearchLabel="Advanced example" stickyFirstColumn="false" class="showcase-instance showcase-instance--9" /></div>
</div>
<section class="demo-code" aria-label="Empty state usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;DataTable
size="lg"
columns="[<span>&#123;</span>\"key\": \"name\", \"label\": \"Account\", \"sortable\": true<span>&#125;</span>, <span>&#123;</span>\"key\": \"plan\", \"label\": \"Plan\", \"sortable\": true<span>&#125;</span>, <span>&#123;</span>\"key\": \"owner\", \"label\": \"Owner\"<span>&#125;</span>, <span>&#123;</span>\"key\": \"seats\", \"label\": \"Seats\", \"align\": \"end\", \"sortable\": true<span>&#125;</span>, <span>&#123;</span>\"key\": \"status\", \"label\": \"Status\", \"align\": \"center\"<span>&#125;</span>]"
rows="[]"
loadingLabel="Advanced example"
errorLabel="Advanced example"
retryLabel="Advanced example"
caption="Accounts"
description="A richer configuration demonstrating additional content and hierarchy."
searchPlaceholder="Enter a sample value"
pageSize="35"
pageSizes='[
5,
10,
25
]'
actions='[]'
emptyLabel="No accounts match this filter yet"
noResultsLabel="Advanced example"
clearSearchLabel="Advanced example"
/&gt;</code></pre>
</section>
</div>
</article></div></section>
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component outputs</span><h2>Receive every typed component output</h2><p>Use declarative output handlers in <code>.wrn</code> files or register a direct output handler from JavaScript. The canonical API exposes <code>payload</code> and does not require <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@sort</code><span>Fires when the component emits the sort event.</span></div><div><code>@search</code><span>Fires when the current search query changes.</span></div><div><code>@pageChange</code><span>Fires when the component emits the pageChange event.</span></div><div><code>@select</code><span>Fires when an item, option, card, or result is selected.</span></div><div><code>@change</code><span>Fires when the component's committed value or selection changes.</span></div><div><code>@rowClick</code><span>Fires when the component emits the rowClick event.</span></div><div><code>@action</code><span>Fires when the component's primary or item action is activated.</span></div><div><code>@request</code><span>Fires when the component emits the request event.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code>&lt;DataTable
@sort='console.log(payload)'
@search='console.log(payload)'
@pageChange='console.log(payload)'
@select='console.log(payload)'
@change='console.log(payload)'
@rowClick='console.log(payload)'
@action='console.log(payload)'
@request='console.log(payload)'
/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Direct output handlers</span><small>.js</small></header><pre><code>import <span>&#123;</span> registerOutputHandler <span>&#125;</span> from "@wrnexus/csr/outputs"
const component = document.querySelector("[data-ui-component=\"DataTable\"], [data-component=\"DataTable\"]")
if (component) registerOutputHandler(component, "sort", (payload) =&gt; <span>&#123;</span>
console.log("sort", payload)
<span>&#125;</span>)
if (component) registerOutputHandler(component, "search", (payload) =&gt; <span>&#123;</span>
console.log("search", payload)
<span>&#125;</span>)
if (component) registerOutputHandler(component, "pageChange", (payload) =&gt; <span>&#123;</span>
console.log("pageChange", payload)
<span>&#125;</span>)
if (component) registerOutputHandler(component, "select", (payload) =&gt; <span>&#123;</span>
console.log("select", payload)
<span>&#125;</span>)
if (component) registerOutputHandler(component, "change", (payload) =&gt; <span>&#123;</span>
console.log("change", payload)
<span>&#125;</span>)
if (component) registerOutputHandler(component, "rowClick", (payload) =&gt; <span>&#123;</span>
console.log("rowClick", payload)
<span>&#125;</span>)
if (component) registerOutputHandler(component, "action", (payload) =&gt; <span>&#123;</span>
console.log("action", payload)
<span>&#125;</span>)
if (component) registerOutputHandler(component, "request", (payload) =&gt; <span>&#123;</span>
console.log("request", payload)
<span>&#125;</span>)</code></pre></section></div></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>rows</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>rowKey</code></td><td>string</td><td><code>"id"</code></td><td>No</td></tr><tr><td><code>remote</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>loadingLabel</code></td><td>string</td><td><code>"Loading"</code></td><td>No</td></tr><tr><td><code>errorLabel</code></td><td>string</td><td><code>"Could not load this data"</code></td><td>No</td></tr><tr><td><code>retryLabel</code></td><td>string</td><td><code>"Try again"</code></td><td>No</td></tr><tr><td><code>caption</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>searchable</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>searchPlaceholder</code></td><td>string</td><td><code>"Search"</code></td><td>No</td></tr><tr><td><code>paginated</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>pageSize</code></td><td>number</td><td><code>10</code></td><td>No</td></tr><tr><td><code>paginationStyle</code></td><td>string</td><td><code>"compact"</code></td><td>No</td></tr><tr><td><code>pageSizes</code></td><td>number[]</td><td><code>[10, 25, 50]</code></td><td>No</td></tr><tr><td><code>selectable</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>actions</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>striped</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>bordered</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>gridlines</code></td><td>string</td><td><code>"rows"</code></td><td>No</td></tr><tr><td><code>density</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>emptyLabel</code></td><td>string</td><td><code>"No records to show"</code></td><td>No</td></tr><tr><td><code>noResultsLabel</code></td><td>string</td><td><code>"No records match your search"</code></td><td>No</td></tr><tr><td><code>clearSearchLabel</code></td><td>string</td><td><code>"Clear search"</code></td><td>No</td></tr><tr><td><code>stickyFirstColumn</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>layout</code></td><td>string</td><td><code>"rows"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main>
<aside class="detail-aside">
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#data-table-demo-1">Sortable, searchable and paged</a><a href="#data-table-demo-2">Bulk actions on selection</a><a href="#data-table-demo-3">Numbered pagination</a><a href="#data-table-demo-4">Full gridlines and custom cell markup</a><a href="#data-table-demo-5">Fixed widths and alignment</a><a href="#data-table-demo-6">Comparison layout</a><a href="#data-table-demo-7">Sticky first column</a><a href="#data-table-demo-8">Compact density, no pagination</a><a href="#data-table-demo-9">Empty state</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
</aside>
</div>
<nav class="detail-pagination">
<span></span>
<span></span>
</nav>
}
}
Reference in New Issue View Git Blame Copy Permalink