Why I wrote React-Table, and the problems it has solved for Nozzle

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.
• 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.
• 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!
• 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.
• Grouped Headers. 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 really has 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, i t’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)
• 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.

• There is no support for infinite scrolling. Or any scrolling for that matter. Almost every table I tested proved to be a mess on mobile devices. After tinkering with them for so long, I finally realized that the only way to make a table great on mobile was to remove the scroll traps. I was so surprised in the end that the feature that so many tables tout as their keystone (infinite or virtualized scrolling) was the cause of so many problems in development issues and user experience. Removing it from the equation makes working with React-Table a joy on mobile, and even on desktop. Pagination is also the foundation for server-side data requests, and opens up so many more navigational possibilities you don’t get with scrolling.
• There is no composition involved. A lot of React tables out there make you structure your table using their own replacements for table, th, td etc… , but it turns out this makes it so much more difficult if you plan on to include sorting, grouping, column dragging, or pretty much any other feature that might need to alter the underlying DOM structure of your table. By sticking to one React component, a controlled and opinionated DOM structure and relying on column definitions to do the heavy lifting, it became very predictable and stable without any additional effort.
• Styling is 99% optional. The only remaining percentage should be for functionality like showing/hiding columns, and showing sort-indicators. Too many times did I find myself battling CSS !important’s on styles that should never have been there in the first place. React Table’s styles are minimal and designed to be overridden. Heck, most of the time you can just drop in the component without any styling at all. We think it’s great.

There is still a lot of work to be done on React Table. It’s only a few months old. Over the coming months I plan to implement new features like:

• Row grouping & aggregation
• Multi-Pivoting
• Column reordering
• Fixed Columns
• Page Jumping

If you would like to try React Table, head over to the React-Table Github Page , or start by tinkering with the demo. It’s unminified and inspectable with react-tools if you get really want to dig in 

If you have more questions, want to contribute, or just need some help, then head over to the React-Table Slack Channel. I’ll be there personally to answer any questions!

Til next time.