Tuesday, January 26, 2021

Markdown table sorting

Problem

I restarted my crypto trading recently that I put on hold back in 2018. Last time it was mainly revolving around BitCoin, Ethereum, LiteCoin only. But this time it's a new world of DeFi (Decentralized Finance) and its ETH-based coins. When I analyzed I saw that there are a lot of things affecting the price along with the sentiments and real value. I really wanted to have a place where I can list my favorite coins with my favorite properties to analyze. First I thought of creating my Wikipedia page, but I saw it's already there and outdated. I am fine with editing that page but it's locked for editing with my points in the wiki. 
The second option is to start my own crypto page in GitHub as markdown. 

Now the actual problem came. The table on the wiki page is sortable but the markdown table is not by default. The problem can be summarised as 

How to create and publish a markdown page in GitHub pages that have sortable tables 

Approach

I found many approaches but a jQuery based table sorter worked without any complications. Below are the steps to get it integrated into GitHub repo.

How it works

We can attach it to any HTML page. First, make sure jQuery is added to the page. Second, refer to the tablesorter library and its style, etc...Finally, select the tables and attach that to the table sorter.

How to integrate into GitHub pages

The GitHub pages are processed by Jekyll. We can give the Jekyll layout in any GitHub repo by adding _layouts folder. The code is worth a thousand words. Please see the below page for the code reference.

https://github.com/mind-maps/cryptocurrency/blob/main/_layouts/default.html

Below is the page in the repo where a sortable table is added.

https://mind-maps.github.io/cryptocurrency/

Solution

After working on the GitHub page for one day, I became lazy and did google again. Finally found the coinmarketcap.com site is providing login experience and can maintain a watch list there with the properties I want to analyze

Reference

https://tympanus.net/codrops/2009/10/03/33-javascript-solutions-for-sorting-tables/

No comments: