You will need the following build tools installed at a minimum:
To get started as quickly as possible we provide a
"Seed" repo on Git that you can use. Let's clone
repo, install the dependencies and start it up:
With those 2 commands you should now see the following application:
Great! A working Grid application in no time at all. Let's break down the application into it's main parts:
Here we have 3 rows of data, with
price making up the
To display this information we need to tell the Grid what data we're interested in. Let's define the three columns that match the data above:
At a minimum a column definition needs a
headerName - the column title to display - and a
- the data item to read off of from the row data. Here we're defining 3 columns,
Price, each of which correspond to their lowercase equivalent in the row data above.
Ok, so now we know how to define our row and column data - how do we define our actual Grid?
div for ag-Grid to use::
We're also providing a
div for ag-Grid to use here, along with a width and height. These could be
of course, including
Finally, we provide a
theme for our Grid - the theme determines the Grids look and feel. Please see
Themes for more information.
Next in our application, we define a gridOptions object that we will pass to the Grid - in this we declare the row and column information we want displayed:
Finally, we wait for the DOM to load and once ready find the container we want ag-Grid to use (as defined by the
ID we provided above)
and pass in the
GridOptions we want to use:
The final setup looks like this:
We encourage you to experiment with the plunker above - try adding new rows of data for example or renaming column headers.
With this we have a simple application ready to go of course there is much more we can do - in the following sections we will build on this starting point.
Ok, great - so far so good. But wouldn't it be nice to be able to sort the data to help us see which car is the most expensive (or least!)?
Adding sorting to our application is very easy - all you need to do is let the Grid know you want sorting to be enabled by setting a Grid property to true:
With a single property change we are now able to sort any column by clicking the column header (you can keep
clicking and it will cycle through ascending, descending and no sort). Note that in this example we're sorting
Price in ascending order (indicated by the up arrow):
Our application doesn't have too many rows, so it's fairly easy to find data. But it's easy to imagine how a real-world application may have hundreds (or even hundreds of thousands!) or rows, with many columns. In a data set like this filtering is your friend.
As with sorting, enabling filtering is as easy as setting a single property in our Grid definition:
enableFilter property set we are now able to filter any column by clicking the column
"hamburger" to the right of a column (visible when hovered over). Note that in this example we're filtering the
column by the text
Celica - only the row with
Celica is shown now.
We've only scratched the surface with what you can do with the Grid - please refer to the full set of features on the left hand navigation for an idea of what's on offer, but below we show a feature rich example:
This example makes use of custom
cell renderer's to show data in a visually friendly way, demonstrates
column grouping as well as using
example is only scratching the surface - we've only just gotten started with with ag-Grid can do!
Please read the More Details section next to get a deeper understanding
how to use ag-Grid and React, as well as the options in installing dependencies and accessing the