This section documents how to get started with ag-Grid and Polymer as quickly as possible. You will start off with a simple application and section by section add Grid features to the application ending up with a fully fledged application, with ag-Grid and Polymer at the heart of it.
ag-grid-polymersupports Polymer 3.
For Polymer 2.x support please use version 19 (and before) of
ag-grid-polymer. Archived documentation for this version can be found here.
We'll be using the Polymer CLI to scaffold and run our application.
Please refer to the Polymer CLI installation instructions to get this installed.
We can now test our application with the following command:
This should build and serve the skeleton project that the Polymer CLI provides, opening your default browser at the same time.
Let's add the ag-Grid related dependencies we need:
We need to reference the ag-Grid library in the root
You'll note that we're referencing the UMD bundle without styles - we do this as we'll reference the styles when we define our grid in the next step.
Next we need to update the CLI generated element with our code. First we need to import the
element so that we can use it:
Next we'll add our ag-Grid element along with the styles we'd like to use in the grid:
The lines above import the
AgGrid component, the grid "structure" stylesheet (
and one of the available grid themes: (
ag-theme-balham.css). The grid ships several different themes;
pick one that matches your project design.
We've also defined 4 bound properties - two data properties (
one event (
The data properties define the data to render and the columns to display. We'll use the
event to space the columns out evenly once the data has been rendered within the grid.
Now let's add the data properties and event we reference above:
The entire element should now look like this:
With this in place if we serve the application once again (
polymer serve --open) we should
see our first grid:
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:
filter 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.
Please read the More Details section next to get a deeper understanding of how to use ag-Grid and Polymer, as well the Enterprise Features.