Extending React Data Table’s Functionality with Custom Components
At CloudAnswers, we use the react-data-table-component for managing data in tables. It is quite good when it comes to pagination, sorting, and other important features. However, there were missing features in the original component, so we decided to add some functionality that we needed on top of it.
In this article, you’ll see how you can enhance the features and usability of the react-data-table-component as we did for some of our customer applications.
Expanding All Rows
In the original react-data-table-component repository, you can select all the rows at once with the “Select All” checkbox. However, you cannot expand all the rows if you want. To solve this issue, we created a fork of the original repository and edited its source code to allow users to expand/collapse all the rows at the same time.
If you want to use our fork, you can use the following props to configure the behavior for expandable rows:
- keepExpandableFirst — By default, the select checkbox is shown before the expand button. So, in case, you want to reverse their order, you can use the keepExpandableFirst prop.
- expandableRowsNoExpandAll`— In case, you want to disable the “Expand All” button, you can pass the expandableRowsNoExpandAll prop to do so.
Adding Footer Component
The original react-data-table-component provides support for adding a header but not a footer. A footer is often used in a table to summarise the data in the table, for example, you can add a “totals” row in the footer if your table contains some numeric data. So, we added a `footer` prop to which you can pass any functional component.
If you want to use our fork of the original repository, you can use the footer in the following manner:
Configuring Table Columns
As the application’s business complexity increases, the fields/columns in the tables increase. Due to this, the UI becomes a little more clunky and difficult to interpret. One solution for this problem is to allow users to hide/display columns in the tables based on their own needs.
For this purpose, you can create a component called TableColumnsConfigurator with the following code:
Next, you can call the TableColumnsConfigurator component in a sub-header component and pass this to the subHeaderComponent prop in the ReactDataTable:
Exporting to CSV and PDF
A common request from users of business applications is the ability to export the data to CSV and PDF formats.
For this purpose, you can create a component called ExportDataDropdown with the following code:
Next, you can call the ExportDataDropdown component in a sub-header component and pass this to the subHeaderComponent prop in the ReactDataTable:
Persisting User Settings
When your invest time in customizing columns and filters, you will expect the application to remember your preferences on page reload or when you return to the application later in the day.
This can easily be accomplished by storing user settings in the browser’s local storage. You can replace the use of the useState hook with the useLocalStorage custom hook. It works in the same way as useState works but allows you to save your state variables in local storage.
For example, you might want to persist the filename used in the ExportDataDropdown component in the local storage. For this, you can use the following code:
The first parameter is the “key” and the second parameter is the default value in case the key doesn’t exist in local storage.
Conclusion
As a developer, there is always the temptation to create a new component from scratch, but extending an existing component that already solves 90% of your needs is a far more efficient approach. Here we are standing on the shoulders of giants, by starting with the react-data-table component. We’ve opened a pull request for them to include these features but if you want to use our version today, you can find it at [https://github.com/cloudanswers/react-data-table-component](https://github.com/cloudanswers/react-data-table-component).
