Smart Table

const table = RSL.SmartTable.create(document.querySelector('table'), {
    // Core Features
    sortable: true,
    filterable: true,
    searchable: true,
    selectable: true,
    paginated: true,
    pageSize: 25,
    pageSizes: [10, 25, 50, 100],
    exportable: true,
    exportFormats: ['csv', 'json', 'excel'],
    exportFilename: 'my-data',
    columnToggle: true,
    stickyHeader: true,
    stickyOffset: '60px',
    responsive: true,
    responsiveBreakpoint: 768,
    emptyMessage: 'No matching records',
    loadingMessage: 'Please wait...',
    serverMode: false,

    // Advanced Features
    rowActions: true,
    rowActionItems: ['view', 'edit', 'delete'],
    copyable: true,
    inlineEditing: true,
    editableColumns: ['Name', 'Email', 'Status'],  // empty array = all columns
    summaryRow: true,
    summaryColumns: [
        { column: 'Amount', type: 'sum', label: 'Total' },
        { column: 'Quantity', type: 'avg', label: 'Average' },
        { column: 'Status', type: 'count', label: 'Count' }
    ],
    expandableRows: true,
    expandableColumns: ['Notes', 'Details', 'History'],
    expandTemplate: function(rowData) {
        return '<div class="custom-detail">' + JSON.stringify(rowData) + '</div>';
    },

    // Quick Filters and Conditional Formatting
    quickFilters: [
        { label: 'Active', column: 'Status', value: 'Active' },
        { label: 'Pending', column: 'Status', value: 'Pending' },
        { label: 'High Value', column: 'Amount', operator: '>', value: 1000 }
    ],
    conditionalFormatting: [
        { column: 'Status', value: 'Active', className: 'status-active' },
        { column: 'Status', value: 'Inactive', className: 'status-inactive' },
        { column: 'Amount', condition: 'gt', value: 5000, className: 'highlight-high' }
    ]
});

const table = document.querySelector('[data-rsl-smart-table]');

table.addEventListener('smart-table:sort', (e) => {
    console.log('Sorted by column', e.detail.column, e.detail.direction);
});

table.addEventListener('smart-table:select', (e) => {
    console.log('Selected', e.detail.selectedCount, 'rows');
    // Access selected row data
    console.log(e.detail.selectedRows);
});

table.addEventListener('smart-table:export', (e) => {
    console.log('Exported', e.detail.rowCount, 'rows as', e.detail.format);
});

// Inline editing - capture cell changes for saving
table.addEventListener('rsl-smart-table:cell-edit', (e) => {
    console.log('Cell edited:', e.detail);
    // e.detail contains: row, column, oldValue, newValue, rowData

    // Save to server
    fetch('/api/update', {
        method: 'POST',
        body: JSON.stringify({
            row: e.detail.row,
            column: e.detail.column,
            value: e.detail.newValue
        })
    });
});

// Row expansion events
table.addEventListener('rsl-smart-table:row-expand', (e) => {
    console.log('Row expanded:', e.detail.row, e.detail.rowData);
});

table.addEventListener('rsl-smart-table:row-collapse', (e) => {
    console.log('Row collapsed:', e.detail.row);
});

// Row action events (View/Edit/Delete buttons)
table.addEventListener('rsl-smart-table:row-action', (e) => {
    const { action, row, rowData } = e.detail;

    switch(action) {
        case 'view':
            showDetailModal(rowData);
            break;
        case 'edit':
            openEditForm(rowData);
            break;
        case 'delete':
            if (confirm('Delete this row?')) {
                deleteRow(row);
            }
            break;
    }
});

const instance = RSL.SmartTable.getInstance(table);

// Get complete table state as JSON
const tableJSON = instance.getTableData();
console.log(tableJSON);
// Returns:
// {
//   headers: ['Name', 'Email', 'Status'],
//   rows: [
//     ['John Doe', 'john@example.com', 'Active'],
//     ['Jane Smith', 'jane@example.com', 'Pending']
//   ],
//   config: {
//     sortable: true,
//     filterable: true,
//     // ... all current config options
//   }
// }

