Framework:Javascript GridAngular GridReact GridVue Grid

Vue Grid: Components

You can create your own custom components to customise the behaviour of the grid. For example you can customise how cells are rendered, how values are edited and also create your own filters.

The full list of component types you can provide in AG Grid are as follows:

The remainder of this page gives information that is common across all the component types.

Declaring Custom Components

VueJS components can be defined as either simple inline components, or as full/complex externalised ones (i.e in a separate file).

"Inline" Components

export default {
  data() {
      return {
          ...data 
      }
  },
  components: {
      AgGridVue,              // the actual AgGridVue Grid component
      CubeComponent: {        // an inline custom component
          template: '<span>{{ valueCubed() }}</span>',
          methods: {
              valueCubed() {
                  return this.params.value * this.params.value * this.params.value;
              }
          }
      }
  }
}

Note here that we can define the property name either quoted or not but note that in order to reference these components in your column definitions you'll need to provide them as case-sensitive strings.

Locally Declared Components

const SquareComponent = {
   template: '<span>{{ valueSquared() }}</span>',
   methods: {
       valueSquared() {
           return this.params.value * this.params.value;
       }
   }
};

Externalised JavaScript Components (.js files)

// SquareComponent.js
export default {
   template: '<span>{{ valueSquared() }}</span>',
   methods: {
       valueSquared() {
           return this.params.value * this.params.value;
       }
   }
};

Externalised Single File Components (SFC / .vue files)

<template>
    <span class="currency">{{ params.value | currency('EUR') }}</span>
</template>

<script>
export default {
    filters: {
        currency(value, symbol) {
            let result = value;
            if (!isNaN(value)) {
                result = value.toFixed(2);
            }
            return symbol ? symbol + result : result;
        }
    }
};
</script>

<style scoped>
    .currency {
        color: blue;
    }
</style>

Note that in this case the component name will match the actual reference, but you can specify a different one if you choose:

components: {
    AgGridVue,
    'MySquareComponent': SquareComponent
}

All of the above works if you're going to register components by Name (see below). If you wish to register components by direct reference then you will need to wrap your component with Vue.extend(...your component...).

Examples of this are demonstrated in the "registering by name" section below.

Registering Custom Components

The pages for each component type (cell renderer, cell editor etc) contain examples on how to register and use each component type. It is however useful here to step back and focus on the component registration process which is common across all component types.

There are generally two ways to register custom components ("inline" components can only be registered by name):

  • By name.
  • Direct reference.

Both options are fully supported by the grid, however registering by name is AG Grid's preferred option as it's more flexible. All of the examples in the documentation use this approach. The direct reference approach is kept for backwards compatibility as this was the original way to do it in AG Grid.

Registering Inline Custom Components

Inline Custom Components can only be registered within the Grid by name:

<template>
  <ag-grid-vue :columnDefs="columnDefs" ...other properties>
  </ag-grid-vue>
</template>

<script>
//...other imports
import {AgGridVue} from "@ag-grid-community/vue";

export default {
  components: {
      AgGridVue,
      CubeComponent: {
          template: '<span>{{ valueCubed() }}</span>',
          methods: {
              valueCubed() {
                  return this.params.value * this.params.value * this.params.value;
              }
          }
      }
  },
  data() {
      return {
          columnDefs: [
               {
                  headerName: "Cube",
                  field: "value",
                  cellRendererFramework: 'CubeComponent',     
              }
          ]
      }
  }
  //...other properties & methods
}
</script>

Registering Non-Inline Custom Components

1. By Name

To use a component within the grid you will reference components by case-sensitive name, for example:

<template>
  <ag-grid-vue ...other properties>
  </ag-grid-vue>
</template>

<script>
//...other imports
import {AgGridVue} from "@ag-grid-community/vue";
import CubeComponent from './CubeComponent.vue';

export default {
  components: {
      AgGridVue,
      CubeComponent
  }
  data() {
      return {
          columnDefs: [
               {
                  headerName: "Cube",
                  field: "value",
                  cellRendererFramework: 'CubeComponent'     
              }
          ]
      }
  }
  //...other properties & methods
}
</script>

2. By Direct Reference

When registering components within the Grid by direct reference the target components must be wrapped in Vue.extend(...):

<template>
  <ag-grid-vue ...other properties>
  </ag-grid-vue>
</template>

<script>
//...other imports
import Vue from "vue";
import {AgGridVue} from "@ag-grid-community/vue";

