Back to Documentation Page

SourTable Demo

A lightweight, dependency-free table sorting library with modern JavaScript.

Basic Sorting

Click any column header to sort. Click again to reverse the order.

Name Age Salary Country Performance Join Date

Core Features

Basic Initialization

// Basic initialization
const table = document.getElementById('my-table');
let sourTable = new SourTable(table);
sourTable.initiate();

Excluded Columns

// Exclude first and third columns (0-based index)
let sourTable = new SourTable(table, [0, 2]);
sourTable.initiate();

Attribute Sorting

// Sort column 2 by data-salary attribute
let sourTable = new SourTable(table, [], {
    col_2: 'data-salary'
});
sourTable.initiate();

Custom Parsers

// Custom parser for performance percentages
sourTable.addCustomParseFunction(4, text => {
    return parseFloat(text.replace(/[%+]/g, ""));
});

// Custom date parser
sourTable.addCustomParseFunction(5, text => {
    return Date.parse(text);
});

Using a button to initialise a SourTable Instance


let sourTable;

function initSourTable() {

    if (sourTable && sourTable.isEngaged()) {

    //instead of performing this check you can also just disable the button, and re-enable it when the disengage button is clicked.
    // But do atleast either of those if you are going to use a button to create new instances of SourTable.
    // Otherwise you might end up with multiple "click" event listeners and reduced performance.


        throw new Error("A sourTable instance already exists for the same variable. Disengage it first, before creating a new instance")
    }
    
    const table = document.getElementById("demo-table");
    sourTable = new SourTable(table, [], { col_2: 'data-salary' });               
    
    // Custom parse functions
    sourTable.addCustomParseFunction(4, (text) => {
        return parseFloat(text.replace(/[%+]/g, ""));
    });
                    
    sourTable.addCustomParseFunction(5, (text) => {
        return Date.parse(text);
    });
                    
    sourTable.initiate();
    
} 
document.querySelector('#initialise-btn').addEventListener('click', ()=> {
    initSourTable()
});

Disengaging SourTable

Properly clean up event listeners and UI when disabling sorting functionality.

// Initialize SourTable
    const table = document.getElementById('data-table');
    let sourTable = new SourTable(table, [], { col_2: 'data-value' });
    sourTable.initiate();
    
    // Later, when you need to disable sorting:
    function disableSorting() {
        if (sourTable && sourTable.isEngaged()) {
            // This removes all event listeners and cleans up UI
            sourTable.disengage();
            
            // Important: Set to null to prevent memory leaks
            sourTable = null;
            
            console.log('SourTable has been properly disengaged');
        }
    }
    
    // Example: Disengage when button is clicked
    document.getElementById('disable-btn').addEventListener('click', disableSorting);

Key Points