Tag Archives: html

Battle of the Grids: 10 ReactJS Grids and Tables

Leave a reply

Had to whip up a quick UI for a project, and of course one of the key elements that always comes up is the paginateable, lazy, sortable (and maybe even filterable) table aka the grid. Without further ado, here are the contestants that emerged after some interwebs browsing. Me, I’m making an unoriginal choice to proceed with the most popular one.

component name gh stars gh forks npm april dl’s github npm
fixed-data-table 2377 342 53,209 link link
griddle 1365 241 21,388 link link
react-bootstrap-table 404 164 11,787 link link
reactable 853 134 9,870 link link
reactabular 231 55 2,701 link link
react-data-components 167 60 632 link link
react-table-select 4 1 234 link link
react-infinite-grid 96 19 215 link link
react-grid 0 0 145 link link
react-grid-table 65 18 50 link link

Bonus: here is how to also make fixed-data-table truly lazy and never download all of the bazillion rows into memory when you only need to display about 10.

For those who like hot-linking other people’s code

Leave a reply

… life just got a bit safer. Browsers are starting to implement a (relatively easy) way to check integrity of the stuff you hot-link in your code – Chromium is adding this feature now. So that you and your visitors don’t get goatse’d by some mean person on the other end. All you have to do is add this integrity bit to the links you pull from other websites, and you can be sure to always serve – or gracefully fail to do so – the same content no matter what kind of hell breaks loose on that other server:

<script src="https://code.jquery.com/jquery-1.10.2.min.js"
integrity="ni:///sha-256;C6CB9UYIS9UJeqinPHWTHVqh_E1uhG5Twh-Y5qFQmYg?ct=application/javascript">

Ok, so hot-linking jQuery is just lazy, I know, but there is way more third-party code out there than most people realize – stuff like Google Analytics, ads and other widgets are routinely pulled from third-party servers by websites all over the Interwebs, and this is a great first step to add some kind of checks to this mess.