Introduction

Previous Next

Please note, you may find references to the following classes in the documentation:


FlexDataGrid

FlexDataGridColumnLevel

FlexDataGridColumnGroup

FlexDataGridColumn


The ReactDataGrid extends FlexDataGrid [Since a lot of the codebase has its roots in our Flex DataGrid written over the course of a decade, we have kept the class names same in order to maintain ease of porting over future features from that product.] The core internal API is still pure React, just that the configuration objects [which is what the above classes are] stay the same for better code portability.


The ReactDataGrid is a PURE REACT port of the Flexicious Ultimate DataGrid, which is the most powerful DataGrid component available for Flex application development. For those of you who are not familiar with flex, Flex is a highly productive, open source application framework for building and maintaining expressive web applications that deploy consistently on all major browsers, desktops, and devices. It provides a modern, standards-based language and programming model that supports common design patterns suitable for developers from many backgrounds.So, although the React DataGrid is a relatively new product - it is the first (and as of this writing the ONLY) commercial grade Enterprise Ready DataGrid component available for React today.


Why React DataGrid?


ReactDataGrid is built on the shoulders of giants: ReactDataGrid leverages the excellent React framework for a lot of things like dialog boxes, date pickers, item editors, as well as core concepts like component life-cycle management, display list management, event handling framework, and more. By leveraging the framework features for a lot of these dependencies, not only do we reduce the footprint of our Code base, but also make it easier for our customers to integrate our product into their systems, while at the same time benefiting from the many man months of effort that goes into developing these framework pieces.


A Feature set unmatched by any : As most React developers are aware, React does not have a DataGrid component of its own, there are some open source attempts, but none of the available DataGrid components offer all the features that are available in the ReactDataGrid in a unified API. The ReactDataGrid was specifically designed to handle very complex use cases that involve hierarchical data as well as complex interactions you can perform with such data sets. Some of the examples of such interactions include lazy loading child records that each hierarchical level, recursive selection, selection cascading and bubbling, virtual scroll, built-in support for drill up and drill down, built in support for in-line detail panels, in addition to integrating with regular DataGrid features like in-line filtering, paging, multiple columns sort, grouped as well as left and right locked columns, row span and column span, a number of selection modes like cell, row , multiple cell, multiple row, as well as customizable programmatic cell backgrounds contents borders and colors. The complete list of features is way too long to cover in this single post so please look at the features and the demos to get an idea of what's possible.


Highly Optimized: We have gone to great lengths to optimize every single piece of the rendering mechanism. We recycle renderers as you scroll in both directions horizontal as well as vertical. We draw just the visible area for all the sections of the DataGrid including headers footers filters the toolbar as well as the data area. This makes it possible for us to render very large record sets in a very short period of time.


Enterprise Ready, Proven, and Robust: Since the ReactDataGrid has its roots in the Flexicious ultimate flex DataGrid; it automatically inherits years and years of development, testing, refining as well as the level of robustness that comes from being used in the most demanding enterprise applications ever built. ReactDataGrid benefits from inheriting all of these underlying concepts that are baked into its architecture.


Laser Sharp Focus: As a company, we have been making a living for years by providing our customers with the most powerful Flex DataGrid component money can buy. Today we are bringing that same level of polish to flex developers moving to JavaScript as well as JavaScript developers in general. We have a team of very talented developers and designers who have thought about the DataGrid component more than what should be considered healthy. We have pondered over use cases, argued over user interaction schematics, listened to our customers, refined and improved our product on basis of what their requirements are,  and relentlessly re-factored, redesigned and redeveloped features until they achieve perfection. We're committed to constantly improving our product in pursuit of the highest level of quality.


Below are some of the features of the grid, with new ones being added with each release.


FEATURES