---
title: "Quick Start"
framework: javascript
version: "36.1.0"
---
# Quick Start
AG Grid is a high-performance JavaScript Data Grid library for building JavaScript Tables with unbeatable performance and hundreds of features. Available in Community and Enterprise editions. Visit [Community vs. Enterprise](https://www.ag-grid.com/javascript-data-grid/community-vs-enterprise/) to learn more.
[JavaScript Data Grid quick start video tutorial](https://www.youtube.com/watch?v=Ww7-LC6rU6U&list=PLsZlhayVgqNxijfRQxg5Mc6W4MzZHQ9MK)
## Create a JavaScript Data Grid
Add AG Grid to your application in 60 seconds:
### 1. Provide a Container
Load the AG Grid library and create a container div. The div should have a height because the Data Grid will fill the size of the parent container:
```html
```
> **Note**
>
> If you're using TypeScript you need to import and register the modules you want to use. See the [NPM Installation](https://www.ag-grid.com/javascript-data-grid/installation/#npm-installation) docs for more information.
### 2. Instantiating the JavaScript Data Grid
Create the Data Grid inside of your container div using `createGrid`.
```js
// Grid Options: Contains all of the Data Grid configurations
const gridOptions = {};
// Your Javascript code to create the Data Grid
const myGridElement = document.querySelector('#myGrid');
agGrid.createGrid(myGridElement, gridOptions);
```
### 3. Define Rows and Columns
```js
// Grid Options: Contains all of the Data Grid configurations
const gridOptions = {
// Row Data: The data to be displayed.
rowData: [
{ 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.
columnDefs: [
{ field: "make" },
{ field: "model" },
{ field: "price" },
{ field: "electric" }
]
};
```
### 4. Example JavaScript Data Grid
Below is a live example of the application running. Click ` Code` to see the code.
#### Quick Start Example
```ts
import {
AllCommunityModule,
GridApi,
GridOptions,
ModuleRegistry,
createGrid,
enableDevValidations,
} from "ag-grid-community";
// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
ModuleRegistry.registerModules([AllCommunityModule]);
// Row Data Interface
interface IRow {
make: string;
model: string;
price: number;
electric: boolean;
}
// Grid API: Access to Grid API methods
let gridApi: GridApi;
// Grid Options: Contains all of the grid configurations
const gridOptions: GridOptions = {
// Data to be displayed
rowData: [
{ 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 },
{ make: "Mercedes", model: "EQA", price: 48890, electric: true },
{ make: "Fiat", model: "500", price: 15774, electric: false },
{ make: "Nissan", model: "Juke", price: 20675, electric: false },
],
// Columns to be displayed (Should match rowData properties)
columnDefs: [
{ field: "make" },
{ field: "model" },
{ field: "price" },
{ field: "electric" },
],
defaultColDef: {
flex: 1,
},
};
// Create Grid: Create new grid within the #myGrid div, using the Grid Options object
gridApi = createGrid(
document.querySelector("#myGrid")!,
gridOptions,
);
```
[Live example: Quick Start Example](https://www.ag-grid.com/examples/getting-started/quick-start-example/typescript)
> **Note**
>
> 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 JavaScript Data Grid running, choose one of the following options to continue your learning journey:
- [Key Features](https://www.ag-grid.com/javascript-data-grid/key-features/) — Browse an overview of our commonly used features
- [Tutorials](https://www.ag-grid.com/javascript-data-grid/deep-dive/) — Get started with our step-by-step tutorials
- [Community vs. Enterprise](https://www.ag-grid.com/javascript-data-grid/community-vs-enterprise/) — Understand the differences between each version