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 :

• react-table
• react-bootstrap-table-next
• griddle-react versions

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
• 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., are useful, developers often need to customize them to better 

Among the three packages;suit their requirements.

• Griddle-react allows the highest level of customization with callback renderers for almost all default components, including rows. You can even change the row to be displayed as a card or chart. Check out the example here: Custom Grid Format.

• React-table allows global overrides similar to styling props (see the Component Overrides section in the README). React-bootstrap-table-next exposes most of its default components, which allows us to write HOCs over them or extend them to alter their default behavior.

Additionally, custom renderers for column rows and headers are possible within the column definition in both 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 stands out as an excellent choice for client-driven applications, offering built-in features like row grouping (pivot tables) and column header grouping, which are unique among the packages. It is lightweight and handles large datasets seamlessly. However, achieving server-side rendering customization requires significant effort.
• React-bootstrap-table-next is ideal for applications themed with Bootstrap, providing adequate customization options. Yet, the core package lacks several advanced features, necessitating additional packages.
• Griddle-react offers extensive customization capabilities but demands substantial development effort to implement basic features not included by default.

Conclusion

Selecting the ideal React table package depends on your specific project requirements. If your application thrives on client-side operations and needs advanced functionalities like pivot tables, react-table stands out with its lightweight performance and robust feature set. For applications already integrated with Bootstrap themes, react-bootstrap-table-next offers seamless integration and adequate customization options. Meanwhile, griddle-react excels in customization but may require additional development effort for basic feature implementations. Choose wisely based on your application's needs and enhance your data-driven interfaces effectively.

Explore the power of these React table packages today! Choose the right one for your application's needs and streamline your data presentation effortlessly. Need expert guidance in making a wise decision? Reach out to our team of experts.