@aceshooting/lyra-ui 2.12.0 → 3.0.0

package/dist/components/table/table.class.js

@@ -13,6 +13,8 @@ import { isRtl } from '../../internal/rtl.js';
 import { styles } from './table.styles.js';
 import { chevronIcon } from '../../internal/icons.js';
 import '../empty/empty.class.js';
+import '../pagination/pagination.js';
+import '../spinner/spinner.js';
 /** Interactive elements a nested `cell()` template may render (e.g. an
  *  actions-column button). Clicks/keydowns landing on one of these — or
  *  bubbling up through one — must not be re-interpreted as row/column
@@ -103,6 +105,24 @@ function closestInteractive(target, boundary) {
  * on activation, mirroring `sortKey`/`selectedKey`'s existing
  * presentational-only convention.
  *
+ * Selection is opt-in through the `selectionMode` property. Use `single` or
+ * `multiple` to self-manage row selection; the default `none` remains
+ * presentational. `selectedKeys` contains the raw keys selected in multiple
+ * mode.
+ *
+ * `filterable` adds a compact search field above the grid. `filterText` is
+ * controlled and emits `lyra-filter-change`; `filter` can provide a typed
+ * predicate, otherwise the row is matched against its JSON representation.
+ * `pageSize` enables controlled pagination through the existing
+ * `<lyra-pagination>` primitive. Client mode slices `rows`; server mode
+ * renders the supplied page unchanged while using `totalItems` for the
+ * navigation summary. `loading` keeps the table shell busy and renders an
+ * indeterminate spinner.
+ * Columns with `editable: true` open a native text/number editor on
+ * double-click and emit `lyra-cell-edit`; row mutation remains consumer-owned.
+ * `groupBy` inserts non-focusable group header rows before each group; use
+ * `groupLabel` when the raw group key needs custom content.
+ *
  * @customElement lyra-table
  * @event lyra-sort - A sortable header was activated. `detail: { key }`.
  * @event lyra-row-click - A row was activated. `detail: { row }`.
@@ -117,6 +137,10 @@ function closestInteractive(target, boundary) {
  *   `detail: { row, key }`. Fired only when `expandedContent` is set and
  *   the row passes `canExpand`; does not itself mutate `expandedKeys` — the
  *   consumer updates it and passes the new value back in.
+ * @event lyra-selection-change - Opt-in row selection changed. `detail: { keys }`.
+ * @event lyra-filter-change - The filter field changed. `detail: { text }`.
+ * @event lyra-page-change - A pagination control requested a page. `detail: { page }`.
+ * @event lyra-cell-edit - An inline editor committed a value. `detail: { row, key, value }`.
  * @csspart base - The root wrapper around the `<table>` and its footer controls.
  * @csspart table - The `<table role="grid">` element.
  * @csspart head - The `<thead>` element.
@@ -126,6 +150,9 @@ function closestInteractive(target, boundary) {
  * @csspart foot - The `<tfoot>`, only rendered when at least one column defines `footer`.
  * @csspart footer-row - The single footer row.
  * @csspart footer-cell - A single footer cell.
+ * @csspart cell-editor - The native inline cell editor, shown after a double-click on an editable cell.
+ * @csspart group-row - A non-focusable group header row.
+ * @csspart group-cell - The group header cell.
  * @csspart more-button - The "load more" control, shown when `hasMore` is true.
  * @csspart sort-icon - The chevron shown in the active sortable column's header cell.
  * @csspart reveal-columns-button - The button that toggles `priority`-hidden columns back into view.
@@ -138,6 +165,11 @@ function closestInteractive(target, boundary) {
  *   row whose key is in `expandedKeys`.
  * @csspart expanded-cell - The single `colspan`-spanning `<td>` inside
  *   `expanded-row`, containing `expandedContent(row)`.
+ * @csspart group-row - A non-focusable group header row.
+ * @csspart group-cell - The full-width group header cell.
+ * @csspart filter - The optional row-filter input.
+ * @csspart loading - The loading-state wrapper.
+ * @csspart pagination - The optional pagination component.
  */
 export class LyraTable extends LyraElement {
     constructor() {
@@ -147,6 +179,21 @@ export class LyraTable extends LyraElement {
         this.sortKey = '';
         this.sortDir = 'asc';
         this.selectedKey = null;
+        this.selectionMode = 'none';
+        this.selectedKeys = new Set();
+        this.filterable = false;
+        this.filterText = '';
+        this.filterLabel = '';
+        this.filterPlaceholder = '';
+        this.loading = false;
+        this.loadingLabel = '';
+        /** Set to a positive value to enable the controlled pagination footer. */
+        this.pageSize = 0;
+        /** Controlled current page used when `pageSize` is positive. */
+        this.page = 1;
+        /** Total item count for server pagination; `-1` derives it from filtered rows. */
+        this.totalItems = -1;
+        this.paginationMode = 'client';
         /** Consumer-owned open/closed state, keyed the same way as `rowKey`/
          *  `selectedKey`. The table never mutates this itself — it only reads it
          *  to decide which rows currently render `expandedContent`; toggle it in
@@ -188,9 +235,41 @@ export class LyraTable extends LyraElement {
          *  clicked/navigated to, at which point `focusedRowKey()` falls back to
          *  `selectedKey` (if it matches a row) or the first row. */
         this.activeRowKey = null;
+        this.editingCell = null;
         this.rowsByKey = new Map();
         this.columnsByKey = new Map();
         this.observedHeaders = new Set();
+        this.onFilterInput = (event) => {
+            const input = event.currentTarget;
+            this.filterText = input.value;
+            this.emit('lyra-filter-change', { text: this.filterText });
+        };
+        this.onPaginationChange = (event) => {
+            event.stopPropagation();
+            this.emit('lyra-page-change', event.detail);
+        };
+        this.onEditorKeyDown = (event, rowKey, columnKey) => {
+            event.stopPropagation();
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                this.commitEdit(event, rowKey, columnKey);
+            }
+            else if (event.key === 'Escape') {
+                event.preventDefault();
+                this.editingCell = null;
+            }
+        };
+        this.onTableDoubleClick = (event) => {
+            const target = event.target;
+            const table = event.currentTarget;
+            if (closestInteractive(target, table))
+                return;
+            const cell = target.closest('[part="cell"][data-col-key]');
+            const row = target.closest('[data-row-key]');
+            if (cell && row?.dataset.rowKey && cell.dataset.colKey) {
+                this.startEditing(row.dataset.rowKey, cell.dataset.colKey);
+            }
+        };
         this.toggleColumns = () => {
             this.showAllColumns = !this.showAllColumns;
             this.emit('lyra-columns-revealed', { revealed: this.showAllColumns });
@@ -310,6 +389,43 @@ export class LyraTable extends LyraElement {
     keyOf(row, index) {
         return this.rowKey ? this.rowKey(row) : index;
     }
+    matchingEntries() {
+        const text = this.filterText.trim();
+        if (text === '')
+            return this.rows.map((row, index) => ({ row, index }));
+        const normalized = text.toLocaleLowerCase(this.effectiveLocale);
+        return this.rows.flatMap((row, index) => {
+            const matches = this.filter
+                ? this.filter(row, text)
+                : JSON.stringify(row).toLocaleLowerCase(this.effectiveLocale).includes(normalized);
+            return matches ? [{ row, index }] : [];
+        });
+    }
+    get normalizedPageSize() {
+        return Number.isFinite(this.pageSize) ? Math.max(0, Math.trunc(this.pageSize)) : 0;
+    }
+    get matchingTotalItems() {
+        if (Number.isFinite(this.totalItems) && this.totalItems >= 0)
+            return Math.trunc(this.totalItems);
+        return this.matchingEntries().length;
+    }
+    get pageCount() {
+        const pageSize = this.normalizedPageSize;
+        return pageSize > 0 ? Math.ceil(this.matchingTotalItems / pageSize) : 0;
+    }
+    get appliedPage() {
+        if (this.pageCount === 0)
+            return 1;
+        const page = Number.isFinite(this.page) ? Math.trunc(this.page) : 1;
+        return Math.min(this.pageCount, Math.max(1, page));
+    }
+    renderedEntries() {
+        const entries = this.matchingEntries();
+        if (this.normalizedPageSize === 0 || this.paginationMode === 'server')
+            return entries;
+        const start = (this.appliedPage - 1) * this.normalizedPageSize;
+        return entries.slice(start, start + this.normalizedPageSize);
+    }
     /** The header cell that currently owns `tabindex="0"`. */
     focusedColKey() {
         const visible = this.visibleHeaders();
@@ -330,11 +446,22 @@ export class LyraTable extends LyraElement {
             if (this.rowsByKey.has(selected))
                 return selected;
         }
-        return this.rows.length > 0 ? encodeKey(this.keyOf(this.rows[0], 0)) : null;
+        const first = this.renderedEntries()[0];
+        return first ? encodeKey(this.keyOf(first.row, first.index)) : null;
     }
     willUpdate(changed) {
-        if (changed.has('rows') || changed.has('rowKey')) {
-            this.rowsByKey = new Map(this.rows.map((row, i) => [encodeKey(this.keyOf(row, i)), row]));
+        if (changed.has('rows') ||
+            changed.has('rowKey') ||
+            changed.has('filterText') ||
+            changed.has('filter') ||
+            changed.has('page') ||
+            changed.has('pageSize') ||
+            changed.has('paginationMode') ||
+            changed.has('totalItems')) {
+            this.rowsByKey = new Map(this.renderedEntries().map((entry) => [
+                encodeKey(this.keyOf(entry.row, entry.index)),
+                entry,
+            ]));
         }
         if (changed.has('columns')) {
             this.columnsByKey = new Map(this.columns.map((c) => [c.key, c]));
@@ -411,6 +538,11 @@ export class LyraTable extends LyraElement {
         if (base)
             this.observeBase(base);
         this.observeHeaders();
+        if (changed.has('editingCell') && this.editingCell) {
+            queueMicrotask(() => {
+                this.renderRoot.querySelector('[part="cell-editor"]')?.focus();
+            });
+        }
         // Deferred to a microtask rather than called synchronously here: a real
         // priority-hidden transition mutates the reactive `columnsHidden`
         // property, and doing that from inside this same updated() call stack
@@ -429,14 +561,50 @@ export class LyraTable extends LyraElement {
     }
     activateRow(key) {
         this.activeRowKey = key;
-        const row = this.rowsByKey.get(key);
-        if (row !== undefined)
-            this.emit('lyra-row-click', { row });
+        const entry = this.rowsByKey.get(key);
+        if (entry === undefined)
+            return;
+        const { row, index } = entry;
+        this.emit('lyra-row-click', { row });
+        if (this.selectionMode === 'single') {
+            this.selectedKey = this.keyOf(row, index);
+            this.emit('lyra-selection-change', { keys: this.selectedKey === null ? [] : [this.selectedKey] });
+        }
+        else if (this.selectionMode === 'multiple') {
+            const rawKey = this.keyOf(row, index);
+            const next = new Set(this.selectedKeys);
+            if (next.has(rawKey))
+                next.delete(rawKey);
+            else
+                next.add(rawKey);
+            this.selectedKeys = next;
+            this.emit('lyra-selection-change', { keys: [...next] });
+        }
+    }
+    editorValue(row, column) {
+        const value = column.editValue?.(row) ?? row[column.key] ?? '';
+        return String(value);
+    }
+    startEditing(rowKey, columnKey) {
+        const column = this.columnsByKey.get(columnKey);
+        if (!column?.editable || !this.rowsByKey.has(rowKey))
+            return;
+        this.editingCell = { rowKey, columnKey };
+    }
+    commitEdit(event, rowKey, columnKey) {
+        const input = event.currentTarget;
+        const entry = this.rowsByKey.get(rowKey);
+        const column = this.columnsByKey.get(columnKey);
+        if (!entry || !column?.editable)
+            return;
+        const value = column.editType === 'number' && input.value !== '' ? Number(input.value) : input.value;
+        this.emit('lyra-cell-edit', { row: entry.row, key: columnKey, value });
+        this.editingCell = null;
     }
     activateExpandToggle(key) {
-        const row = this.rowsByKey.get(encodeKey(key));
-        if (row !== undefined)
-            this.emit('lyra-row-expand-toggle', { row, key });
+        const entry = this.rowsByKey.get(encodeKey(key));
+        if (entry !== undefined)
+            this.emit('lyra-row-expand-toggle', { row: entry.row, key });
     }
     /** Header cells currently in the tab sequence — excludes columns hidden by
      *  a `priority`-driven `@container` rule (table.styles.ts), so Left/Right/
@@ -548,7 +716,17 @@ export class LyraTable extends LyraElement {
         description=${this.noColumnsDescription}
       ></lyra-empty>`;
         }
-        if (this.rows.length === 0) {
+        if (this.loading) {
+            return html `<div part="base" aria-busy="true">
+        <div part="loading" role="status" aria-live="polite">
+          <lyra-spinner label-placement="after" accessible-label=${this.localize('tableLoading', this.loadingLabel || undefined)}>
+            ${this.localize('tableLoading', this.loadingLabel || undefined)}
+          </lyra-spinner>
+        </div>
+      </div>`;
+        }
+        const matchingEntries = this.matchingEntries();
+        if (this.rows.length === 0 && !this.filterable && this.normalizedPageSize === 0) {
             return html `<lyra-empty
         heading=${this.localize('noData', this.emptyHeading || undefined)}
         description=${this.emptyDescription}
@@ -558,114 +736,167 @@ export class LyraTable extends LyraElement {
         const focusedRow = this.focusedRowKey();
         const hasColumnWidths = this.columns.some((col) => col.width);
         const hasExpand = Boolean(this.expandedContent);
-        return html `
-      <div part="base" ?data-force-visible=${this.showAllColumns}>
-        <table
-          part="table"
-          role="grid"
-          aria-label=${this.getAttribute('aria-label') || nothing}
-          ?data-has-column-widths=${hasColumnWidths}
-          @click=${this.onTableClick}
-          @keydown=${this.onTableKeyDown}
-        >
-          <colgroup>
-            ${hasExpand ? html `<col style=${styleMap({ 'inline-size': '2.5rem' })} />` : nothing}
-            ${this.columns.map((col) => html `<col style=${styleMap({ 'inline-size': col.width, 'min-inline-size': col.minWidth })} />`)}
-          </colgroup>
-          <thead part="head">
-            <tr role="row">
-              ${hasExpand
-            ? html `<th part="header-cell" data-row-expand-toggle aria-hidden="true"></th>`
-            : nothing}
-              ${this.columns.map((col) => {
-            const active = Boolean(col.sortable) && this.sortKey === col.key;
-            const ariaSort = active ? (this.sortDir === 'asc' ? 'ascending' : 'descending') : 'none';
-            return html `<th
-                  part="header-cell"
-                  role="columnheader"
-                  scope="col"
-                  data-col-key=${col.key}
-                  data-align=${col.align ?? 'start'}
-                  data-priority=${col.priority ?? nothing}
-                  data-sticky=${stickyDirection(col.sticky) ?? nothing}
-                  ?data-sortable=${col.sortable}
-                  aria-sort=${col.sortable ? ariaSort : nothing}
-                  tabindex=${col.key === focusedCol ? '0' : '-1'}
-                >
-                  ${col.headerCell ? col.headerCell(col) : col.label}
-                  ${active
-                ? html `<span part="sort-icon" data-dir=${this.sortDir} aria-hidden="true"
-                        >${chevronIcon()}</span
-                      >`
+        const renderedEntries = this.renderedEntries();
+        const hasPagination = this.normalizedPageSize > 0;
+        const filterLabel = this.localize('tableFilterLabel', this.filterLabel || undefined);
+        const filterPlaceholder = this.localize('tableFilterPlaceholder', this.filterPlaceholder || undefined);
+        const tableContent = renderedEntries.length === 0
+            ? html `<lyra-empty
+            compact
+            heading=${this.localize('noData', this.emptyHeading || undefined)}
+            description=${this.emptyDescription}
+          ></lyra-empty>`
+            : html `<table
+            part="table"
+            role="grid"
+            aria-label=${this.getAttribute('aria-label') || nothing}
+            ?data-has-column-widths=${hasColumnWidths}
+            @click=${this.onTableClick}
+            @keydown=${this.onTableKeyDown}
+            @dblclick=${this.onTableDoubleClick}
+          >
+            <colgroup>
+              ${hasExpand ? html `<col style=${styleMap({ 'inline-size': '2.5rem' })} />` : nothing}
+              ${this.columns.map((col) => html `<col style=${styleMap({ 'inline-size': col.width, 'min-inline-size': col.minWidth })} />`)}
+            </colgroup>
+            <thead part="head">
+              <tr role="row">
+                ${hasExpand
+                ? html `<th part="header-cell" data-row-expand-toggle aria-hidden="true"></th>`
                 : nothing}
-                </th>`;
-        })}
-            </tr>
-          </thead>
-          <tbody>
-            ${repeat(this.rows, (row, i) => this.keyOf(row, i), (row, i) => {
-            const key = this.keyOf(row, i);
-            const selected = this.selectedKey !== null && this.selectedKey === key;
-            const canExpandRow = hasExpand && (this.canExpand ? this.canExpand(row) : true);
-            const rowExpanded = canExpandRow && this.expandedKeys.has(key);
-            return [
-                html `<tr
-                    part="row"
-                    role="row"
-                    data-row-key=${encodeKey(key)}
-                    aria-selected=${selected ? 'true' : 'false'}
-                    tabindex=${encodeKey(key) === focusedRow ? '0' : '-1'}
+                ${this.columns.map((col) => {
+                const active = Boolean(col.sortable) && this.sortKey === col.key;
+                const ariaSort = active ? (this.sortDir === 'asc' ? 'ascending' : 'descending') : 'none';
+                return html `<th
+                    part="header-cell"
+                    role="columnheader"
+                    scope="col"
+                    data-col-key=${col.key}
+                    data-align=${col.align ?? 'start'}
+                    data-priority=${col.priority ?? nothing}
+                    data-sticky=${stickyDirection(col.sticky) ?? nothing}
+                    ?data-sortable=${col.sortable}
+                    aria-sort=${col.sortable ? ariaSort : nothing}
+                    tabindex=${col.key === focusedCol ? '0' : '-1'}
                   >
-                    ${hasExpand
-                    ? html `<td part="expand-toggle-cell">
-                          ${canExpandRow
-                        ? html `<button
-                                type="button"
-                                part="row-expand-toggle"
-                                aria-expanded=${String(rowExpanded)}
-                                aria-label=${this.localize(rowExpanded ? 'collapse' : 'expand')}
-                                @click=${() => this.activateExpandToggle(key)}
-                              >
-                                <span part="row-expand-icon" aria-hidden="true">${chevronIcon()}</span>
-                              </button>`
-                        : nothing}
-                        </td>`
+                    ${col.headerCell ? col.headerCell(col) : col.label}
+                    ${active
+                    ? html `<span part="sort-icon" data-dir=${this.sortDir} aria-hidden="true"
+                          >${chevronIcon()}</span
+                        >`
                     : nothing}
+                  </th>`;
+            })}
+              </tr>
+            </thead>
+            <tbody>
+              ${repeat(renderedEntries, (entry) => this.keyOf(entry.row, entry.index), (entry, entryIndex) => {
+                const { row, index } = entry;
+                const key = this.keyOf(row, index);
+                const selected = (this.selectedKey !== null && this.selectedKey === key) || this.selectedKeys.has(key);
+                const canExpandRow = hasExpand && (this.canExpand ? this.canExpand(row) : true);
+                const rowExpanded = canExpandRow && this.expandedKeys.has(key);
+                const groupKey = this.groupBy?.(row);
+                const previousGroupKey = entryIndex > 0 ? this.groupBy?.(renderedEntries[entryIndex - 1].row) : undefined;
+                const isNewGroup = this.groupBy !== undefined && (entryIndex === 0 || groupKey !== previousGroupKey);
+                return [
+                    isNewGroup
+                        ? html `<tr part="group-row" role="row">
+                          <td
+                            part="group-cell"
+                            role="gridcell"
+                            colspan=${this.columns.length + (hasExpand ? 1 : 0)}
+                          >
+                            ${this.groupLabel
+                            ? this.groupLabel(groupKey, renderedEntries
+                                .filter((candidate) => this.groupBy?.(candidate.row) === groupKey)
+                                .map((candidate) => candidate.row))
+                            : String(groupKey)}
+                          </td>
+                        </tr>`
+                        : nothing,
+                    html `<tr
+                      part="row"
+                      role="row"
+                      data-row-key=${encodeKey(key)}
+                      aria-selected=${selected ? 'true' : 'false'}
+                      tabindex=${encodeKey(key) === focusedRow ? '0' : '-1'}
+                    >
+                      ${hasExpand
+                        ? html `<td part="expand-toggle-cell">
+                            ${canExpandRow
+                            ? html `<button
+                                  type="button"
+                                  part="row-expand-toggle"
+                                  aria-expanded=${String(rowExpanded)}
+                                  aria-label=${this.localize(rowExpanded ? 'collapse' : 'expand')}
+                                  @click=${() => this.activateExpandToggle(key)}
+                                >
+                                  <span part="row-expand-icon" aria-hidden="true">${chevronIcon()}</span>
+                                </button>`
+                            : nothing}
+                          </td>`
+                        : nothing}
+                      ${this.columns.map((col) => html `<td
+                            part="cell"
+                            role="gridcell"
+                            data-col-key=${col.key}
+                            data-align=${col.align ?? 'start'}
+                            data-priority=${col.priority ?? nothing}
+                            data-sticky=${stickyDirection(col.sticky) ?? nothing}
+                            style=${col.cellStyle ? styleMap(col.cellStyle(row) ?? {}) : nothing}
+                          >
+                            ${this.editingCell?.rowKey === encodeKey(key) && this.editingCell.columnKey === col.key
+                        ? html `<input
+                                  part="cell-editor"
+                                  type=${col.editType ?? 'text'}
+                                  .value=${this.editorValue(row, col)}
+                                  aria-label=${this.localize('tableEditCell', undefined, { column: col.label })}
+                                  @change=${(event) => this.commitEdit(event, encodeKey(key), col.key)}
+                                  @keydown=${(event) => this.onEditorKeyDown(event, encodeKey(key), col.key)}
+                                />`
+                        : col.cell(row)}
+                          </td>`)}
+                    </tr>`,
+                    rowExpanded
+                        ? html `<tr part="expanded-row" role="row">
+                          <td part="expanded-cell" role="gridcell" colspan=${this.columns.length + (hasExpand ? 1 : 0)}>
+                            ${this.expandedContent?.(row)}
+                          </td>
+                        </tr>`
+                        : nothing,
+                ];
+            })}
+            </tbody>
+            ${this.columns.some((c) => c.footer)
+                ? html `<tfoot part="foot">
+                  <tr part="footer-row">
+                    ${hasExpand ? html `<td part="footer-cell" aria-hidden="true"></td>` : nothing}
                     ${this.columns.map((col) => html `<td
-                          part="cell"
-                          role="gridcell"
-                          data-col-key=${col.key}
-                          data-align=${col.align ?? 'start'}
-                          data-priority=${col.priority ?? nothing}
-                          data-sticky=${stickyDirection(col.sticky) ?? nothing}
-                          style=${col.cellStyle ? styleMap(col.cellStyle(row) ?? {}) : nothing}
-                        >
-                          ${col.cell(row)}
-                        </td>`)}
-                  </tr>`,
-                rowExpanded
-                    ? html `<tr part="expanded-row" role="row">
-                        <td part="expanded-cell" role="gridcell" colspan=${this.columns.length + 1}>
-                          ${this.expandedContent?.(row)}
-                        </td>
-                      </tr>`
-                    : nothing,
-            ];
-        })}
-          </tbody>
-          ${this.columns.some((c) => c.footer)
-            ? html `<tfoot part="foot">
-                <tr part="footer-row">
-                  ${hasExpand ? html `<td part="footer-cell" aria-hidden="true"></td>` : nothing}
-                  ${this.columns.map((col) => html `<td
-                      part="footer-cell"
-                      data-col-key=${col.key}
-                      data-align=${col.align ?? 'start'}
-                    >${col.footer?.(this.rows) ?? ''}</td>`)}
-                </tr>
-              </tfoot>`
+                        part="footer-cell"
+                        data-col-key=${col.key}
+                        data-align=${col.align ?? 'start'}
+                      >${col.footer?.(matchingEntries.map((entry) => entry.row)) ?? ''}</td>`)}
+                  </tr>
+                </tfoot>`
+                : nothing}
+          </table>`;
+        return html `
+      <div part="base" ?data-force-visible=${this.showAllColumns} aria-busy="false">
+        ${this.filterable
+            ? html `<label part="filter-label">
+              ${filterLabel}
+              <input
+                part="filter"
+                type="search"
+                .value=${this.filterText}
+                placeholder=${filterPlaceholder}
+                aria-label=${filterLabel}
+                @input=${this.onFilterInput}
+              />
+            </label>`
             : nothing}
-        </table>
+        ${tableContent}
         ${this.columnsHidden
             ? html `<button
               part="reveal-columns-button"
@@ -687,6 +918,17 @@ export class LyraTable extends LyraElement {
               ${this.localize('loadMore', this.moreLabel || undefined)}
             </button>`
             : nothing}
+        ${hasPagination
+            ? html `<lyra-pagination
+              part="pagination"
+              .page=${this.page}
+              .pageSize=${this.normalizedPageSize}
+              .totalItems=${this.matchingTotalItems}
+              .strings=${this.strings}
+              hide-summary
+              @lyra-page-change=${this.onPaginationChange}
+            ></lyra-pagination>`
+            : nothing}
       </div>
     `;
     }
@@ -709,6 +951,51 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], LyraTable.prototype, "selectedKey", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'selection-mode' })
+], LyraTable.prototype, "selectionMode", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraTable.prototype, "selectedKeys", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraTable.prototype, "filterable", void 0);
+__decorate([
+    property({ attribute: 'filter-text' })
+], LyraTable.prototype, "filterText", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraTable.prototype, "filter", void 0);
+__decorate([
+    property({ attribute: 'filter-label' })
+], LyraTable.prototype, "filterLabel", void 0);
+__decorate([
+    property({ attribute: 'filter-placeholder' })
+], LyraTable.prototype, "filterPlaceholder", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraTable.prototype, "loading", void 0);
+__decorate([
+    property({ attribute: 'loading-label' })
+], LyraTable.prototype, "loadingLabel", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraTable.prototype, "groupBy", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraTable.prototype, "groupLabel", void 0);
+__decorate([
+    property({ type: Number, attribute: 'page-size' })
+], LyraTable.prototype, "pageSize", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], LyraTable.prototype, "page", void 0);
+__decorate([
+    property({ type: Number, attribute: 'total-items' })
+], LyraTable.prototype, "totalItems", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'pagination-mode' })
+], LyraTable.prototype, "paginationMode", void 0);
 __decorate([
     property({ attribute: false })
 ], LyraTable.prototype, "expandedContent", void 0);
@@ -754,4 +1041,7 @@ __decorate([
 __decorate([
     state()
 ], LyraTable.prototype, "activeRowKey", void 0);
+__decorate([
+    state()
+], LyraTable.prototype, "editingCell", void 0);
 //# sourceMappingURL=table.class.js.map