Back to SweetTable Documentation

SweetTable Library Demo

A lightweight, flexible table sorting library that works with both standard HTML tables and custom table-like structures.

Table of Contents

Basic Table Sorting

This demonstrates the simplest usage with a standard HTML table.

Name Age Salary Join Date
John Doe 32 $75,000 2020-05-15
Jane Smith 28 $82,500 2019-11-03
Mike Johnson 41 $65,000 2021-02-20
Sarah Williams 35 $90,000 2018-07-10 
// Basic initialization
let basicSweetTable;

function initBasicTable() {
    const basicTable = document.getElementById('basic-table');
    basicSweetTable = new SweetTable(basicTable);
    basicSweetTable.initiate();
    // disable the button so that you do not accidentally create another instance of same table on same variable. Disengage the first instance before creating another instance.
    document.getElementById('initBasicTable').disabled = true;
    document.getElementById('disengageBasicTable').disabled = false;
}

function disengageBasicTable() {
    if (basicSweetTable && basicSweetTable.isEngaged()) {
        basicSweetTable.disengage();
        basicSweetTable = null;
        document.getElementById('initBasicTable').disabled = false;
        document.getElementById('disengageBasicTable').disabled = true;
    }
}

Excluding Columns

You can exclude specific columns from being sortable by passing their indexes.

Product Category Price Stock Last Ordered
Laptop Electronics $999.99 15 2023-01-10
Desk Chair Furniture $149.99 8 2023-01-15
Monitor Electronics $249.99 12 2023-01-05 
// Initialize with excluded columns (indexes 1 and 3)
let excludedSweetTable;

function initExcludedTable() {
    const excludedTable = document.getElementById('excluded-table');
    excludedSweetTable = new SweetTable(excludedTable, [1, 3]);
    excludedSweetTable.initiate();
    document.getElementById('initExcludedTable').disabled = true;
    document.getElementById('disengageExcludedTable').disabled = false;
}

function disengageExcludedTable() {
    if (excludedSweetTable && excludedSweetTable.isEngaged()) {
        excludedSweetTable.disengage();
        excludedSweetTable = null;
        document.getElementById('initExcludedTable').disabled = false;
        document.getElementById('disengageExcludedTable').disabled = true;
    }
}

Custom Data Parsing

You can provide custom parsing functions for specific columns to handle special data formats.

Employee Department Salary Employment Date
Alex Brown Marketing $65,000 05/15/2020
Taylor Green Engineering $85,000 11/03/2019
Morgan Black Sales $72,000 02/20/2021 
// Custom parsing for date column (index 3)
let customParseSweetTable;

function initCustomParseTable() {
    const customParseTable = document.getElementById('custom-parse-table');
    customParseSweetTable = new SweetTable(customParseTable);

    customParseSweetTable.setCustomParseFunction(3, (text) => {
        const parts = text.trim().split('/');
        return new Date(Number(parts[2]), Number(parts[0]) - 1, Number(parts[1])).getTime();
    });

    customParseSweetTable.initiate();

    document.getElementById('initCustomParseTable').disabled = true;
    document.getElementById('disengageCustomParseTable').disabled = false;
}

function disengageCustomParseTable() {
    if (customParseSweetTable && customParseSweetTable.isEngaged()) {
        customParseSweetTable.disengage();
        customParseSweetTable = null;
        document.getElementById('initCustomParseTable').disabled = false;
        document.getElementById('disengageCustomParseTable').disabled = true;
    }
}

Custom Table Structure

SweetTable can work with non-standard table structures (like div-based tables) using custom functions.

Product
Price
Rating
Wireless Headphones
$129.99
4.5
Smart Watch
$199.99
4.2
Bluetooth Speaker
$79.99
4.7
// Custom table initialization
let customSweetTable;

function initCustomTable() {
    const customTable = document.getElementById('custom-table');
    customSweetTable = new SweetTable(customTable);

    customSweetTable.setCustomGetHeadersFunction((table) => {
        return table.querySelectorAll('.div-th');
    });

    customSweetTable.setCustomGetRowsFunction((table) => {
        return table.querySelectorAll('.div-tr');
    });

    customSweetTable.setCustomGetTbodyFunction((table) => {
        return table.querySelector('.div-body');
    });

    customSweetTable.setCustomGetCellFromRowFunction((row) => {
        return row.querySelectorAll('.div-td');
    });

    customSweetTable.initiate();
    document.getElementById('initCustomTable').disabled = true;
    document.getElementById('disengageCustomTable').disabled = false;
}

function disengageCustomTable() {
    if (customSweetTable && customSweetTable.isEngaged()) {
        customSweetTable.disengage();
        customSweetTable = null;
        document.getElementById('initCustomTable').disabled = false;
        document.getElementById('disengageCustomTable').disabled = true;
    }
}

Sorting by Data Attributes

You can sort by data attributes instead of displayed text when needed.

Game Platform Release Date Metacritic Score
The Legend of Zelda: Breath of the Wild Nintendo Switch March 3, 2017 97
Red Dead Redemption 2 PlayStation 4 October 26, 2018 97
Super Mario Odyssey Nintendo Switch October 27, 2017 97 
// Sorting by data attributes
let attributeSweetTable;

function initAttributeTable() {
    const attributeTable = document.getElementById('attribute-table');

    attributeSweetTable = new SweetTable(attributeTable, [], {
        2: 'sort-value'
    });

    attributeSweetTable.initiate();
    document.getElementById('initAttributeTable').disabled = true;
    document.getElementById('disengageAttributeTable').disabled = false;
}

function disengageAttributeTable() {
    if (attributeSweetTable && attributeSweetTable.isEngaged()) {
        attributeSweetTable.disengage();
        attributeSweetTable = null;
        document.getElementById('initAttributeTable').disabled = false;
        document.getElementById('disengageAttributeTable').disabled = true;
    }
}