05 Dec 2018

See the Pen Data Comparison Table by Daniel Langenakker (@bubblewrapped) on CodePen.

The above table is an example of a table I created when I was working at Uglii. I created it to allow users to compare two sets of data, in this case data on two countries including how many companies had signed up for the service that was being created or how many languages the goods and services taxonomy had been part of a brands, goods and services search offered by Uglii.

I created it to reduce the amount of screen real estate that was required for table of data and to make it easier to compare two countries side by side rather than having to constantly scroll. The table was so large it couldn’t fit on a 1920px wide screen, by reducing the visible data to two columns a user can see all the information from the country they wish to view as well as any country they wish to compare it to.

The original version like the recreation above is made using jQuery but didn’t use modern JavaScript like the one above. I plan to create a version in the future that uses plain modern JavaScript utilizing async and promises.