Vue Data GridCustom Detail

vue logo
Enterprise

When a Master Row is expanded, the grid uses the default Detail Cell Renderer to create and display the Detail Grid inside one row of the Master Grid. You can provide a custom Detail Cell Renderer to display something else if the default Detail Cell Renderer doesn't do what you want.

Configure the grid to use a custom Detail Cell Renderer using the grid property detailCellRenderer.

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

// normally left blank, the grid will use the default Detail Cell Renderer
this.detailCellRenderer = 'myCellRendererComp';

// params sent to the Detail Cell Renderer, in this case your MyCellRendererComp
this.detailCellRendererParams = {};

The Detail Cell Renderer should be a Cell Renderer component. See Cell Renderer on how to build and register a Cell Renderer with the grid.

The following examples demonstrate minimalist custom Detail Cell Renderer. Note that where a Detail Grid would normally appear, only the message "My Custom Detail" is shown.

Custom Detail With Form

It is not mandatory to display a grid inside the detail section. As you are providing a custom component, there are no restrictions as to what can appear inside the custom component.

This example shows a custom Detail Cell Renderer that uses a form rather than a grid.

Custom Detail With Grid

It is possible to provide a Custom Detail Grid that does a similar job to the default Detail Cell Renderer. This example demonstrates displaying a custom grid as the detail.

Register Detail Grid

In order for the Detail Grid's API to be available via the Master Grid as explained in Accessing Detail Grids, a Grid Info object needs to be registered with the Master Grid.