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. In our quest to find a package that provides these common features with less customization and supports 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 reusable 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 :
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 to 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, and 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 the highest customization with callback 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 behavior.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 be 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. Check out 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 an 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.Contact Ideas2IT – The Best Custom Software Development Company today to get more details!
.png)
.png)
.webp)
