Vue Data GridKey Features

The page provides an overview of and introduction to popular features available in AG Grid. Learn how to use Community features, configure and customise themes, and explore advanced Enterprise features.

The following sections assume a level of familiarity with common Data Grid concepts. If you're new to Vue Data Grids in general, we recommend starting with our Introductory Tutorial instead.

Showing Data Copy

Mapping Values Copy

The field or valueGetter attributes Map Data to Columns. A field maps to a field in the data. A Value Getter is a function callback that returns the cell value.

The headerName provides the title for the header. If missing the title is derived from field.

<ag-grid-vue
    :columnDefs="columnDefs"
    /* other grid options ... */>
</ag-grid-vue>

this.columnDefs = [
    { headerName: "Make & Model", valueGetter: p => p.make + ' ' + p.model},
    { field: "price" },
];

Text Formatting Copy

Format text for cell content using a Value Formatter.

<ag-grid-vue
    :columnDefs="columnDefs"
    /* other grid options ... */>
</ag-grid-vue>

this.columnDefs = [
    { field: "price", valueFormatter: p => '£' + p.value.toLocaleString() },
];

Cell Components Copy

Add buttons, checkboxes or images to cells with a Cell Component.

// ...
    components: {
        "ag-grid-vue": AgGridVue,
        CustomButtonComponent: {
            template: `
                <button @click="buttonClicked()">Push Me!</button>
            `,
            methods: {
            buttonClicked() {
                alert("clicked");
            },
            },
        },
    },
    data: function () {
        return {
        columnDefs: [
            { field: "button", cellRenderer: CustomButtonComponent },
            // ...
        ],
    };
},
// ...

Resizing Columns Copy

Columns are Resized by dragging the Column Header edges. Additionally assign flex values to allow columns to flex to the grid width.

<ag-grid-vue
    :columnDefs="columnDefs"
    /* other grid options ... */>
</ag-grid-vue>

this.columnDefs = [
    { field: "make", flex: 2 }, //This column will be twice as wide as the others
    { field: "model", flex: 1 },
    { field: "price", flex: 1 },
    { field: "electric", flex: 1 }
];

Example Copy

This example demonstrates mapping and formatting values, cell components, and resizing columns.

Working with Data Copy

By default, the row data is used to infer the Cell Data Type. The cell data type allows grid features, such as filtering and editing, to work without additional configuration.

Filtering Copy

Column Filters are embedded into each column menu. These are enabled using the filter attribute. The filter type is inferred from the cell data type.

<ag-grid-vue
    :columnDefs="columnDefs"
    /* other grid options ... */>
</ag-grid-vue>

this.columnDefs = [
    { field: "make", filter: true },
];

There are 5 Provided Filters which can be set through this attribute. You can also create your own Custom Filter.

Floating Filters embed the Column Filter into the header for ease of access.

<ag-grid-vue
    :columnDefs="columnDefs"
    /* other grid options ... */>
</ag-grid-vue>

this.columnDefs = [
    { field: "make", filter: true, floatingFilter: true },
];

Editing Copy

Enable Editing by setting the editable attribute to true. The cell editor is inferred from the cell data type.

<ag-grid-vue
    :columnDefs="columnDefs"
    /* other grid options ... */>
</ag-grid-vue>

this.columnDefs = [
    { field: "make", editable: true },
];

Set the cell editor type using the cellEditor attribute. There are 7 Provided Cell Editors which can be set through this attribute. You can also create your own Custom Editors.

<ag-grid-vue
    :columnDefs="columnDefs"
    /* other grid options ... */>
</ag-grid-vue>

this.columnDefs = [
    {
        field: "make",
        editable: true,
        cellEditor: 'agSelectCellEditor',
        cellEditorParams: {
            values: ['Tesla', 'Ford', 'Toyota'],
        },
    },
];

Sorting Copy

Data is Sorted by clicking the column headers. Sorting is enabled by default.

Row Selection Copy

Row Selection is enabled using the rowSelection attribute.

<ag-grid-vue
    :columnDefs="columnDefs"
    :rowSelection="rowSelection"
    /* other grid options ... */>
</ag-grid-vue>

// Column Definitions: Defines the columns to be displayed.
this.columnDefs = [
    { field: "make" },
];
this.rowSelection = {
    mode: 'multiRow',
};

Pagination Copy

Enable Pagination by setting pagination to be true.

<ag-grid-vue
    :pagination="pagination"
    :paginationPageSize="paginationPageSize"
    :paginationPageSizeSelector="paginationPageSizeSelector"
    /* other grid options ... */>
</ag-grid-vue>

this.pagination = true;
this.paginationPageSize = 500;
this.paginationPageSizeSelector = [200, 500, 1000];

Example Copy

This example demonstrates filtering, editing, sorting, row selection, and pagination.

Themes & Style Copy

Themes Copy

Grid Themes define how the grid looks (colors, font, spacing etc). The default theme is called Quartz. You can choose a different theme, or customise a built-in theme by changing parameters. Here we create a new theme based on Quartz:

import { themeQuartz } from "ag-grid-community"; // or themeBalham, themeAlpine

const myTheme = themeQuartz.withParams({
    /* Low spacing = very compact */
    spacing: 2,
    /* Changes the color of the grid text */
    foregroundColor: 'rgb(14, 68, 145)',
    /* Changes the color of the grid background */
    backgroundColor: 'rgb(241, 247, 255)',
    /* Changes the header color of the top row */
    headerBackgroundColor: 'rgb(228, 237, 250)',
    /* Changes the hover color of the row*/
    rowHoverColor: 'rgb(216, 226, 255)',
});

