So, here is what you say you want.
Here is the source code for it from the web page.
//custom max min header filter
var minMaxFilterEditor = function(cell, onRendered, success, cancel, editorParams){
var end;
var container = document.createElement("span");
//create and style inputs
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;
}
//custom max min filter function
function minMaxFilterFunction(headerValue, rowValue, rowData, filterParams){
//headerValue - the value of the header filter element
//rowValue - the value of the column in this row
//rowData - the data for the row being filtered
//filterParams - params object passed to the headerFilterFuncParams property
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; //must return a boolean, true if it passes the filter.
}
var table = new Tabulator("#example-table", {
height:"311px",
layout:"fitColumns",
columns:[
{title:"Name", field:"name", width:150, headerFilter:"input"},
{title:"Progress", field:"progress", width:150, formatter:"progress", sorter:"number", headerFilter:minMaxFilterEditor, headerFilterFunc:minMaxFilterFunction, headerFilterLiveFilter:false},
{title:"Gender", field:"gender", editor:"list", editorParams:{values:{"male":"Male", "female":"Female", clearable:true}}, headerFilter:true, headerFilterParams:{values:{"male":"Male", "female":"Female", "":""}, clearable:true}},
{title:"Rating", field:"rating", editor:"star", hozAlign:"center", width:100, headerFilter:"number", headerFilterPlaceholder:"at least...", headerFilterFunc:">="},
{title:"Favourite Color", field:"col", editor:"input", headerFilter:"list", headerFilterParams:{valuesLookup:true, clearable:true}},
{title:"Date Of Birth", field:"dob", hozAlign:"center", sorter:"date", headerFilter:"input"},
{title:"Driver", field:"car", hozAlign:"center", formatter:"tickCross", headerFilter:"tickCross", headerFilterParams:{"tristate":true},headerFilterEmptyCheck:function(value){return value === null}},
],
});
Here is the resulting flow that I built with just copy/paste from the web page.
[{"id":"250290d53b07a92d","type":"tab","label":"Flow 1","disabled":false,"info":"","env":[]},{"id":"13c9bb7afaec28ee","type":"ui_template","z":"250290d53b07a92d","group":"e20c5b3c6a494e25","name":"","order":1,"width":0,"height":0,"format":"<link href=\"https://unpkg.com/tabulator-tables/dist/css/tabulator_site.min.css\" rel=\"stylesheet\">\n<script type=\"text/javascript\" src=\"https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js\"></script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":80,"y":40,"wires":[[]]},{"id":"5b1eaa2da8011171","type":"ui_template","z":"250290d53b07a92d","group":"e20c5b3c6a494e25","name":"","order":2,"width":0,"height":0,"format":"<div id=\"example-table\"></div>\n<script>\n //sample data to be used in all tabulators\n var tabledata = [\n {id:1, name:\"Oli Bob\", progress:12, location:\"United Kingdom\", gender:\"male\", rating:1, col:\"red\", dob:\"14/04/1984\",\n car:1, lucky_no:5, lorem:\"Lorem ipsum dolor sit amet, elit consectetur adipisicing \"},\n {id:2, name:\"Mary May\", progress:1, location:\"Germany\", gender:\"female\", rating:2, col:\"blue\", dob:\"14/05/1982\",\n car:true, lucky_no:10, lorem:\"Lorem ipsum dolor sit amet, elit consectetur adipisicing \"},\n {id:3, name:\"Christine Lobowski\", progress:42, location:\"France\", gender:\"female\", rating:0, col:\"green\",\n dob:\"22/05/1982\", car:\"true\", lucky_no:12, lorem:\"Lorem ipsum dolor sit amet, elit consectetur adipisicing \"},\n {id:4, name:\"Brendon Philips\", progress:100, location:\"USA\", gender:\"male\", rating:1, col:\"orange\", dob:\"01/08/1980\",\n car:false, lucky_no:18, lorem:\"Lorem ipsum dolor sit amet, elit consectetur adipisicing \"},\n {id:5, name:\"Margret Marmajuke\", progress:16, location:\"Canada\", gender:\"female\", rating:5, col:\"yellow\",\n dob:\"31/01/1999\", car:false, lucky_no:33, lorem:\"Lorem ipsum dolor sit amet, elit consectetur adipisicing \"},\n {id:6, name:\"Frank Harbours\", progress:38, location:\"Russia\", gender:\"male\", rating:4, col:\"red\", dob:\"12/05/1966\",\n car:1, lucky_no:2, lorem:\"Lorem ipsum dolor sit amet, elit consectetur adipisicing \"},\n {id:7, name:\"Jamie Newhart\", progress:23, location:\"India\", gender:\"male\", rating:3, col:\"green\", dob:\"14/05/1985\",\n car:true, lucky_no:63, lorem:\"Lorem ipsum dolor sit amet, elit consectetur adipisicing \"},\n {id:8, name:\"Gemma Jane\", progress:60, location:\"China\", gender:\"female\", rating:0, col:\"red\", dob:\"22/05/1982\",\n car:\"true\", lucky_no:72, lorem:\"Lorem ipsum dolor sit amet, elit consectetur adipisicing \"},\n {id:9, name:\"Emily Sykes\", progress:42, location:\"South Korea\", gender:\"female\", rating:1, col:\"maroon\",\n dob:\"11/11/1970\", car:false, lucky_no:44, lorem:\"Lorem ipsum dolor sit amet, elit consectetur adipisicing \"},\n {id:10, name:\"James Newman\", progress:73, location:\"Japan\", gender:\"male\", rating:5, col:\"red\", dob:\"22/03/1998\",\n car:false, lucky_no:9, lorem:\"Lorem ipsum dolor sit amet, elit consectetur adipisicing \"},\n ];\n \n var tabledatasimple = [\n {id:1, name:\"Oli Bob\", location:\"United Kingdom\", gender:\"male\", rating:1, col:\"red\", dob:\"14/04/1984\"},\n {id:2, name:\"Mary May\", location:\"Germany\", gender:\"female\", rating:2, col:\"blue\", dob:\"14/05/1982\"},\n {id:3, name:\"Christine Lobowski\", location:\"France\", gender:\"female\", rating:0, col:\"green\", dob:\"22/05/1982\"},\n {id:4, name:\"Brendon Philips\", location:\"USA\", gender:\"male\", rating:1, col:\"orange\", dob:\"01/08/1980\"},\n {id:5, name:\"Margret Marmajuke\", location:\"Canada\", gender:\"female\", rating:5, col:\"yellow\", dob:\"31/01/1999\"},\n {id:6, name:\"Frank Harbours\", location:\"Russia\", gender:\"male\", rating:4, col:\"red\", dob:\"12/05/1966\"},\n {id:7, name:\"Jamie Newhart\", location:\"India\", gender:\"male\", rating:3, col:\"green\", dob:\"14/05/1985\"},\n {id:8, name:\"Gemma Jane\", location:\"China\", gender:\"female\", rating:0, col:\"red\", dob:\"22/05/1982\"},\n {id:9, name:\"Emily Sykes\", location:\"South Korea\", gender:\"female\", rating:1, col:\"maroon\", dob:\"11/11/1970\"},\n {id:10, name:\"James Newman\", location:\"Japan\", gender:\"male\", rating:5, col:\"red\", dob:\"22/03/1998\"},\n ];\n \n var tableDataNested = [\n {id:1, name:\"Oli Bob\", location:\"United Kingdom\", gender:\"male\", rating:1, col:\"red\", dob:\"14/04/1984\", car:1,\n lucky_no:5, _children:[\n {id:2, name:\"Mary May\", progress:1, location:\"Germany\", gender:\"female\", rating:2, col:\"blue\", dob:\"14/05/1982\",\n car:true, lucky_no:10},\n {id:3, name:\"Christine Lobowski\", progress:42, location:\"France\", gender:\"female\", rating:0, col:\"green\",\n dob:\"22/05/1982\", car:\"true\", lucky_no:12},\n {id:4, name:\"Brendon Philips\", progress:100, location:\"USA\", gender:\"male\", rating:1, col:\"orange\", dob:\"01/08/1980\",\n lucky_no:18, _children:[\n {id:5, name:\"Margret Marmajuke\", progress:16, location:\"Canada\", gender:\"female\", rating:5, col:\"yellow\",\n dob:\"31/01/1999\", lucky_no:33},\n {id:6, name:\"Frank Harbours\", progress:38, location:\"Russia\", gender:\"male\", rating:4, col:\"red\", dob:\"12/05/1966\",\n car:1, lucky_no:2},\n ]},\n ]},\n {id:7, name:\"Jamie Newhart\", progress:23, location:\"India\", gender:\"male\", rating:3, col:\"green\", dob:\"14/05/1985\",\n car:true, lucky_no:63},\n {id:8, name:\"Gemma Jane\", progress:60, location:\"China\", gender:\"female\", rating:0, col:\"red\", dob:\"22/05/1982\",\n car:\"true\", lucky_no:72, _children:[\n {id:9, name:\"Emily Sykes\", progress:42, location:\"South Korea\", gender:\"female\", rating:1, col:\"maroon\",\n dob:\"11/11/1970\", lucky_no:44},\n ]},\n {id:10, name:\"James Newman\", progress:73, location:\"Japan\", gender:\"male\", rating:5, col:\"red\", dob:\"22/03/1998\",\n lucky_no:9},\n ];\n \n var tabledatabig = [\n {id:1, name:\"Oli Bob\", progress:12, gender:\"male\", rating:1, col:\"red\", dob:\"14/04/1984\", car:1, lucky_no:5},\n {id:2, name:\"Mary May\", progress:1, gender:\"female\", rating:2, col:\"blue\", dob:\"14/05/1982\", car:true, lucky_no:10},\n {id:3, name:\"Christine Lobowski\", progress:42, gender:\"female\", rating:0, col:\"green\", dob:\"22/05/1982\", car:\"true\",\n lucky_no:12},\n {id:4, name:\"Brendon Philips\", progress:100, gender:\"male\", rating:1, col:\"orange\", dob:\"01/08/1980\", lucky_no:18},\n {id:5, name:\"Margret Marmajuke\", progress:16, gender:\"female\", rating:5, col:\"yellow\", dob:\"31/01/1999\", lucky_no:33},\n {id:6, name:\"Frank Harbours\", progress:38, gender:\"male\", rating:4, col:\"red\", dob:\"12/05/1966\", car:1, lucky_no:2},\n {id:7, name:\"Jamie Newhart\", progress:23, gender:\"male\", rating:3, col:\"green\", dob:\"14/05/1985\", car:true,\n lucky_no:63},\n {id:8, name:\"Gemma Jane\", progress:60, gender:\"female\", rating:0, col:\"red\", dob:\"22/05/1982\", car:\"true\", lucky_no:72},\n {id:9, name:\"Emily Sykes\", progress:42, gender:\"female\", rating:1, col:\"maroon\", dob:\"11/11/1970\", lucky_no:44},\n {id:10, name:\"James Newman\", progress:73, gender:\"male\", rating:5, col:\"red\", dob:\"22/03/1998\", lucky_no:9},\n {id:11, name:\"Martin Barryman\", progress:20, gender:\"male\", rating:5, col:\"violet\", dob:\"04/04/2001\"},\n {id:12, name:\"Jenny Green\", progress:56, gender:\"female\", rating:4, col:\"indigo\", dob:\"12/11/1998\", car:true},\n {id:13, name:\"Alan Francis\", progress:90, gender:\"male\", rating:3, col:\"blue\", dob:\"07/08/1972\", car:true},\n {id:14, name:\"John Phillips\", progress:80, gender:\"male\", rating:1, col:\"green\", dob:\"24/09/1950\", car:true},\n {id:15, name:\"Ed White\", progress:70, gender:\"male\", rating:0, col:\"yellow\", dob:\"19/06/1976\"},\n {id:16, name:\"Paul Branderson\", progress:60, gender:\"male\", rating:5, col:\"orange\", dob:\"01/01/1982\"},\n {id:17, name:\"Gemma Jane\", progress:50, gender:\"female\", rating:2, col:\"red\", dob:\"14/04/1983\", car:true},\n {id:18, name:\"Emma Netwon\", progress:40, gender:\"female\", rating:4, col:\"brown\", dob:\"07/10/1963\", car:true},\n {id:19, name:\"Hannah Farnsworth\", progress:30, gender:\"female\", rating:1, col:\"pink\", dob:\"11/02/1991\"},\n {id:20, name:\"Victoria Bath\", progress:20, gender:\"female\", rating:2, col:\"purple\", dob:\"22/03/1986\"},\n ];\n\n //custom max min header filter\nvar minMaxFilterEditor = function(cell, onRendered, success, cancel, editorParams){\n \n var end;\n \n var container = document.createElement(\"span\");\n \n //create and style inputs\n var start = document.createElement(\"input\");\n start.setAttribute(\"type\", \"number\");\n start.setAttribute(\"placeholder\", \"Min\");\n start.setAttribute(\"min\", 0);\n start.setAttribute(\"max\", 100);\n start.style.padding = \"4px\";\n start.style.width = \"50%\";\n start.style.boxSizing = \"border-box\";\n \n start.value = cell.getValue();\n \n function buildValues(){\n success({\n start:start.value,\n end:end.value,\n });\n };\n\n function keypress(e){\n if(e.keyCode == 13){\n buildValues();\n }\n \n if(e.keyCode == 27){\n cancel();\n }\n };\n \n end = start.cloneNode();\n end.setAttribute(\"placeholder\", \"Max\");\n \n start.addEventListener(\"change\", buildValues);\n start.addEventListener(\"blur\", buildValues);\n start.addEventListener(\"keydown\", keypress);\n \n end.addEventListener(\"change\", buildValues);\n end.addEventListener(\"blur\", buildValues);\n end.addEventListener(\"keydown\", keypress);\n \n \n container.appendChild(start);\n container.appendChild(end);\n \n return container;\n}\n \n //custom max min filter function\nfunction minMaxFilterFunction(headerValue, rowValue, rowData, filterParams){\n //headerValue - the value of the header filter element\n //rowValue - the value of the column in this row\n //rowData - the data for the row being filtered\n //filterParams - params object passed to the headerFilterFuncParams property\n \nif(rowValue){\n if(headerValue.start != \"\"){\n if(headerValue.end != \"\"){\n return rowValue >= headerValue.start && rowValue <= headerValue.end; }else{ return rowValue>= headerValue.start;\n }\n }\n else{\n if(headerValue.end != \"\"){\n return rowValue <= headerValue.end;}\n }\n }\n return true; //must return a boolean, true if it passes the filter. \n} \nvar table=new Tabulator(\"#example-table\", {\n height:\"311px\",\n layout:\"fitColumns\",\n data:tabledatabig,\n columns:[\n {title:\"Name\", field:\"name\", width:150, headerFilter:\"input\"},\n {title:\"Progress\", field:\"progress\", width:150, formatter:\"progress\", sorter:\"number\", headerFilter:minMaxFilterEditor, headerFilterFunc:minMaxFilterFunction, headerFilterLiveFilter:false},\n {title:\"Gender\", field:\"gender\", editor:\"list\", editorParams:{values:{\"male\":\"Male\", \"female\":\"Female\", clearable:true}}, headerFilter:true, headerFilterParams:{values:{\"male\":\"Male\", \"female\" :\"Female\", \"\" :\"\"}, clearable:true}},\n {title:\"Rating\", field:\"rating\", editor:\"star\", hozAlign:\"center\", width:100, headerFilter:\"number\", headerFilterPlaceholder:\"at least...\", headerFilterFunc:\">=\"},\n {title:\"Favourite Color\", field:\"col\", editor:\"input\", headerFilter:\"list\", headerFilterParams:{valuesLookup:true, clearable:true}},\n {title:\"Date Of Birth\", field:\"dob\", hozAlign:\"center\", sorter:\"date\", headerFilter:\"input\"},\n {title:\"Driver\", field:\"car\", hozAlign:\"center\", formatter:\"tickCross\", headerFilter:\"tickCross\", headerFilterParams:{\"tristate\":true},headerFilterEmptyCheck:function(value){return value === null}},\n ],\n});\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":80,"y":80,"wires":[[]]},{"id":"e20c5b3c6a494e25","type":"ui_group","name":"Test","tab":"311b79f0d87bc5d7","order":9,"disp":true,"width":"30","collapse":false,"className":""},{"id":"311b79f0d87bc5d7","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
Looks like this:
And produces this.
You can literally copy and paste the data from the Tabulator examples directly into the ui-template node and have it work. I changed only three things to make this table happen.
- Not really a necessary change, but I changed the header section from tabulator.min.css to tabulator_site.min.css to mimic the theme of the Tabulator site. Instructions on themes are on the site as well.
- While not visible in the source code for the table, the table data was pulled from the developers console while on the Tabulator page and pasted into the second ut-template. Hitting F12 pulls up the developers console and browsing through the elements will land you the variables used for the table data.
- The source code does not specify what data to use. I entered data:bigtabledata as one of the table setup options seen near the bottom of the source code in my flow.
The longest time I spent putting this together was trying to find a brace } that was hidden in a comment block due to how Node-Red pasted the code and not because of the code itself. The rest took less than five minutes total. Ui-table (library wrapper) was built to use Tabulator (source library) in Node-Red (IDE), not the other way around. Using Tabulator itself instead of the wrapper opens you up to the full functionality of Tabulator that the wrapper (ui-table) doesn't allow. And no, it's all Javascript based and not HTML based, though the Tabulator functionality is Javascript run inside HTML.
Hopefully that helps.
