ClintchizandClaude Opus 5
949cf78636
DataTable replaces the 20-line Table scaffold entirely: columns, sorting, filtering, pagination, selection, bulk actions, comparison layout, sticky first column, custom HTML cells, and a remote source driven by a `request` output rather than a function prop (props travel as HTML attributes, so a function arrives as its own source text). Toaster replaces the hand-rolled status div: tone icons, actions, hover pause/resume and a progress bar. Overlays audit -- Modal and Drawer declared aria-modal="true" but nothing ever moved focus into the panel, so the @keydown handler on their root never ran and closeOnEscape did nothing. Focus, focus restore, a Tab trap and a body scroll lock now live in the reactive runtime, shared by both. ContextMenu placed pointer menus by subtracting a guessed 340x420 from the viewport, which pushed every menu that was not that size away from the pointer; it now positions at the pointer and lets the anchored clamp pull it back once it can be measured. The reactive runtime size budget moves 150k -> 175k to cover anchored overlays, dialog behaviour, the toaster and the DataTable client half. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
28 lines
7.2 KiB
Plaintext
28 lines
7.2 KiB
Plaintext
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
|
page TablesShowcase {
|
|
layout = "showcase"
|
|
seo {
|
|
title = "Tables components"
|
|
description = "1 tables components from @wrnexus/ui."
|
|
}
|
|
view {
|
|
<header class="showcase-hero showcase-hero--category">
|
|
<span class="showcase-eyebrow">Component category</span>
|
|
<h1 class="showcase-title">Tables</h1>
|
|
<p class="showcase-description">1 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
|
|
<div class="category-meta"><span>1 components</span><span>Multiple use cases</span><span>9 live configurations</span></div>
|
|
</header>
|
|
<div class="catalog-grid">
|
|
<article class="catalog-card" data-interactive-preview="false">
|
|
<div class="catalog-card-preview">
|
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
|
<div class="catalog-card-stage"><DataTable size="default" 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": "status", "label": "Status", "align": "center"}]" 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>"}]" 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>
|
|
<div class="catalog-card-body">
|
|
<div><span class="catalog-card-category">Tables</span><h2>Data Table</h2><p>Sortable, filterable, paginated data table with row selection.</p></div>
|
|
<div class="catalog-card-footer"><span>29 props · 1 slots</span><a href="/components/data-table">Explore component <span aria-hidden="true">→</span></a></div>
|
|
</div>
|
|
</article></div>
|
|
}
|
|
}
|