Tabulator

annex

// tabulator-example-mini.js
var table = [
    {:""},
    {:""},
];

var table = new Tabulator("#tabulator_", {
    headerVisible:false,
    data:table,
    dataTree:true,
    dataTreeFilter:false,
    dataTreeSort:false,
    dataTreeStartExpanded:false,
    columns:[
        {title:"", field:"n01",width:120,formatter:"html"},
        {title:"", field:"n02"},
        {title:"", field:"n03"},
        {title:"", field:"n04"},
        {title:"", field:"n05"},
    ],
});

// tabulator-example.js
var minMaxFilterEditor = function (cell, onRendered, success, cancel, editorParams) {
    var end;
    var container = document.createElement("span");
    var start = document.createElement("input");
    start.setAttribute("type", "number");
    start.setAttribute("placeholder", "Min");
    start.setAttribute("min", 0);
    start.setAttribute("max", 100);
    start.style.padding = "4px";
    start.style.width = "50%";
    start.style.boxSizing = "border-box";
    start.value = cell.getValue();
    function buildValues() {
        success({
            start: start.value,
            end: end.value,
        });
    }
    function keypress(e) {
        if (e.keyCode == 13) {
            buildValues();
        }

        if (e.keyCode == 27) {
            cancel();
        }
    }
    end = start.cloneNode();
    end.setAttribute("placeholder", "Max");
    start.addEventListener("change", buildValues);
    start.addEventListener("blur", buildValues);
    start.addEventListener("keydown", keypress);
    end.addEventListener("change", buildValues);
    end.addEventListener("blur", buildValues);
    end.addEventListener("keydown", keypress);
    container.appendChild(start);
    container.appendChild(end);
    return container;
};
function minMaxFilterFunction(headerValue, rowValue, rowData, filterParams) {
    if (rowValue) {
        if (headerValue.start != "") {
            if (headerValue.end != "") {
                return rowValue >= headerValue.start && rowValue <= headerValue.end;
            } else {
                return rowValue >= headerValue.start;
            }
        } else {
            if (headerValue.end != "") {
                return rowValue <= headerValue.end;
            }
        }
    }
    return true;
}

var table = [
    {:""},
    {:"", _children:[
        {:""},
    ]},
];

var table = new Tabulator("#tabulator", {
    height:"600px",
    layout:"fitColumns",
    headerVisible:false,
    // responsiveLayout:"hide",
    // groupBy: "gp",
    // groupStartOpen:true,
    // selectable:true,
    data:table,
    dataTree:true,
    dataTreeFilter:false,
    dataTreeSort:false,
    dataTreeStartExpanded:false,
    columns:[
        // {title:"", field:"", formatter:"html", headerFilter:"input"},
        // {title:"", field:"", formatter:"textarea", headerFilter:"input"},
        // {title:"", field:"", formatter:"progress", formatterParams:{
        //     min:0,
        //     max:10,
        //     color:["green", "orange", "red"],
        //     legendColor:"#000000",
        //     legendAlign:"center",
        // }}
    ],
});