There are plenty of different data tables available on the Internet, which perform great if you want to display one object per row.
Each of these objects has to have exactly the same static properties, which are mapped to columns in the table.
ReactGrid was designed to be independent of your data model.
It doesn’t care about your schema. You can render anything in any cell and thus you are able to display things the way you like it.
Unlike other grid components, ReactGrid also performs great on mobile devices or those with a touch capability and provides the same experience as on a desktop.
Before we get started let’s list three main tasks:
- displaying the collected data will be achieved with ReactGrid. To be reactivewe will re-render the view only when the source data has changed. In this example, raw data comes from an audiometer - a device that is used for making hearing tests. In a nutshell, audiometer measures multiple hearing difficulties at many frequencies, and the audiogram is a way of visualizing such disorders.
- visualize the collected data on the line chart using Chart.js and its React wrapper,
- add a possibility to enter a new value and rerender the whole view with an updated state.
Initialize the project
Nothing simpler – just type one of the commands below into your terminal to initiate a React app with Typescript support.
‘Create React App’ will take care of all the necessary stuff.
Define useful interfaces and types
First, we need to declare a few interfaces and types that help us to keep everything in the right place and order.
In this particular example, we know all about the data that we want to process.
A good idea is to ‘be as narrow’ as possible.
Mark the columns and rows
Relying on those interfaces now we can introduce
In our app, we got a
Line column, and after that, we got columns which are related to a particular frequency from 0Hz to 16000Hz.
The next stage is mapping all the rows. We make it in a similar way to previous examples.
Define the data
As we defined our data, it’s time to define our data that we are working on.
getData function returns an object whose each key must exist within the
RowsMapinterface. Each key of this object contains an array of
Map the data to ReactGrid
Now we are ready to generate rows that directly feed into ReactGrid. Each row contains the same amount of cells, but all of them can be arbitrarily placed in any order.
The main component –
It is time to create the main component –
Audiogram and wrap up already written code.
As you can see we stored our data inside React
ReactGrid always expects two props –
columns (they are constant and don’t change over time) and
rows (they are calculated every time the
Audiogramcomponent is rerendered).
All that’s left is to render the component with:
There are two things left to do:
- Add a header row to mark the data (devices and all the frequencies);
- Add possibility to edit data with ReactGrid’s cell editor;
Adding the header row
To add it we have to create a short function called
getHeaderRow. As an argument, it gets a column order (as keys of columns) and returns a row object that contains only a cell of the
header type. We also added some green background to those cells.
Editing frequency values in cell editor
At this moment ReactGrid behaves as a read-only. To change that we updated the
Audiogram component by adding our handler function called
handleChanges. We expect that only
NumberCell will be changed, therefore we marked the
CellChange. Our task is to change data on the basis ReactGrid has been rendered.
Cell editor opens when it receives double-click action or the Enter key is pressed.
Then you can type a new value in and then commit the change. If we
console.log(changes) we get an array of objects as shown below:
To change our raw data we have to find
rowId where the change takes place.
Then loop over all frequency samples and apply a new value (
change.newCell.value) to an appropriate cell or just return without changes.
We have to create two functions:
getChartData– this function should return an object that contains two fields. The
labels– which is an array of frequency title label and then
datasetsfield to provide the
datafield which contains an array of values for each frequency. You can also style your line by setting for example a
pointRadiusfor a better experience.
getChartOptions– here we return an object that is compatible with
ChartOptionsinterface. We want to disable legend, set the title, display, and adjust axes.
That’s all! The job is done, now you can check the result below.
What you learned after completing this guide:
- what is ReactGrid and how to do a fully functional app;
- how you can use it in a reactive way;
- why Typescript is also helpful in a small-scale project to avoid the most common mistakes.
As you see integrating ReactGrid with other libraries like Chart.js is not so hard. Of course, you don’t need to start a Typescript project and make all data mappings to compose a predictable solution.