Source code

src/showcase/pages/components/data-table.html

This file is included in this documentation build. It is displayed as code and is not executed.

Download source

<!--
Demonstrate the data tables component on its own lazy route.

@author Laurent Declercq l.declercq@agon-innovation.ch
@version 20260921
-->
<section x-data="componentCatalog" class="component-library">
  <include
    src="partials/components/page-header.html"
    locals='{"title":"componentDataTable"}'
  ></include>
  <div class="catalog-grid">
    <div class="full" x-data="catalogTable">
      <div class="catalog-section-heading">
        <h2 class="h5" x-text="$t('galleryTable')"></h2>
        <label
          class="visually-hidden"
          for="catalog-table-search"
          x-text="$t('galleryTableSearch')"
        ></label>
        <input
          id="catalog-table-search"
          type="search"
          class="form-control catalog-search"
          :placeholder="$t('galleryTableSearch')"
          x-model="query.search"
          @input.debounce.250ms="query.page = 1; apply()"
        />
      </div>
      <include src="{{ uiRoot }}/data-table.html"></include>
    </div>
  </div>
</section>