@sondor-technology/sondor-components 1.0.0 → 1.0.1-develop.3

package/src/components/table/data-table.ts

@@ -1,557 +1,557 @@
-import { LitElement, html, css, PropertyValues } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { resetStyles } from '../../styles/reset.js';
-
-export interface DataTableColumn {
-  header: string;
-  key: string;
-  sortable?: boolean;
-  hidden?: boolean;
-}
-
-export interface SortConfig {
-  key: string;
-  direction: 'asc' | 'desc';
-}
-
-@customElement('st-data-table')
-export class StDataTable extends LitElement {
-  /**
-   * Array defining table headers, keys, and sortability.
-   */
-  @property({ type: Array }) columns: DataTableColumn[] = [];
-
-  /**
-   * Array of row data objects rendered in the table.
-   */
-  @property({ type: Array }) data: Record<string, any>[] = [];
-
-  /**
-   * Total number of rows available on the server (used for pagination).
-   */
-  @property({ type: Number, attribute: 'total-rows' }) totalRows = 0;
-
-  /**
-   * Current page number (1-indexed).
-   */
-  @property({ type: Number }) page = 1;
-
-  /**
-   * Number of rows per page.
-   */
-  @property({ type: Number, attribute: 'page-size' }) pageSize = 10;
-
-  /**
-   * Enables holding 'Shift' to sort by multiple columns sequentially.
-   */
-  @property({ type: Boolean, attribute: 'multi-sort' }) multiSort = false;
-
-  /**
-   * Displays loading skeleton rows and locks controls.
-   */
-  @property({ type: Boolean, reflect: true }) loading = false;
-
-  // --- Internal State ---
-  @state() private internalColumns: DataTableColumn[] = [];
-  @state() private sortState: SortConfig[] = [];
-  @state() private searchQuery = '';
-  @state() private showColumnMenu = false;
-  
-  private searchTimeout?: number;
-  private draggedColumnKey: string | null = null;
-
-  static styles = [
-    resetStyles,
-    css`
-      :host {
-        display: block;
-        width: 100%;
-        font-family: var(--st-font-family, inherit);
-      }
-
-      .toolbar {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        gap: var(--st-spacing-md);
-        margin-bottom: var(--st-spacing-md);
-        flex-wrap: wrap;
-      }
-
-      .search-wrapper {
-        flex: 1;
-        min-width: 250px;
-        position: relative;
-      }
-
-      .search-input {
-        width: 100%;
-        padding: 0.5rem 0.75rem 0.5rem 2.25rem;
-        border: 1px solid var(--st-color-border);
-        border-radius: var(--st-radius-md);
-        background-color: var(--st-color-surface);
-        color: var(--st-color-text);
-        font-size: var(--st-font-size-sm);
-      }
-
-      .search-input:disabled {
-        opacity: 0.6;
-        cursor: not-allowed;
-      }
-
-      .search-icon {
-        position: absolute;
-        left: 0.75rem;
-        top: 50%;
-        transform: translateY(-50%);
-        width: 1rem;
-        height: 1rem;
-        color: var(--st-color-text-muted);
-      }
-
-      .columns-toggle-wrapper {
-        position: relative;
-      }
-
-      .columns-menu {
-        position: absolute;
-        top: calc(100% + 0.5rem);
-        right: 0;
-        background: var(--st-color-surface);
-        border: 1px solid var(--st-color-border);
-        border-radius: var(--st-radius-md);
-        padding: var(--st-spacing-sm);
-        min-width: 200px;
-        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
-        z-index: 10;
-        display: flex;
-        flex-direction: column;
-        gap: 0.25rem;
-      }
-
-      .column-option {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        font-size: var(--st-font-size-sm);
-        cursor: pointer;
-        padding: 0.25rem;
-      }
-
-      .table-wrapper {
-        width: 100%;
-        overflow-x: auto;
-        border: 1px solid var(--st-color-border);
-        border-radius: var(--st-radius-md);
-      }
-
-      table {
-        width: 100%;
-        border-collapse: collapse;
-        text-align: left;
-        font-size: var(--st-font-size-sm);
-        background-color: var(--st-color-surface);
-      }
-
-      th {
-        font-weight: 600;
-        padding: var(--st-spacing-sm) var(--st-spacing-md);
-        border-bottom: 2px solid var(--st-color-border);
-        color: var(--st-color-text-muted);
-        white-space: nowrap;
-        background-color: var(--st-color-surface-muted, #f8fafc);
-        user-select: none;
-      }
-
-      th[draggable="true"] {
-        cursor: grab;
-      }
-
-      th[draggable="true"]:active {
-        cursor: grabbing;
-      }
-
-      th.drag-over {
-        border-left: 2px solid var(--st-color-primary);
-      }
-
-      .th-content {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-      }
-
-      .sortable-header {
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        gap: 0.25rem;
-      }
-
-      .sortable-header:hover {
-        color: var(--st-color-text);
-      }
-
-      .sort-icon {
-        width: 1rem;
-        height: 1rem;
-        color: var(--st-color-text-muted);
-      }
-
-      .sort-icon.active {
-        color: var(--st-color-primary);
-      }
-
-      .sort-priority {
-        font-size: 0.7rem;
-        background: var(--st-color-border);
-        color: var(--st-color-text);
-        border-radius: 50%;
-        width: 1.1rem;
-        height: 1.1rem;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-      }
-
-      td {
-        padding: var(--st-spacing-sm) var(--st-spacing-md);
-        border-bottom: 1px solid var(--st-color-border);
-        color: var(--st-color-text);
-      }
-
-      tbody tr:last-child td {
-        border-bottom: none;
-      }
-
-      tbody tr:hover {
-        background-color: var(--st-color-surface-hover, #f1f5f9);
-      }
-
-      .pagination {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: var(--st-spacing-md) 0;
-        font-size: var(--st-font-size-sm);
-        color: var(--st-color-text-muted);
-      }
-
-      .pagination-controls {
-        display: flex;
-        gap: var(--st-spacing-sm);
-      }
-
-      .drag-handle {
-        opacity: 0.3;
-        cursor: grab;
-      }
-
-      .drag-handle:hover {
-        opacity: 0.7;
-      }
-    `
-  ];
-
-  willUpdate(changedProperties: PropertyValues) {
-    if (changedProperties.has('columns') && this.columns.length > 0) {
-      if (this.internalColumns.length === 0) {
-        this.internalColumns = [...this.columns];
-      }
-    }
-  }
-
-  firstUpdated() {
-    if (this.internalColumns.length === 0 && this.columns.length > 0) {
-      this.internalColumns = [...this.columns];
-    }
-    this.emitChange();
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    document.addEventListener('click', this.handleOutsideClick);
-  }
-
-  disconnectedCallback() {
-    document.removeEventListener('click', this.handleOutsideClick);
-    super.disconnectedCallback();
-  }
-
-  private handleOutsideClick = (e: MouseEvent) => {
-    const target = e.target as HTMLElement;
-    if (!target.closest('.columns-toggle-wrapper')) {
-      this.showColumnMenu = false;
-    }
-  };
-
-  private emitChange() {
-    this.dispatchEvent(new CustomEvent('st-data-change', {
-      detail: {
-        page: this.page,
-        pageSize: this.pageSize,
-        search: this.searchQuery,
-        sort: this.sortState
-      },
-      bubbles: true,
-      composed: true
-    }));
-  }
-
-  private handleSearchInput(e: Event) {
-    if (this.loading) return;
-    const val = (e.target as HTMLInputElement).value;
-    window.clearTimeout(this.searchTimeout);
-    
-    this.searchTimeout = window.setTimeout(() => {
-      this.searchQuery = val;
-      this.page = 1;
-      this.emitChange();
-    }, 350);
-  }
-
-  private handleSort(key: string, e: MouseEvent) {
-    if (this.loading) return;
-    const isShift = e.shiftKey && this.multiSort;
-    const existingIndex = this.sortState.findIndex(s => s.key === key);
-    let newDirection: 'asc' | 'desc' | null = 'asc';
-
-    if (existingIndex !== -1) {
-      newDirection = this.sortState[existingIndex].direction === 'asc' ? 'desc' : null;
-    }
-
-    let newSortState = [...this.sortState];
-
-    if (isShift) {
-      if (newDirection) {
-        if (existingIndex !== -1) {
-          newSortState[existingIndex].direction = newDirection;
-        } else {
-          newSortState.push({ key, direction: newDirection });
-        }
-      } else {
-        newSortState.splice(existingIndex, 1);
-      }
-    } else {
-      if (newDirection) {
-        newSortState = [{ key, direction: newDirection }];
-      } else {
-        newSortState = [];
-      }
-    }
-
-    this.sortState = newSortState;
-    this.page = 1;
-    this.emitChange();
-  }
-
-  private get totalPages() {
-    return Math.max(1, Math.ceil(this.totalRows / this.pageSize));
-  }
-
-  private prevPage() {
-    if (!this.loading && this.page > 1) {
-      this.page--;
-      this.emitChange();
-    }
-  }
-
-  private nextPage() {
-    if (!this.loading && this.page < this.totalPages) {
-      this.page++;
-      this.emitChange();
-    }
-  }
-
-  private toggleColumnVisibility(key: string) {
-    this.internalColumns = this.internalColumns.map(col => 
-      col.key === key ? { ...col, hidden: !col.hidden } : col
-    );
-  }
-
-  private handleDragStart(e: DragEvent, key: string) {
-    this.draggedColumnKey = key;
-    if (e.dataTransfer) {
-      e.dataTransfer.effectAllowed = 'move';
-      e.dataTransfer.setData('text/plain', key);
-    }
-  }
-
-  private handleDragOver(e: DragEvent) {
-    e.preventDefault();
-    if (e.dataTransfer) e.dataTransfer.dropEffect = 'move';
-    const target = (e.target as HTMLElement).closest('th');
-    if (target) target.classList.add('drag-over');
-  }
-
-  private handleDragLeave(e: DragEvent) {
-    const target = (e.target as HTMLElement).closest('th');
-    if (target) target.classList.remove('drag-over');
-  }
-
-  private handleDrop(e: DragEvent, targetKey: string) {
-    e.preventDefault();
-    const targetEl = (e.target as HTMLElement).closest('th');
-    if (targetEl) targetEl.classList.remove('drag-over');
-
-    if (!this.draggedColumnKey || this.draggedColumnKey === targetKey) return;
-
-    const newCols = [...this.internalColumns];
-    const fromIndex = newCols.findIndex(c => c.key === this.draggedColumnKey);
-    const toIndex = newCols.findIndex(c => c.key === targetKey);
-
-    const [movedCol] = newCols.splice(fromIndex, 1);
-    newCols.splice(toIndex, 0, movedCol);
-
-    this.internalColumns = newCols;
-    this.draggedColumnKey = null;
-  }
-
-  private renderSortIcon(key: string) {
-    const sortIndex = this.sortState.findIndex(s => s.key === key);
-    if (sortIndex === -1) {
-      return html`<svg class="sort-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>`;
-    }
-
-    const sortConfig = this.sortState[sortIndex];
-    const icon = sortConfig.direction === 'asc' 
-      ? html`<svg class="sort-icon active" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>`
-      : html`<svg class="sort-icon active" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>`;
-
-    const priority = this.sortState.length > 1 && this.multiSort 
-      ? html`<span class="sort-priority">${sortIndex + 1}</span>` 
-      : '';
-
-    return html`${icon}${priority}`;
-  }
-
-  render() {
-    const visibleColumns = this.internalColumns.filter(c => !c.hidden);
-    const skeletonRowsCount = Math.min(this.pageSize, 5);
-
-    return html`
-      <!-- Toolbar -->
-      <div class="toolbar">
-        <div class="search-wrapper">
-          <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-          <input 
-            type="text" 
-            class="search-input" 
-            placeholder="Search..." 
-            ?disabled=${this.loading}
-            @input=${this.handleSearchInput}
-          >
-        </div>
-
-        <div class="columns-toggle-wrapper">
-          <st-button 
-            variant="secondary" 
-            size="sm" 
-            @click=${() => this.showColumnMenu = !this.showColumnMenu}
-          >
-            Columns
-          </st-button>
-          
-          ${this.showColumnMenu ? html`
-            <div class="columns-menu">
-              ${this.internalColumns.map(col => html`
-                <label class="column-option">
-                  <input 
-                    type="checkbox" 
-                    .checked=${!col.hidden} 
-                    @change=${() => this.toggleColumnVisibility(col.key)}
-                  >
-                  ${col.header}
-                </label>
-              `)}
-            </div>
-          ` : ''}
-        </div>
-      </div>
-
-      <!-- Table -->
-      <div class="table-wrapper">
-        <table>
-          <thead>
-            <tr>
-              ${visibleColumns.map(col => html`
-                <th 
-                  draggable="true"
-                  @dragstart=${(e: DragEvent) => this.handleDragStart(e, col.key)}
-                  @dragover=${this.handleDragOver}
-                  @dragleave=${this.handleDragLeave}
-                  @drop=${(e: DragEvent) => this.handleDrop(e, col.key)}
-                >
-                  <div class="th-content">
-                    <svg class="drag-handle" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="12" r="1"/><circle cx="9" cy="5" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="19" r="1"/></svg>
-                    
-                    <div 
-                      class=${classMap({ 'sortable-header': !!col.sortable })} 
-                      @click=${(e: MouseEvent) => col.sortable && this.handleSort(col.key, e)}
-                    >
-                      ${col.header}
-                      ${col.sortable ? this.renderSortIcon(col.key) : ''}
-                    </div>
-                  </div>
-                </th>
-              `)}
-            </tr>
-          </thead>
-          <tbody>
-            ${this.loading ? html`
-              ${Array.from({ length: skeletonRowsCount }).map(() => html`
-                <tr>
-                  ${visibleColumns.map(() => html`
-                    <td><st-skeleton variant="text" width="75%"></st-skeleton></td>
-                  `)}
-                </tr>
-              `)}
-            ` : this.data.length === 0 ? html`
-              <tr>
-                <td colspan=${visibleColumns.length} style="text-align: center; padding: 2rem;">No results found.</td>
-              </tr>
-            ` : this.data.map(row => html`
-              <tr>
-                ${visibleColumns.map(col => html`
-                  <td>${row[col.key]}</td>
-                `)}
-              </tr>
-            `)}
-          </tbody>
-        </table>
-      </div>
-
-      <!-- Pagination -->
-      <div class="pagination">
-        <div class="pagination-info">
-          Page ${this.page} of ${this.totalPages} (${this.totalRows} total items)
-        </div>
-        <div class="pagination-controls">
-          <st-button 
-            variant="secondary" 
-            size="sm" 
-            ?disabled=${this.loading || this.page === 1}
-            @click=${this.prevPage}
-          >
-            Prev
-          </st-button>
-          <st-button 
-            variant="secondary" 
-            size="sm" 
-            ?disabled=${this.loading || this.page === this.totalPages}
-            @click=${this.nextPage}
-          >
-            Next
-          </st-button>
-        </div>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'st-data-table': StDataTable;
-  }
+import { LitElement, html, css, PropertyValues } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { resetStyles } from '../../styles/reset.js';
+
+export interface DataTableColumn {
+  header: string;
+  key: string;
+  sortable?: boolean;
+  hidden?: boolean;
+}
+
+export interface SortConfig {
+  key: string;
+  direction: 'asc' | 'desc';
+}
+
+@customElement('st-data-table')
+export class StDataTable extends LitElement {
+  /**
+   * Array defining table headers, keys, and sortability.
+   */
+  @property({ type: Array }) columns: DataTableColumn[] = [];
+
+  /**
+   * Array of row data objects rendered in the table.
+   */
+  @property({ type: Array }) data: Record<string, any>[] = [];
+
+  /**
+   * Total number of rows available on the server (used for pagination).
+   */
+  @property({ type: Number, attribute: 'total-rows' }) totalRows = 0;
+
+  /**
+   * Current page number (1-indexed).
+   */
+  @property({ type: Number }) page = 1;
+
+  /**
+   * Number of rows per page.
+   */
+  @property({ type: Number, attribute: 'page-size' }) pageSize = 10;
+
+  /**
+   * Enables holding 'Shift' to sort by multiple columns sequentially.
+   */
+  @property({ type: Boolean, attribute: 'multi-sort' }) multiSort = false;
+
+  /**
+   * Displays loading skeleton rows and locks controls.
+   */
+  @property({ type: Boolean, reflect: true }) loading = false;
+
+  // --- Internal State ---
+  @state() private internalColumns: DataTableColumn[] = [];
+  @state() private sortState: SortConfig[] = [];
+  @state() private searchQuery = '';
+  @state() private showColumnMenu = false;
+  
+  private searchTimeout?: number;
+  private draggedColumnKey: string | null = null;
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+        width: 100%;
+        font-family: var(--st-font-family, inherit);
+      }
+
+      .toolbar {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: var(--st-spacing-md);
+        margin-bottom: var(--st-spacing-md);
+        flex-wrap: wrap;
+      }
+
+      .search-wrapper {
+        flex: 1;
+        min-width: 250px;
+        position: relative;
+      }
+
+      .search-input {
+        width: 100%;
+        padding: 0.5rem 0.75rem 0.5rem 2.25rem;
+        border: 1px solid var(--st-color-border);
+        border-radius: var(--st-radius-md);
+        background-color: var(--st-color-surface);
+        color: var(--st-color-text);
+        font-size: var(--st-font-size-sm);
+      }
+
+      .search-input:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+
+      .search-icon {
+        position: absolute;
+        left: 0.75rem;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 1rem;
+        height: 1rem;
+        color: var(--st-color-text-muted);
+      }
+
+      .columns-toggle-wrapper {
+        position: relative;
+      }
+
+      .columns-menu {
+        position: absolute;
+        top: calc(100% + 0.5rem);
+        right: 0;
+        background: var(--st-color-surface);
+        border: 1px solid var(--st-color-border);
+        border-radius: var(--st-radius-md);
+        padding: var(--st-spacing-sm);
+        min-width: 200px;
+        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+        z-index: 10;
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+      }
+
+      .column-option {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: var(--st-font-size-sm);
+        cursor: pointer;
+        padding: 0.25rem;
+      }
+
+      .table-wrapper {
+        width: 100%;
+        overflow-x: auto;
+        border: 1px solid var(--st-color-border);
+        border-radius: var(--st-radius-md);
+      }
+
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        text-align: left;
+        font-size: var(--st-font-size-sm);
+        background-color: var(--st-color-surface);
+      }
+
+      th {
+        font-weight: 600;
+        padding: var(--st-spacing-sm) var(--st-spacing-md);
+        border-bottom: 2px solid var(--st-color-border);
+        color: var(--st-color-text-muted);
+        white-space: nowrap;
+        background-color: var(--st-color-surface-muted, #f8fafc);
+        user-select: none;
+      }
+
+      th[draggable="true"] {
+        cursor: grab;
+      }
+
+      th[draggable="true"]:active {
+        cursor: grabbing;
+      }
+
+      th.drag-over {
+        border-left: 2px solid var(--st-color-primary);
+      }
+
+      .th-content {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+      }
+
+      .sortable-header {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+      }
+
+      .sortable-header:hover {
+        color: var(--st-color-text);
+      }
+
+      .sort-icon {
+        width: 1rem;
+        height: 1rem;
+        color: var(--st-color-text-muted);
+      }
+
+      .sort-icon.active {
+        color: var(--st-color-primary);
+      }
+
+      .sort-priority {
+        font-size: 0.7rem;
+        background: var(--st-color-border);
+        color: var(--st-color-text);
+        border-radius: 50%;
+        width: 1.1rem;
+        height: 1.1rem;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      td {
+        padding: var(--st-spacing-sm) var(--st-spacing-md);
+        border-bottom: 1px solid var(--st-color-border);
+        color: var(--st-color-text);
+      }
+
+      tbody tr:last-child td {
+        border-bottom: none;
+      }
+
+      tbody tr:hover {
+        background-color: var(--st-color-surface-hover, #f1f5f9);
+      }
+
+      .pagination {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: var(--st-spacing-md) 0;
+        font-size: var(--st-font-size-sm);
+        color: var(--st-color-text-muted);
+      }
+
+      .pagination-controls {
+        display: flex;
+        gap: var(--st-spacing-sm);
+      }
+
+      .drag-handle {
+        opacity: 0.3;
+        cursor: grab;
+      }
+
+      .drag-handle:hover {
+        opacity: 0.7;
+      }
+    `
+  ];
+
+  willUpdate(changedProperties: PropertyValues) {
+    if (changedProperties.has('columns') && this.columns.length > 0) {
+      if (this.internalColumns.length === 0) {
+        this.internalColumns = [...this.columns];
+      }
+    }
+  }
+
+  firstUpdated() {
+    if (this.internalColumns.length === 0 && this.columns.length > 0) {
+      this.internalColumns = [...this.columns];
+    }
+    this.emitChange();
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener('click', this.handleOutsideClick);
+  }
+
+  disconnectedCallback() {
+    document.removeEventListener('click', this.handleOutsideClick);
+    super.disconnectedCallback();
+  }
+
+  private handleOutsideClick = (e: MouseEvent) => {
+    const target = e.target as HTMLElement;
+    if (!target.closest('.columns-toggle-wrapper')) {
+      this.showColumnMenu = false;
+    }
+  };
+
+  private emitChange() {
+    this.dispatchEvent(new CustomEvent('st-data-change', {
+      detail: {
+        page: this.page,
+        pageSize: this.pageSize,
+        search: this.searchQuery,
+        sort: this.sortState
+      },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  private handleSearchInput(e: Event) {
+    if (this.loading) return;
+    const val = (e.target as HTMLInputElement).value;
+    window.clearTimeout(this.searchTimeout);
+    
+    this.searchTimeout = window.setTimeout(() => {
+      this.searchQuery = val;
+      this.page = 1;
+      this.emitChange();
+    }, 350);
+  }
+
+  private handleSort(key: string, e: MouseEvent) {
+    if (this.loading) return;
+    const isShift = e.shiftKey && this.multiSort;
+    const existingIndex = this.sortState.findIndex(s => s.key === key);
+    let newDirection: 'asc' | 'desc' | null = 'asc';
+
+    if (existingIndex !== -1) {
+      newDirection = this.sortState[existingIndex].direction === 'asc' ? 'desc' : null;
+    }
+
+    let newSortState = [...this.sortState];
+
+    if (isShift) {
+      if (newDirection) {
+        if (existingIndex !== -1) {
+          newSortState[existingIndex].direction = newDirection;
+        } else {
+          newSortState.push({ key, direction: newDirection });
+        }
+      } else {
+        newSortState.splice(existingIndex, 1);
+      }
+    } else {
+      if (newDirection) {
+        newSortState = [{ key, direction: newDirection }];
+      } else {
+        newSortState = [];
+      }
+    }
+
+    this.sortState = newSortState;
+    this.page = 1;
+    this.emitChange();
+  }
+
+  private get totalPages() {
+    return Math.max(1, Math.ceil(this.totalRows / this.pageSize));
+  }
+
+  private prevPage() {
+    if (!this.loading && this.page > 1) {
+      this.page--;
+      this.emitChange();
+    }
+  }
+
+  private nextPage() {
+    if (!this.loading && this.page < this.totalPages) {
+      this.page++;
+      this.emitChange();
+    }
+  }
+
+  private toggleColumnVisibility(key: string) {
+    this.internalColumns = this.internalColumns.map(col => 
+      col.key === key ? { ...col, hidden: !col.hidden } : col
+    );
+  }
+
+  private handleDragStart(e: DragEvent, key: string) {
+    this.draggedColumnKey = key;
+    if (e.dataTransfer) {
+      e.dataTransfer.effectAllowed = 'move';
+      e.dataTransfer.setData('text/plain', key);
+    }
+  }
+
+  private handleDragOver(e: DragEvent) {
+    e.preventDefault();
+    if (e.dataTransfer) e.dataTransfer.dropEffect = 'move';
+    const target = (e.target as HTMLElement).closest('th');
+    if (target) target.classList.add('drag-over');
+  }
+
+  private handleDragLeave(e: DragEvent) {
+    const target = (e.target as HTMLElement).closest('th');
+    if (target) target.classList.remove('drag-over');
+  }
+
+  private handleDrop(e: DragEvent, targetKey: string) {
+    e.preventDefault();
+    const targetEl = (e.target as HTMLElement).closest('th');
+    if (targetEl) targetEl.classList.remove('drag-over');
+
+    if (!this.draggedColumnKey || this.draggedColumnKey === targetKey) return;
+
+    const newCols = [...this.internalColumns];
+    const fromIndex = newCols.findIndex(c => c.key === this.draggedColumnKey);
+    const toIndex = newCols.findIndex(c => c.key === targetKey);
+
+    const [movedCol] = newCols.splice(fromIndex, 1);
+    newCols.splice(toIndex, 0, movedCol);
+
+    this.internalColumns = newCols;
+    this.draggedColumnKey = null;
+  }
+
+  private renderSortIcon(key: string) {
+    const sortIndex = this.sortState.findIndex(s => s.key === key);
+    if (sortIndex === -1) {
+      return html`<svg class="sort-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>`;
+    }
+
+    const sortConfig = this.sortState[sortIndex];
+    const icon = sortConfig.direction === 'asc' 
+      ? html`<svg class="sort-icon active" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>`
+      : html`<svg class="sort-icon active" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>`;
+
+    const priority = this.sortState.length > 1 && this.multiSort 
+      ? html`<span class="sort-priority">${sortIndex + 1}</span>` 
+      : '';
+
+    return html`${icon}${priority}`;
+  }
+
+  render() {
+    const visibleColumns = this.internalColumns.filter(c => !c.hidden);
+    const skeletonRowsCount = Math.min(this.pageSize, 5);
+
+    return html`
+      <!-- Toolbar -->
+      <div class="toolbar">
+        <div class="search-wrapper">
+          <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+          <input 
+            type="text" 
+            class="search-input" 
+            placeholder="Search..." 
+            ?disabled=${this.loading}
+            @input=${this.handleSearchInput}
+          >
+        </div>
+
+        <div class="columns-toggle-wrapper">
+          <st-button 
+            variant="secondary" 
+            size="sm" 
+            @click=${() => this.showColumnMenu = !this.showColumnMenu}
+          >
+            Columns
+          </st-button>
+          
+          ${this.showColumnMenu ? html`
+            <div class="columns-menu">
+              ${this.internalColumns.map(col => html`
+                <label class="column-option">
+                  <input 
+                    type="checkbox" 
+                    .checked=${!col.hidden} 
+                    @change=${() => this.toggleColumnVisibility(col.key)}
+                  >
+                  ${col.header}
+                </label>
+              `)}
+            </div>
+          ` : ''}
+        </div>
+      </div>
+
+      <!-- Table -->
+      <div class="table-wrapper">
+        <table>
+          <thead>
+            <tr>
+              ${visibleColumns.map(col => html`
+                <th 
+                  draggable="true"
+                  @dragstart=${(e: DragEvent) => this.handleDragStart(e, col.key)}
+                  @dragover=${this.handleDragOver}
+                  @dragleave=${this.handleDragLeave}
+                  @drop=${(e: DragEvent) => this.handleDrop(e, col.key)}
+                >
+                  <div class="th-content">
+                    <svg class="drag-handle" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="12" r="1"/><circle cx="9" cy="5" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="19" r="1"/></svg>
+                    
+                    <div 
+                      class=${classMap({ 'sortable-header': !!col.sortable })} 
+                      @click=${(e: MouseEvent) => col.sortable && this.handleSort(col.key, e)}
+                    >
+                      ${col.header}
+                      ${col.sortable ? this.renderSortIcon(col.key) : ''}
+                    </div>
+                  </div>
+                </th>
+              `)}
+            </tr>
+          </thead>
+          <tbody>
+            ${this.loading ? html`
+              ${Array.from({ length: skeletonRowsCount }).map(() => html`
+                <tr>
+                  ${visibleColumns.map(() => html`
+                    <td><st-skeleton variant="text" width="75%"></st-skeleton></td>
+                  `)}
+                </tr>
+              `)}
+            ` : this.data.length === 0 ? html`
+              <tr>
+                <td colspan=${visibleColumns.length} style="text-align: center; padding: 2rem;">No results found.</td>
+              </tr>
+            ` : this.data.map(row => html`
+              <tr>
+                ${visibleColumns.map(col => html`
+                  <td>${row[col.key]}</td>
+                `)}
+              </tr>
+            `)}
+          </tbody>
+        </table>
+      </div>
+
+      <!-- Pagination -->
+      <div class="pagination">
+        <div class="pagination-info">
+          Page ${this.page} of ${this.totalPages} (${this.totalRows} total items)
+        </div>
+        <div class="pagination-controls">
+          <st-button 
+            variant="secondary" 
+            size="sm" 
+            ?disabled=${this.loading || this.page === 1}
+            @click=${this.prevPage}
+          >
+            Prev
+          </st-button>
+          <st-button 
+            variant="secondary" 
+            size="sm" 
+            ?disabled=${this.loading || this.page === this.totalPages}
+            @click=${this.nextPage}
+          >
+            Next
+          </st-button>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'st-data-table': StDataTable;
+  }
 }