Javascript

Home Load Console Selectors CSS Form Strings If Else Array Reg Exp Date & Time setTimeout JSON Loops Objects Animation Fat Arrow Class Import IIFE undefined Tabulator.js ES6 Event Listeners AJAX Hide Elements Create Elements Checkbox ejs
O O

Weather Controls

Time Of Day
Rain
Wind Speed
Wind Direction
Clouds

Javascript : Tabulator.js

2022-07-18

Load

<link href="https://unpkg.com/tabulator-tables@4.9.3/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator.min.js"></script>

Style


    .tabulator {
        border: 0;
    }       
    .tabulator .tabulator-header {
        border: 0;
    }
    .tabulator-row {
        background-color: #fff;
    }
    .tabulator-row.tabulator-row-even {
        background-color: #f7f7f7;
    }
    .tabulator .tabulator-header .tabulator-col,
    .tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
        color: #<%=colorTableText%>; 
        background-color: #<%=colorTableHeading%>; 
    }   
    .tabulator .tabulator-header .tabulator-col {
        text-align: center;
    }
    .tabulator .tabulator-header .tabulator-col,
    .tabulator-row .tabulator-cell {
        border-right: 2px solid #fff;

    }
    .tabulator-row.tabulator-selectable:hover {
        background-color: #fff6bf;
    }

Apply Filter

function stateFilter(t) {
    if (t.value == "") {
        table.clearFilter();
    } else {
        table.setFilter('state', '=', t.value);
    }
}

Do Something When Cell Data Changes

var options = {
    data:data,           
    cellEdited:function(a){
        ajaxFunction(a);
         // console.log(a._cell.value)
         // console.log(a._cell.row.data.state)
    }
}

var table = new Tabulator("#tab-table", options);

function ajaxFunction(a) {
    $.ajax({
        data: {
            value: a._cell.value,
            state: a._cell.row.data.state
        },
        success:function (a) {
            console.log(a)
        },
        error:function(a, b, c) {
            console.log(a, b, c);
        }
    })  
}

Use a Standard Checkbox in the column

{title:"Active", field:"isActive", width:90,  hozAlign:"center", sorter:"boolean", editor:true, formatter: (cell) => {
    var value = cell.getValue();
     if (value == "TX") {
           return `<input type="checkbox" checked/>`;
     } else {
          return `<input type="checkbox"/>`;
    }
}}

// or use a dropdown
        {title:"isActive", field:"isActive", align:"center", editor:"select", 
            editorParams:{
                "true":"<b>Yes</b>",
                "false":"No"
            },
            formatter: (cell) => {
                const value = cell.getValue();
                if (cell.getValue()) {
                    return `Yes`;
                } else {
                    return `No`;
                }
            }
        }