# Simple ui\_table to sort "desc" on load

**URL:** <https://discourse.nodered.org/t/simple-ui-table-to-sort-desc-on-load/87281>\
**Category:** Dashboard\
**Created:** [16 April 2024 17:28 UTC](https://discourse.nodered.org/t/simple-ui-table-to-sort-desc-on-load/87281 "2024-04-16T17:28:47Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![gNeandr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gneandr/32/73947_2.png) [@gNeandr](https://discourse.nodered.org/u/gNeandr)\
**Post date:** [16 April 2024 17:28 UTC](https://discourse.nodered.org/t/simple-ui-table-to-sort-desc-on-load/87281/1 "2024-04-16T17:28:47Z")

</div>

It should actually be easy, but I don't have the right view!  
A block of strings with ("date", "value1", "value2") has to be sorted and displayed in a table (ui\_table). Sorting should take place at load in descending order according to "date".  
A flow without sort setting always displays the "date" column as ascending.  
 ![sortedtable](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/5/95dc1068661f60b34a956c39e41a3b6468476ea0.png)

All my attempts with ui\_control/tabulator fail. Surely it should be "simple"? But how ... please help

I tried it with this:

```auto
msg.ui_control = {
    "tabulator": {
        column: "date", dir: "desc" }
    }

```

... but failed.

The 'Tabulator' has something like this function:

```auto
   table.setSort("age", "asc");

```

I also don't know how to use it with ui\_table/ui\_control

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [16 April 2024 18:01 UTC](https://discourse.nodered.org/t/simple-ui-table-to-sort-desc-on-load/87281/2 "2024-04-16T18:01:47Z")

</div>

If you are using node-red-node-ui-table  
this example shows how to use commands.

```auto
[{"id":"36be75f0.115c6a","type":"ui_button","z":"51e5d3061e86059f","name":"","group":"c91332c0.50c11","order":1,"width":0,"height":0,"passthru":false,"label":"Init 20 rows","tooltip":"init table by passing the hole table array (default way)","color":"","bgcolor":"","className":"","icon":"","payload":"20","payloadType":"num","topic":"","topicType":"str","x":264,"y":894,"wires":[["d4dce9b4.1f2588"]]},{"id":"d4dce9b4.1f2588","type":"function","z":"51e5d3061e86059f","name":"table with n rows as array","func":"var numberOfRows = msg.payload;\nflow.set(\"lastId\",numberOfRows);\nmsg.payload=[];\nfor (let i=1; i<=numberOfRows; i++) {\n msg.payload.push({\"id\":i,\"timestamp\":Date.now(),\"text\":\"this is line\"+i})\n}\nreturn msg;","outputs":1,"timeout":"","noerr":0,"initialize":"","finalize":"","libs":[],"x":525,"y":894,"wires":[["f9bfd98.abe1a28","69241bdcfcf2980c"]]},{"id":"12606591.7a3dca","type":"inject","z":"51e5d3061e86059f","name":"Init 20 rows","repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"20","payloadType":"num","x":264,"y":928,"wires":[["d4dce9b4.1f2588"]]},{"id":"f9bfd98.abe1a28","type":"debug","z":"51e5d3061e86059f","name":"addRow","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":580,"y":840,"wires":[]},{"id":"69241bdcfcf2980c","type":"ui_table","z":"51e5d3061e86059f","group":"c91332c0.50c11","name":"","order":2,"width":0,"height":0,"columns":[],"outputs":0,"cts":false,"x":570,"y":1000,"wires":[]},{"id":"eb577b4b.510388","type":"function","z":"51e5d3061e86059f","name":"addRow @ top","func":"msg.payload={\n command:msg.topic,\n arguments: [\n msg.payload\n]\n}\nreturn msg;","outputs":1,"timeout":"","noerr":0,"initialize":"","finalize":"","libs":[],"x":495,"y":1064,"wires":[["b54f6ce8.3b1a4","69241bdcfcf2980c"]],"info":"# addRow([row],onTop)\n\n`onTop=true`\n\nadds a new Row on top of the table"},{"id":"b496aa6a.32f2d8","type":"ui_button","z":"51e5d3061e86059f","name":"sort","group":"c91332c0.50c11","order":2,"width":0,"height":0,"passthru":false,"label":"sort","tooltip":"add a new row to the top","color":"","bgcolor":"","className":"","icon":"","payload":"[{\"column\":\"timestamp\",\"dir\":\"asc\"},{\"column\":\"text\",\"dir\":\"desc\"}]","payloadType":"json","topic":"setSort","topicType":"str","x":244,"y":1064,"wires":[["eb577b4b.510388"]]},{"id":"b54f6ce8.3b1a4","type":"debug","z":"51e5d3061e86059f","name":"addRow","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":520,"y":1120,"wires":[]},{"id":"c91332c0.50c11","type":"ui_group","name":"commands","tab":"379a501f.53b59","order":2,"disp":true,"width":"6","collapse":false},{"id":"379a501f.53b59","type":"ui_tab","name":"ui-table command","icon":"fa-table","disabled":false,"hidden":false}]

```

or you can can use initial sort with the ui\_control.tabulatore property

> **[Tabulator - Sorting Data](https://www.tabulator.info/docs/4.5/sort#initial)**
>
> Allow users to order table data with a range of built in and custom sorter functions

Or  
you can set a sort parameter to the column settings

> **[Tabulator - Sorting Data](https://www.tabulator.info/docs/4.5/sort#overview)**
>
> Allow users to order table data with a range of built in and custom sorter functions

p.s. the tabulator in ui-table is 4.4 documentation.

---

<div class="post-metadata">

**Author:** ![gNeandr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gneandr/32/73947_2.png) [@gNeandr](https://discourse.nodered.org/u/gNeandr)\
**Post date:** [16 April 2024 18:17 UTC](https://discourse.nodered.org/t/simple-ui-table-to-sort-desc-on-load/87281/3 "2024-04-16T18:17:09Z")

</div>

Looks like I got a good guide with this. 🤩  
Unfortunately my search was not so successful!  
Thanks! 👋

---

<div class="post-metadata">

**Author:** ![gNeandr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gneandr/32/73947_2.png) [@gNeandr](https://discourse.nodered.org/u/gNeandr)\
**Post date:** [16 April 2024 21:54 UTC](https://discourse.nodered.org/t/simple-ui-table-to-sort-desc-on-load/87281/4 "2024-04-16T21:54:07Z")

</div>

Just had the opportunity to successfully test a "function" adapted to my situation on the basis of your example. My function equivalent to "table with n rows as array" and "addRow @ top" is this one:  
 ![sortingtable](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/b/bb08eabcea941670a542f4e184e8fee79b22712a.png)

```auto
msg.payload = tabledata;
node.send(msg);

msg.payload = {
    command: "setSort",
    arguments: [
        [{ "column": "date", "dir": "desc" }]
    ]
}
return (msg);

```

I first send the data with the function using `node.send(msg)` and then the control for sorting the "date" column with the `send(msg);`  
Maybe it works in one approach, but this way it is clear and simple for me

Thanks again for the help.

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [17 April 2024 06:05 UTC](https://discourse.nodered.org/t/simple-ui-table-to-sort-desc-on-load/87281/5 "2024-04-17T06:05:25Z")

</div>

> [@gNeandr](#):
>
> Maybe it works in one approach, but this way it is clear and simple for me

It is exactly the same approach, my example was set out so you could see it work in the dashboard. As you offered no flow example with data to adapt i created data to use in a demonstration.

---

<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 May 2024 06:05 UTC](https://discourse.nodered.org/t/simple-ui-table-to-sort-desc-on-load/87281/6 "2024-05-01T06:05:58Z")

</div>

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