AG Grid is a high-performance React Data Grid library for building React Tables with unbeatable performance and hundreds of features. Available in Community and Enterprise editions. Visit Community vs. Enterprise to learn more.

Create a React Data Grid
Add AG Grid to your application in 60 seconds:
NPM Install
Install the ag-grid-react
package, which also installs ag-grid-community
:
npm install ag-grid-react
Import the React Data Grid
import { AgGridReact } from 'ag-grid-react'; // React Data Grid Component
Register Modules
Register the AllCommunityModule
to access all Community features:
import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';
// Register all Community features
ModuleRegistry.registerModules([AllCommunityModule]);
To minimize bundle size, only register the modules you want to use. See the Modules docs for more information.
Define Rows and Columns
const GridExample = () => {
// Row Data: The data to be displayed.
const [rowData, setRowData] = useState([
{ make: "Tesla", model: "Model Y", price: 64950, electric: true },
{ make: "Ford", model: "F-Series", price: 33850, electric: false },
{ make: "Toyota", model: "Corolla", price: 29600, electric: false },
]);
// Column Definitions: Defines the columns to be displayed.
const [colDefs, setColDefs] = useState([
{ field: "make" },
{ field: "model" },
{ field: "price" },
{ field: "electric" }
]);
// ...
}
React Data Grid Component
Return the AgGridReact
component, wrapped in a parent container div
with a fixed height. Set Rows and Columns as AgGridReact
component attributes:
return (
// Data Grid will fill the size of the parent container
<div style={{ height: 500 }}>
<AgGridReact
rowData={rowData}
columnDefs={colDefs}
/>
</div>
)
Example React Data Grid
Below is a live example of the application running. Click </> Code
to see the code.
To live-edit the code, open the example in CodeSandbox or Plunker using the buttons to the lower-right.
Next Steps
Now that you have a basic React Data Grid running, choose one of the following options to continue your learning journey: