Page 1: Basic Installation and Setup

1. Basic Installation and Setup

AG Grid is a powerful data grid that enables efficient handling of complex data tables in React applications. To get started, you'll first install the AG Grid React component and necessary styles.

1.1. Installing AG Grid React

Add the AG Grid React module and styles to your project using npm or yarn.

npm install ag-grid-community ag-grid-react
# or
yarn add ag-grid-community ag-grid-react

1.2. Setting Up a Basic Grid Component

Import and use AgGridReact within your React component. rowData and columnDefs are essential for displaying grid data.

import React, { useState } from 'react';
import { AgGridReact } from 'ag-grid-react';

import 'ag-grid-community/styles/ag-grid.css'; // Required grid styles
import 'ag-grid-community/styles/ag-theme-alpine.css'; // Theme styles

const MyGridComponent = () => {
  const [rowData] = useState([
    { make: "Toyota", model: "Celica", price: 35000 },
    { make: "Ford", model: "Mondeo", price: 32000 },
    { make: "Porsche", model: "Boxster", price: 72000 }
  ]);

  const [columnDefs] = useState([
    { field: 'make' },
    { field: 'model' },
    { field: 'price' }
  ]);

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact rowData={rowData} columnDefs={columnDefs}></AgGridReact>
    </div>
  );
};

export default MyGridComponent;

Key Concept: The AgGridReact component renders AG Grid in React. rowData takes an array of data to display, and columnDefs takes an array of column definitions.