Vue Data GridCustom 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 the grid are as follows:

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

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.

Nuxt's auto-import component is not supported with custom components within the grid. Please register any custom components manually as described below.

Custom Components can be registered in two ways:

  • Globally
  • Locally using the components option
  • Locally using defineExpose with script setup

Global Component Registration

import MyCustomerCellEditor from './App.vue'

app.component('MyCustomerCellEditor', MyCustomerCellEditor)

Locally using the components option

import MyCustomerCellEditor from './App.vue'

export default {
  components: {
    MyCustomerCellEditor
  },
  setup() {
    // ...
  }
}

Locally using defineExpose with script setup

<template>
  <ag-grid-vue v-model="rowData"
               :columnDefs="columnDefs"
               ...other props
  >
  </ag-grid-vue>
</template>

<script setup>
import MyCustomerCellEditor from './App.vue'

const columnDefs = ref([
    { field: "make", cellEditor: 'MyCustomerCellEditor' }
]);

...other setup

defineExpose({
    MyCustomerCellEditor    // make MyCustomerCellEditor available to the grid
})
</script>

Providing Additional Parameters

Each Custom Component gets a set of parameters from the grid. For example, for Cell Component the grid provides, among other things, the value to be rendered. You can provide additional properties to the Custom Component (e.g. what currency symbol to use) by providing additional parameters specific to your application.

To provide additional parameters, use the property [prop-name]Params, e.g. cellRendererParams.

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

this.columnDefs = [
    { 
        field: 'price',
        cellRenderer: PriceCellRenderer,
        cellRendererParams: {
            currency: 'EUR'
        }
    },
];

Mixing JavaScript and Vue

When providing Custom Components you 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" 
               ...other properties>
  </ag-grid-vue>
</template>

