Ui_table filter by date

Dashboard
1

Hello,

I am having troubles with filtering date in ui_table:
I am showing date as DD.MM.YY HH:mm:ss. The problem is that when I filter by date, the dates with the lowest day number comes first ( 02.05.2021 will come before 05.01.2021).

How can I solve this problem?

2

Hi, by filter you mean sorting right? If so perhaps this could help:

3

Thank you for your answer.
I have seen this post yet I do not understand how to implement this code into my dashboard (ui_table).
Do you use Template node for this?

4

I think if I could get an output from the node ui_table by clicking on header (sorting) of the table I could easily solve all of my problems.

Is it possible to edit the code that way?

5

Sorry that it took a moment as I was AFK for a while :wink:

as the ui-table note itself don't support datetime formatter in the config ui you have to define it by yourself by injecting a message containing a msg.ui_control parameter. you can play around with the input and output format to fit your needs. The sorter can be also configured (see original post). For further reference take a look here and here for sorting

I don't think it is easy to trigger a message when the sort arrows are clicked. It could be possible by a custom sorter callback function but I think the build in functions are quite comprehensive and fast as they do sorting on the frontend data and not on the backend (what you perhaps plan to do)

{
    "payload": null,
    "ui_control": {
        "tabulator": {
            "columns": [
                {
                    "title": "Time",
                    "field": "timestamp",
                    "width": 100,
                    "formatter": "datetime",
                    "formatterParams": {
                        "inputFormat": "YYYY-MM-DD HH:mm:ss.SSS",
                        "outputFormat": "HH:mm:ss",
                        "invalidPlaceholder": "(invalid time)"
                    }
                }
            ]
        }
    }
}

for experimenting how to use the ui_control mechanics you can use the example flow 6 ui_control interactive.

6

Thank you @Christian-Me,

Because I have a very small screen I am only showing 6 inserts at a time. I then move to next 6 with clicking on the button (right for forward and left for back). This is causing me problems because the table only sorts the 6 that I am showing.

Is it possible to completely disable sorting for one of the columns?

7

Yes add ā€œheadersortā€œ:false to your column definition via a ui_control message as the config ui does not support this option.

I donā€˜t get your complete problem showing only 6 values. You can use scrolling or pagination if you like. (Perhaps you have to set the widget size from auto to the size you like first)
A screenshot could help to understand your issues.

8

Because of visual preference I would not like to use scrollbar (It is also kind of clumsy on my small touchscreen). I would like my table to look something like this:
image

By pressing the right arrow the table will display the next 6 inserts. Visually I like this but it messes up the sorting.

9

Have you tried the pagination feature of tabulator?

An inject Node sending this JSON message msg.ui_control should enable pagination.

{
  "tabulator": {
    "pagination":"local",
    "paginationSize":6
  }
}

But you can also switch off the build in controls and place your own buttons to the dashboard and control the pagination by sending the command setPage with:

  • "first" - show the first page
  • "prev" - show the previous page
  • "next" - show the next page
  • "last" - show the last page
{"payload":{
    "command":"setPage",
    "arguments":[
        "next"
    ],
    "returnPromise":false
    }
}

Perhaps this solves your problem (Note: all code is not tested - I don't know how tabulator handles sorting and pagination)

2 Likes
10

This solved my problems.
Thank you @Christian-Me for your help!

1 Like
11

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