Data grids in React with functional-data-grid
source link: https://www.tuicool.com/articles/hit/uA32eiV
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
During my everyday work building enterprise web applications in the latest years I’ve often faced the problem of showing to the user a very large quantity of complex structured data , sometimes grouped by some parameter, with values computed on such data and recomputed on the fly based on the modifications he makes.
Personally, I usually prefer simpler UIs to complex data grids, where there is only the strict necessary, the actions I can do are limited and the software guides my interaction with data. Sometimes, however, especially in highly specialized applications, it’s preferable to realize complex UIs where the user can work on lots of objects at the same time, monitoring the state of the application in one sight . In such cases special attention must be paid to the smoothness and responsiveness of the interaction.
Luckily, today users have powerful computers, that are able to work with large amounts of data, with very performing browsers and software technologies like flexbox, css3, local storage and so on, and there are frontend frameworks like React, that are able to minimize DOM manipulations during rendering.
When you are asked to display a lot of data, you have two options. The first is to manage the pagination of the elements on the server, this way being forced to cope also with filtering the elements, grouping them and compute the aggregates on the backend application, passing continuously data back and forth between the server and the client to recompute the aggregated values.
Alternatively, as I suggest, you can find a way to ensure that the size of the data doesn’t reach a certain limit, determining a practical working set , and simply push all your data straight to the rich clients, simplifying the design and freeing the backend from the burden of dealing with all that complexity.
By doing so, in order to be able to manage all such data on the frontend, you need to implement virtual scrolling in your components, preventing the rendering of thousands of DOM nodes by the browser.
I’ve found this being a really powerful approach, that allows you to build frontend components capable of handle lots of structured data, and so I decided to write functional-data-grid , a Javascript library for creating data grids that applies these ideas.
In functional-data-grid you pass a list of elements of the same type to the library, and then you define a set of columns and, for each column, how the column has to be rendered based on the element content of the row being rendered.
At the same time you can define how to group the data and how to compute any aggregates.The elements are displayed in a spreadsheet-like component in a tabular fashion. The library will take care of the virtualization of the supplied content. The user of the grid will be able to sort and filter the elements at will.
Moreover, by defining custom renderers for the columns, the programmer can realize interactive grids, allowing the user to execute operations on the elements and to manipulate the data.
An example of a grid made with functional-data-grid can be viewed by clicking here .
The documentation of the library can be found here .
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK