Sorting of rows in table

[davblo]

I have a query, followed by a transformer which constructs new columns of data from the information in the result of the query.

One of these columns has string data of the form...
"Day 1-2: ....<heading text for events on day 1 and 2>"

I set the transformer to return a result array sorted on that particular column.

Amongst the data, sometimes I have...

"Day 7: .....", "Day 8-9: .....", "Day 8-10: ....."

As you might expect, a simple sort puts these in the (wrong) order....

"Day 7: ....."
"Day 8-10: ....."
"Day 8-9: ....."

However when these appear in the table, something has cleverly changed the order to...

"Day 7: ....."
"Day 8-9: ....."
"Day 8-10: ....."

I don't have any sorting or filtering active on the table itself, so i don't know why this final level of sorting occurs.

The problem is this...

The table rows are grouped by that column, so I'm using the group index to set alternate colours. But the script which find the index of each group, can only access the original array (from the transformer) with the "undesirable order", and not the better ordered array appearing in the table.

I've tried self.data and the specific table22.data, but both refer to the array with the original order, not the array actually presented in the table. Because of that the colouring is not reliable and grouped sections next to each other sometimes end up with the same colour.

How can we access the data the table is actually showing?

[MiguelOrtiz]

Hey @davblo,

So you can use const data = await table22.getDisplayedData() which should give you the data as it is displayed.

[davblo]

Thank!

@MiguelOrtiz

So you can use const data = await table22.getDisplayedData() which should give you the data as it is displayed.

On the "Query" side, and on the table22 "Properties" side in "Row color", if I try to use table22.getDisplayedData() I get ...
"TypeError: table22.getDisplayedData is not a function"

On the table22 "Properties" side in "Event handler" getDisplayedData() seems to be accepted, but I can't find any way to set and save the data to use in "Row color"

[pyrrho]

Hello @davblo !

I don't believe you can use the await keyword inside of properties with {{ }}

I think you need to make a little bit of a event chain to properly get the values you need. You might also need to use a key-based lookup for the last step if the i value is reporting the source indexes from the properties.

After your query loads your initial data, you'll need to trigger a JS Query to return the displayed data from the table. There may need to be a little delay to allow for proper rendering of the table so YMMV:

The next part I think you need is a transformer to automatically parse and return your color data for the rows. I just used a modulus to get something rendered:

Since this is using the displayed table data, the indexes should be properly aligned for your logic. The last step (where you may need to look up rows by key) would be to use the transformer logic for the row color:

[davblo]

Hi pyrrho,

Thanks for the hints!

It was actually easier than that. I see now that
getDisplayedData( )
is available in JS queries.

I already have the colour logic in the color setting property.

All I needed was a JS query (queryDisplayedData) containing...
return await table22.getDisplayedData();
... and then to replace...
{{.... self.data ... }}
with
{{ .... queryDisplayedData.data .... }}
...in the colour setting.

Before...

After...

[bobthebear]

You can cheat to get around not being able to use await:

(async () => {
     // Asynchronous code here
})();

i've used it before, its ugly as sin seeing it in small text areas wrapped in {{ }}, but sometimes u just gotta close your eyes and pretend