🚀 Comprehensive Table Operations

const frozenTable = new VTable.ListTable({
    container: document.getElementById('frozen-table'),
    records: wideDataset,
    columns: wideColumns,
    
    // Frozen column configuration
    frozenColCount: 2,        // Freeze first 2 columns from left
    rightFrozenColCount: 1,   // Freeze 1 column from right
    frozenRowCount: 1,        // Freeze header row
    bottomFrozenRowCount: 0,  // No frozen footer rows
    
    // Scrolling behavior
    scrollSliderHover: true,
    scrollSliderCornerRadius: 6,
    
    // Visual styling for frozen areas
    theme: {
        frozenColumnBackgroundColor: '#f8f9fa',
        frozenRowBackgroundColor: '#e9ecef'
    }
});

// Multi-column sorting
const sortingTable = new VTable.ListTable({
    container: document.getElementById('sorting-table'),
    records: employeeData,
    columns: [
        { 
            field: 'name', 
            title: 'Name', 
            width: 150, 
            sort: true,
            // Custom sort function
            sortFunc: (a, b, order) => {
                const nameA = a.toUpperCase();
                const nameB = b.toUpperCase();
                if (order === 'desc') {
                    return nameB.localeCompare(nameA);
                }
                return nameA.localeCompare(nameB);
            }
        },
        { 
            field: 'department', 
            title: 'Department', 
            width: 120, 
            sort: true 
        },
        { 
            field: 'salary', 
            title: 'Salary', 
            width: 100, 
            sort: true,
            format: (rec) => '$' + Number(rec).toLocaleString()
        }
    ],
    
    // Enable multi-column sorting
    sortState: [
        { field: 'department', order: 'asc' },
        { field: 'salary', order: 'desc' }
    ]
});

// Programmatic sorting
sortingTable.updateSortState([
    { field: 'name', order: 'asc' },
    { field: 'salary', order: 'desc' }
]);

// Advanced filtering with custom functions
let filteredData = originalData;

function performFiltering() {
    const startTime = performance.now();
    let filtered = [...originalData];
    
    // Name filter
    const nameFilter = document.getElementById('name-filter').value.toLowerCase();
    if (nameFilter) {
        filtered = filtered.filter(record => 
            record.name.toLowerCase().includes(nameFilter)
        );
    }
    
    // Department filter
    const deptFilter = document.getElementById('department-filter').value;
    if (deptFilter) {
        filtered = filtered.filter(record => 
            record.department === deptFilter
        );
    }
    
    // Salary range filter
    const minSalary = document.getElementById('min-salary').value;
    const maxSalary = document.getElementById('max-salary').value;
    
    if (minSalary) {
        filtered = filtered.filter(record => 
            record.salary >= parseInt(minSalary)
        );
    }
    
    if (maxSalary) {
        filtered = filtered.filter(record => 
            record.salary <= parseInt(maxSalary)
        );
    }
    
    // Update table with filtered data
    searchTable.updateRecords(filtered);
    
    const endTime = performance.now();
    logFilter(`Applied filters, showing ${filtered.length} of ${originalData.length} records (${(endTime - startTime).toFixed(2)}ms)`);
}

// Group by implementation using hierarchical data
function performGrouping() {
    const groupField = document.getElementById('group-field').value;
    const showAggregates = document.getElementById('show-aggregates').checked;
    
    if (!groupField) {
        // Show flat data
        groupTable.updateRecords(employeeData);
        return;
    }
    
    // Group data by selected field
    const grouped = employeeData.reduce((acc, record) => {
        const key = record[groupField];
        if (!acc[key]) {
            acc[key] = [];
        }
        acc[key].push(record);
        return acc;
    }, {});
    
    // Convert to hierarchical structure
    const hierarchicalData = Object.keys(grouped).map(groupKey => {
        const groupRecords = grouped[groupKey];
        const avgSalary = groupRecords.reduce((sum, r) => sum + r.salary, 0) / groupRecords.length;
        
        return {
            // Group header row
            isGroupHeader: true,
            groupKey: groupKey,
            field: groupField,
            count: groupRecords.length,
            avgSalary: Math.round(avgSalary),
            expanded: true,
            children: groupRecords
        };
    });
    
    groupTable.updateRecords(hierarchicalData);
}