Introduction About React Data Table:
For a growing start up, developing a web application became a necessity. This creates the need of creating yet another React table library. While there exist some table libraries but most of them required heavy customizations. So by missing out of box features for example built in sorting and understanding of atomic structure of HTML tables. In order to achieve a balance between force and wanting a less complicated but flexible table library then React Data Table component is your way! However, if you need a clone of Excel or heavy “enterprise” capabilities, then this React table library is not suggestible.
KEY FEATURES OF REACT DATA TABLE COMPONENT:
- Configurations are declarative
- A configurable and built-in:
- Rows are selectable
- Rows are expandable
In order to work with React Data Component you need the following to be pre installed in your project:
- React 16.8.0+
- styled-components 3.2.3+ || 4.0.0+ || 5.0.0+
Since the React Data Table component utilises the amazing styled components library, you need to install that first in your project.
npm install react-data-table-component styled-components
Or you can also use:
npm install react-data-table-component styled-components
A VERY BASIC LEVEL TABLE:
The give declarative structure implements a sorted table of a movie’s titles:
MAKING OUR ROWS SELECTABLE:
In order to make our rows access the selectable results, we need to make our rows selectable.
CLEARING THE SELECTED ROWS:
Some hook is needed for triggering all the selectedRows to clear. When building your own table component selected rows are to be managed in some parent component. But as we are keeping row management within React Data Table, a prop called clearSelectedRows have been provided. This makes the toggle state can be easily passed. It’s up to user to make sure that they don’t pass the same state more than one time. We can take an example as, if clearSelectRows is set to be true twice, on second update, the rows will not be cleared.
DEFINING YOUR OWN THEME:
Your very own theme can be created easily by the use of createTheme helper. It is important to keep in mind that createTheme inherits from default theme and this theme will be available to all Data tables present across your project. So it is a good idea for us to define the custom themes we want, in a separate file. It is also very easy to just toggle to the dark mode settings just by setting theme = ”dark”. Styles.js has a detailed catalog of RDT styles which can be overridden or extended by the use of css-in-js objects.
CUSTOM STYLING USING CSS-IN-JS:
For more advanced uses, the default styling can be overridden by using the customStyles prop and then passing it in css-in-js. What it actually does is, internally it deep merges the customStyles with the previously present default styling. One issue of concern should be kept in mind while doing this and that is you are completely on your own here because not only can you customize but also break the RDT. Here, the feature is of the sky’s the limit kind of escape hatch feature.
CONDITIONAL STYLE OBJECTS:
- when: it accepts a callback which gives you access to the row data you have. This callback should return a boolean value for determining whether the style will be applied or not.
- style: it accepts a css-in-js style object which can be accessed simply by using a callback which has proper access to the row props.
USE OF CUSTOM CHECKBOXES AND INDETERMINATE STATE:
Sometimes, the User Interface Library checkbox component has their very own way of handling the indeterminate state. But we don’t want React Data Table being hard coded to specific user interface library or any custom component. Thus as an alternative, “hook” is being provided that allows us to pass any function that will be easily resolved by React Data Table’s checkbox that is internally present to be used with indeterminate functionality.
OPTIMIZATION FOR PERFORMANCE AND CAVEATS:
React Data Table Component makes it easy for incorporating best user interface components from other libraries. These are needed in overriding things such as select checkbox and sort icon from libraries such as MaterialUI.
We know that pre optimization can cause one a lot of trouble but there are certain best practices that one can adhere to which will make sure that the React Data Table is performing as per your level of expectation.
PASSING OF NON_PRIMITIVE PROPS:
As a general rule of thumb, or if one is experiencing any issue related to the performance, it should be ensured that any props that are non-primitive that are passed into the React Data Table are not being recreated every time there is a render cycle. This is even more important when there are large data sets where complex components and columns are being passed to the React Data Table.
OPTIMISING THE CLASS COMPONENTS:
This can be typically achieved by the movement of props like functions, arrays, objects and many other components of React. These are passed to the React Data Table outside the method: render. For example, places where memoize is needed to be implemented, memoize-one is a very nice library to take in use.
The component that we will see now, will cause the React Data Table to re render fully every time onSelectedRowsChange is triggered. That is because when setState is called myComponent is triggered that re renders it, which by its design triggers re render on all of the child components that are present i.e., DataTable. But there is not much to worry because React handles this decision very optimally as on when and how to render the DataTable and due to this, a full re render c=should not occur as long as the DataTable props are exactly the same. However the columns are changed on every re render as it is being re created again and again.
This is due to the fact of quality checking that is referential. Simply put, columns !== columns. It can be said in other words that both the instances of columns we saw contain the same elements but they are very much different arrays.
A simple solution for this problem would be to declare any field that is a non primitive field and is outside of the render function. This is to make sure it does not get re created on every cycle of re rendering. But this method is only going to work if there is no need to pass component props or methods to the object column. So to attach event handlers to our columns without the need of having to place that in the method for render and dealing with unnecessary re renders there are two things to keep in mind:
Creating a column function to pass the arguments that are needed.
The column function has to be memoized.
In this way, React checks if columns have changed columns; it will instead be a cached result thus preventing any occurrence of unnecessary re renders.
It is to be noted that this.updateState does not require any use of memoization. This is due to reason that this.updateState is defined as class method and thus it’s only created once. This is however not the same with functional components.
OPTIMIZATION OF THE FUNCTIONAL COMPONENTS:
If we care about building any functional components in React of version greater than 16.8, we can easily get access to React Hooks like useMemo and also useCallback.
The React Data Table is a very interesting tool to work with. It is not only very easy to use but also very easily customizable. We can even design the user interface as we want before making use of any of the React Data Table’s functionality. With the option of both default and custom themes, it is very pleasant to the eye. The React Data Table does make working with it worth the time and provides the users a great experience. With the React Data Table, the limit of optimization is the sky but one also needs to be very careful so as not to break the React Data Table. With this article, we hope you will be able to make good use of the React Data Table.