react-table Vs react-bootstrap-table-2 Vs griddle-react v0 - Ideas2IT

react-table Vs react-bootstrap-table-2 Vs griddle-react v0

Share This

One of the most basic components required in every administrative / data driven web application is a Datagrid aka Table. It provides the easiest representation for a list of objects, encompassing basic functionalities like search, filter, sort and other options for visualizing data. On our quest to find a package that provides these common features with less customization and support a server side rendering, we came across three popular react table packages namely :

 

This blog is intended to evaluate these packages on how they solve our basic requirements while trying to implement a re-usable table component.

Column definition driven:
The foremost expectation for a custom table component is to draw the DOM structure for the table without the developer having to compose the table structure using their replacements of <table>, <th> and <tr> ,and tags. With just a prop, the core logic for drawing the table structure is expected to be taken care of by the package itself. All three packages exposed table components that had a required ‘column’ prop, which takes in the meta for the table and constructs the table itself.

However, griddle-react offered an edge where the column definition is optional, by default all keys in the given data list were displayed as columns without the developer having to take too much effort. A simple griddle-react table definition will be as simple as :

ReactJS Tables

Theming and styling:

Another basic requirement is to customize the component’s styling in accordance with the application’s theme without having to use ‘!important’ in all classes. All three packages come with pretty decent styling, however their approach for custom styling differs:

The solution given by react-table is the most complicated. It provides callbacks for almost any type of functional / DOM level customization using their get[ComponentName]Props. ( https://react-table.js.org/#styles ) However, the other two packages, offer direct props to override the default classes or inline styles. react-bootstrap-table-next is most suitable for applications that are already themed by bootstrap, the default styles are overridden without having to write our own classes.

Server-side controlled component:

Almost 90% of the time, we need a table that paginates, sorts, searches, filters.. but does it all with the backend, since having huge lists on the client side or DOM is not preferred. In order to reduce development effort, our ideal package has to provide these options, but should be controlled instead of manipulating the data themselves, i.e similar to providing ‘value’ and ‘onChange’ props to an input element. Here, all three packages provide the same solution : a boolean prop to indicate whether the operations are controlled or not, and an onChange method that triggers whenever the user performs any operation on the table.

Custom components:
Though the default components for sort, search, filter, pagination, column visibility, etc and in accordance with the table component, we developers need to play it better by customizing them for our requirements. By far, griddle-react allows highest customization with callbacks renderers for almost all default components including rows! You can even alter the row to be displayed as a card or chart!! Checkout the example here ( https://griddlegriddle.github.io/v0-docs/customization.html – Custom Grid Format )  React-table allows global overrides similar to styling props (Checkout Component overrides section in readme). React-bootstrap-table-next exposes most of its default components which allows us to write HOCs over them or extend them in order to alter their default behaviour.

Custom renderers for column rows and headers are also possible within the column definition in react-table and react-bootstrap-table-next.

Loading handlers and overlays:
A server side controlled display crops up the need to handle asynchronous states like loading and no-data-indication. Both react-table and react-bootstrap provides functional rendering with ( which a custom loading component can be rendered ):

  • react-table : https://react-table.js.org/#/story/functional-rendering
  • react-table-bootstrap-next : https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/toolkits-getting-started.html

Though griddle-react provides a prop for rendering a custom loading component, this can be done with less effort in react-bootstrap-table-next with react-bootstrap-table2-overlay ( https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/overlay.html ). Extra package tradeoff!!

 

Final verdict:
react-table is a great choice if our application is going to client driven, it provides out of the box features for grouping rows ( pivot tables ) and column header grouping which is not available in the other packages. It is lightweight and performs seamlessly with 100K records. Checkout this example : https://react-table.js.org/#/story/100k-rows-w-pivoting-sub-components . This blog was written by its author Why I wrote react-table.  However its customization to server side rendering requires greater effort.

react-bootstrap-table-next is perfect for bootstrap themed applications and provides the right amount of customization required. However, the core package comprised only three of the highlighted features : for everything else and extra package is required.

griddle-react, although highly customizable, requires a lot of development effort to build some basic features which are not implemented by default.