// Save to localStorage or server
localStorage.setItem('savedTable', JSON.stringify(tableJSON));

// Load table from saved JSON
const savedData = JSON.parse(localStorage.getItem('savedTable'));
instance.loadData(savedData);

// Use in page builder to recreate table
function buildTableFromConfig(config) {
    const table = document.createElement('table');
    table.setAttribute('data-rsl-smart-table', '');

    // Create headers
    const thead = document.createElement('thead');
    const headerRow = document.createElement('tr');
    config.headers.forEach(header => {
        const th = document.createElement('th');
        th.textContent = header;
        headerRow.appendChild(th);
    });
    thead.appendChild(headerRow);
    table.appendChild(thead);

    // Create body
    const tbody = document.createElement('tbody');
    config.rows.forEach(row => {
        const tr = document.createElement('tr');
        row.forEach(cell => {
            const td = document.createElement('td');
            td.textContent = cell;
            tr.appendChild(td);
        });
        tbody.appendChild(tr);
    });
    table.appendChild(tbody);

    // Initialize with saved config
    return RSL.SmartTable.create(table, config.config);
}

const instance = RSL.SmartTable.getInstance(table);

// Server-side sorting
instance.onSortChange = async (sortState) => {
    const data = await fetch(`/api/data?sort=${sortState.column}&dir=${sortState.direction}`);
    instance.setData(await data.json());
};

// Server-side filtering
instance.onFilterChange = async (filters) => {
    const params = new URLSearchParams(filters);
    const data = await fetch(`/api/data?${params}`);
    instance.setData(await data.json());
};

// Server-side pagination
instance.onPageChange = async (page, pageSize) => {
    const data = await fetch(`/api/data?page=${page}&limit=${pageSize}`);
    instance.setData(await data.json());
};

:root {
    --rsl-smart-table-bg: #ffffff;
    --rsl-smart-table-border: #e2e8f0;
    --rsl-smart-table-header-bg: #f8fafc;
    --rsl-smart-table-header-text: #1e293b;
    --rsl-smart-table-row-hover: #f1f5f9;
    --rsl-smart-table-row-selected: #eff6ff;
    --rsl-smart-table-primary: #6E7BFF;
    --rsl-smart-table-text: #334155;
    --rsl-smart-table-text-muted: #64748b;
    --rsl-smart-table-radius: 8px;
    --rsl-smart-table-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

<!-- Filter Component publishes to FilterBus -->
<div data-rsl-filter
     data-filter-key="status"
     data-filter-options="All,Active,Pending,Inactive">
</div>

<div data-rsl-filter
     data-filter-key="region"
     data-filter-options="All,North,South,East,West">
</div>

<!-- Smart Table subscribes to FilterBus -->
<table data-rsl-smart-table
       data-filter-subscribe="status,region"
       data-filter-map="status:Status,region:Region">
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Status</th>
            <th>Region</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John Smith</td>
            <td>john@example.com</td>
            <td>Active</td>
            <td>North</td>
        </tr>
        <!-- More rows... -->
    </tbody>
</table>

const table = document.querySelector('[data-rsl-smart-table]');

table.addEventListener('rsl-smart-table:filterbus-update', (e) => {
    console.log('FilterBus state:', e.detail.state);
    console.log('Source:', e.detail.meta.source);
    console.log('Table instance:', e.detail.instance);
});

<!-- Date Picker publishes date range -->
<input type="text"
       data-rsl-date-picker
       data-mode="range"
       data-show-presets="true"
       data-filterbus-publish="dateFilter">

<!-- Smart Table filters rows by date column -->
<table data-rsl-smart-table
       data-filter-subscribe="dateFilter"
       data-filterbus-date-field="orderDate">
    <thead>
        <tr>
            <th data-col="orderDate" data-type="date">Order Date</th>
            <th data-col="customer">Customer</th>
            <th data-col="amount" data-type="currency">Amount</th>
        </tr>
    </thead>
    <tbody>
        <!-- Rows will be filtered to show only those within selected date range -->
    </tbody>
</table>