Sort the columns in the Today's Lab Utilization table when clicking on table heads

ocf / ocfweb

The main ocf website

https://www.ocf.berkeley.edu

Other

40 stars 91 forks source link

Sort the columns in the Today's Lab Utilization table when clicking on table heads #619

Closed Hexhu closed 4 years ago

Hexhu commented 4 years ago

When a table head is clicked (like "% Busy" or "Desktop"), the column will be sorted in ascending order. Click again to sort in descending order. Hold the "Control" key while clicking to reset the column order to default.

A demo is available at trojan.ocf.berkeley.edu:8794/stats/. Scroll down and click on the "% Busy" header to see the effect.

ja5087 commented 4 years ago

Thanks for the change!

Frontend for reference:

Can we add some UI elements to indicate that this is sortable? Right now it's not clear that it is, maybe something like would work.

Hexhu commented 4 years ago

TODO: add arrow images to table heads to indicate that the columns are sortable

pick relevant tablesorter-header section from https://github.com/Mottie/tablesorter/blob/master/css/theme.default.css
use arrows to indicate headerSortUp, headerSortDown and sorter-false states
save style at ocfweb/static/scss/pages/stats/_summary.scss

Hexhu commented 4 years ago

Visual indicator added @ja5087 Demo at http://trojan.ocf.berkeley.edu:8794/stats/ Again, scroll down and click on the headers of the Today's Lab Utilization table to see the effect.

20200708-204906