// 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="[{&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>
        <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>
  }
}