The web development community has left behind the days where tables were used for layout or weren’t used at all in favour of trendier layouts. We are finally using tables how they were intended to be used: For visualizing data.

In this article, we will take a look at some data table libraries in React, how they compare to each other, which one we chose, and suggestions which one you should choose depending on your context. We will also show some storybook demos at the end of this post.

Our team at commercetools is building a web application for managing the company’s e-commerce platform, which enables merchants to efficiently conduct their daily business. We visualize data like products and categories in a flexible and customizable way in order to cover several business cases.

In order to do that we have been using a data table library for a while, but recently we hit its limitations and had to reconsider our options.

We decided to not reinvent the wheel by writing our own data table but to pick one of the existing table libraries. In order to find out which one is most suitable to our needs we sat together and identified requirements that a modern data table should fulfill in our context:

fixed (sticky) and scrollable columns

resizable columns

horizontal scrolling

custom cell rendering

flexible column width and row height

should be a react component

In React there is a handful of options for building data tables. Here are the ones we looked at:

Flexible column width and row height

In our case flexible column width and row height is very important since there is a lot of related information the user wants to see at once in an e-commerce admin UI. For example listing associated categories per product:

Two rows with different heights

The image above shows that a product can have multiple categories. Thus every row in the table could have a different height. The problem with this is that long category paths will wrap across multiple lines, making it hard to compare paths to each other.

We also want to give our users the option to make the column as wide as the longest category path, so no category path will wrap to the next line:

The column is exactly as wide as the longest category path

Data Table Library Evaluation

Now that we know our requirements and which table libraries to look at, let's see the results: