@ticatec/uniface-flexi-module 0.0.2

package/FLEXIDATATABLE_GUIDE.md

@@ -0,0 +1,1650 @@
+# FlexiDataTable Complete Usage Guide
+
+A comprehensive guide to using FlexiDataTable for building powerful, flexible data tables in Svelte applications.
+
+## Table of Contents
+
+1. [Overview](#overview)
+2. [Basic Usage](#basic-usage)
+3. [Schema Structure](#schema-structure)
+4. [Column Types and Features](#column-types-and-features)
+5. [Advanced Table Features](#advanced-table-features)
+6. [Dynamic Data Handling](#dynamic-data-handling)
+7. [Events and Interactions](#events-and-interactions)
+8. [Extending FlexiDataTable](#extending-flexidatatable)
+9. [Integration Patterns](#integration-patterns)
+10. [Best Practices](#best-practices)
+
+## Overview
+
+FlexiDataTable is a powerful data table component that provides flexible column configuration, sorting, filtering, pagination, and extensive customization options. It's built on top of the uniface-element DataTable with enhanced schema-driven configuration.
+
+### Key Features
+
+- **Schema-Driven Configuration**: Define tables through JSON schemas
+- **Flexible Column Types**: Data columns, indicator columns, and action columns
+- **Custom Formatters**: Built-in and custom cell formatters
+- **Sorting and Filtering**: Advanced data manipulation
+- **Row Actions**: Configurable row-level actions
+- **Responsive Design**: Adaptive layouts for different screen sizes
+- **Extensible Architecture**: Custom renderers and formatters
+
+## Basic Usage
+
+### 1. Installation and Setup
+
+```typescript
+import FlexiDataTable from '@ticatec/uniface-flexi-form/flexi-datatable';
+import DataTable from '@ticatec/uniface-element/DataTable';
+import '@ticatec/uniface-flexi-form/uniface-flexi-form.css';
+```
+
+### 2. Simple Data Table
+
+```svelte
+<!-- SimpleDataTable.svelte -->
+<script lang="ts">
+  import DataTable from '@ticatec/uniface-element/DataTable';
+  import FlexiDataTable from '@ticatec/uniface-flexi-form/flexi-datatable';
+  
+  // Sample data
+  let tableData = [
+    { id: 1, name: 'John Doe', email: 'john@example.com', age: 30, status: 'active' },
+    { id: 2, name: 'Jane Smith', email: 'jane@example.com', age: 25, status: 'active' },
+    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', age: 35, status: 'inactive' }
+  ];
+  
+  // Table schema
+  const tableSchema = {
+    round: true,
+    indicatorColumn: {
+      width: 60,
+      displayNo: true,
+      selectable: true
+    },
+    actionsColumn: {
+      width: 120,
+      align: 'center',
+      getActions: 'getRowActions'
+    },
+    columns: [
+      {
+        text: 'Name',
+        field: 'name',
+        width: 150,
+        align: 'left',
+        resizable: true
+      },
+      {
+        text: 'Email',
+        field: 'email',
+        width: 200,
+        align: 'left',
+        resizable: true
+      },
+      {
+        text: 'Age',
+        field: 'age',
+        width: 80,
+        align: 'center',
+        formatter: 'formatAge'
+      },
+      {
+        text: 'Status',
+        field: 'status',
+        width: 100,
+        align: 'center',
+        formatter: 'formatStatus'
+      }
+    ]
+  };
+  
+  // Create FlexiDataTable instance
+  class UserDataTable extends FlexiDataTable {
+    constructor(schema) {
+      super(schema);
+    }
+    
+    formatAge(value, row) {
+      return `${value} years`;
+    }
+    
+    formatStatus(value, row) {
+      const statusClass = value === 'active' ? 'status-active' : 'status-inactive';
+      return `<span class="${statusClass}">${value.toUpperCase()}</span>`;
+    }
+    
+    getRowActions(row) {
+      return [
+        {
+          text: 'Edit',
+          icon: 'edit',
+          handler: () => this.editUser(row)
+        },
+        {
+          text: 'Delete',
+          icon: 'delete',
+          handler: () => this.deleteUser(row),
+          confirm: 'Are you sure you want to delete this user?'
+        }
+      ];
+    }
+    
+    editUser(row) {
+      console.log('Editing user:', row);
+    }
+    
+    deleteUser(row) {
+      console.log('Deleting user:', row);
+    }
+  }
+  
+  let dataTable = new UserDataTable(tableSchema);
+  
+  onMount(async () => {
+    await dataTable.initialize();
+  });
+  
+  function handleRowSelect(event) {
+    console.log('Selected rows:', event.detail.selectedRows);
+  }
+  
+  function handleSort(event) {
+    console.log('Sort changed:', event.detail);
+  }
+</script>
+
+<div class="data-table-container">
+  <DataTable 
+    columns={dataTable.columns}
+    data={tableData}
+    indicatorColumn={dataTable.indicatorColumn}
+    actionsColumn={dataTable.actionsColumn}
+    round={dataTable.round}
+    on:rowSelect={handleRowSelect}
+    on:sort={handleSort}
+  />
+</div>
+
+<style>
+  .data-table-container {
+    padding: 16px;
+  }
+  
+  :global(.status-active) {
+    color: #28a745;
+    font-weight: bold;
+  }
+  
+  :global(.status-inactive) {
+    color: #dc3545;
+    font-weight: bold;
+  }
+</style>
+```
+
+## Schema Structure
+
+### FlexiDataTableSchema
+
+```typescript
+interface FlexiDataTableSchema {
+  round?: boolean;                    // Rounded corners
+  indicatorColumn: IndicatorColumnSchema; // Row numbers/selection
+  actionsColumn?: ActionsColumnSchema;    // Row actions
+  columns: Array<FlexiDataTableColumnSchema>; // Data columns
+}
+```
+
+### FlexiDataTableColumnSchema
+
+```typescript
+interface FlexiDataTableColumnSchema {
+  text: string;                       // Column header text
+  field?: string;                     // Data field name
+  frozen?: boolean;                   // Freeze column
+  align?: 'left' | 'center' | 'right'; // Text alignment
+  width: number;                      // Column width
+  minWidth?: number;                  // Minimum width
+  warp?: boolean;                     // Text wrapping
+  formatter?: string;                 // Formatter function name
+  escapeHTML?: boolean;               // HTML escaping
+  href?: string;                      // Link function name
+  hint?: string;                      // Tooltip function name
+  render?: string;                    // Custom renderer name
+  visible?: boolean;                  // Column visibility
+  resizable?: boolean;                // Column resizing
+  compareFunction?: string;           // Custom sort function name
+}
+```
+
+### IndicatorColumnSchema
+
+```typescript
+interface IndicatorColumnSchema {
+  width: number;                      // Column width
+  displayNo?: boolean;                // Show row numbers
+  selectable?: boolean;               // Row selection
+}
+```
+
+### ActionsColumnSchema
+
+```typescript
+interface ActionsColumnSchema {
+  width: number;                      // Column width
+  align?: 'left' | 'center';         // Alignment
+  getActions: string;                 // Action provider function name
+}
+```
+
+## Column Types and Features
+
+### Data Columns
+
+```typescript
+// Basic data column
+{
+  text: 'Product Name',
+  field: 'name',
+  width: 200,
+  align: 'left',
+  resizable: true
+}
+
+// Formatted column
+{
+  text: 'Price',
+  field: 'price',
+  width: 100,
+  align: 'right',
+  formatter: 'formatCurrency'
+}
+
+// Linked column
+{
+  text: 'Website',
+  field: 'website',
+  width: 150,
+  href: 'buildWebsiteLink'
+}
+
+// Custom rendered column
+{
+  text: 'Status',
+  field: 'status',
+  width: 120,
+  render: 'renderStatusBadge'
+}
+```
+
+### Column Examples with Implementations
+
+```typescript
+class ProductDataTable extends FlexiDataTable {
+  constructor(schema: FlexiDataTableSchema) {
+    super(schema);
+  }
+  
+  // Currency formatter
+  formatCurrency(value: number, row: any): string {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD'
+    }).format(value);
+  }
+  
+  // Date formatter
+  formatDate(value: string, row: any): string {
+    return new Date(value).toLocaleDateString();
+  }
+  
+  // Percentage formatter
+  formatPercentage(value: number, row: any): string {
+    return `${(value * 100).toFixed(1)}%`;
+  }
+  
+  // File size formatter
+  formatFileSize(bytes: number, row: any): string {
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    if (bytes === 0) return '0 B';
+    const i = Math.floor(Math.log(bytes) / Math.log(1024));
+    return `${(bytes / Math.pow(1024, i)).toFixed(1)} ${sizes[i]}`;
+  }
+  
+  // Link builder
+  buildWebsiteLink(value: string, row: any): string {
+    return value.startsWith('http') ? value : `https://${value}`;
+  }
+  
+  // Product link builder
+  buildProductLink(value: string, row: any): string {
+    return `/products/${row.id}`;
+  }
+  
+  // Tooltip provider
+  getProductHint(value: string, row: any): string {
+    return `Product ID: ${row.id}\\nCategory: ${row.category}\\nStock: ${row.stock}`;
+  }
+  
+  // Status badge renderer
+  renderStatusBadge(value: string, row: any): any {
+    // Return Svelte component configuration
+    return {
+      component: StatusBadge,
+      props: {
+        status: value,
+        size: 'small'
+      }
+    };
+  }
+  
+  // Image renderer
+  renderProductImage(value: string, row: any): any {
+    return {
+      component: ProductImage,
+      props: {
+        src: value,
+        alt: row.name,
+        size: 'thumbnail'
+      }
+    };
+  }
+  
+  // Custom sort function
+  compareProductNames(a: any, b: any): number {
+    // Custom sorting logic for product names
+    const nameA = a.name.toLowerCase();
+    const nameB = b.name.toLowerCase();
+    return this.compareStrings(nameA, nameB, { ignoreCase: true });
+  }
+  
+  // Numeric sort with null handling
+  compareStock(a: any, b: any): number {
+    const stockA = a.stock || 0;
+    const stockB = b.stock || 0;
+    return stockA - stockB;
+  }
+  
+  // Row actions
+  getRowActions(row: any): any[] {
+    const actions = [
+      {
+        text: 'View',
+        icon: 'eye',
+        handler: () => this.viewProduct(row)
+      }
+    ];
+    
+    if (row.status === 'active') {
+      actions.push({
+        text: 'Edit',
+        icon: 'edit',
+        handler: () => this.editProduct(row)
+      });
+    }
+    
+    if (row.stock === 0) {
+      actions.push({
+        text: 'Restock',
+        icon: 'plus',
+        handler: () => this.restockProduct(row)
+      });
+    }
+    
+    actions.push({
+      text: 'Delete',
+      icon: 'trash',
+      handler: () => this.deleteProduct(row),
+      confirm: 'Are you sure you want to delete this product?',
+      style: 'danger'
+    });
+    
+    return actions;
+  }
+  
+  viewProduct(row: any): void {
+    window.open(`/products/${row.id}`, '_blank');
+  }
+  
+  editProduct(row: any): void {
+    // Navigate to edit page or open modal
+    console.log('Editing product:', row);
+  }
+  
+  restockProduct(row: any): void {
+    // Open restock dialog
+    console.log('Restocking product:', row);
+  }
+  
+  deleteProduct(row: any): void {
+    // Perform delete operation
+    console.log('Deleting product:', row);
+  }
+}
+```
+
+## Advanced Table Features
+
+### Frozen Columns
+
+```typescript
+const tableSchemaWithFrozenColumns = {
+  round: true,
+  indicatorColumn: {
+    width: 60,
+    displayNo: true,
+    selectable: true
+  },
+  columns: [
+    {
+      text: 'ID',
+      field: 'id',
+      width: 80,
+      frozen: true,  // This column stays fixed
+      align: 'center'
+    },
+    {
+      text: 'Name',
+      field: 'name',
+      width: 150,
+      frozen: true,  // This column also stays fixed
+      align: 'left'
+    },
+    {
+      text: 'Description',
+      field: 'description',
+      width: 300,
+      align: 'left',
+      warp: true     // Allow text wrapping
+    },
+    {
+      text: 'Price',
+      field: 'price',
+      width: 100,
+      align: 'right',
+      formatter: 'formatCurrency'
+    }
+  ]
+};
+```
+
+### Conditional Column Visibility
+
+```typescript
+class ConditionalColumnsTable extends FlexiDataTable {
+  private userRole: string;
+  
+  constructor(schema: FlexiDataTableSchema, userRole: string) {
+    super(schema);
+    this.userRole = userRole;
+  }
+  
+  async initialize(): Promise<void> {
+    // Modify schema based on user role before initialization
+    this.applyRoleBasedVisibility();
+    await super.initialize();
+  }
+  
+  private applyRoleBasedVisibility(): void {
+    this.schema.columns.forEach(column => {
+      switch (column.field) {
+        case 'salary':
+          column.visible = this.userRole === 'admin' || this.userRole === 'hr';
+          break;
+        case 'ssn':
+          column.visible = this.userRole === 'admin';
+          break;
+        case 'internalNotes':
+          column.visible = this.userRole !== 'guest';
+          break;
+        default:
+          column.visible = column.visible !== false;
+      }
+    });
+  }
+}
+```
+
+### Dynamic Column Configuration
+
+```typescript
+class DynamicColumnsTable extends FlexiDataTable {
+  constructor(schema: FlexiDataTableSchema) {
+    super(schema);
+  }
+  
+  updateColumnConfiguration(newConfig: any): void {
+    // Update column widths
+    if (newConfig.columnWidths) {
+      this.columns.forEach((column, index) => {
+        if (newConfig.columnWidths[index]) {
+          column.width = newConfig.columnWidths[index];
+        }
+      });
+    }
+    
+    // Update column visibility
+    if (newConfig.visibleColumns) {
+      this.columns.forEach((column, index) => {
+        column.visible = newConfig.visibleColumns.includes(index);
+      });
+    }
+    
+    // Update column order
+    if (newConfig.columnOrder) {
+      const reorderedColumns = newConfig.columnOrder.map(index => this.columns[index]);
+      this.#columns = reorderedColumns;
+    }
+  }
+  
+  getColumnConfiguration(): any {
+    return {
+      columnWidths: this.columns.map(col => col.width),
+      visibleColumns: this.columns
+        .map((col, index) => col.visible !== false ? index : null)
+        .filter(index => index !== null),
+      columnOrder: this.columns.map((_, index) => index)
+    };
+  }
+  
+  saveColumnConfiguration(): void {
+    const config = this.getColumnConfiguration();
+    localStorage.setItem('table-config', JSON.stringify(config));
+  }
+  
+  loadColumnConfiguration(): void {
+    try {
+      const config = JSON.parse(localStorage.getItem('table-config') || '{}');
+      this.updateColumnConfiguration(config);
+    } catch (error) {
+      console.error('Failed to load column configuration:', error);
+    }
+  }
+}
+```
+
+## Dynamic Data Handling
+
+### Paginated Data Loading
+
+```typescript
+class PaginatedDataTable extends FlexiDataTable {
+  private currentPage = 1;
+  private pageSize = 20;
+  private totalRecords = 0;
+  private loading = false;
+  private searchCriteria: any = {};
+  
+  constructor(schema: FlexiDataTableSchema) {
+    super(schema);
+  }
+  
+  async loadData(page: number = 1, criteria: any = {}): Promise<any[]> {
+    this.loading = true;
+    this.currentPage = page;
+    this.searchCriteria = criteria;
+    
+    try {
+      const queryParams = new URLSearchParams({
+        page: page.toString(),
+        limit: this.pageSize.toString(),
+        ...this.flattenCriteria(criteria)
+      });
+      
+      const response = await fetch(`/api/data?${queryParams}`);
+      const result = await response.json();
+      
+      this.totalRecords = result.total;
+      return result.data;
+    } catch (error) {
+      console.error('Failed to load data:', error);
+      return [];
+    } finally {
+      this.loading = false;
+    }
+  }
+  
+  async refreshData(): Promise<any[]> {
+    return this.loadData(this.currentPage, this.searchCriteria);
+  }
+  
+  async nextPage(): Promise<any[]> {
+    if (this.hasNextPage()) {
+      return this.loadData(this.currentPage + 1, this.searchCriteria);
+    }
+    return [];
+  }
+  
+  async previousPage(): Promise<any[]> {
+    if (this.hasPreviousPage()) {
+      return this.loadData(this.currentPage - 1, this.searchCriteria);
+    }
+    return [];
+  }
+  
+  hasNextPage(): boolean {
+    return this.currentPage * this.pageSize < this.totalRecords;
+  }
+  
+  hasPreviousPage(): boolean {
+    return this.currentPage > 1;
+  }
+  
+  getCurrentPageInfo(): any {
+    const startRecord = (this.currentPage - 1) * this.pageSize + 1;
+    const endRecord = Math.min(this.currentPage * this.pageSize, this.totalRecords);
+    
+    return {
+      currentPage: this.currentPage,
+      pageSize: this.pageSize,
+      totalRecords: this.totalRecords,
+      totalPages: Math.ceil(this.totalRecords / this.pageSize),
+      startRecord,
+      endRecord,
+      loading: this.loading
+    };
+  }
+  
+  private flattenCriteria(criteria: any): Record<string, string> {
+    const flattened: Record<string, string> = {};
+    for (const [key, value] of Object.entries(criteria)) {
+      if (value !== null && value !== undefined && value !== '') {
+        flattened[key] = String(value);
+      }
+    }
+    return flattened;
+  }
+}
+```
+
+### Real-time Data Updates
+
+```typescript
+class RealtimeDataTable extends FlexiDataTable {
+  private websocket: WebSocket | null = null;
+  private updateCallback: ((data: any[]) => void) | null = null;
+  
+  constructor(schema: FlexiDataTableSchema) {
+    super(schema);
+  }
+  
+  connectRealtime(wsUrl: string, onUpdate: (data: any[]) => void): void {
+    this.updateCallback = onUpdate;
+    this.websocket = new WebSocket(wsUrl);
+    
+    this.websocket.onopen = () => {
+      console.log('WebSocket connected');
+    };
+    
+    this.websocket.onmessage = (event) => {
+      try {
+        const message = JSON.parse(event.data);
+        this.handleRealtimeUpdate(message);
+      } catch (error) {
+        console.error('Failed to parse WebSocket message:', error);
+      }
+    };
+    
+    this.websocket.onclose = () => {
+      console.log('WebSocket disconnected');
+      // Attempt to reconnect
+      setTimeout(() => this.connectRealtime(wsUrl, onUpdate), 5000);
+    };
+    
+    this.websocket.onerror = (error) => {
+      console.error('WebSocket error:', error);
+    };
+  }
+  
+  private handleRealtimeUpdate(message: any): void {
+    switch (message.type) {
+      case 'data_updated':
+        this.updateCallback?.(message.data);
+        break;
+      case 'record_added':
+        this.handleRecordAdded(message.record);
+        break;
+      case 'record_updated':
+        this.handleRecordUpdated(message.record);
+        break;
+      case 'record_deleted':
+        this.handleRecordDeleted(message.recordId);
+        break;
+    }
+  }
+  
+  private handleRecordAdded(record: any): void {
+    // Add record to current data and notify
+    console.log('New record added:', record);
+  }
+  
+  private handleRecordUpdated(record: any): void {
+    // Update existing record and notify
+    console.log('Record updated:', record);
+  }
+  
+  private handleRecordDeleted(recordId: string): void {
+    // Remove record from current data and notify
+    console.log('Record deleted:', recordId);
+  }
+  
+  disconnect(): void {
+    if (this.websocket) {
+      this.websocket.close();
+      this.websocket = null;
+    }
+  }
+}
+```
+
+## Events and Interactions
+
+### Table Events
+
+```svelte
+<script>
+  function handleRowSelect(event) {
+    const { selectedRows, isAllSelected } = event.detail;
+    console.log('Selected rows:', selectedRows);
+    console.log('All selected:', isAllSelected);
+  }
+  
+  function handleRowClick(event) {
+    const { row, rowIndex } = event.detail;
+    console.log('Row clicked:', row, 'at index:', rowIndex);
+  }
+  
+  function handleRowDoubleClick(event) {
+    const { row, rowIndex } = event.detail;
+    console.log('Row double-clicked:', row);
+    // Open edit dialog or navigate to detail view
+    openEditDialog(row);
+  }
+  
+  function handleSort(event) {
+    const { column, direction } = event.detail;
+    console.log('Sort changed:', column.field, direction);
+    
+    // Perform sorting
+    if (direction === 'asc') {
+      tableData.sort((a, b) => a[column.field] > b[column.field] ? 1 : -1);
+    } else if (direction === 'desc') {
+      tableData.sort((a, b) => a[column.field] < b[column.field] ? 1 : -1);
+    }
+    
+    // Trigger reactivity
+    tableData = [...tableData];
+  }
+  
+  function handleColumnResize(event) {
+    const { column, newWidth } = event.detail;
+    console.log('Column resized:', column.field, 'new width:', newWidth);
+    
+    // Save column configuration
+    dataTable.saveColumnConfiguration();
+  }
+  
+  function handlePageChange(event) {
+    const { page, pageSize } = event.detail;
+    console.log('Page changed:', page, 'size:', pageSize);
+    
+    // Load new page data
+    loadPageData(page, pageSize);
+  }
+</script>
+
+<DataTable 
+  columns={dataTable.columns}
+  data={tableData}
+  indicatorColumn={dataTable.indicatorColumn}
+  actionsColumn={dataTable.actionsColumn}
+  on:rowSelect={handleRowSelect}
+  on:rowClick={handleRowClick}
+  on:rowDoubleClick={handleRowDoubleClick}
+  on:sort={handleSort}
+  on:columnResize={handleColumnResize}
+  on:pageChange={handlePageChange}
+/>
+```
+
+### Bulk Operations
+
+```typescript
+class BulkOperationsTable extends FlexiDataTable {
+  private selectedRows: Set<any> = new Set();
+  
+  constructor(schema: FlexiDataTableSchema) {
+    super(schema);
+  }
+  
+  handleRowSelection(selectedRows: any[]): void {
+    this.selectedRows = new Set(selectedRows);
+  }
+  
+  getBulkActions(): any[] {
+    if (this.selectedRows.size === 0) {
+      return [];
+    }
+    
+    return [
+      {
+        text: `Delete ${this.selectedRows.size} items`,
+        icon: 'trash',
+        handler: () => this.bulkDelete(),
+        confirm: `Are you sure you want to delete ${this.selectedRows.size} items?`,
+        style: 'danger'
+      },
+      {
+        text: `Export ${this.selectedRows.size} items`,
+        icon: 'download',
+        handler: () => this.bulkExport()
+      },
+      {
+        text: 'Update Status',
+        icon: 'edit',
+        handler: () => this.bulkUpdateStatus()
+      }
+    ];
+  }
+  
+  async bulkDelete(): Promise<void> {
+    try {
+      const ids = Array.from(this.selectedRows).map(row => row.id);
+      await fetch('/api/bulk/delete', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ ids })
+      });
+      
+      console.log('Bulk delete successful');
+      this.selectedRows.clear();
+    } catch (error) {
+      console.error('Bulk delete failed:', error);
+    }
+  }
+  
+  async bulkExport(): Promise<void> {
+    try {
+      const data = Array.from(this.selectedRows);
+      const csv = this.convertToCSV(data);
+      this.downloadCSV(csv, 'export.csv');
+    } catch (error) {
+      console.error('Bulk export failed:', error);
+    }
+  }
+  
+  async bulkUpdateStatus(): Promise<void> {
+    const newStatus = prompt('Enter new status:');
+    if (!newStatus) return;
+    
+    try {
+      const ids = Array.from(this.selectedRows).map(row => row.id);
+      await fetch('/api/bulk/update-status', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ ids, status: newStatus })
+      });
+      
+      console.log('Bulk status update successful');
+    } catch (error) {
+      console.error('Bulk status update failed:', error);
+    }
+  }
+  
+  private convertToCSV(data: any[]): string {
+    if (data.length === 0) return '';
+    
+    const headers = Object.keys(data[0]);
+    const csvContent = [
+      headers.join(','),
+      ...data.map(row => headers.map(header => `"${row[header]}"`).join(','))
+    ].join('\\n');
+    
+    return csvContent;
+  }
+  
+  private downloadCSV(csv: string, filename: string): void {
+    const blob = new Blob([csv], { type: 'text/csv' });
+    const url = window.URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename;
+    link.click();
+    window.URL.revokeObjectURL(url);
+  }
+}
+```
+
+## Extending FlexiDataTable
+
+### Custom Cell Renderers
+
+```svelte
+<!-- StatusBadge.svelte -->
+<script lang="ts">
+  export let status: string;
+  export let size: 'small' | 'medium' | 'large' = 'medium';
+  
+  $: statusConfig = getStatusConfig(status);
+  
+  function getStatusConfig(status: string) {
+    const configs = {
+      active: { color: '#28a745', background: '#d4edda', text: 'Active' },
+      inactive: { color: '#6c757d', background: '#e2e3e5', text: 'Inactive' },
+      pending: { color: '#ffc107', background: '#fff3cd', text: 'Pending' },
+      error: { color: '#dc3545', background: '#f8d7da', text: 'Error' }
+    };
+    return configs[status] || configs.inactive;
+  }
+</script>
+
+<span 
+  class="status-badge {size}"
+  style="color: {statusConfig.color}; background-color: {statusConfig.background};"
+>
+  {statusConfig.text}
+</span>
+
+<style>
+  .status-badge {
+    display: inline-block;
+    padding: 4px 8px;
+    border-radius: 12px;
+    font-weight: 600;
+    text-align: center;
+    white-space: nowrap;
+  }
+  
+  .status-badge.small {
+    font-size: 0.75rem;
+    padding: 2px 6px;
+  }
+  
+  .status-badge.medium {
+    font-size: 0.875rem;
+    padding: 4px 8px;
+  }
+  
+  .status-badge.large {
+    font-size: 1rem;
+    padding: 6px 12px;
+  }
+</style>
+```
+
+```svelte
+<!-- ProgressBar.svelte -->
+<script lang="ts">
+  export let value: number;
+  export let max: number = 100;
+  export let color: string = '#007bff';
+  export let showText: boolean = true;
+  
+  $: percentage = Math.round((value / max) * 100);
+</script>
+
+<div class="progress-container">
+  <div class="progress-bar">
+    <div 
+      class="progress-fill"
+      style="width: {percentage}%; background-color: {color};"
+    ></div>
+  </div>
+  {#if showText}
+    <span class="progress-text">{percentage}%</span>
+  {/if}
+</div>
+
+<style>
+  .progress-container {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+  }
+  
+  .progress-bar {
+    flex: 1;
+    height: 8px;
+    background-color: #e9ecef;
+    border-radius: 4px;
+    overflow: hidden;
+  }
+  
+  .progress-fill {
+    height: 100%;
+    transition: width 0.3s ease;
+  }
+  
+  .progress-text {
+    font-size: 0.75rem;
+    color: #6c757d;
+    min-width: 35px;
+  }
+</style>
+```
+
+### Custom Table Classes
+
+```typescript
+class AdvancedProductTable extends FlexiDataTable {
+  private productCategories: any[] = [];
+  private userPermissions: string[] = [];
+  
+  constructor(schema: FlexiDataTableSchema, userPermissions: string[]) {
+    super(schema);
+    this.userPermissions = userPermissions;
+  }
+  
+  async initialize(): Promise<void> {
+    await this.loadProductCategories();
+    this.setupPermissionBasedActions();
+    await super.initialize();
+  }
+  
+  private async loadProductCategories(): Promise<void> {
+    try {
+      const response = await fetch('/api/product-categories');
+      this.productCategories = await response.json();
+    } catch (error) {
+      console.error('Failed to load product categories:', error);
+    }
+  }
+  
+  private setupPermissionBasedActions(): void {
+    // Modify schema based on user permissions
+    if (!this.userPermissions.includes('edit_products')) {
+      // Remove edit-related columns or actions
+      this.schema.columns = this.schema.columns.filter(col => 
+        col.field !== 'editActions'
+      );
+    }
+  }
+  
+  // Advanced formatters
+  formatProductCategory(categoryId: string, row: any): string {
+    const category = this.productCategories.find(cat => cat.id === categoryId);
+    return category ? category.name : 'Unknown Category';
+  }
+  
+  formatInventoryStatus(stock: number, row: any): string {
+    if (stock === 0) {
+      return '<span class="text-danger">Out of Stock</span>';
+    } else if (stock < row.minimumStock) {
+      return '<span class="text-warning">Low Stock</span>';
+    } else {
+      return '<span class="text-success">In Stock</span>';
+    }
+  }
+  
+  formatPriceWithDiscount(price: number, row: any): string {
+    if (row.discount > 0) {
+      const discountedPrice = price * (1 - row.discount);
+      return `
+        <span class="original-price">$${price.toFixed(2)}</span>
+        <span class="discounted-price">$${discountedPrice.toFixed(2)}</span>
+      `;
+    }
+    return `$${price.toFixed(2)}`;
+  }
+  
+  // Advanced renderers
+  renderProductImage(imageUrl: string, row: any): any {
+    return {
+      component: ProductImage,
+      props: {
+        src: imageUrl,
+        alt: row.name,
+        size: 'thumbnail',
+        lazy: true,
+        fallback: '/images/product-placeholder.png'
+      }
+    };
+  }
+  
+  renderStockLevel(stock: number, row: any): any {
+    const percentage = Math.min((stock / row.maximumStock) * 100, 100);
+    let color = '#28a745'; // Green
+    
+    if (percentage < 20) {
+      color = '#dc3545'; // Red
+    } else if (percentage < 50) {
+      color = '#ffc107'; // Yellow
+    }
+    
+    return {
+      component: ProgressBar,
+      props: {
+        value: stock,
+        max: row.maximumStock,
+        color,
+        showText: true
+      }
+    };
+  }
+  
+  renderRating(rating: number, row: any): any {
+    return {
+      component: StarRating,
+      props: {
+        rating,
+        maxRating: 5,
+        readonly: true,
+        size: 'small'
+      }
+    };
+  }
+  
+  // Advanced actions
+  getRowActions(row: any): any[] {
+    const actions = [];
+    
+    // Always available actions
+    actions.push({
+      text: 'View Details',
+      icon: 'eye',
+      handler: () => this.viewProductDetails(row)
+    });
+    
+    // Permission-based actions
+    if (this.userPermissions.includes('edit_products')) {
+      actions.push({
+        text: 'Edit',
+        icon: 'edit',
+        handler: () => this.editProduct(row)
+      });
+    }
+    
+    if (this.userPermissions.includes('manage_inventory')) {
+      if (row.stock === 0) {
+        actions.push({
+          text: 'Restock',
+          icon: 'plus-circle',
+          handler: () => this.restockProduct(row)
+        });
+      }
+      
+      actions.push({
+        text: 'Adjust Stock',
+        icon: 'warehouse',
+        handler: () => this.adjustStock(row)
+      });
+    }
+    
+    if (this.userPermissions.includes('delete_products')) {
+      actions.push({
+        text: 'Delete',
+        icon: 'trash',
+        handler: () => this.deleteProduct(row),
+        confirm: 'Are you sure you want to delete this product?',
+        style: 'danger'
+      });
+    }
+    
+    return actions;
+  }
+  
+  // Action implementations
+  viewProductDetails(row: any): void {
+    window.open(`/products/${row.id}`, '_blank');
+  }
+  
+  editProduct(row: any): void {
+    // Open edit modal or navigate to edit page
+    const editEvent = new CustomEvent('edit-product', { detail: row });
+    document.dispatchEvent(editEvent);
+  }
+  
+  restockProduct(row: any): void {
+    // Open restock dialog
+    const restockEvent = new CustomEvent('restock-product', { detail: row });
+    document.dispatchEvent(restockEvent);
+  }
+  
+  adjustStock(row: any): void {
+    // Open stock adjustment dialog
+    const adjustEvent = new CustomEvent('adjust-stock', { detail: row });
+    document.dispatchEvent(adjustEvent);
+  }
+  
+  deleteProduct(row: any): void {
+    // Perform delete operation
+    fetch(`/api/products/${row.id}`, { method: 'DELETE' })
+      .then(() => {
+        const deleteEvent = new CustomEvent('product-deleted', { detail: row });
+        document.dispatchEvent(deleteEvent);
+      })
+      .catch(error => {
+        console.error('Delete failed:', error);
+      });
+  }
+  
+  // Advanced sorting
+  compareProductNames(a: any, b: any): number {
+    return this.compareStrings(a.name, b.name, { ignoreCase: true });
+  }
+  
+  compareByCategory(a: any, b: any): number {
+    const catA = this.formatProductCategory(a.categoryId, a);
+    const catB = this.formatProductCategory(b.categoryId, b);
+    return this.compareStrings(catA, catB);
+  }
+  
+  compareByStockLevel(a: any, b: any): number {
+    const levelA = a.stock / a.maximumStock;
+    const levelB = b.stock / b.maximumStock;
+    return levelA - levelB;
+  }
+}
+```
+
+## Integration Patterns
+
+### Table with Search Integration
+
+```svelte
+<!-- ProductManagement.svelte -->
+<script lang="ts">
+  import CriteriaPanel from '@ticatec/uniface-flexi-form/criteria-panel';
+  import DataTable from '@ticatec/uniface-element/DataTable';
+  import { AdvancedProductTable } from './AdvancedProductTable';
+  
+  let searchCriteria = {};
+  let tableData = [];
+  let totalRecords = 0;
+  let currentPage = 1;
+  let pageSize = 20;
+  let loading = false;
+  
+  const searchSchema = {
+    arrangement: 'horizontal',
+    fields: [
+      {
+        type: 'text-search',
+        name: 'name',
+        label: 'Product Name',
+        keys: { field: 'name' },
+        size: 'x25'
+      },
+      {
+        type: 'option-select-search',
+        name: 'category',
+        label: 'Category',
+        keys: { field: 'categoryId' },
+        dictName: 'categories',
+        size: 'x20'
+      },
+      {
+        type: 'number-range',
+        name: 'price',
+        label: 'Price Range',
+        keys: { minField: 'priceMin', maxField: 'priceMax' },
+        size: 'x25'
+      },
+      {
+        type: 'option-select-search',
+        name: 'status',
+        label: 'Status',
+        keys: { field: 'status' },
+        dictName: 'product-status',
+        size: 'x15'
+      }
+    ]
+  };
+  
+  const tableSchema = {
+    round: true,
+    indicatorColumn: {
+      width: 60,
+      displayNo: true,
+      selectable: true
+    },
+    actionsColumn: {
+      width: 150,
+      align: 'center',
+      getActions: 'getRowActions'
+    },
+    columns: [
+      {
+        text: 'Image',
+        field: 'imageUrl',
+        width: 80,
+        align: 'center',
+        render: 'renderProductImage'
+      },
+      {
+        text: 'Name',
+        field: 'name',
+        width: 200,
+        align: 'left',
+        resizable: true,
+        compareFunction: 'compareProductNames'
+      },
+      {
+        text: 'Category',
+        field: 'categoryId',
+        width: 150,
+        formatter: 'formatProductCategory',
+        compareFunction: 'compareByCategory'
+      },
+      {
+        text: 'Price',
+        field: 'price',
+        width: 120,
+        align: 'right',
+        formatter: 'formatPriceWithDiscount'
+      },
+      {
+        text: 'Stock',
+        field: 'stock',
+        width: 100,
+        align: 'center',
+        render: 'renderStockLevel',
+        compareFunction: 'compareByStockLevel'
+      },
+      {
+        text: 'Rating',
+        field: 'rating',
+        width: 120,
+        align: 'center',
+        render: 'renderRating'
+      },
+      {
+        text: 'Status',
+        field: 'status',
+        width: 100,
+        align: 'center',
+        formatter: 'formatInventoryStatus'
+      }
+    ]
+  };
+  
+  let productTable = new AdvancedProductTable(tableSchema, ['edit_products', 'manage_inventory']);
+  
+  onMount(async () => {
+    await productTable.initialize();
+    await loadData();
+  });
+  
+  async function loadData() {
+    loading = true;
+    try {
+      const queryParams = new URLSearchParams({
+        page: currentPage.toString(),
+        limit: pageSize.toString(),
+        ...flattenCriteria(searchCriteria)
+      });
+      
+      const response = await fetch(`/api/products?${queryParams}`);
+      const result = await response.json();
+      
+      tableData = result.data;
+      totalRecords = result.total;
+    } catch (error) {
+      console.error('Failed to load products:', error);
+    } finally {
+      loading = false;
+    }
+  }
+  
+  function flattenCriteria(criteria) {
+    const flattened = {};
+    for (const [key, value] of Object.entries(criteria)) {
+      if (value !== null && value !== undefined && value !== '') {
+        flattened[key] = value;
+      }
+    }
+    return flattened;
+  }
+  
+  function handleCriteriaChange(event) {
+    searchCriteria = event.detail.criteria;
+    currentPage = 1;
+    loadData();
+  }
+  
+  function handlePageChange(event) {
+    currentPage = event.detail.page;
+    pageSize = event.detail.pageSize;
+    loadData();
+  }
+  
+  function handleSort(event) {
+    console.log('Sort:', event.detail);
+    loadData();
+  }
+  
+  // Listen for custom events from table actions
+  onMount(() => {
+    document.addEventListener('edit-product', handleEditProduct);
+    document.addEventListener('restock-product', handleRestockProduct);
+    document.addEventListener('product-deleted', handleProductDeleted);
+    
+    return () => {
+      document.removeEventListener('edit-product', handleEditProduct);
+      document.removeEventListener('restock-product', handleRestockProduct);
+      document.removeEventListener('product-deleted', handleProductDeleted);
+    };
+  });
+  
+  function handleEditProduct(event) {
+    console.log('Edit product:', event.detail);
+    // Open edit modal or navigate to edit page
+  }
+  
+  function handleRestockProduct(event) {
+    console.log('Restock product:', event.detail);
+    // Open restock modal
+  }
+  
+  function handleProductDeleted(event) {
+    console.log('Product deleted:', event.detail);
+    // Refresh table data
+    loadData();
+  }
+</script>
+
+<div class="product-management">
+  <div class="search-section">
+    <h3>Product Search</h3>
+    <CriteriaPanel 
+      schema={searchSchema}
+      bind:criteria={searchCriteria}
+      on:change={handleCriteriaChange}
+    />
+  </div>
+  
+  <div class="table-section">
+    <div class="table-header">
+      <h3>Products ({totalRecords} items)</h3>
+      {#if loading}
+        <div class="loading">Loading...</div>
+      {/if}
+    </div>
+    
+    <DataTable 
+      columns={productTable.columns}
+      data={tableData}
+      indicatorColumn={productTable.indicatorColumn}
+      actionsColumn={productTable.actionsColumn}
+      round={productTable.round}
+      {totalRecords}
+      {currentPage}
+      {pageSize}
+      on:pageChange={handlePageChange}
+      on:sort={handleSort}
+    />
+  </div>
+</div>
+
+<style>
+  .product-management {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    padding: 16px;
+  }
+  
+  .search-section {
+    background: #f8f9fa;
+    padding: 16px;
+    border-radius: 8px;
+    border: 1px solid #dee2e6;
+  }
+  
+  .table-section {
+    flex: 1;
+  }
+  
+  .table-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+  }
+  
+  .loading {
+    color: #6c757d;
+    font-style: italic;
+  }
+</style>
+```
+
+## Best Practices
+
+### 1. Performance Optimization
+
+```typescript
+// Optimize large datasets with virtual scrolling
+class VirtualizedTable extends FlexiDataTable {
+  private virtualItemHeight = 40;
+  private visibleItemCount = 20;
+  
+  getVirtualizedProps() {
+    return {
+      itemHeight: this.virtualItemHeight,
+      visibleCount: this.visibleItemCount,
+      overscan: 5
+    };
+  }
+}
+
+// Debounce search and filter operations
+class OptimizedTable extends FlexiDataTable {
+  private searchDebounce = 300;
+  
+  createDebouncedSearch(searchFn: Function) {
+    let timeoutId: number;
+    return (...args: any[]) => {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => searchFn(...args), this.searchDebounce);
+    };
+  }
+}
+```
+
+### 2. Accessibility
+
+```typescript
+const accessibleTableSchema = {
+  round: true,
+  indicatorColumn: {
+    width: 60,
+    displayNo: true,
+    selectable: true
+  },
+  columns: [
+    {
+      text: 'Product Name',
+      field: 'name',
+      width: 200,
+      // Add ARIA attributes for screen readers
+      'aria-label': 'Product name, sortable column',
+      'aria-sort': 'none'
+    }
+  ]
+};
+```
+
+### 3. Error Handling
+
+```typescript
+class RobustDataTable extends FlexiDataTable {
+  handleError(error: any, context: string): void {
+    console.error(`Table error in ${context}:`, error);
+    
+    // Show user-friendly error message
+    this.showErrorMessage(`Failed to ${context}. Please try again.`);
+    
+    // Log error for monitoring
+    this.logError(error, context);
+  }
+  
+  private showErrorMessage(message: string): void {
+    // Implement user notification
+    console.log('User message:', message);
+  }
+  
+  private logError(error: any, context: string): void {
+    // Send error to monitoring service
+    fetch('/api/errors', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        error: error.message,
+        context,
+        timestamp: new Date().toISOString()
+      })
+    });
+  }
+}
+```
+
+### 4. State Management
+
+```typescript
+class StatefulDataTable extends FlexiDataTable {
+  private state = {
+    sortColumn: null,
+    sortDirection: 'asc',
+    selectedRows: [],
+    columnWidths: {},
+    hiddenColumns: []
+  };
+  
+  saveState(): void {
+    localStorage.setItem('table-state', JSON.stringify(this.state));
+  }
+  
+  loadState(): void {
+    try {
+      const saved = localStorage.getItem('table-state');
+      if (saved) {
+        this.state = { ...this.state, ...JSON.parse(saved) };
+        this.applyState();
+      }
+    } catch (error) {
+      console.error('Failed to load table state:', error);
+    }
+  }
+  
+  private applyState(): void {
+    // Apply saved column widths
+    this.columns.forEach((column, index) => {
+      if (this.state.columnWidths[index]) {
+        column.width = this.state.columnWidths[index];
+      }
+    });
+    
+    // Apply column visibility
+    this.state.hiddenColumns.forEach(index => {
+      if (this.columns[index]) {
+        this.columns[index].visible = false;
+      }
+    });
+  }
+}
+```
+
+This comprehensive guide provides everything needed to effectively use and extend FlexiDataTable for building sophisticated data management interfaces. The examples show how to create powerful, interactive tables with advanced features like real-time updates, custom rendering, and complex data operations.