SweetTable Custom Structure Demo

// Div-based table initialization
let divSweetTable;

function initDivTable() {
    const divTable = document.getElementById('div-table');

    divSweetTable = new SweetTable(divTable);

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

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

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

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

    // Custom parsing for price column (index 2)
    divSweetTable.setCustomParseFunction(2, (text) => {
        return parseFloat(text.replace(/[$,]/g, ''));
    });

    divSweetTable.initiate();
    document.getElementById('initDivTable').disabled = true;
    document.getElementById('disengageDivTable').disabled = false;
}

function disengageDivTable() {
    if (divSweetTable && divSweetTable.isEngaged()) {
        divSweetTable.disengage();
        divSweetTable = null;
        document.getElementById('initDivTable').disabled = false;
        document.getElementById('disengageDivTable').disabled = true;
    }
}

// UL-based table initialization
let ulSweetTable;

function initUlTable() {
    const ulTable = document.getElementById('ul-table');
    ulSweetTable = new SweetTable(ulTable);

    ulSweetTable.setCustomGetHeadersFunction((table) => {
        return table.querySelectorAll('.ul-th');
    });

    ulSweetTable.setCustomGetRowsFunction((table) => {
        return table.querySelectorAll('.ul-tr');
    });

    ulSweetTable.setCustomGetTbodyFunction((table) => {
        return table.querySelector('.ul-body');
    });

    ulSweetTable.setCustomGetCellFromRowFunction((row) => {
    return row.querySelectorAll('.ul-td');
    });

    // Custom parsing for salary column (index 2)
    ulSweetTable.setCustomParseFunction(2, (text) => {
        return parseFloat(text.replace(/[$,]/g, ''));
    });

    // Custom parsing for date column (index 3)
    ulSweetTable.setCustomParseFunction(3, (text) => {
        const parts = text.trim().split('/');
        return new Date(Number(parts[2]), Number(parts[0]) - 1, Number(parts[1])).getTime();
    });

    ulSweetTable.initiate();
    document.getElementById('initUlTable').disabled = true;
    document.getElementById('disengageUlTable').disabled = false;
}

function disengageUlTable() {
    if (ulSweetTable && ulSweetTable.isEngaged()) {
        ulSweetTable.disengage();
        ulSweetTable = null;
        document.getElementById('initUlTable').disabled = false;
        document.getElementById('disengageUlTable').disabled = true;
    }
}

// OL-based table initialization
let olSweetTable;

function initOlTable() {
    const olTable = document.getElementById('ol-table');
    olSweetTable = new SweetTable(olTable);

    olSweetTable.setCustomGetHeadersFunction((table) => {
        return table.querySelectorAll('.ol-th');
    });

    olSweetTable.setCustomGetRowsFunction((table) => {
        return table.querySelectorAll('.ol-tr');
    });

    olSweetTable.setCustomGetTbodyFunction((table) => {
        return table.querySelector('.ol-body');
    });

    olSweetTable.setCustomGetCellFromRowFunction((row) => {
        return row.querySelectorAll('.ol-td');
    });

    olSweetTable.initiate();
    document.getElementById('initOlTable').disabled = true;
    document.getElementById('disengageOlTable').disabled = false;
}

function disengageOlTable() {
    if (olSweetTable && olSweetTable.isEngaged()) {
        olSweetTable.disengage();
        olSweetTable = null;
        document.getElementById('initOlTable').disabled = false;
        document.getElementById('disengageOlTable').disabled = true;
    }
}