Smart Table Examples

    

        

            
#
            
Name
            
Email
            
Role
            
Status
        
    
    

        

            
1
            
John Smith
            
john@example.com
            
Developer
            

                Active
            
        
        
    

    

        

            
Order #
            
Customer
            
Product
            
Status
            
Total
            
Date
        
    
    

        
        

            
$1,299.00
            
Nov 28, 2024
        
    

// Get instance
const table = document.querySelector('#selectable-table');
const instance = RSL.SmartTable.getInstance(table);

// Get selected rows
const selected = instance.getSelectedRows();
console.log(selected);

// Select specific row
instance.selectRow('emp-1');

// Select all
instance.selectAll();

// Clear selection
instance.clearSelection();

// Listen for selection changes
table.addEventListener('rsl-smart-table:selection', (e) => {
    console.log('Selected:', e.detail.selected);
});

    

        

            

                
ID
                
Product
                
            
        
        

            
        
    

const table = document.querySelector('#export-table');
const instance = RSL.SmartTable.getInstance(table);

// Export to CSV (all data)
instance.export('csv', 'all');

// Export to JSON (filtered data only)
instance.export('json', 'filtered');

// Export to Excel
instance.export('excel', 'all');

// Custom export handler
instance.onExport = (data) => {
    // Custom handling - e.g., send to server
    console.log(data.format, data.data);
};

// Initialize all Smart Tables
RSL.SmartTable.init();

// Get instance for specific table
const table = document.querySelector('#my-table');
const instance = RSL.SmartTable.getInstance(table);

// Sorting
instance.sort('dueDate', 'asc');    // Sort ascending
instance.sort('priority', 'desc'); // Sort descending
instance.clearSort();               // Clear all sorting

// Filtering
instance.filterColumn('priority', 'High');  // Filter column
instance.search('John');                     // Global search
instance.clearFilters();                     // Clear all filters

// Pagination
instance.goToPage(2);           // Go to page 2
instance.nextPage();            // Next page
instance.prevPage();            // Previous page
instance.setPageSize(25);       // Change page size

// Selection (if enabled)
instance.selectRow('row-id');   // Select row
instance.deselectRow('row-id'); // Deselect row
instance.selectAll();           // Select all
instance.clearSelection();      // Clear selection
instance.getSelectedRows();     // Get selected data

// Export
instance.export('csv', 'all');       // All data
instance.export('json', 'filtered'); // Filtered only

// State
const state = instance.getState();
console.log(state);
// { sort: [...], filters: {...}, page: 1, pageSize: 10, ... }

// Refresh
instance.refresh();

// Destroy
instance.destroy();

// Create table with quick filters
const table = document.querySelector('#my-table');
RSL.SmartTable.create(table, {
    quickFilters: [
        {
            label: 'Active',
            icon: 'fas fa-check',
            column: 'status',
            value: 'Active',
            color: '#10b981'
        },
        {
            label: 'Pending',
            icon: 'fas fa-clock',
            column: 'status',
            value: 'Pending',
            color: '#f59e0b'
        },
        {
            label: 'High Priority',
            icon: 'fas fa-exclamation',
            // Custom filter function
            filter: (row) => row.priority?.value === 'High'
        }
    ]
});

    ...

RSL.SmartTable.create(table, {
    conditionalFormatting: [
        {
            column: 'status',
            rules: [
                {
                    condition: 'equals',
                    value: 'Complete',
                    badge: 'success'  // Green badge
                },
                {
                    condition: 'equals',
                    value: 'In Progress',
                    badge: 'warning'  // Yellow badge
                },
                {
                    condition: 'equals',
                    value: 'Blocked',
                    badge: 'error',   // Red badge
                    icon: 'fa-exclamation-triangle',
                    iconColor: '#ef4444'
                }
            ]
        },
        {
            column: 'progress',
            rules: [
                {
                    condition: 'not_empty',
                    progressBar: true,
                    progressColor: '#6E7BFF'
                }
            ]
        },
        {
            column: 'score',
            rules: [
                { condition: 'greater_than', value: 90, class: 'rsl-heat-low' },
                { condition: 'between', min: 70, max: 90, class: 'rsl-heat-medium' },
                { condition: 'less_than', value: 70, class: 'rsl-heat-high' }
            ]
        }
    ]
});

// Enable inline editing
<table data-rsl-smart-table data-inline-editing>

// Listen for cell edits
table.addEventListener('rsl-smart-table:cell-edit', (e) => {
    const { column, oldValue, newValue, tableData } = e.detail;

    // tableData contains complete JSON for saving
    console.log('Updated table:', tableData);

    // Send to your backend
    fetch('/api/save-table', {
        method: 'POST',
        body: JSON.stringify(tableData)
    });
});