// component wrapped in Vue.extend for direct reference
const CubeComponent = Vue.extend({
  template: '<span>{{ valueCubed() }}</span>',
  methods: {
      valueCubed() {
          return this.params.value * this.params.value * this.params.value;
      }
  }
};


export default {
  components: {
      AgGridVue,
      // CubeComponent does not have to be registered here when registering by direct reference
  }
  data() {
      return {
          columnDefs: [
               {
                  headerName: "Cube",
                  field: "value",
                  cellRendererFramework: CubeComponent
              }
          ]
      }
  }
  //...other properties & methods
}
</script>

Advantages of By Name

Registering components by name has the following advantages:

  • Implementations can change without having to change all the column definitions. For example, you may have 20 columns using a currency cell renderer. If you want to update the cell renderer to another currency cell renderer, you only need to do it in only place (where the cell renderer is registered) and all columns will pick up the new implementation.
  • The part of the grid specifying column definitions is plain JSON. This is helpful for applications that read column definitions from static data. If you referred to the class name directly inside the column definition, it would not be possible to convert the column definition to JSON.
  • No need to wrap components with Vue.extend(...)

Component Usage

The below table gives an overview of where components can be used. The table shows both options for usage:

  • Name / Direct JavaScript: This can be:

      1. A component name referring to a registered component (either plain JavaScript or framework component);
      1. A direct reference to a JavaScript component.
  • Direct Framework: A direct reference to a framework component.
ComponentWhereDirect JavaScriptBy Name & Direct Reference
Detail Cell RendererGrid OptiondetailCellRendererdetailCellRendererFramework
Full Width Cell RendererGrid OptionfullWidthCellRendererfullWidthCellRendererFramework
Group Row Cell RendererGrid OptiongroupRowRenderergroupRowRendererFramework
Group Row Inner Cell RendererGrid OptiongroupRowInnerRenderergroupRowInnerRendererFramework
Loading Cell RendererGrid OptionloadingCellRendererloadingCellRendererFramework
Loading OverlayGrid OptionloadingOverlayComponentloadingOverlayComponentFramework
No Rows OverlayGrid OptionnoRowsOverlayComponentnoRowsOverlayComponentFramework
Date ComponentGrid OptiondateComponentdateComponentFramework
Status Bar ComponentGrid Option -> Status BarstatusPanelstatusPanelFramework
Cell RendererColumn DefinitioncellRenderercellRendererFramework
Pinned Row Cell RendererColumn DefinitionpinnedRowCellRendererpinnedRowCellRendererFramework
Cell EditorColumn DefinitioncellEditorcellEditorFramework
FilterColumn DefinitionfilterfilterFramework
Floating FilterColumn DefinitionfloatingFilterComponentfloatingFilterComponentFramework
Header ComponentColumn DefinitionheaderComponentheaderComponentFramework
Header Group ComponentColumn DefinitionheaderGroupComponentheaderGroupComponentFramework

Mixing JavaScript and Vue

When providing Custom Components have a choice of the following:

  1. Provide an AG Grid component in JavaScript.
  2. Provide an AG Grid component as an Vue Component.

For example if you want to build a cell renderer you have the choice to build the cell renderer using either Vue or using plain JavaScript.

The following code snippet shows how both JavaScript and Vue Components can be used at the same time:

<template>
  <ag-grid-vue :components="components" 
               :frameworkComponents="frameworkComponents" 
               ...other properties>
  </ag-grid-vue>
</template>

<script>
//...other imports
import {AgGridVue} from "@ag-grid-community/vue";
import JavascriptComponent from './JavascriptComponent.js';
import VueComponent from './VueComponent.vue';

export default {
  components: {
      AgGridVue,
      // Vue components are registered here
      'vueComponent': VueComponent
  }
  data() {
      return {
          // JavaScript components are registered here
          components: [
              // declare the javascript component
              'javascriptComponent': JavascriptComponent
          ],          
          columnDefs: [
               {
                  headerName: "JS Cell",
                  field: "value",
                  cellRenderer: 'javascriptComponent',    // reference/use the javascript component
              },
              {
                  headerName: "Vue Cell",
                  field: "value",
                  cellRendererFramework: 'vueComponent',  // reference/use the Vue component
              }
          ]
      }
  }
  //...other properties & methods
}
</script>

Change the documentation view to JavaScript to see how to create a plain JavaScript component.

Grid Provided Components

The grid comes with pre-registered components that can be used. Each component provided by the grid starts with the namespaces 'ag' to minimise naming conflicts with user provided components. The full list of grid provided components are in the table below.

Date Inputs

agDateInput Default date input used by filters.

Column Headers

agColumnHeader Default column header.
agColumnHeaderGroup Default column group header.

Column Filters

agSetColumnFilter Set filter (default when using AG Grid Enterprise).
agTextColumnFilter Simple text filter (default when using AG Grid Community).
agNumberColumnFilter Number filter.
agDateColumnFilter Date filter.

Floating Filters

agSetColumnFloatingFilter Floating set filter.
agTextColumnFloatingFilter Floating text filter.
agNumberColumnFloatingFilter Floating number filter.
agDateColumnFloatingFilter Floating date filter.

Cell Renderers

agAnimateShowChangeCellRenderer Cell renderer that animates value changes.
agAnimateSlideCellRenderer Cell renderer that animates value changes.
agGroupCellRenderer Cell renderer for displaying group information.
agLoadingCellRenderer Cell editor for loading row when using Enterprise row model.

Overlays

agLoadingOverlay Loading overlay.
agNoRowsOverlay No rows overlay.

Cell Editors

agTextCellEditor Text cell editor.
agSelectCellEditor Select cell editor.
agRichSelectCellEditor Rich select editor.
agPopupTextCellEditor Popup text cell editor.
agPopupSelectCellEditor Popup select cell editor.
agLargeTextCellEditor Large text cell editor.

Master Detail

agDetailCellRenderer Detail panel for master / detail grid.

Overriding Grid Components

It is also possible to override components. Where the grid uses a default value, this means the override component will be used instead. The default components, where overriding makes sense, are as follows:

  • agDateInput: To change the default date selection across all filters.
  • agColumnHeader: To change the default column header across all columns.
  • agColumnGroupHeader: To change the default column group header across all columns.
  • agLoadingCellRenderer: To change the default loading cell renderer for Enterprise Row Model.
  • agLoadingOverlay: To change the default 'loading' overlay.
  • agNoRowsOverlay: To change the default loading 'no rows' overlay.
  • agTextCellEditor: To change the default text cell editor.
  • agDetailCellRenderer: To change the default detail panel for master / detail grids.