valtech-components 2.0.687 → 2.0.689

package/src/lib/components/organisms/data-table/data-table.component.ts

@@ -0,0 +1,821 @@
+import { CommonModule } from '@angular/common';
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  OnInit,
+  OnChanges,
+  SimpleChanges,
+  inject,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+} from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import {
+  IonButton,
+  IonIcon,
+  IonCheckbox,
+  IonSpinner,
+  IonSelect,
+  IonSelectOption,
+} from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import {
+  chevronUpOutline,
+  chevronDownOutline,
+  chevronBackOutline,
+  chevronForwardOutline,
+  documentOutline,
+} from 'ionicons/icons';
+import { I18nService } from '../../../services/i18n';
+import {
+  DataTableMetadata,
+  DataTableColumn,
+  DataTableSort,
+  DataTableRowClickEvent,
+  DataTableSelectionChangeEvent,
+  DataTableSortChangeEvent,
+  DataTablePageChangeEvent,
+  DataTableEmptyState,
+  DEFAULT_PAGE_SIZE_OPTIONS,
+} from './types';
+
+addIcons({
+  chevronUpOutline,
+  chevronDownOutline,
+  chevronBackOutline,
+  chevronForwardOutline,
+  documentOutline,
+});
+
+@Component({
+  selector: 'val-data-table',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonButton,
+    IonIcon,
+    IonCheckbox,
+    IonSpinner,
+    IonSelect,
+    IonSelectOption,
+  ],
+  template: `
+    <div
+      class="data-table-container"
+      [class]="props.cssClass"
+      [class.size-small]="props.size === 'small'"
+      [class.size-medium]="props.size === 'medium' || !props.size"
+      [class.size-large]="props.size === 'large'"
+      [class.bordered]="props.bordered"
+      [class.striped]="props.striped"
+      [class.hoverable]="props.hoverable !== false"
+      [class.sticky-header]="props.stickyHeader"
+      [class.responsive-cards]="props.responsiveMode === 'cards'"
+      [class.elevation-none]="props.elevation === 'none'"
+      [class.elevation-low]="props.elevation === 'low'"
+      [class.elevation-high]="props.elevation === 'high'"
+      [class.header-gradient]="props.headerGradient"
+      [class.checkbox-circular]="props.checkboxStyle === 'circular'"
+      [class.row-highlight-border]="props.rowHighlightStyle === 'border-left'"
+      [class.row-highlight-both]="props.rowHighlightStyle === 'both'"
+      [style.--max-height]="props.maxHeight"
+    >
+      <!-- Toolbar slot -->
+      <div class="table-toolbar" #toolbarContainer>
+        <ng-content select="[toolbar]"></ng-content>
+      </div>
+
+      <!-- Loading overlay -->
+      @if (props.loadingState?.loading) {
+        <div class="loading-overlay">
+          <ion-spinner name="crescent"></ion-spinner>
+          @if (props.loadingState?.message) {
+            <span class="loading-message">{{ props.loadingState.message }}</span>
+          }
+        </div>
+      }
+
+      <div class="table-wrapper" [class.is-loading]="props.loadingState?.loading">
+        <table
+          role="grid"
+          [attr.aria-label]="props.ariaLabel"
+        >
+          @if (props.caption) {
+            <caption class="sr-only">{{ props.caption }}</caption>
+          }
+
+          <thead>
+            <tr>
+              <!-- Selection column -->
+              @if (props.showSelectionColumn && props.selection?.mode === 'multiple') {
+                <th class="selection-cell">
+                  <ion-checkbox
+                    [checked]="isAllSelected"
+                    [indeterminate]="isIndeterminate"
+                    (ionChange)="toggleSelectAll($event)"
+                  ></ion-checkbox>
+                </th>
+              }
+              @if (props.showSelectionColumn && props.selection?.mode === 'single') {
+                <th class="selection-cell"></th>
+              }
+
+              <!-- Row number column -->
+              @if (props.showRowNumbers) {
+                <th class="row-number-cell">#</th>
+              }
+
+              <!-- Data columns -->
+              @for (column of visibleColumns; track column.key) {
+                <th
+                  [class]="getColumnClass(column)"
+                  [style.width]="column.width"
+                  [style.min-width]="column.minWidth"
+                  [style.max-width]="column.maxWidth"
+                  [class.sortable]="column.sortable"
+                  [class.sorted]="currentSort?.column === column.key"
+                  (click)="column.sortable ? onSort(column) : null"
+                  [attr.aria-sort]="getAriaSort(column)"
+                >
+                  @if (column.headerTemplate) {
+                    <ng-container *ngTemplateOutlet="column.headerTemplate; context: { column }"></ng-container>
+                  } @else {
+                    <span class="header-content">
+                      {{ column.label }}
+                      @if (column.sortable) {
+                        <span class="sort-icons">
+                          <ion-icon
+                            name="chevron-up-outline"
+                            [class.active]="currentSort?.column === column.key && currentSort?.direction === 'asc'"
+                          ></ion-icon>
+                          <ion-icon
+                            name="chevron-down-outline"
+                            [class.active]="currentSort?.column === column.key && currentSort?.direction === 'desc'"
+                          ></ion-icon>
+                        </span>
+                      }
+                    </span>
+                  }
+                </th>
+              }
+
+              <!-- Actions column -->
+              @if (props.actionsTemplate) {
+                <th class="actions-cell" [style.width]="props.actionsWidth || '100px'">
+                  {{ getActionsLabel() }}
+                </th>
+              }
+            </tr>
+          </thead>
+
+          <tbody>
+            @if (displayedData.length === 0 && !props.loadingState?.loading) {
+              <tr class="empty-row">
+                <td [attr.colspan]="totalColumns">
+                  <div class="empty-state">
+                    @if (emptyState.template) {
+                      <ng-container *ngTemplateOutlet="emptyState.template"></ng-container>
+                    } @else {
+                      @if (emptyState.icon) {
+                        <ion-icon [name]="emptyState.icon" class="empty-icon"></ion-icon>
+                      }
+                      @if (emptyState.title) {
+                        <h4 class="empty-title">{{ emptyState.title }}</h4>
+                      }
+                      @if (emptyState.description) {
+                        <p class="empty-description">{{ emptyState.description }}</p>
+                      }
+                    }
+                  </div>
+                </td>
+              </tr>
+            } @else {
+              @for (row of displayedData; track trackByFn(row); let i = $index) {
+                <tr
+                  [class.selected]="isRowSelected(row)"
+                  [class.clickable]="props.rowClickable"
+                  (click)="onRowClick(row, i, $event)"
+                >
+                  <!-- Selection cell -->
+                  @if (props.showSelectionColumn) {
+                    <td class="selection-cell">
+                      @if (props.selection?.mode === 'multiple') {
+                        <ion-checkbox
+                          [checked]="isRowSelected(row)"
+                          (ionChange)="toggleRowSelection(row, $event)"
+                          (click)="$event.stopPropagation()"
+                        ></ion-checkbox>
+                      } @else if (props.selection?.mode === 'single') {
+                        <input
+                          type="radio"
+                          [checked]="isRowSelected(row)"
+                          (click)="selectSingleRow(row); $event.stopPropagation()"
+                        />
+                      }
+                    </td>
+                  }
+
+                  <!-- Row number -->
+                  @if (props.showRowNumbers) {
+                    <td class="row-number-cell">{{ getRowNumber(i) }}</td>
+                  }
+
+                  <!-- Data cells -->
+                  @for (column of visibleColumns; track column.key) {
+                    <td
+                      [class]="getColumnClass(column)"
+                      [style.text-align]="column.align"
+                    >
+                      @if (column.cellTemplate) {
+                        <ng-container *ngTemplateOutlet="column.cellTemplate; context: { row, column, value: getCellValue(row, column) }"></ng-container>
+                      } @else {
+                        {{ getFormattedValue(row, column) }}
+                      }
+                    </td>
+                  }
+
+                  <!-- Actions cell -->
+                  @if (props.actionsTemplate) {
+                    <td class="actions-cell">
+                      <ng-container *ngTemplateOutlet="props.actionsTemplate; context: { row, index: i }"></ng-container>
+                    </td>
+                  }
+                </tr>
+              }
+            }
+          </tbody>
+        </table>
+      </div>
+
+      <!-- Card view (responsive mobile) -->
+      @if (props.responsiveMode === 'cards') {
+        <div class="card-list">
+          @if (displayedData.length === 0 && !props.loadingState?.loading) {
+            <div class="empty-state">
+              @if (emptyState.icon) {
+                <ion-icon [name]="emptyState.icon" class="empty-icon"></ion-icon>
+              }
+              @if (emptyState.title) {
+                <h4 class="empty-title">{{ emptyState.title }}</h4>
+              }
+              @if (emptyState.description) {
+                <p class="empty-description">{{ emptyState.description }}</p>
+              }
+            </div>
+          } @else {
+            @for (row of displayedData; track trackByFn(row); let i = $index) {
+              @if (props.mobileCardTemplate) {
+                <ng-container *ngTemplateOutlet="props.mobileCardTemplate; context: { row, index: i, columns: visibleColumns }"></ng-container>
+              } @else {
+                <div
+                  class="data-card"
+                  [class.selected]="isRowSelected(row)"
+                  [class.clickable]="props.rowClickable"
+                  (click)="onRowClick(row, i, $event)"
+                >
+                  <!-- Card header with selection -->
+                  @if (props.showSelectionColumn) {
+                    <div class="card-header">
+                      <div class="card-selection">
+                        @if (props.selection?.mode === 'multiple') {
+                          <ion-checkbox
+                            [checked]="isRowSelected(row)"
+                            (ionChange)="toggleRowSelection(row, $event)"
+                            (click)="$event.stopPropagation()"
+                          ></ion-checkbox>
+                        } @else if (props.selection?.mode === 'single') {
+                          <input
+                            type="radio"
+                            [checked]="isRowSelected(row)"
+                            (click)="selectSingleRow(row); $event.stopPropagation()"
+                          />
+                        }
+                      </div>
+                      @if (props.showRowNumbers) {
+                        <span class="row-number">{{ getRowNumber(i) }}</span>
+                      }
+                    </div>
+                  }
+
+                  <!-- Card body with fields -->
+                  <div class="card-body">
+                    @for (column of visibleColumns; track column.key) {
+                      <div class="card-field">
+                        <span class="card-field__label">{{ column.label }}</span>
+                        <span class="card-field__value">
+                          @if (column.cellTemplate) {
+                            <ng-container *ngTemplateOutlet="column.cellTemplate; context: { row, column, value: getCellValue(row, column) }"></ng-container>
+                          } @else {
+                            {{ getFormattedValue(row, column) }}
+                          }
+                        </span>
+                      </div>
+                    }
+                  </div>
+
+                  <!-- Card actions -->
+                  @if (props.actionsTemplate) {
+                    <div class="card-actions">
+                      <ng-container *ngTemplateOutlet="props.actionsTemplate; context: { row, index: i }"></ng-container>
+                    </div>
+                  }
+                </div>
+              }
+            }
+          }
+        </div>
+      }
+
+      <!-- Pagination -->
+      @if (props.showPagination && props.pagination) {
+        <div class="pagination-container">
+          <div class="pagination-info">
+            <span>
+              {{ getPaginationInfoText() }}
+            </span>
+
+            @if (pageSizeOptions.length > 1) {
+              <ion-select
+                [value]="props.pagination.pageSize"
+                (ionChange)="onPageSizeChange($event)"
+                interface="popover"
+                class="page-size-select"
+              >
+                @for (size of pageSizeOptions; track size) {
+                  <ion-select-option [value]="size">{{ getPerPageText(size) }}</ion-select-option>
+                }
+              </ion-select>
+            }
+          </div>
+
+          <div class="pagination-controls">
+            <ion-button
+              fill="clear"
+              size="small"
+              [disabled]="props.pagination.page === 0"
+              (click)="goToPage(0)"
+              [attr.aria-label]="getFirstPageLabel()"
+            >
+              <ion-icon slot="icon-only" name="chevron-back-outline"></ion-icon>
+              <ion-icon slot="icon-only" name="chevron-back-outline" style="margin-left: -12px"></ion-icon>
+            </ion-button>
+
+            <ion-button
+              fill="clear"
+              size="small"
+              [disabled]="props.pagination.page === 0"
+              (click)="goToPage(props.pagination.page - 1)"
+              [attr.aria-label]="getPreviousPageLabel()"
+            >
+              <ion-icon slot="icon-only" name="chevron-back-outline"></ion-icon>
+            </ion-button>
+
+            <span class="page-indicator">
+              {{ props.pagination.page + 1 }} / {{ totalPages }}
+            </span>
+
+            <ion-button
+              fill="clear"
+              size="small"
+              [disabled]="props.pagination.page >= totalPages - 1"
+              (click)="goToPage(props.pagination.page + 1)"
+              [attr.aria-label]="getNextPageLabel()"
+            >
+              <ion-icon slot="icon-only" name="chevron-forward-outline"></ion-icon>
+            </ion-button>
+
+            <ion-button
+              fill="clear"
+              size="small"
+              [disabled]="props.pagination.page >= totalPages - 1"
+              (click)="goToPage(totalPages - 1)"
+              [attr.aria-label]="getLastPageLabel()"
+            >
+              <ion-icon slot="icon-only" name="chevron-forward-outline"></ion-icon>
+              <ion-icon slot="icon-only" name="chevron-forward-outline" style="margin-left: -12px"></ion-icon>
+            </ion-button>
+          </div>
+        </div>
+      }
+    </div>
+  `,
+  styleUrls: ['./data-table.component.scss'],
+})
+/**
+ * val-data-table
+ *
+ * A flexible data table component for displaying tabular data with sorting,
+ * pagination, and selection features.
+ *
+ * @example Basic usage
+ * ```html
+ * <val-data-table
+ *   [props]="{
+ *     columns: [
+ *       { key: 'name', label: 'Nombre', sortable: true },
+ *       { key: 'email', label: 'Email' },
+ *       { key: 'status', label: 'Estado' }
+ *     ],
+ *     data: users
+ *   }"
+ * ></val-data-table>
+ * ```
+ *
+ * @example With pagination and selection
+ * ```html
+ * <val-data-table
+ *   [props]="{
+ *     columns: columns,
+ *     data: participants,
+ *     showPagination: true,
+ *     pagination: {
+ *       page: 0,
+ *       pageSize: 25,
+ *       total: totalCount
+ *     },
+ *     selection: {
+ *       mode: 'multiple',
+ *       selected: selectedParticipants
+ *     },
+ *     showSelectionColumn: true
+ *   }"
+ *   (selectionChange)="onSelectionChange($event)"
+ *   (pageChange)="onPageChange($event)"
+ * ></val-data-table>
+ * ```
+ */
+export class DataTableComponent<T = any> implements OnInit, OnChanges {
+  @Input() props: DataTableMetadata<T>;
+
+  @Output() rowClick = new EventEmitter<DataTableRowClickEvent<T>>();
+  @Output() selectionChange = new EventEmitter<DataTableSelectionChangeEvent<T>>();
+  @Output() sortChange = new EventEmitter<DataTableSortChangeEvent>();
+  @Output() pageChange = new EventEmitter<DataTablePageChangeEvent>();
+
+  displayedData: T[] = [];
+  currentSort: DataTableSort | null = null;
+  selectedRows: Set<any> = new Set();
+
+  /** Cached visible columns for performance */
+  private _visibleColumns: DataTableColumn<T>[] = [];
+
+  private cdr = inject(ChangeDetectorRef);
+  private i18n = inject(I18nService);
+
+  ngOnInit(): void {
+    this.initializeState();
+    this.updateDisplayedData();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['props']) {
+      this.initializeState();
+      this.updateDisplayedData();
+    }
+  }
+
+  private initializeState(): void {
+    // Cache visible columns for performance
+    this._visibleColumns = this.props.columns.filter(c => c.visible !== false);
+
+    // Initialize sort
+    this.currentSort = this.props.sort || null;
+
+    // Initialize selection
+    if (this.props.selection?.selected) {
+      this.selectedRows = new Set(
+        this.props.selection.selected.map(row => this.getRowId(row))
+      );
+    }
+  }
+
+  private updateDisplayedData(): void {
+    let data = [...this.props.data];
+
+    // Apply client-side sorting
+    if (this.props.clientSort && this.currentSort) {
+      data = this.sortData(data);
+    }
+
+    // Apply client-side pagination
+    if (this.props.clientPagination && this.props.pagination) {
+      const start = this.props.pagination.page * this.props.pagination.pageSize;
+      const end = start + this.props.pagination.pageSize;
+      data = data.slice(start, end);
+    }
+
+    this.displayedData = data;
+    this.cdr.markForCheck();
+  }
+
+  private sortData(data: T[]): T[] {
+    if (!this.currentSort) return data;
+
+    const column = this.props.columns.find(c => c.key === this.currentSort?.column);
+    if (!column) return data;
+
+    return [...data].sort((a, b) => {
+      if (column.sortFn) {
+        const result = column.sortFn(a, b);
+        return this.currentSort?.direction === 'desc' ? -result : result;
+      }
+
+      const valueA = this.getCellValue(a, column);
+      const valueB = this.getCellValue(b, column);
+
+      let comparison = 0;
+      if (valueA == null && valueB == null) comparison = 0;
+      else if (valueA == null) comparison = 1;
+      else if (valueB == null) comparison = -1;
+      else if (typeof valueA === 'string' && typeof valueB === 'string') {
+        comparison = valueA.localeCompare(valueB);
+      } else {
+        comparison = valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
+      }
+
+      return this.currentSort?.direction === 'desc' ? -comparison : comparison;
+    });
+  }
+
+  get visibleColumns(): DataTableColumn<T>[] {
+    return this._visibleColumns;
+  }
+
+  get totalColumns(): number {
+    let count = this.visibleColumns.length;
+    if (this.props.showSelectionColumn) count++;
+    if (this.props.showRowNumbers) count++;
+    if (this.props.actionsTemplate) count++;
+    return count;
+  }
+
+  get emptyState(): DataTableEmptyState {
+    const defaultEmptyState: DataTableEmptyState = {
+      icon: 'document-outline',
+      title: this.i18n.t('noData'),
+      description: this.i18n.t('noRecordsFound'),
+    };
+    return this.props.emptyState || defaultEmptyState;
+  }
+
+  /** Get actions column label */
+  getActionsLabel(): string {
+    return this.props.actionsLabel || this.i18n.t('actions');
+  }
+
+  /** Get pagination info text */
+  getPaginationInfoText(): string {
+    return `${this.i18n.t('showing')} ${this.paginationStart}-${this.paginationEnd} ${this.i18n.t('of')} ${this.props.pagination?.total}`;
+  }
+
+  /** Get per page text */
+  getPerPageText(size: number): string {
+    return `${size} ${this.i18n.t('perPage')}`;
+  }
+
+  /** Get first page aria label */
+  getFirstPageLabel(): string {
+    return this.i18n.t('firstPage');
+  }
+
+  /** Get previous page aria label */
+  getPreviousPageLabel(): string {
+    return this.i18n.t('previousPage');
+  }
+
+  /** Get next page aria label */
+  getNextPageLabel(): string {
+    return this.i18n.t('nextPage');
+  }
+
+  /** Get last page aria label */
+  getLastPageLabel(): string {
+    return this.i18n.t('lastPage');
+  }
+
+  get pageSizeOptions(): number[] {
+    return this.props.pagination?.pageSizeOptions || DEFAULT_PAGE_SIZE_OPTIONS;
+  }
+
+  get totalPages(): number {
+    if (!this.props.pagination) return 1;
+    return Math.ceil(this.props.pagination.total / this.props.pagination.pageSize);
+  }
+
+  get paginationStart(): number {
+    if (!this.props.pagination) return 1;
+    return this.props.pagination.page * this.props.pagination.pageSize + 1;
+  }
+
+  get paginationEnd(): number {
+    if (!this.props.pagination) return this.displayedData.length;
+    return Math.min(
+      (this.props.pagination.page + 1) * this.props.pagination.pageSize,
+      this.props.pagination.total
+    );
+  }
+
+  get isAllSelected(): boolean {
+    if (this.displayedData.length === 0) return false;
+    return this.displayedData.every(row => this.isRowSelected(row));
+  }
+
+  get isIndeterminate(): boolean {
+    const selectedCount = this.displayedData.filter(row => this.isRowSelected(row)).length;
+    return selectedCount > 0 && selectedCount < this.displayedData.length;
+  }
+
+  getCellValue(row: T, column: DataTableColumn<T>): any {
+    const field = column.field || column.key;
+    return field.split('.').reduce((obj: any, key) => obj?.[key], row);
+  }
+
+  getFormattedValue(row: T, column: DataTableColumn<T>): string {
+    const value = this.getCellValue(row, column);
+    if (column.format) {
+      return column.format(value, row);
+    }
+    return value ?? '';
+  }
+
+  getColumnClass(column: DataTableColumn<T>): string {
+    const classes = [column.cssClass || ''];
+    if (column.sticky) {
+      classes.push(`sticky-${column.sticky}`);
+    }
+    if (column.align) {
+      classes.push(`align-${column.align}`);
+    }
+    return classes.filter(Boolean).join(' ');
+  }
+
+  getAriaSort(column: DataTableColumn<T>): string | null {
+    if (!column.sortable) return null;
+    if (this.currentSort?.column !== column.key) return 'none';
+    return this.currentSort.direction === 'asc' ? 'ascending' : 'descending';
+  }
+
+  getRowNumber(index: number): number {
+    const start = this.props.rowNumberStart ?? 1;
+    if (this.props.pagination) {
+      return start + this.props.pagination.page * this.props.pagination.pageSize + index;
+    }
+    return start + index;
+  }
+
+  getRowId(row: T): any {
+    if (this.props.selection?.trackBy) {
+      return this.props.selection.trackBy(row);
+    }
+    return row;
+  }
+
+  trackByFn(row: T): any {
+    return this.getRowId(row);
+  }
+
+  isRowSelected(row: T): boolean {
+    return this.selectedRows.has(this.getRowId(row));
+  }
+
+  onSort(column: DataTableColumn<T>): void {
+    if (!column.sortable) return;
+
+    let direction: 'asc' | 'desc' | null = 'asc';
+
+    if (this.currentSort?.column === column.key) {
+      if (this.currentSort.direction === 'asc') {
+        direction = 'desc';
+      } else {
+        direction = null;
+      }
+    }
+
+    if (direction) {
+      this.currentSort = { column: column.key, direction };
+    } else {
+      this.currentSort = null;
+    }
+
+    this.sortChange.emit({
+      column: column.key,
+      direction,
+    });
+
+    if (this.props.clientSort) {
+      this.updateDisplayedData();
+    }
+  }
+
+  onRowClick(row: T, index: number, event: MouseEvent): void {
+    if (!this.props.rowClickable) return;
+
+    this.rowClick.emit({
+      row,
+      index,
+      event,
+    });
+  }
+
+  toggleSelectAll(event: CustomEvent): void {
+    const checked = event.detail.checked;
+
+    if (checked) {
+      this.displayedData.forEach(row => {
+        this.selectedRows.add(this.getRowId(row));
+      });
+    } else {
+      this.displayedData.forEach(row => {
+        this.selectedRows.delete(this.getRowId(row));
+      });
+    }
+
+    this.emitSelectionChange(checked ? 'selectAll' : 'deselectAll');
+  }
+
+  toggleRowSelection(row: T, event: CustomEvent): void {
+    const rowId = this.getRowId(row);
+    const checked = event.detail.checked;
+
+    if (checked) {
+      this.selectedRows.add(rowId);
+    } else {
+      this.selectedRows.delete(rowId);
+    }
+
+    this.emitSelectionChange(checked ? 'select' : 'deselect', row);
+  }
+
+  selectSingleRow(row: T): void {
+    const rowId = this.getRowId(row);
+    const wasSelected = this.selectedRows.has(rowId);
+
+    this.selectedRows.clear();
+
+    if (!wasSelected) {
+      this.selectedRows.add(rowId);
+      this.emitSelectionChange('select', row);
+    } else {
+      this.emitSelectionChange('deselect', row);
+    }
+  }
+
+  private emitSelectionChange(
+    action: 'select' | 'deselect' | 'selectAll' | 'deselectAll',
+    changedRow?: T
+  ): void {
+    const selected = this.props.data.filter(row => this.isRowSelected(row));
+
+    this.selectionChange.emit({
+      selected,
+      changedRow,
+      action,
+    });
+  }
+
+  goToPage(page: number): void {
+    if (!this.props.pagination) return;
+
+    const previousPage = this.props.pagination.page;
+    const maxPage = this.totalPages - 1;
+    const newPage = Math.max(0, Math.min(page, maxPage));
+
+    this.pageChange.emit({
+      page: newPage,
+      pageSize: this.props.pagination.pageSize,
+      previousPage,
+    });
+
+    if (this.props.clientPagination) {
+      this.props.pagination.page = newPage;
+      this.updateDisplayedData();
+    }
+  }
+
+  onPageSizeChange(event: CustomEvent): void {
+    if (!this.props.pagination) return;
+
+    const newPageSize = event.detail.value;
+    const previousPage = this.props.pagination.page;
+
+    // Recalculate page to keep first visible item
+    const firstItem = previousPage * this.props.pagination.pageSize;
+    const newPage = Math.floor(firstItem / newPageSize);
+
+    this.pageChange.emit({
+      page: newPage,
+      pageSize: newPageSize,
+      previousPage,
+    });
+
+    if (this.props.clientPagination) {
+      this.props.pagination.pageSize = newPageSize;
+      this.props.pagination.page = newPage;
+      this.updateDisplayedData();
+    }
+  }
+}