Datagrids and tables are a staple and have been in front-end web development since… forever. At Nozzle.io, I use them every day, and so do our customers. So it would seem that something so standard and vital to a user experience would need to operate extremely efficiently, offer just the right amount of power while not sacrificing ease of use, and obviously meet the high bar of the front-end framework and its ecosystem of components.

I expected when moving from Angular to React that finding a decent table component would have been a cinch. I was so wrong.

I came from Angular where datagrids were plentiful and features were full-fledged, but even in that environment, it was difficult to find something that would just get out of my way and let me code the table how I wanted.

Honestly, the only things I truly want from a table are:

Good Visual and Architectural Structure. Clean and minimal markup with appropriate classes where I needed them, and just enough styling to help the grid function, but not so much I needed to override them.

Clean and minimal markup with appropriate classes where I needed them, and just enough styling to help the grid function, but not so much I needed to override them. Client-Side Sorting and Pagination. Tons of modules out there flaunt their ability to satisfy the server-bound table (and this is a given to support), but in many scenarios this was the last item to check off my list and the grid didn’t have it. I simply wanted to supply an array of objects already in my possession, and have sorting/pagination just work right out of the box.

Tons of modules out there flaunt their ability to satisfy the server-bound table (and this is a given to support), but in many scenarios this was the last item to check off my list and the grid didn’t have it. I simply wanted to supply an array of objects already in my possession, and have sorting/pagination just work right out of the box. Callbacks, Callbacks, Callbacks!!! Too many times did I dig into a grid and start to love it, only to find that almost nothing supported functional customization. Not all the time does one know exactly how a cell needs to be styled, or what icon needs to go next to a value. Callbacks are the key to customization, not a hundred global options that accept strings and booleans. C’mon!

Too many times did I dig into a grid and start to love it, only to find that almost nothing supported functional customization. Not all the time does one know exactly how a cell needs to be styled, or what icon needs to go next to a value. Callbacks are the key to customization, not a hundred global options that accept strings and booleans. C’mon! Powerful Templating. Yes, almost every grid will defend that they do this, but they don’t. At any given moment (similar to callbacks) you may want to override the display of any cell on the grid. This needs to be the most simple procedure available. As opposed to angular, React makes this amazingly simple… if you support it. JSX, stateless components, vanilla JS, or even a fully connected redux-form powered react class should all be supported options when using a table. If not, then you’ve already failed us Devs.

Yes, almost every grid will defend that they do this, but they don’t. At any given moment (similar to callbacks) you may want to override the display of any cell on the grid. This needs to be the most simple procedure available. As opposed to angular, React makes this amazingly simple… if you support it. JSX, stateless components, vanilla JS, or even a fully connected redux-form powered react class should all be supported options when using a table. If not, then you’ve already failed us Devs. Grouped Headers. Seriously, you’d be surprised at the lack of something so simple.

Seriously, you’d be surprised at the lack of something so simple. This list could go on for a while, but I think you get the idea. There are many more features I also look for in a datagrid, but this will suffice for this conversation.

Before I move on to the solution to this mess, I gotta hand it to ag-Grid. A lot of my expectations I’ve ever had from a datagrid spawned from using Nialls solution, and he’s done a great job at making a lot of people happy across multiple JS frameworks. My reasoning from moving away from ag-Grid came from its lack of client-side pagination, and also the headache I got every time I wanted to change the way a cell rendered or looked (let’s just say it’s not true react, and doesn’t play well at all with react-context or react-instances of react-dom).

Now the solution…

The React-Table Logo

A screenshot of a simple demo

I’m sure the pics above won’t extract any audible “Wow”s from you, but remember, it’s what’s under the hood that matters.

Here are a few of React-Table’s main features:

Lightweight at 3kb (and just 2kb more for styles)

(and just 2kb more for styles) Column-definition-driven. No composition needed.

Uses customizable JSX and callbacks everywhere possible

Client-side pagination and sorting out of the box

Minimal design & easily themeable

Like you would expect, React-Table satisfies the wish list I outlined above and so much more. The first version I implemented in Nozzle took only a few hours to deploy. The ease of it’s development was something of a surprise to me, but turned out to be a calculated aversion of the common pitfalls that tables get turned around with.