Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

ReactJS and ag-Grid Data Grid: The Perfect Match

DZone's Guide to

ReactJS and ag-Grid Data Grid: The Perfect Match

Using a new framework-agnostic JavaScript data grid with ReactJS for rendering.

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

ag-Grid is an enterprise JavaScript data grid with zero library dependencies, including no dependency for it's rendering. You can build an application using just JavaScript and ag-Grid alone. The 'ag' stands for framework AGnostic.

Now ag-Grid is providing an optional React component and React rendering. ag-Grd is fully in bed with React and treats React as a first class component — meaning if you are using React, ag-Grid is NOT using any other framework to get the job done.

React Components follow standard DOM interaction patterns using properties, events (callbacks) and an optional API for interacting with the components. React also uses immutability to assist state management. ag-Grid uses the same principles. ag-Grid's core interface maps directly onto what is required by React making ag-Grid and React match perfectly.

Fig 1 - Sample ag-Grid React Component Usage 

ag-Grid then goes one step further, it embraces React for rendering. That means you can use React for custom cell rendering inside the grid. You provide ag-Grid with the React component and it knows what to do with to seamlessly integrate. No other grid on the market is both agnostic and still allows you to use React for rendering.

ag-Grid's future is bright. It's abaility to integrate with the different frameworks makes it strongly positioned to be the enterprise level data grid everyone was waiting for. You won't need to throw away your grid next time you want to move to a different framework.

Check out ag-Grid at www.ag-grid.com

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:
react js ,react framework ,javascript ,data grid ,javascript framework ,javascript libraries ,web components

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}