# ag-Grid

This page is a brief introduction to ag-Grid.
See the official documentation for exhaustive information.

# Introduction

ag-Grid is a powerful JavaScript library built around performance, elaborate features, and a well designed user-friendly yet powerful API. It can handle up to hundreds of thousands of lines without significant performance degradation.

Checkout their demo page and experiment.

# Basics

The grid only has one constructor Grid with two parameters:

the options containing user data and grid configuration
the DOM element in which the grid is to be located

After the grid is built, the API is accessible as a property of options. It enables reshaping the grid, accessing data, etc.

# Simple grid

Here is the example of a very simple grid.

Code:

// Define the rows of the data to display
var rowDat = [
  { make: "Toyota", model: "Celica", price: 35000 },
  { make: "Ford", model: "Mondeo", price: 32000 },
  { make: "Porsche", model: "Boxter", price: 72000 }
];

// Set up the columns names
var columnDef = [
  { headerName: "Make", field: "make" },
  { headerName: "Model", field: "model" },
  { headerName: "Price", field: "price" }
];

// Add custom parameters
var gridOptions = {
  columnDefs: columnDef,
  // A bunch of different options.
  enableFilter: true,
  defaultColDef: {
    editable: true
  },
  rowSelection: "multiple",
  enableSorting: true
};

// Use an existing DOM element
var gridDiv = document.querySelector("#myGrid");
new agGrid.Grid(gridDiv, gridOptions);

// API is available
gridOptions.api.setRowData(rowDat);

Note that you can select multiple line (Ctrl+Click or Cmd+Click), sort, filter, move the columns, etc. A lot of defaults are intuitive, but nearly everything is customizable.

# Advanced

There are many, many features. Check out the documentation features page.
Below a selection of those we find interesting are demonstrated.

# Grouping and Pivoting

You can update groups in the Columns panel. For more info see the grid pivoting doc page.

# Rendering

Cells can be heavily customized. For more info see the cell rendering and full width row groups rendering doc pages.

To see how to build it in ipyaggrid:

# Status Bar

To see the status bar in action, select a part of the grid (via Ctrl+Click, Cmd+Click or Drag & Drop) and read the result at the bottom right. For more info see the status bar doc page.