# Ui\_table filter by date

**URL:** <https://discourse.nodered.org/t/ui-table-filter-by-date/45482>\
**Category:** Dashboard\
**Created:** [11 May 2021 10:01 UTC](https://discourse.nodered.org/t/ui-table-filter-by-date/45482 "2021-05-11T10:01:54Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![mc3153](https://avatars.discourse-cdn.com/v4/letter/m/4491bb/32.png) [@mc3153](https://discourse.nodered.org/u/mc3153)\
**Post date:** [11 May 2021 10:01 UTC](https://discourse.nodered.org/t/ui-table-filter-by-date/45482/1 "2021-05-11T10:01:54Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [12 May 2021 06:57 UTC](https://discourse.nodered.org/t/ui-table-filter-by-date/45482/2 "2021-05-12T06:57:01Z")

</div>

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

> [@Ui-table date sort](https://discourse.nodered.org/t/ui-table-date-sort/21685):
>
> Anyone know of a neat trick to get a ui-table to do sorting by date, rather than standard numeric sort? Thanks

---

<div class="post-metadata">

**Author:** ![mc3153](https://avatars.discourse-cdn.com/v4/letter/m/4491bb/32.png) [@mc3153](https://discourse.nodered.org/u/mc3153)\
**Post date:** [12 May 2021 07:45 UTC](https://discourse.nodered.org/t/ui-table-filter-by-date/45482/3 "2021-05-12T07:45:24Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![mc3153](https://avatars.discourse-cdn.com/v4/letter/m/4491bb/32.png) [@mc3153](https://discourse.nodered.org/u/mc3153)\
**Post date:** [12 May 2021 11:03 UTC](https://discourse.nodered.org/t/ui-table-filter-by-date/45482/4 "2021-05-12T11:03:50Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [13 May 2021 11:06 UTC](https://discourse.nodered.org/t/ui-table-filter-by-date/45482/5 "2021-05-13T11:06:06Z")

</div>

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

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](http://tabulator.info/docs/4.7/format#format-builtin) and [here for sorting](http://tabulator.info/docs/4.7/sort)

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)

```auto
{
    "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`.

---

<div class="post-metadata">

**Author:** ![mc3153](https://avatars.discourse-cdn.com/v4/letter/m/4491bb/32.png) [@mc3153](https://discourse.nodered.org/u/mc3153)\
**Post date:** [14 May 2021 10:10 UTC](https://discourse.nodered.org/t/ui-table-filter-by-date/45482/6 "2021-05-14T10:10:06Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [14 May 2021 12:40 UTC](https://discourse.nodered.org/t/ui-table-filter-by-date/45482/7 "2021-05-14T12:40:19Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![mc3153](https://avatars.discourse-cdn.com/v4/letter/m/4491bb/32.png) [@mc3153](https://discourse.nodered.org/u/mc3153)\
**Post date:** [17 May 2021 06:08 UTC](https://discourse.nodered.org/t/ui-table-filter-by-date/45482/8 "2021-05-17T06:08:08Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/c/1cf0a41cdd0f9c551303982067881161815354e5.png)

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

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [17 May 2021 10:37 UTC](https://discourse.nodered.org/t/ui-table-filter-by-date/45482/9 "2021-05-17T10:37:36Z")

</div>

Have you tried the pagination feature of tabulator?

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

```auto
{
  "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

```auto
{"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)

---

<div class="post-metadata">

**Author:** ![mc3153](https://avatars.discourse-cdn.com/v4/letter/m/4491bb/32.png) [@mc3153](https://discourse.nodered.org/u/mc3153)\
**Post date:** [17 May 2021 10:57 UTC](https://discourse.nodered.org/t/ui-table-filter-by-date/45482/10 "2021-05-17T10:57:14Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [31 May 2021 10:57 UTC](https://discourse.nodered.org/t/ui-table-filter-by-date/45482/11 "2021-05-31T10:57:22Z")

</div>

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