That's a fair statement. But I believe that when you see how easy Tabulator is to work with once you have it started, you'll swap everything over. There is one caveat though. Ui-table forces the old version of Tabulator on your page, so you can't utilize the new version either without some fancy HTTP trickery or by taking everything to straight Tabulator. Which is really easy.
You need at least these two nodes to start with.
[{"id":"3e5b8cea59cf2699","type":"ui_template","z":"1408108b8b13c0b7","group":"d386fb82fa5ef195","name":"Header","order":6,"width":0,"height":0,"format":"<link href=\"https://unpkg.com/tabulator-tables/dist/css/tabulator_midnight.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":100,"y":40,"wires":[[]]},{"id":"2c5713572a463bf1","type":"ui_template","z":"1408108b8b13c0b7","group":"d386fb82fa5ef195","name":"Tabulator","order":7,"width":0,"height":0,"format":"<div id=\"example-table\"></div>\n<script>\n //Copy/paste Tabulator examples directly from the web page here.\n //You will need example data to use them directly.\n //Otherwise copy the examples and alter to your needs.\n //Most of the following is directly from the quickstart page.\n \n var tabledata = [\n \t{id:1, name:\"Oli Bob\", age:\"12\", col:\"red\", dob:\"\"},\n \t{id:2, name:\"Mary May\", age:\"1\", col:\"blue\", dob:\"14/05/1982\"},\n \t{id:3, name:\"Christine Lobowski\", age:\"42\", col:\"green\", dob:\"22/05/1982\"},\n \t{id:4, name:\"Brendon Philips\", age:\"125\", col:\"orange\", dob:\"01/08/1980\"},\n \t{id:5, name:\"Margret Marmajuke\", age:\"16\", col:\"yellow\", dob:\"31/01/1999\"},\n ];\n \n var table = new Tabulator(\"#example-table\", {\n \theight:205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)\n \tdata:tabledata, //assign data to table\n \tlayout:\"fitColumns\", //fit columns to width of table (optional)\n \tcolumns:[ //Define Table Columns\n \t \t{title:\"Name\", field:\"name\", width:150},\n \t \t{title:\"Age\", field:\"age\", hozAlign:\"left\", formatter:\"progress\"},\n \t \t{title:\"Favourite Color\", field:\"col\"},\n \t \t{title:\"Date Of Birth\", field:\"dob\", sorter:\"date\", hozAlign:\"center\"},\n \t],\n });\n \n table.on(\"rowClick\", function(e, row){ \n \talert(\"Row \" + row.getData().id + \" Clicked!!!!\");\n });\n \n //This is needed to interact with Node-Red when a message is sent to the ui-template.\n (function(scope){\n scope.$watch('msg', function(msg){\n if(msg){\n //do something here when a message arrives like table.setData();\n }\n });\n })(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":100,"y":80,"wires":[[]]},{"id":"d386fb82fa5ef195","type":"ui_group","name":"Tabulator Example","tab":"d0ef1a9bfa867de7","order":3,"disp":true,"width":"16","collapse":true,"className":""},{"id":"d0ef1a9bfa867de7","type":"ui_tab","name":"Tabulator","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
What this will do is create a table that simply displays data with some miniscule amount of interaction. Simply change what needs to be changed based on the information on Tabulator's website and you're good to go. There's a snippet at the end of the Tabulator node that you'll need to react to messages sent to the template node. Since the Template node is running on the client system and not the server, there's no way of directly interacting with it like the other Node-Red nodes. But putting that snippet into the node will allow it to catch the messages and react. This is a good place to put things like functions for refreshing data and such.
Uggghhh... Once I figured out AJAX handling, I quit passing whole tables. Simply putting everything in a file and letting it do its own thing was magical. The easiest solution I found so far (I realize there are others that could be better) was to use HTTP in and out nodes. Call an HTTP in node in GET mode from Tabulator (i.e. the ajaxURL option), hook that in node to a file reader, hook that to a JSON parser and finish off the string with an HTTP out node to return the result. Now everytime you call table.setData(), it will pull the updated contents of the file. To update the file, use fetch() to POST the data to an HTTP in node configured in POST (will need to be a different address than your GET node), run it to a file write node and send the output to an HTTP out node. Instant read/write capabilities. And if you want to refresh your table whenever data is saved, just run the output of the file write node to the input of the ui-template node with the table and react to the message. Easy.
Obviously you won't care about things you won't use much. You don't need to update a Tabulator table with new dropdowns since you can write functions within the column description that will change the contents of the dropdown for you based on some other data in the table or variable in the program.
Anyways, that's a quickstart to using Tabulator in Node-Red. Let me know if you have any issues besides it not working correctly due to a ui-table node still being used. I'm going to expect that one as long as one exists. I got rid of all of mine and went straight Tabulator only. But that's me. You'll do what works the best for you. I wish you well with your newfound knowledge.