// Get all table data as JSON
const instance = RSL.SmartTable.getInstance(table);
const data = instance.getTableData();
// { columns: [...], rows: [...], config: {...}, state: {...} }

// Load data into table (for page builder)
instance.loadData({
    rows: [
        { _id: 'row-1', name: 'Product A', price: 99 },
        { _id: 'row-2', name: 'Product B', price: 149 }
    ]
});

// Enable via data attribute
<table data-rsl-smart-table data-summary-row>

// Or configure specific columns
RSL.SmartTable.create(table, {
    summaryRow: true,
    summaryColumns: [
        { column: 'quantity', type: 'sum', label: 'Total' },
        { column: 'price', type: 'avg', label: 'Avg' },
        { column: 'orders', type: 'count', label: 'Count' },
        { column: 'rating', type: 'max', label: 'Best' }
    ]
});

// Summary types: 'sum', 'avg', 'count', 'min', 'max'

// Enable via data attribute
<table data-rsl-smart-table data-expandable-rows>

// Or with custom template
RSL.SmartTable.create(table, {
    expandableRows: true,
    expandTemplate: (rowData) => `
        <div class="order-details">
            <h4>Order Items</h4>
            <ul>
                <li>Product A - $99.99</li>
                <li>Product B - $49.99</li>
            </ul>
            <p>Shipping: ${rowData.customer?.value}</p>
        </div>
    `
});

// Listen for expand/collapse events
table.addEventListener('rsl-smart-table:row-expand', (e) => {
    const { row, panel } = e.detail;
    // Load additional data into panel
});

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

<table data-rsl-smart-table
       data-column-resizing
       data-min-column-width="100">

// Get/set column widths programmatically
const widths = instance.getColumnWidths();
instance.setColumnWidths({ name: 200, description: 350 });

// Listen for resize events
table.addEventListener('rsl-smart-table:column-resize', (e) => {
    console.log('Column', e.detail.column, 'resized to', e.detail.width);
});

// Enable column reordering
<table data-rsl-smart-table data-column-reordering>

// Get/set column order programmatically
const order = instance.getColumnOrder(); // ['date', 'event', 'location', ...]
instance.setColumnOrder(['event', 'date', 'status', 'location', 'attendees']);

// Listen for reorder events
table.addEventListener('rsl-smart-table:column-reorder', (e) => {
    console.log('Moved from', e.detail.fromIndex, 'to', e.detail.toIndex);
    console.log('New order:', e.detail.columnOrder);
});

// Via data attribute (JSON format)
<table data-rsl-smart-table
       data-frozen-columns='{"left":["id"],"right":["actions"]}'>

// Via JavaScript
RSL.SmartTable.create(table, {
    frozenColumns: {
        left: ['id', 'name'],    // Pin these to left
        right: ['actions']        // Pin these to right
    }
});

// Pin/unpin dynamically
instance.pinColumn('status', 'left');
instance.pinColumn('total', 'right');
instance.unpinColumn('status');

<table data-rsl-smart-table
       data-selectable
       data-bulk-actions
       data-bulk-action-items="delete,export,status"
       data-bulk-status-options="Active,Inactive,Pending,Archived">

// Listen for bulk action events
table.addEventListener('rsl-smart-table:bulk-delete', (e) => {
    console.log('Deleting', e.detail.count, 'rows');
});

table.addEventListener('rsl-smart-table:bulk-status-change', (e) => {
    console.log('Changing status to:', e.detail.newStatus);
    // Update your backend here
});

// Enable saved views
<table data-rsl-smart-table data-saved-views>

// Save current view
instance.saveView('My Custom View');

// Load a saved view
instance.loadView('My Custom View');

// Get all saved views (for server sync)
const views = instance.getSavedViews();
// Send to server: fetch('/api/views', { method: 'POST', body: JSON.stringify(views) });

// Delete a view
instance.deleteView('Old View');

// Reset to defaults
instance.resetView();

// Events
table.addEventListener('rsl-smart-table:view-saved', (e) => {
    console.log('Saved view:', e.detail.name);
});

// Enable full page mode button
<table data-rsl-smart-table
       data-full-page-mode
       data-full-page-padding="20">

// Toggle programmatically
instance.toggleFullPage();

// Check current state
if (instance.isFullPage()) {
    console.log('Currently in full page mode');
}

// Listen for toggle
table.addEventListener('rsl-smart-table:fullpage-toggle', (e) => {
    console.log('Full page mode:', e.detail.isFullPage);
});