# UI-Table sort on load

**URL:** <https://discourse.nodered.org/t/ui-table-sort-on-load/25665>\
**Category:** Dashboard\
**Created:** [28 April 2020 07:54 UTC](https://discourse.nodered.org/t/ui-table-sort-on-load/25665 "2020-04-28T07:54:15Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![bdbell](https://avatars.discourse-cdn.com/v4/letter/b/34f0e0/32.png) [@bdbell](https://discourse.nodered.org/u/bdbell)\
**Post date:** [28 April 2020 07:54 UTC](https://discourse.nodered.org/t/ui-table-sort-on-load/25665/1 "2020-04-28T07:54:16Z")

</div>

I am using the UI-Table 'Sending Commands' example - which is a great example that does pretty much everything I need. But when it reloads the table data from context store I find that the entries are are in the opposite order than I have entered them. I have an ID column that I can click on and have them re-ordered, but I would prefer to have this done automatically when the table is loaded - can anyone give me any ideas on how to have the ID column sorted ascending order on load.

I found this - [UI-Table Date Sort](https://discourse.nodered.org/t/ui-table-date-sort/21685) - but it's not clear there how the sort code is sent to the table node to perform the sort. I have tried sending the following;

```auto
{
    "tabulator": {
        "columns": [
            {
                "title": "ID",
                "field": "id",
                "sorter": "number"
            }
        ]
    }
}

```

via a change node with msg.ui\_control changed to the code above - but when I do that all the data in the table disappears so I am still not doing it correctly.

Any help would be appreciated.

---

<div class="post-metadata">

**Author:** ![Bobo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bobo/32/8401_2.png) [@Bobo](https://discourse.nodered.org/u/Bobo)\
**Post date:** [28 April 2020 08:13 UTC](https://discourse.nodered.org/t/ui-table-sort-on-load/25665/2 "2020-04-28T08:13:04Z")

</div>

Indeed I never bothered with this feature (it was easy enough to manually click on the sort bar), hence the faq does not allow for it, but is something that would be nice.

Perhaps @Christian-Me might be able to shed some light ... 🙂

---

<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:** [28 April 2020 20:09 UTC](https://discourse.nodered.org/t/ui-table-sort-on-load/25665/3 "2020-04-28T20:09:42Z")

</div>

Hi, sure I try to help

> [@bdbell](#):
>
> I am using the UI-Table 'Sending Commands' example

Sorry to say but it is not of the best examples for practical use. It is more a demo and not good designed as it only records table entries when the table is visible on the dashboard.  
For handling all kinds of table related stuff look at the "ui-table handler" included in this example.

> [@A Syslog Server for the Dashboard](https://discourse.nodered.org/t/a-syslog-server-for-the-dashboard/24337):
>
> Hi perhaps somebody is interested. Just finished a syslog server for the node-red dashboard. It makes use of ui-table. I hope somebody finds it useful. It is build around ui-table and a subflow I use for all kinds of tables in my projects. [https://raw.githubusercontent.com/Christian-Me/node-red-contrib-home/master/Node-RED/syslog/screenshots/demo.gif(image larger than 4096KB)](https://raw.githubusercontent.com/Christian-Me/node-red-contrib-home/master/Node-RED/syslog/screenshots/demo.gif) Features can handle quite huge amounts of data only limited by the clients browser. As every line is sent individual…

Here the context storage is placed before the table so it records entries when they arrive regardless if the table is visible or not and replays everything when the tab gets visible by ui\_conrol.

> [@bdbell](#):
>
> But when it reloads the table data from context store I find that the entries are are in the opposite order than I have entered them

I don`t know how the effect happens (are you using the add on top feature?) but perhaps experiment with **Sort Order** section here ([Tabulator | JavaScript Tables & Data Grids](http://tabulator.info/docs/4.4/sort)) . Be carefull to read the docs for version 4.4! This is the version included in ui-table.

> [@bdbell](#):
>
> but when I do that all the data in the table disappears so I am still not doing it correctly.

That should not happen. Please make sure that the message including `msg.ui_control` has either no `msg.payload`or valid data (perhaps use a change or function node with `delete msg.payload`). Sending ui\_control should change the layout but not the data if no payload is send (but perhaps I have to do some tests)

---

<div class="post-metadata">

**Author:** ![bdbell](https://avatars.discourse-cdn.com/v4/letter/b/34f0e0/32.png) [@bdbell](https://discourse.nodered.org/u/bdbell)\
**Post date:** [2 May 2020 08:56 UTC](https://discourse.nodered.org/t/ui-table-sort-on-load/25665/4 "2020-05-02T08:56:44Z")

</div>

Thanks to both @Bobo & @Christian-Me for your quick replies! I did try to delete the payload from my change node, but when I did that it didn't do anything, tried putting the delete payload before and after the msg.ui\_control change but same result both ways. I also checked and I am adding each line of data to the end, not to top.

I took a look at ui\_table handler, but it's a little beyond my current node-red knowledge, for my purposes I have modified the 'Sending Commands' example and it's doing everything I need except this ordering problem.

I ended up trying to create my table in a ui\_template node and that is going well, as for my purposes it helps that the user can edit individual cells...having one issue but I will create a new topic for that....

I am still open to finding a way to fix the ordering issue with ui-table as it may come in handy for other projects.

---

<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:** [1 June 2020 08:56 UTC](https://discourse.nodered.org/t/ui-table-sort-on-load/25665/5 "2020-06-01T08:56:47Z")

</div>

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