Sorting data table (chartMenu > View data table)

Hi,

Currently there is no indication that the data table is sortable or how it’s sorted.

Generally, interactive elements should change the cursor to the pointer icon (like in the legend) or continue to use the default icon (the table currently uses the text icon). Additionally a tooltip could be helpful. Beyond this, sortable tables generally display a sort direction arrow in the column being sorted (up for ascending, down for descending)

Note: Keyboard cannot be used to sort the data table (would be helpful for accessibility).

Default mouse cursor (pointer icon)

image

Text mouse cursor (text icon)

image

Example of it with triangle icon

You can try it with any chart.

Thanks
Kerry

1 Like

Hi Kerry,

Agree, the cursor should change for interactive elements. The text cursor is not ideal. I will pass on this good feedback internally.

It seems clicking the header row, the row with the categories and series names, sorts the categories alphabetically or reverse alphabetically.

Internal ref. #1532

Hi Mark,

Thank you. Yes, if it is a column that has text, it sorts it alphabetically. If it is a column that contains numbers, it sorts it from highest to lowest and vice versa. Ideally though, there would be some sort of indication (for example with the arrows) that these columns are sortable.

Kerry

Is there any way to disable the ‘Allow table sorting’ as default for our charts? A great many of our charts are time series, where the values being in chronological order are quite important and we don’t want viewers to be able to switch them. I’d just update the themes to untick this option but it looks like ‘Allow table sorting’ has been ticked retrospectively for our older Everviz charts too, which displays oddly as a broken image (see image)
image
image

Hi,

I see that arrows and the cursor have been added to the tables. This is great news! However, I think there is something wrong with the image that is on the everviz server, Fred (UX dept) mentioned that you may need to reference it differently.

This is what the table looks like in the Everviz tool.

This is what it looks like on cihi.ca

This is what it looks like in JSfiddle

Thanks,
Kerry

1 Like

Thanks Kerry, reported!

Hi,

The up/down arrows are now showing properly. But when you click on them, they have a white background. Is there a way to remove this?

image

Also, the up/down arrows only seem to show in the tables of the first figure on the page. They aren’t appearing in any of the ones that follow. You can see on or page here.

In addition, it has been brought to my attention that unfortunately, the table is not sortable using a keyboard. Is it possible to fix this for accessibility?

Thanks,
Kerry

Hello, I’ve reported this as #1746

1 Like