“Choosing the fast and reliable React Data Grid was the most important design decision for our enterprise app.” Unknown Front-end Developer
If your app has several data grids then choosing the right one is important. The data grid component has huge impact both on end-user experience and developer's productivity.
Designing the best data grid is all about finding a way to meet conflicting requirements. Speed vs flexibility, simplicity vs user experience - plus the environment which changes every 6 months.
We are building browser-based data grids for more than 15 years - from ie6 and jQuery to now React and other major frameworks. There is a lot of stuff inside - let's have a look.
Initially everything is fast. Then you add some styles, formatting, custom templates, data processing, fixed columns and auto heights,
insert it into your application layout and try on a typical end-user hardware, full screen and with a 100k records dataset.
If it is still fast - it's a whole different level of fast, and this is what we are talking here.
This kind of speed and responsiveness is not achievable with just micro-optimizations - it has to be built-in on the architecture level. You have to reduce the amount of code, load the absolute minimum of data and produce as little DOM rendering work as possible. For the data grid component it means modular architecture, lazy loading and virtualized scrolling.
The Data Grid is a true React component - the rendering, events, component lifecycle, performance optimizations, everything goes through React, so you can expect it to behave the same way as any standard React component. Supporting both controlled and uncontrolled modes. Use with Redux, hooks, developer tools, profiling - no surprises and no foreign concepts to learn.
Most important part is that you can customize everything using standard JSX/rendering functions and it all works smoothly without killing the scrolling performance.
We also support Preact in a separate optimized package.
The common problem with data grids is that the data grid library has to offer huge amount of functionality but each application typically requires only a small subset. Moreover there is no common implementation standards when it comes to the edge cases, which means you sometimes have to modify the available features or add the missing ones.
The only good solution here is to build the component in a modular way, i.e. small core plus a set of options/plugins and this is exactly how React Data Grid is implemented. The data grid core is very small - just 30Kb (minified, not compressed) and nearly all the functionality is implemented as optional plugins. All the plugins are available on github under MIT license so you can easily change the implementation if that becomes necessary.
The key to the great developer experience is about being able easily read and understand the code you are working on. We care a lot about how the data grid API looks like and have put a lot of efforts to make it clean, readable and true to the javascript roots.
We want to make working with React Data Grid as easy as possible, so we are committed to building the best developer docs and real life examples. As a first step look at the getting started page and examples. The examples source code is included the library repo on github, which you can either run locally or just play in CodeSandbox.
This library is offered under the commercial license. We ask you to click on 'Buy now' button and purchase the licenses for your team. It will require a corporate credit card and 15 minutes of your time. In return you are getting an excellent product and a peace of mind that this library will still be maintained and supported 5 years from now and maybe much longer if you need it. We are doing it since 2003 and still support some of the clients from that period. You will not be alone.
And everything else is the same - you download the package from npm, raise issues via github, look at the source code, examples, discuss anything at the support forum or write us an email at support@activewidgets.com.
Welcome on board!