const VueExample = {
    template: `
        <div style="height: 100%">
            <div style="height: 100%; box-sizing: border-box;">
                <ag-grid-vue
                // ...
                :theme="theme"></ag-grid-vue>
            </div>
        </div>
    `,
// ...
 data: function () {
    return {
        // ...
        theme: myTheme,
    };
 },
// ...

Theme Builder Copy

Use the Theme Builder to create a custom theme with our visual editor. Browse and customise 100's of theme parameters and preview the changes in real-time. Automatically generate the theme code to copy & paste into your application.

Figma Copy

If you are designing within Figma, you can use the AG Grid Design System to replicate the Quartz and Alpine AG Grid themes within Figma. These default themes can be extended with Figma variables to match any existing visual design or create entirely new AG Grid themes. These can then be exported and generated into new AG Grid themes.

AG Grid Design System - Figma Community

Cell Style Copy

Define rules to apply Styling to Cells using cellClassRules. This can be used, for example, to set cell background colour based on its value.

.rag-green {
    background-color: #33cc3344;
}

<ag-grid-vue
    :columnDefs="columnDefs"
    /* other grid options ... */>
</ag-grid-vue>

this.columnDefs = [{
    field: 'electric',
    cellClassRules: {
        // apply green to electric cars
        'rag-green': params => params.value === true,
    }
}];

Row Style Copy

Define rules to apply Styling to Rows using rowClassRules. This allows changing style (e.g. row colour) based on row values.

.rag-red {
    background-color: #cc222244;
}

<ag-grid-vue
    :rowClassRules="rowClassRules"
    /* other grid options ... */>
</ag-grid-vue>

this.rowClassRules = {
    // apply red to Ford cars
    'rag-red': params => params.data.make === 'Ford',
};

Example Copy

This example demonstrates cell style and row style.

Enterprise Features (e) Copy

AG Grid comes in two forms:

AG Grid Community: Free for everyone, including production use - no license required.
AG Grid Enterprise: Requires a license to use in production. Free to test locally, or request a trial to test in production.

To learn more about the differences between AG Grid Community and Enterprise, when to use each version, and how to access our free trial or purchase a license, see the Community vs Enterprise docs.

Integrated Charts (e) Copy

Integrated Charts allow users to build and customise charts directly within the grid.

Enable Integrated Charts by setting enableCharts to true. Set cellSelection to true to allow users to create charts by selecting a range of cells:

<ag-grid-vue
    :enableCharts="enableCharts"
    :cellSelection="cellSelection"
    /* other grid options ... */>
</ag-grid-vue>

this.enableCharts = true;
this.cellSelection = true;

Grouping Rows (e) Copy

Enable Row Grouping by setting rowGroup to true:

<ag-grid-vue
    :columnDefs="columnDefs"
    /* other grid options ... */>
</ag-grid-vue>

this.columnDefs = [
    { field: 'country', rowGroup: true },
    // ...
];

Aggregating Rows (e) Copy

Enable Aggregation by setting aggFunc to one of sum, min, max, count, avg, first, or last:

<ag-grid-vue
    :columnDefs="columnDefs"
    /* other grid options ... */>
</ag-grid-vue>

this.columnDefs = [
    { field: 'gold', aggFunc: 'sum' },
    // ...
];

Pivoting Rows (e) Copy

Enable Pivoting by setting pivotMode to true. Define pivot columns by setting pivot to true:

<ag-grid-vue
    :columnDefs="columnDefs"
    :pivotMode="pivotMode"
    /* other grid options ... */>
</ag-grid-vue>

this.columnDefs = [
    { field: 'sport', pivot: true },
];
this.pivotMode = true;

Displaying Tree Data (e) Copy

Tree Data provides a way to supply the grid with structured hierarchical data.

Enable Tree Data by setting treeData to true. Provide a getDataPath callback to configure the Row Hierarchy:

<ag-grid-vue
    :treeData="treeData"
    :getDataPath="getDataPath"
    /* other grid options ... */>
</ag-grid-vue>

this.treeData = true;
this.getDataPath = data => data.path;

Displaying Tool Panels (e) Copy

The grid provides Tool Panels for Columns and Filters. You can also provide Custom Tool Panels.

To enable Column and Filter Tool Panels, set sideBar to true. To display only the Column or Filter Tool Panel, set sideBar to 'columns' or 'filters':

<ag-grid-vue
    :sideBar="sideBar"
    /* other grid options ... */>
</ag-grid-vue>

this.sideBar = true;

Example Copy

This example demonstrates Integrated Charting, Row Grouping, Pivoting, Aggregation and Tool Panels:

Getting Started

Layout & Styling

Charting

Core Features

Advanced Features

Miscellaneous

Vue Data GridKey Features

Showing Data Copy

Mapping Values Copy

Text Formatting Copy

Cell Components Copy

Resizing Columns Copy

Example Copy

Working with Data Copy

Filtering Copy

Editing Copy

Sorting Copy

Row Selection Copy

Example Copy

Themes & Style Copy

Themes Copy

Theme Builder Copy

Figma Copy

Cell Style Copy

Row Style Copy

Example Copy

Enterprise Features (e) Copy

Integrated Charts (e) Copy

Grouping Rows (e) Copy

Aggregating Rows (e) Copy

Pivoting Rows (e) Copy

Displaying Tree Data (e) Copy

Displaying Tool Panels (e) Copy

Example Copy