The simplest way to create a Data Grid in React

Struggling getting started with React, check this out.

React is one of the coolest technologies to use in Web Development. It has gained tremendous popularity over the last couple of years. I started learning react when I joined Myntra last year and I loved it. The power of creating reusable components is something that really interests me.

For those interested in getting their hands dirty. Here’s the link to the github repo: Github. The repo can also be used as a template to start writing components in react.

Live Demo: http://rishabhbits038.github.io/react-tabelify/

I, at Myntra, am a part of a team that is trying to build a web framework that consists of reusable components which can be used by different teams.

Data tables/grids are used almost everywhere to display and filter data. There are many libraries available online. We decided to use ‘griddle’ , which looked the best of all, to display data in our app. But griddle really disappointed us. It was almost impossible to modify it and tune it according to out use cases. So, we finally decided to create our own library from scratch ‘Tabelify’.

Tableify is a hight customisable library that can be used to display data in different formats. Tabelify is a controlled react component. Its parent has complete control over its state. Any change in tabelify triggers an event, which can be caught at a central location. The required changes are made in the store/state and then modified data is passed to tabely as props.

This is a screenshot of Tabelify. All generated from a simple json given below.

json passed as props to tabelify

Tabelify gives the user complete control over it. Some of the important ways to modify the way data is represented are:

• Custom Columns: User can pass a render method as params in columnMetadata. The method renders a custom column.

Render function passed to render custom column

• CustomRow: User can choose not to display the data in a tabular format as well. The user can pass a CustomRow as a prop to Tabelify. Tabelify renders the Custom Row instead of the default.

grid with custom rows

CustomRow takes in the data as props and the value it returns is rendered in the row.

• Similarly, user can also pass a custom header and a custom footer to the table. User can also choose to hide the header and footer by passing two flags. ‘showFooter:false’ and ‘showHeader:false’;
• There is also an option to enable/disable the checkbox by just passing a flag. ‘showCheckbox:true/false’, when the checkbox on the header is clicked, all the rows are selected. The rows can also be selected be individually clicking the checkbox next to that row.
• There is a search box at the bottom left of the grid. It filters the data and shows only the ones which contain the text typed. It can be hidden by passing a prop ‘localSearch: true’
• Tabelify also supports pagination by default. The ‘resultsPerPage and currentPage’ is passed in as props to it.
• It supports in build sort on columns. Click on the column would sort it based on that column. Clicking again would toggle the sort direction. ‘sortColumn and sortDirection’ are also passed in as props to tabelify.

Sort on column and filtered by ‘Rish’

• A function ‘onRowClick’ is passed as a callback to Tabelify which returns the row data when a it is clicked. Appropriate actions can be performed on it.

Data flow in Tabelify

Tablelify takes in data as props. Whenever a change is to be trigerred, tableify return the event along with the updated data to its parent via a callback onChangeGrid.

The diagram above is the react component tree diagram of Tabelify.

It has 3 parts.

1. Grid Header :Grid Header has a checkbox wrapper over the header. By default the default header is rendered. If the user wants to render a customHeader instead, all he needs to do is pass a React Component(CustomHeader) as props to tabelify. The user can also pass showHeader=’false’ which will hide the GridHeader. DefaultRow dispatches an event to the parent when the column header is clicked. When the checkbox is clicked in GridHeader, it selects all the rows on the page and sends it to the parent via callback.
2. GridRows: It consists of a checkbox wrapper over the row. The user can specify if he wants to render the default or custom Row. All the column styling and custom render handling for columns happens in DefaultRow.
3. GridFooter: Grid Footer has the logic of showing the current page and handling page size. When the page is changed or page size is changed, an event is passed as a callback to the parent with the updated data.

As shown in the diagram above, any change in the header, footer or rows is passed on to the parent via callback(onChangeGrid). onChangeGrid modifies the state of the page. The updated state is then passed on as props to tabelify which passes it down to each of the components and thus the updated values are rendered.

There is just one source of truth, that is the state of the page( or store if you are using it). Any change in the grid is passed on to the page, which updates its state. This updated state then flows to all the child components as props. Tabelify is thus a dumb component. It has no logic. It just renders whatever it gets as props and dispatches events smartly.

To keep things simple, we kept the entire props to be passed to tabelify in a single json object, tableConfig, which it stores in the state.

The entire state of tabelify is stored in the state of page in the variable tableConfig.

Whenever there is some change inside the grid, onChangeGrid is called, which is a callback. It takes in event and the updated data as parameter. TableConfig is modified and setState is called. setState triggers rerender of the Page with updated state. Thus the updated values are passed on to Tabelify as well.