<script>
//...other imports
import {AgGridVue} from "ag-grid-vue3";
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, for when looking up component by name
          components: {
              // declare the javascript component
              'javascriptComponent': JavascriptComponent
          },          
          columnDefs: [
               {
                  headerName: "JS Cell",
                  field: "value",
                  cellRenderer: JavascriptComponent,    // reference/use the javascript component directly
              },
              {
                  headerName: "Vue Cell",
                  field: "value",
                  cellRenderer: '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.

Child to Parent Communication

There are a variety of ways to manage component communication in Vue (shared service, local variables etc), but you often need a simple way to let a "parent" component know that something has happened on a "child" component. In this case the simplest route is to use the Grid's context feature to hold a reference to the parent, which the child can then access.

// Parent Grid Component
<template>
  <ag-grid-vue :context="context" ...other properties>
  </ag-grid-vue>
</template>

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

export default {
  components: {
      AgGridVue
  }
  data() {
      return {
          context: {}
      }
  },
  beforeMount() {
      this.context = {
          componentParent: this
      }
  },
  methods: {
      parentMethod() {
          // do something
      }
  }
  //...other properties & methods
}
</script>

// Child Grid Component
<template>
  <ag-grid-vue ...other properties>
  </ag-grid-vue>
</template>

<script>
//...other imports

export default {
  methods: {
      doSomethingOnGrid() {
          // the grid component can now be accessed via this.params.context.componentParent
          this.params.context.componentParent.parentMethod()
      }
  }
  //...other properties & methods
}
</script>

Note that although we've used componentParent as the property name here it can be anything - the main point is that you can use the context mechanism to share information between the components.

Component Usage

The below table gives a summary of the components, where they are configured and using what attribute.

ComponentWhereAttribute
Cell ComponentColumn DefinitioncellRenderer
cellRendererParams
cellRendererSelector
Editor ComponentColumn DefinitioncellEditor
cellEditorParams
cellEditorSelector
FilterColumn Definitionfilter
filterParams
Floating FilterColumn DefinitionfloatingFilter
floatingFilterParams
Header ComponentColumn DefinitionheaderComponent
headerComponentParams
Inner Header ComponentColumn DefinitioninnerHeaderComponent
innerHeaderComponentParams
Header Group ComponentColumn DefinitionheaderGroupComponent
headerGroupComponentParams
Inner Header Group ComponentColumn DefinitioninnerHeaderGroupComponent
innerHeaderGroupComponentParams
Tooltip ComponentColumn DefinitiontooltipComponent
tooltipComponentParams
Group Row Cell ComponentGrid OptiongroupRowRenderer
groupRowRendererParams
Group Row Inner Cell ComponentGrid OptioninnerRenderer
innerRendererParams
Detail Cell ComponentGrid OptiondetailCellRenderer
detailCellRendererParams
Full Width Cell ComponentGrid OptionfullWidthCellRenderer
fullWidthCellRendererParams
Loading Cell ComponentGrid Option
Column Definition
loadingCellRenderer
loadingCellRendererParams
Loading OverlayGrid OptionloadingOverlayComponent
loadingOverlayComponentParams
No Rows OverlayGrid OptionnoRowsOverlayComponent
noRowsOverlayComponentParams
Drag and Drop ImageGrid OptiondragAndDropImageComponent
dragAndDropImageComponentParams
Date ComponentGrid OptiondateComponent
dateComponentParams
Status Bar ComponentGrid Option -> Status BarstatusPanel
statusPanelParams
Tool PanelGrid Option -> Side BartoolPanel
toolPanelParams
Menu ItemGrid Option -> MenumenuItem
menuItemParams

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.

Drag And Drop
agDragAndDropImageDefault cover element when grid parts are being dragged
Date Inputs
agDateInputDefault date input used by filters
Column Headers
agColumnHeaderDefault column header
agColumnHeaderGroupDefault column group header
Column Filters
agSetColumnFilter (e)Set filter (default when using AG Grid Enterprise)
agTextColumnFilterSimple text filter (default when using AG Grid Community)
agNumberColumnFilterNumber filter
agDateColumnFilterDate filter
agMultiColumnFilter (e)Multi filter
agGroupColumnFilter (e)Group column filter
Floating Filters
agSetColumnFloatingFilter (e)Floating set filter
agTextColumnFloatingFilterFloating text filter
agNumberColumnFloatingFilterFloating number filter
agDateColumnFloatingFilterFloating date filter
agMultiColumnFloatingFilter (e)Floating multi filter
agGroupColumnFloatingFilter (e)Floating group column filter
Cell Components
agAnimateShowChangeCellRendererCell Component that animates value changes
agAnimateSlideCellRendererCell Component that animates value changes
agGroupCellRendererCell Component for displaying group information
agLoadingCellRenderer (e)Cell Component for loading row when using Enterprise row model
agSkeletonCellRenderer (e)Cell Component for displaying skeleton cells
agCheckboxCellRendererCell Component that displays a checkbox for boolean values
Overlays
agLoadingOverlayLoading overlay
agNoRowsOverlayNo rows overlay
Cell Editors
agTextCellEditorText cell editor
agSelectCellEditorSelect cell editor
agRichSelectCellEditor (e)Rich select editor
agLargeTextCellEditorLarge text cell editor
agNumberCellEditorNumber cell editor
agDateCellEditorDate cell editor
agDateStringCellEditorDate represented as string cell editor
agCheckboxCellEditorCheckbox cell editor
Master Detail
agDetailCellRenderer (e)Detail panel for master / detail grid
Column Menu / Context Menu
agMenuItem (e)Menu item within column or context menu

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:

  • agDragAndDropImage: To change the default drag and drop image when dragging grid parts.
  • 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.
  • agSkeletonCellRenderer: To change the default skeleton loading cell renderer for Enterprise Row Model.
  • agLoadingOverlay: To change the default 'loading' overlay.
  • agNoRowsOverlay: To change the default 'no rows' overlay.
  • agCellEditor: To change the default cell editor.
  • agDetailCellRenderer: To change the default detail panel for master / detail grids.
  • agMenuItem: To change the default menu item for column and context menus.

To override the default component, register the custom component in the GridOptions components property under the above name.

const MyApp = {
    // Here is where we specify the components to be used instead of the default
    components: {
        'ag-grid-vue': AgGridVue
        agDateInput: CustomDateComponent,
        agColumnHeader: CustomHeaderComponent
    },

Overridable grid components are the only components you need to additionally specify with components in order to tie their usage to the actual component. All other registration types specify their usage in column definitions or on the AgGridVue component itself.

For an example of this please refer to the Date Component documentation.