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

rakgupta · 15 July 2025 17:21

@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 · 15 July 2025 21:35

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 · 15 July 2025 22:22

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

omrid · 16 July 2025 22:22

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 · 16 July 2025 23:00

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

rakgupta · 17 July 2025 01:29

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 · 17 July 2025 08:42

Yes, please wait for the next release.

rakgupta · 18 July 2025 00:16

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 · 18 July 2025 09:39

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 · 18 July 2025 11:21

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

Thanks - I had done that after I upgraded.

system · 1 August 2025 11:21

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Ui-table (Dashboard 1) vs ui-tabulator (Dashboard 2) vs ui-table (Dashboard 2) Dashboard	12	187	11 July 2025
Node-ui-table: Inconsistent load behavior, leading to changing no. of columns on refresh General	27	668	27 November 2023
UI-Tabulator node Date time picker Dashboard	4	59	13 February 2025
[Solved] How to change timestamps in objects to date/time for ui_table FAQs	12	2727	28 June 2020
DB2 ui-tabulator: Is there an equivalent to msg.ui_control to define tables? Dashboard dashboard-2	3	28	6 August 2025

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

Related topics