Make tables sortable

[gbif-portal]

Make tables sortable

The table on this page would benefit from sorting, and perhaps separators to read the numbers better (e.g. 12,223,345 for a UK locale).

---

fbitem-56851f22907d29c9d8cd9933fbda93fe03fb8940 Reported by: @timrobertson100 System: Chrome 60.0.3112 / Mac OS X 10.11.5 Referer: https://www.gbif.org/mobilization-priorities-2017 Window size: width 1613 - height 961 API log&_a=(columns:!(request,response,clientip),filters:!(),index:'prod-varnish-',interval:auto,query:(query_string:(analyze_wildcard:!t,query:'response:%3E499%20AND%20(request:%22%2F%2Fapi.gbif.org%22)')),sort:!('@timestamp',desc))&indexPattern=uat-varnish-&type=histogram) Site log&_a=(columns:!(request,response,clientip),filters:!(),index:'prod-varnish-',interval:auto,query:(query_string:(analyze_wildcard:!t,query:'response:%3E399%20AND%20(request:%22%2F%2Fdemo.gbif.org%22)')),sort:!('@timestamp',desc))&indexPattern=uat-varnish-&type=histogram)

[MortenHofft]

I'm not sure what the best way to go about this would be. @thomasstjerne do you have a good idea.

I'm guessing an Angular directive attached to the table, that analyzed the content, moved it into js and replaced the table with a dynamic one? The directive being attached based on a custom markdown renderer?

[timrobertson100]

OldSkool JQuery style? https://datatables.net/

https://crawler.gbif.org/ does this

[thomasstjerne]

I think this is more angularish: http://lorenzofox3.github.io/smart-table-website/

Thats what is used for tables in svampeatlas. It very lightweight

[MortenHofft]

Once the data is in js sorting etc is trivial. What datatables does is to my knowledge to extract info from the html table and replace it with a new (the approach i described above). The downside is that it is dependent on jquery.

@thomasstjerne based on the link I cannot see how it would work with a table from markdown rendered as html. It assumes a rowCollection doesn't it? To get that we need to extract the content from the html.

And either way we still need to create a custom markdown renderer no? unless we want it on all tables.

<table st-table="rowCollection" class="table table-striped">
    <thead>
    <tr>
        <th>first name</th>
        <th>last name</th>
        <th>birth date</th>
        <th>balance</th>
        <th>email</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="row in rowCollection">
        <td>{{row.firstName}}</td>
        <td>{{row.lastName}}</td>
        <td>{{row.birthDate}}</td>
        <td>{{row.balance}}</td>
        <td>{{row.email}}</td>
    </tr>
    </tbody>
</table>