import { BWDataTable } from '@bw-ui/datatable';
import '@bw-ui/datatable/dist/bw-datatable.min.css';

const table = new BWDataTable('#my-table', {
  data: [
    { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' },
    { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'Editor' },
    { id: 3, name: 'Bob Wilson', email: 'bob@example.com', role: 'Viewer' },
  ],
});

new BWDataTable('#table', {
  // Data
  data: [], // Array of row objects
  columns: null, // Column definitions (auto-detect if null)
  rowId: 'id', // Field to use as row ID

  // Features
  editable: false, // Enable inline editing
  editableColumns: [], // Which columns are editable
  selectable: false, // Enable row selection
  selectionMode: 'multi', // 'single' | 'multi' | 'none'
  sortable: true, // Enable column sorting
  paginated: true, // Enable pagination
  pageSize: 20, // Rows per page
  searchable: true, // Enable global search

  // UI
  showHeader: true, // Show table header
  showFooter: true, // Show pagination footer
  loadingText: 'Loading...', // Loading overlay text
  emptyText: 'No data', // Empty state text

  // Callbacks
  onEditEnd: null, // (rowId, columnId, value, oldValue) => {}
  onSelect: null, // (selectedIds) => {}
  onSort: null, // (column, direction) => {}
  onFilter: null, // (filters) => {}
  onPageChange: null, // (page) => {}
});

{
  columns: [
    {
      id: 'name',              // Unique column ID
      header: 'Full Name',     // Header text
      field: 'name',           // Data field (supports dot notation: 'user.name')
      type: 'string',          // 'string' | 'number' | 'boolean' | 'date'
      width: '200px',          // Column width
      sortable: true,          // Enable sorting for this column
      editable: true,          // Enable editing for this column
      hidden: false,           // Hide column
      render: (value, row) => `<strong>${value}</strong>`,  // Custom renderer
    },
    // ... more columns
  ],
}

const table = new BWDataTable('#table', {
  data: myData,
  editable: true,
  editableColumns: ['name', 'email', 'role'],
  onEditEnd: (rowId, columnId, value, oldValue) => {
    console.log(`Cell [${rowId}][${columnId}]: ${oldValue} → ${value}`);
    // Save to server...
  },
});

const table = new BWDataTable('#table', {
  data: myData,
  selectable: true,
  selectionMode: 'multi',
  onSelect: (selectedIds) => {
    console.log('Selected:', selectedIds);
  },
});

// Get selected rows
const selected = table.getSelected();

const table = new BWDataTable('#table', {
  data: myData,
  columns: [
    { id: 'name', header: 'Name' },
    { id: 'email', header: 'Email' },
    {
      id: 'status',
      header: 'Status',
      render: (value) =>
        value
          ? '<span class="badge green">Active</span>'
          : '<span class="badge red">Inactive</span>',
    },
    {
      id: 'salary',
      header: 'Salary',
      type: 'number',
      render: (value) => `$${value.toLocaleString()}`,
    },
  ],
});

const table = new BWDataTable('#table', {
  data: myData,
  searchable: true,
});

// Programmatic filtering
table.filter('global', 'john'); // Search all columns
table.filter('role', 'Admin'); // Filter specific column

const table = new BWDataTable('#table', {
  data: myData,
  sortable: true,
  onSort: (column, direction) => {
    console.log(`Sorted by ${column} ${direction}`);
  },
});

// Programmatic sorting
table.sort('name', 'asc');
table.sort('salary', 'desc');

import { BWDataTable } from '@bw-ui/datatable';
import { HistoryPlugin } from '@bw-ui/datatable-history';
import { ExportPlugin } from '@bw-ui/datatable-export';

const table = new BWDataTable('#table', { data: myData })
  .use(HistoryPlugin)
  .use(ExportPlugin);

// Now you have undo/redo and export
table.undo();
table.exportCSV();

table.getData(); // Get current rows (filtered/sorted)
table.getOriginalData(); // Get original data
table.setData(newData); // Replace all data
table.addRow(row); // Add single row
table.removeRow(rowId); // Remove row by ID
table.updateRow(rowId, data); // Update row data

table.getSelected(); // Get selected row objects
table.getSelectedIds(); // Get selected row IDs
table.selectAll(); // Select all visible rows
table.clearSelection(); // Clear selection

table.sort(column, 'asc'); // Sort by column
table.filter('global', term); // Global search
table.filter(column, value); // Column filter
table.clearFilters(); // Clear all filters

table.goToPage(2); // Go to page (0-indexed)
table.setPageSize(50); // Change page size

table.startEdit(rowId, colId); // Start editing cell
table.setCellValue(rowId, colId, value); // Set cell value

table.getVisibleColumns(); // Get visible columns
table.hideColumn(colId); // Hide column
table.showColumn(colId); // Show column

table.render(); // Re-render table
table.setLoading(true); // Show loading overlay
table.destroy(); // Cleanup and remove