React Grid Component Comparison

2 min readOct 12, 2018

As usual, there are so many choices when it comes to pick a React Component, in this case, a Grid Component. This post is an attempt to compare those choices.

Below is a list of popular grid components:

- react-virtualized grid (bvaughn) — MIT [Demo](https://bvaughn.github.io/react-virtualized/#/components/Grid)

- react-tools/react-table — MIT [Demo](https://react-table.js.org/#/story/readme)

- react-data-grid (adazzle) — MIT [Demo](http://adazzle.github.io/react-data-grid/#/examples/all-features)

- react-bootstrap-table2 — MIT [Demo](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html)

- olifolkerd/tabulator (react version: [react-tabulator](https://github.com/ngduc/react-tabulator)) — MIT [Demo](http://tabulator.info/examples/4.0)

They are really high quality and popular components. So most common use cases are supported. But here, I am only comparing based on a few less common but “nice to have” features.

Nice to have features:

Virtualized rendering

(only render visible rows)

react-tabulator — Yes
react-virtualized grid — Yes
react-data-grid — Yes

react-table — no info (support pagination)
react-bootstrap-table2 — no info (support pagination)

Resize-able columns

react-tabulator — Yes
react-data-grid — Yes
react-table — Yes

react-virtualized grid — no info
react-bootstrap-table2 — no info

Cell editing

react-tabulator — Yes
react-data-grid — Yes
react-table — Yes
react-bootstrap-table2 — Yes

react-virtualized grid — no info

Nesting tables