Table of Contents
Tables are an integral part of our merchant dashboard. They empower our merchants with the information they need to make informed decisions. In this blog, we’ll delve into the intricacies of building a table in React, exploring open-source libraries, best practices, and solutions for the challenges encountered along the way.
Selecting the appropriate open-source library
To build a table from scratch with various advanced features and interactions, we must manage event handling, state management, and implementing efficient algorithms. This can be quite challenging and time-consuming. Hence, selecting the right open-source library becomes very important.
The biggest requirement for our use case was that the library must support headless UI. Headless UI is a design approach where the UI components are provided without any pre-defined styles. Instead, they focus purely on functionality and enable developers to customise by adding their styles. This requirement eliminated libraries like Material UI React.
The two libraries that supported our requirements were @tanstack/react-table and react-data-table-component. Here’s a feature comparison between the two:
Our parameters for selecting a library were better customisation, a wide range of built-in features, a well-maintained codebase, and a large community of active users. We can also contribute to the community by adding missing features or fixing bugs. After evaluating all the factors, we decided to use @tanstack/react-table for its functionalities.
Developing the table component
On top of the selected open source libraries, we have built custom use cases like – loading state, no records found scenario, row selection options, pagination, row highlights, row expansions, footers, column resizing, and more.
All newly created components undergo development within our internal design system library, which acts as a centralised library for our UI components.
From a developer standpoint, using the newer table developed in the component library significantly improves efficiency and reduces redundancy in code. All the functionalities and behaviours will be handled via props. Here’s the code snippet to use the data table component:
The data table component is made responsive by providing styles and templates for various screen sizes and adding a window resize listener to trigger the re-render.
State Management
We have leveraged tanstack’s state management, which helped us to have a single state for the table and achieve performance improvements. For example, in the row selection interaction within the table, we passed the state directly to the headless table and then down to the checkbox.
The below code shows how we achieved row selection by passing the state to the checkboxes:
Here are some snapshots of our new data table.
Paginated table:
Non-paginated table:
A paginated table on a smaller screen:
At Cashfree, we always strive to provide the best user experience possible with our products. We aim to add more advanced functionalities to our tables, and as we implement them, we will also contribute back to the open-source community.
