Ui-tabulator: Date/Time format working on only 1 table

[rakgupta]

@omrid - I have a multi-page dashboard, with tables on different pages. I migrated one page successfully (from DB1 ui-table) and added the Luxon.js to a template node as you had suggested (Widget - UI scoped). The first page works as expected with the date/time formats showing correctly. However, on any othe page, it shows "Invalid date/time" as I have specified in the ui-tablulator configuration.

I have tried changing the scope of the ui-template node to page and group (specifying the page or group of the 2nd table) but the date is still not showing correctly.

Page 1 (Working):

Page 2 (Not Working):

Below is the flow with sample data. Can you take a look? Not sure if I have missed something (quite likely) or there is an issue with ui-tablulator. Thanks for your help

[{"id":"18442917cc620751","type":"ui-button","z":"0316cd25d00c5e0d","group":"add4028b768d1c47","name":"Send setData","label":"Send addData","order":1,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"date","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":201.65072631835938,"y":809.6378784179688,"wires":[["f165121bf5394df1"]]},{"id":"585d467afd532348","type":"inject","z":"0316cd25d00c5e0d","name":"","props":[{"p":"tbArgs","v":"[[{\"Date\":\"2025-07-15 11:28:39\",\"Time\":\"2025-07-15 11:28:39\",\"Type\":\"dev\",\"Device\":\"Cabinet - Pantry\",\"Detail\":\"Cabinet - Pantry is off [physical]\",\"Level\":\"info\"},{\"Date\":\"2025-07-15 11:28:29\",\"Time\":\"2025-07-15 11:28:29\",\"Type\":\"dev\",\"Device\":\"Garage Motion Sensor\",\"Detail\":\"Garage Motion Sensor is 64%RH\",\"Level\":\"info\"},{\"Date\":\"2025-07-15 11:27:44\",\"Time\":\"2025-07-15 11:27:44\",\"Type\":\"dev\",\"Device\":\"Entryway Lux Sensor\",\"Detail\":\"Entryway Lux Sensor presense check in 1 hours\",\"Level\":\"info\"},{\"Date\":\"2025-07-15 11:27:44\",\"Time\":\"2025-07-15 11:27:44\",\"Type\":\"dev\",\"Device\":\"Entryway Lux Sensor\",\"Detail\":\"Entryway Lux Sensor illuminance changed to 37\",\"Level\":\"info\"},{\"Date\":\"2025-07-15 11:27:40\",\"Time\":\"2025-07-15 11:27:40\",\"Type\":\"dev\",\"Device\":\"Cabinet - Dishwasher\",\"Detail\":\"Cabinet - Dishwasher is off [physical]\",\"Level\":\"info\"},{\"Date\":\"2025-07-15 11:27:36\",\"Time\":\"2025-07-15 11:27:36\",\"Type\":\"dev\",\"Device\":\"Cabinet - Fridge\",\"Detail\":\"Cabinet - Fridge is off [physical]\",\"Level\":\"info\"}]]","vt":"json"},{"p":"tbCmd","v":"setData","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":366.8345642089844,"y":714.8272094726562,"wires":[["9802b787b2553bda"]]},{"id":"9802b787b2553bda","type":"ui-tabulator","z":"0316cd25d00c5e0d","name":"Logs Table","group":"add4028b768d1c47","initObj":"{\n\t\"height\": \"600px\",\n\t\"columns\": [\n\t\t{\n\t\t\t\"title\": \"Row\",\n\t\t\t\"field\": \"row_id\",\n\t\t\t\"formatter\": \"rownum\",\n\t\t\t\"width\": \"10%\"\n\t\t},\n\t\t{\n\t\t\t\"formatter\": \"datetime\",\n\t\t\t\"formatterParams\": {\n\t\t\t\t\"inputFormat\": \"YYYY-MM-DD HH:mm:ss\",\n\t\t\t\t\"outputFormat\": \"YYYY-MM-DD\",\n\t\t\t\t\"invalidPlaceholder\": \"(invalid date)\"\n\t\t\t},\n\t\t\t\"title\": \"Date\",\n\t\t\t\"field\": \"Date\",\n\t\t\t\"width\": \"10%\"\n\t\t},\n\t\t{\n\t\t\t\"formatter\": \"datetime\",\n\t\t\t\"formatterParams\": {\n\t\t\t\t\"inputFormat\": \"YYYY-MM-DD HH:mm:ss\",\n\t\t\t\t\"outputFormat\": \"hh:mm:ss A\",\n\t\t\t\t\"invalidPlaceholder\": \"(invalid time)\"\n\t\t\t},\n\t\t\t\"title\": \"Time\",\n\t\t\t\"field\": \"Time\",\n\t\t\t\"width\": \"10%\"\n\t\t},\n\t\t{\n\t\t\t\"title\": \"Level\",\n\t\t\t\"field\": \"Level\",\n\t\t\t\"width\": \"10%\"\n\t\t},\n\t\t{\n\t\t\t\"title\": \"Device\",\n\t\t\t\"field\": \"Device\",\n\t\t\t\"width\": \"20%\"\n\t\t},\n\t\t{\n\t\t\t\"title\": \"Detail\",\n\t\t\t\"field\": \"Detail\",\n\t\t\t\"width\": \"30%\"\n\t\t},\n\t\t{\n\t\t\t\"title\": \"Type\",\n\t\t\t\"field\": \"Type\",\n\t\t\t\"width\": \"10%\"\n\t\t}\n\t]\n}","funcs":"","allowMsgFuncs":false,"maxWidth":"","events":"","order":3,"multiUser":false,"validateRowIds":false,"themeCSS":"","themeFile":"@CSS:tabulator_midnight.min.css","tblDivId":"","printToLog":false,"width":"26","height":12,"x":593.8346252441406,"y":713.8272094726562,"wires":[[]]},{"id":"f165121bf5394df1","type":"change","z":"0316cd25d00c5e0d","name":"Set Data","rules":[{"t":"set","p":"tbCmd","pt":"msg","to":"setData","tot":"str"},{"t":"set","p":"tbArgs","pt":"msg","to":"[\t   [\t       {\t           \"Date\":\"2025-07-15 11:28:39\",\t           \"Time\":\"2025-07-15 11:28:39\",\t           \"Type\":\"dev\",\t           \"Device\":\"Cabinet - Pantry\",\t           \"Detail\":\"Cabinet - Pantry is off [physical]\",\t           \"Level\":\"info\"\t       },\t       {\t           \"Date\":\"2025-07-15 11:28:29\",\t           \"Time\":\"2025-07-15 11:28:29\",\t           \"Type\":\"dev\",\t           \"Device\":\"Garage Motion Sensor\",\t           \"Detail\":\"Garage Motion Sensor is 64%RH\",\t           \"Level\":\"info\"\t       },\t       {\t           \"Date\":\"2025-07-15 11:27:44\",\t           \"Time\":\"2025-07-15 11:27:44\",\t           \"Type\":\"dev\",\t           \"Device\":\"Entryway Lux Sensor\",\t           \"Detail\":\"Entryway Lux Sensor presense check in 1 hours\",\t           \"Level\":\"info\"\t       },\t       {\t           \"Date\":\"2025-07-15 11:27:44\",\t           \"Time\":\"2025-07-15 11:27:44\",\t           \"Type\":\"dev\",\t           \"Device\":\"Entryway Lux Sensor\",\t           \"Detail\":\"Entryway Lux Sensor illuminance changed to 37\",\t           \"Level\":\"info\"\t       },\t       {\t           \"Date\":\"2025-07-15 11:27:40\",\t           \"Time\":\"2025-07-15 11:27:40\",\t           \"Type\":\"dev\",\t           \"Device\":\"Cabinet - Dishwasher\",\t           \"Detail\":\"Cabinet - Dishwasher is off [physical]\",\t           \"Level\":\"info\"\t       },\t       {\t           \"Date\":\"2025-07-15 11:27:36\",\t           \"Time\":\"2025-07-15 11:27:36\",\t           \"Type\":\"dev\",\t           \"Device\":\"Cabinet - Fridge\",\t           \"Detail\":\"Cabinet - Fridge is off [physical]\",\t           \"Level\":\"info\"\t       }\t   ]\t]","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":403.8345642089844,"y":809.8272094726562,"wires":[["9802b787b2553bda"]]},{"id":"8c131cb06c7d8ba9","type":"ui-template","z":"0316cd25d00c5e0d","group":"add4028b768d1c47","page":"","ui":"","name":"Widget - Luxon Library","order":3,"width":0,"height":0,"head":"","format":"<script type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/npm/luxon@2.3.1/build/global/luxon.min.js\"></script>\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":469.8345947265625,"y":635.8272094726562,"wires":[[]]},{"id":"add4028b768d1c47","type":"ui-group","name":"Test Group","page":"5edb5b5cd718fa05","width":"26","height":"12","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"5edb5b5cd718fa05","type":"ui-page","name":"Test ui-tabulator","ui":"de5759a313e7ad79","path":"/page5","icon":"home","layout":"grid","theme":"e4b50d7892c4eb32","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":10,"className":"","visible":true,"disabled":false},{"id":"de5759a313e7ad79","type":"ui-base","name":"Node-RED Dashboard","path":"/dashboard","appIcon":"","includeClientData":false,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"headerContent":"dashboard","navigationStyle":"fixed","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":5,"showDisconnectNotification":true,"allowInstall":true},{"id":"e4b50d7892c4eb32","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px","density":"default"}}]

[omrid]

You say you have tables on multiple pages.
How is the template which imports the luxon scoped?
To serve all pages it needs to be scoped to the whole dashboard (scope=UI), or have a copy of it on every page.

In any case I'll fix this in the next version.

[rakgupta]

@omrid

To serve all pages it needs to be scoped to the whole dashboard (scope=UI), or have a copy of it on every page.

I had it scoped as UI, I also tried it with page and group but it made no difference.

[omrid]

The fact that you are getting "invalid date/time" makes me suspect that luxon has been loaded successfully, but the data you are feeding is not valid or not matching the inputFormat you specified.
If luxon had not been loaded, Tabulator would have thrown an internal exception, and the table fields would remain empty.
Just to be sure, please load the page with the browser console open, see if it throws an exception upon page refresh (you can compare it to refreshing the page with an invalid luxon URL in your template).

I incorporated luxon in ui-tabulator (to be released in a few days).
.

[rakgupta]

@omrid

but the data you are feeding is not valid or not matching the inputFormat you specified.

Thanks - that was one of the first things I checked but will reconfirm.

[rakgupta]

@omrid

Just to be sure, please load the page with the browser console open, see if it throws an exception upon page refresh (you can compare it to refreshing the page with an invalid luxon URL in your template).

Well... this is strange. I opened the browser console on the first page (where the date/time is formatted correctly) and I am seeing a ton of errors.

ui-template config:

Should I wait for the next release of ui-tabulator?

Thanks for your help

[omrid]

Yes, please wait for the next release.

[rakgupta]

Just upgraded to 0.8.1. I am not seeing the errors any longer but the 2nd page still has "invalid date". The same data works fine in DB1 and ui-table, so I'm going to do a little more digging (maybe some config got changed when I copied it in).

DB1 Dashboard (with ui-table):

DB2 Dashboard (with ui-tabulator)

Thanks for the quick turnaround on the fix.

[omrid]

Your input & output format strings have incorrect capitalization.
It should be:

			"formatterParams": {
				"inputFormat": "yyyy-MM-dd HH:mm:ss",
				"outputFormat": "yyyy-MM-dd",
				"invalidPlaceholder": "(invalid date)"
			},

You can also remove the luxon loader, as it is now implicitly loaded within the node

[rakgupta]

@omrid

Your input & output format strings have incorrect capitalization.

That was it! Thanks so much for catching that. The strange thing is that it was exactly the same way in DB1 (ui-table) and it worked, so I never thought to check that

@omrid

You can also remove the luxon loader, as it is now implicitly loaded within the node

Thanks - I had done that after I upgraded.