Expand All

  Getting Started



  Row Models




  Third Party


Github stars make projects look great. Please help, donate a star, it's free.
Read about ag-Grid's Partnership with webpack.
Get informed on releases and other ag-Grid news only - never spam.
Follow on Twitter

Material Theme

The Material Theme is one of the four themes supplied with ag-Grid.

To use a theme, add the theme class name to the div element where the ag-Grid directive is attached.

The following is an example of using the ag-material theme:

<div ag-grid="gridOptions" class="ag-material"></div>

Note that to use the Material theme you'll need to override the default rowHeight
gridOptions = {
    rowHeight: 48
Additionally, to be consistent with Googles guidelines, you should override the default checkbox behaviour - in the example below we've overriden the selected checkbox state to be blue
gridOptions = {
    icons: {
        checkboxChecked: '<img src="data:image/png;base64,..."/>'
Material Theme Example
This grouped example demonstrates some of the different facets of a theme - full, part and no checkbox selection for example, as well as general look and feel