Vue Data GridColumns Tool Panel - Customisation

Version 36.3.0

Customise how columns appear in the Columns Tool Panel: their styling and names, custom label renderers, expanding and collapsing column groups, the context menu and the drag image.

Styling Columns Copy Link

The example below styles the gold, silver and bronze columns using toolPanelClass.

main.ts

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  AutoGroupColumnDef,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  HeaderValueGetterParams,
  ModuleRegistry,
  NumberFilterModule,
  SideBarDef,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  PivotModule,
  RowGroupingPanelModule,
  SetFilterModule,
} from "ag-grid-enterprise";
import "./styles.css";
import { IOlympicData } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  NumberFilterModule,
  ClientSideRowModelModule,
  ColumnsToolPanelModule,
  ColumnMenuModule,
  ContextMenuModule,
  SetFilterModule,
  PivotModule,
  RowGroupingPanelModule,
]);

function countryHeaderValueGetter(params: HeaderValueGetterParams) {
  switch (params.location) {
    case "csv":
      return "CSV Country";
    case "columnToolPanel":
      return "TP Country";
    case "columnDrop":
      return "CD Country";
    case "header":
      return "H Country";
    default:
      return "Should never happen!";
  }
}

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :autoGroupColumnDef="autoGroupColumnDef"
      :sideBar="sideBar"
      :rowGroupPanelShow="rowGroupPanelShow"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<ColDef[]>([
      {
        field: "athlete",
        minWidth: 200,
        enableRowGroup: true,
        enablePivot: true,
      },
      {
        field: "age",
        enableValue: true,
      },
      {
        field: "country",
        minWidth: 200,
        enableRowGroup: true,
        enablePivot: true,
        headerValueGetter: countryHeaderValueGetter,
      },
      {
        field: "year",
        enableRowGroup: true,
        enablePivot: true,
      },
      {
        field: "date",
        minWidth: 180,
        enableRowGroup: true,
        enablePivot: true,
      },
      {
        field: "sport",
        minWidth: 200,
        enableRowGroup: true,
        enablePivot: true,
      },
      {
        field: "gold",
        hide: true,
        enableValue: true,
        toolPanelClass: "tp-gold",
      },
      {
        field: "silver",
        hide: true,
        enableValue: true,
        toolPanelClass: ["tp-silver"],
      },
      {
        field: "bronze",
        hide: true,
        enableValue: true,
        toolPanelClass: (params) => {
          return "tp-bronze";
        },
      },
      {
        headerName: "Total",
        field: "total",
      },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
      filter: true,
    });
    const autoGroupColumnDef = ref<AutoGroupColumnDef>({
      minWidth: 200,
    });
    const sideBar = ref<SideBarDef | string | string[] | boolean | null>(
      "columns",
    );
    const rowGroupPanelShow = ref<"always" | "onlyWhenGrouping" | "never">(
      "always",
    );
    const rowData = ref<IOlympicData[]>(null);

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => (rowData.value = data);

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      autoGroupColumnDef,
      sideBar,
      rowGroupPanelShow,
      rowData,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");

To add a CSS class to a column in the tool panel, set toolPanelClass on its column definition:

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

this.columnDefs = [
    // set as string
    { field: 'gold', toolPanelClass: 'tp-gold' },

    // set as array of strings
    { field: 'silver', toolPanelClass: ['tp-silver'] },

    // set as function returning string or array of strings
    {
        field: 'bronze',
        toolPanelClass: params => {
            return 'tp-bronze';
        },
    }
];

Naming Columns Copy Link

To give a column a different name in the tool panel, use a headerValueGetter and return the name when params.location is 'columnToolPanel':

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

this.columnDefs = [
    {
        field: 'country',
        headerValueGetter: params => params.location === 'columnToolPanel' ? 'Country (TP)' : 'Country',
    }
];

In the example above, the country column uses a headerValueGetter to show a different name in the tool panel, the drop zones and the grid header. Drag it into the Row Groups section to see the drop zone name.

Custom Label Renderers Copy Link

Use columnLabelRenderer to replace the text shown for columns and column groups in the Columns section. The grid continues to provide and manage the checkbox, drag handle and group expand controls.

Supply the renderer directly, or reference a name registered in the grid's components map, and pass additional properties through columnLabelRendererParams. To use different renderers for different columns or column groups, use columnLabelRendererSelector instead.

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

this.components = {
    customColumnLabel: CustomColumnLabel,
};
this.sideBar = {
    toolPanels: [{
        id: 'columns',
        labelDefault: 'Columns',
        labelKey: 'columns',
        iconKey: 'columns',
        toolPanel: 'agColumnsToolPanel',
        toolPanelParams: {
            columnLabelRenderer: 'customColumnLabel',
            columnLabelRendererParams: {
                columnIcon: '●',
                columnGroupIcon: '◆',
            },
        },
    }],
};

The renderer receives either column or columnGroup, together with the resolved displayName and a source of 'columnsToolPanel'. The same renderer can be configured independently for the Column Chooser.

main.ts

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  Components,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  SideBarDef,
  enableDevValidations,
} from "ag-grid-community";
import { ColumnsToolPanelModule } from "ag-grid-enterprise";
import "./styles.css";
import CustomColumnLabel from "./customColumnLabelVue";

if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  ColumnsToolPanelModule,
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="example-wrapper">
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        @grid-ready="onGridReady"
        :columnDefs="columnDefs"
        :rowData="rowData"
        :defaultColDef="defaultColDef"
        :sideBar="sideBar"></ag-grid-vue>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
    customColumnLabel: CustomColumnLabel,
    CustomColumnLabel,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<(ColDef | ColGroupDef)[]>([
      {
        headerName: "Athlete Details",
        groupId: "athleteDetails",
        children: [
          { field: "athlete" },
          { field: "country" },
          { field: "sport" },
        ],
      },
      {
        headerName: "Results",
        groupId: "results",
        children: [{ field: "gold" }, { field: "silver" }, { field: "bronze" }],
      },
    ]);
    const rowData = ref<any[] | null>([
      {
        athlete: "Michael Phelps",
        country: "United States",
        sport: "Swimming",
        gold: 8,
        silver: 0,
        bronze: 0,
      },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 120,
    });
    const sideBar = ref<SideBarDef | string | string[] | boolean | null>({
      toolPanels: [
        {
          id: "columns",
          labelDefault: "Columns",
          labelKey: "columns",
          iconKey: "columns",
          toolPanel: "agColumnsToolPanel",
          toolPanelParams: {
            columnLabelRenderer: "customColumnLabel",
            columnLabelRendererParams: {
              columnIcon: "●",
              columnGroupIcon: "◆",
            },
          },
        },
      ],
      defaultToolPanel: "columns",
    });

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;
    };

    return {
      gridApi,
      columnDefs,
      rowData,
      defaultColDef,
      sideBar,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");

Column search, tooltips, drag labels and accessibility announcements continue to use displayName, rather than text extracted from the renderer. Column selection rows have a fixed height, so renderer content should remain inline and fit within the configured list item height. Clicking the rendered label retains the normal selection behaviour; interactive elements should stop event propagation when they should not toggle the column.

Expand / Collapse Column Groups Copy Link

Call expandColumnGroups() and collapseColumnGroups() on the Columns Tool Panel instance to expand or collapse all of its column groups, or pass groupIds to target individual groups; see Expand / Collapse API. To start with all column groups collapsed, set contractColumnSelection in toolPanelParams instead.

boolean

By default, column groups start expanded. Pass true to start with groups collapsed.

In the example below, onGridReady collapses all column groups in the tool panel. Use the buttons to try each call from the Expand / Collapse API.

main.ts

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  AutoGroupColumnDef,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberFilterModule,
  SideBarDef,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  PivotModule,
  SetFilterModule,
} from "ag-grid-enterprise";
import "./styles.css";
import { IOlympicData } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  NumberFilterModule,
  ClientSideRowModelModule,
  ColumnsToolPanelModule,
  ColumnMenuModule,
  ContextMenuModule,
  SetFilterModule,
  PivotModule,
  TextFilterModule,
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="example-wrapper">
      <div>
        <span class="button-group">
          <button v-on:click="expandAllGroups()">Expand All</button>
          <button v-on:click="collapseAllGroups()">Collapse All</button>
          <button v-on:click="expandAthleteAndCompetitionGroups()">Expand Athlete &amp; Competition</button>
          <button v-on:click="collapseCompetitionGroups()">Collapse Competition</button>
        </span>
      </div>
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        @grid-ready="onGridReady"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :autoGroupColumnDef="autoGroupColumnDef"
        :sideBar="sideBar"
        :rowData="rowData"></ag-grid-vue>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<(ColDef | ColGroupDef)[]>([
      {
        groupId: "athleteGroupId",
        headerName: "Athlete",
        children: [
          {
            headerName: "Name",
            field: "athlete",
            minWidth: 200,
            filter: "agTextColumnFilter",
          },
          {
            groupId: "competitionGroupId",
            headerName: "Competition",
            children: [{ field: "year" }, { field: "date", minWidth: 180 }],
          },
        ],
      },
      {
        groupId: "medalsGroupId",
        headerName: "Medals",
        children: [
          { field: "gold" },
          { field: "silver" },
          { field: "bronze" },
          { field: "total" },
        ],
      },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
      // allow every column to be aggregated
      enableValue: true,
      // allow every column to be grouped
      enableRowGroup: true,
      // allow every column to be pivoted
      enablePivot: true,
      filter: true,
    });
    const autoGroupColumnDef = ref<AutoGroupColumnDef>({
      minWidth: 200,
    });
    const sideBar = ref<SideBarDef | string | string[] | boolean | null>(
      "columns",
    );
    const rowData = ref<IOlympicData[]>(null);

    function expandAllGroups() {
      const columnsToolPanel = gridApi.value!.getToolPanelInstance("columns")!;
      columnsToolPanel.expandColumnGroups();
    }
    function collapseAllGroups() {
      const columnsToolPanel = gridApi.value!.getToolPanelInstance("columns")!;
      columnsToolPanel.collapseColumnGroups();
    }
    function expandAthleteAndCompetitionGroups() {
      const columnsToolPanel = gridApi.value!.getToolPanelInstance("columns")!;
      columnsToolPanel.expandColumnGroups([
        "athleteGroupId",
        "competitionGroupId",
      ]);
    }
    function collapseCompetitionGroups() {
      const columnsToolPanel = gridApi.value!.getToolPanelInstance("columns")!;
      columnsToolPanel.collapseColumnGroups(["competitionGroupId"]);
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const columnsToolPanel = params.api.getToolPanelInstance("columns")!;
      columnsToolPanel.collapseColumnGroups();

      const updateData = (data) => (rowData.value = data);

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      autoGroupColumnDef,
      sideBar,
      rowData,
      onGridReady,
      expandAllGroups,
      collapseAllGroups,
      expandAthleteAndCompetitionGroups,
      collapseCompetitionGroups,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");

The expanded column groups are saved and restored as part of Grid State.

Right-clicking or long-pressing a column or column group label opens a menu with items for moving, grouping, aggregating and pivoting. The menu can be customised, including with custom menu items.

The following menu items are shown by default based on the column's configuration and the grid's current state:

scrollIntoView: "Scroll column into View". Scrolls the column into view. Hidden while pivoting, or when the column is pinned or hidden.
rowGroup: "Group by column" or "Un-Group by column". Appears only when the column allows row grouping.
value: "Add column to values" or "Remove column from values". Adds or removes the column as an aggregated value (the Values section). Appears only when the column allows aggregation.
pivot: "Add column to labels" or "Remove column from labels". Adds or removes the column as a pivot column label (the Column Labels section). Appears only in pivot mode when the column allows pivoting.
moveUp: "Move Up". Moves the column or group one available position up the list.
moveDown: "Move Down". Moves the column or group one available position down the list.

For a column group, rowGroup, value and pivot apply to every child column that individually allows the action; scrollIntoView scrolls only the first visible child column into view.

The move items also appear in the Column Chooser. They are hidden in pivot mode but are unaffected by functionsReadOnly.

Movement follows Column Moving and tool panel reordering restrictions. In deferred mode, changes wait for Apply.

Customise labels using the moveUp / moveDown locale keys and arrows using the menuMoveUp / menuMoveDown icon keys.

With Read Only Functions, rowGroup, value and pivot are not shown.

Customise the menu items with colDef.columnMenuItems or getColumnMenuItems(). See Column Menu - Customising the menu items. The callback's params.source is 'columnsToolPanel' when triggered from the Columns Tool Panel.

The example below shows both the built-in items and this customisation. Note the following:

Right-click Gold to see the built-in items plus an optional pinning sub-menu and a custom Highlight Column item, added by the getColumnMenuItems() callback.
Silver hides the "Scroll Silver into View" item via a colDef.columnMenuItems callback. As colDef.columnMenuItems takes priority over getColumnMenuItems(), Silver doesn't get the Highlight Column item.
Bronze restricts its menu to only "Add Bronze to values" via a static colDef.columnMenuItems array, so it doesn't get the Highlight Column item either.
colDef.columnMenuItems applies to every column menu, so the Silver and Bronze changes also apply to their column header menu and Column Chooser menu. Other columns keep their defaults in those menus, as getColumnMenuItems() returns params.defaultItems for those sources.

main.ts

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  CellStyleModule,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GetColumnMenuItems,
  GridApi,
  GridOptions,
  GridReadyEvent,
  MenuItemDef,
  ModuleRegistry,
  RowApiModule,
  SideBarDef,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  ColumnsToolPanelModule,
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
  CellStyleModule,
  RowApiModule,
]);

const highlightedColumns = new Set<string>();

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :sideBar="sideBar"
      :getColumnMenuItems="getColumnMenuItems"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "athlete", minWidth: 200, enableRowGroup: true },
      { field: "age", enableValue: true },
      { field: "country", minWidth: 200, enableRowGroup: true },
      { field: "year", enableRowGroup: true },
      { field: "sport", minWidth: 200, enableRowGroup: true },
      { field: "gold", enableValue: true },
      {
        field: "silver",
        enableValue: true,
        // column-level override: hide the "Scroll into View" item for this column only.
        // colDef.columnMenuItems takes priority over getColumnMenuItems, so silver and
        // bronze don't get the Highlight Column item added below.
        columnMenuItems: (params) =>
          params.defaultItems.filter((item) => item !== "scrollIntoView"),
      },
      // column-level override: only ever show the "Add to values" item
      { field: "bronze", enableValue: true, columnMenuItems: ["value"] },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 150,
      cellStyle: (params) =>
        highlightedColumns.has(params.column.getColId())
          ? { backgroundColor: "rgba(255, 193, 7, 0.25)" }
          : null,
    });
    const sideBar = ref<SideBarDef | string | string[] | boolean | null>(
      "columns",
    );
    const getColumnMenuItems = ref<GetColumnMenuItems>((params) => {
      // Customise the Columns Tool Panel menu
      if (params.source === "columnsToolPanel") {
        const colId = params.column?.getColId();
        const highlightColumn: MenuItemDef = {
          name: "Highlight Column",
          checked: colId ? highlightedColumns.has(colId) : false,
          action: () => {
            if (!colId) return;
            if (highlightedColumns.has(colId)) {
              highlightedColumns.delete(colId);
            } else {
              highlightedColumns.add(colId);
            }
            // Redraw rows so cellStyle re-evaluates on fresh cells
            params.api.redrawRows();
          },
        };
        // Append an optional pinning sub-menu and a custom item to the built-in tool panel items
        return [
          ...params.defaultItems,
          "separator",
          "pinSubMenu",
          highlightColumn,
        ];
      }
      // Return default for column header menu and column picker
      return params.defaultItems;
    });
    const rowData = ref<IOlympicData[]>(null);

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => (rowData.value = data);

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      sideBar,
      getColumnMenuItems,
      rowData,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");

Drop Zone Menus Copy Link

Move Up and Move Down reorder pills within Row Groups, Values and Column Labels, not grid columns. Horizontal panels use Move Left and Move Right.

Right-click a pill to open its menu. With a pill focused, ⇧ Shift+F10 or the context-menu key opens the same menu.

Move items follow drag-and-drop eligibility and group locking. They are hidden with functionsReadOnly, but pivot mode and column-layout restrictions do not block them.

Labels use the moveUp, moveDown, moveLeft, moveRight locale keys; arrows use the menuMoveUp, menuMoveDown, menuMoveLeft, menuMoveRight icon keys.

Use getColumnDropZoneMenuItems to filter defaultItems, add custom items or return [] to hide a menu. Its source is 'rowGroup', 'pivot' or 'aggregation'. For example, hide the Values menu and keep the others:

const gridOptions = {
    getColumnDropZoneMenuItems: ({ source, defaultItems }) =>
        source === 'aggregation' ? [] : defaultItems,
};

Keep the callback free of side effects; it may run before the menu opens. Column-menu callbacks do not configure drop-zone menus.

GetColumnDropZoneMenuItems

Customise the context menu for pills in Row Group, Pivot and Values drop zones. Return [] to hide it. Called when pills are created to determine menu availability for accessibility, and when opening a menu. Independent of columnMenuItems and getColumnMenuItems.

RowGroupingPanelModule

Available in any of

RowGroupingPanelModule

ColumnsToolPanelModule

Custom Drag and Drop Image Copy Link

The drag and drop image can be customised via the grid properties dragAndDropImageComponent and dragAndDropImageComponentParams.

main.ts

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberFilterModule,
  SideBarDef,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  FiltersToolPanelModule,
  PivotModule,
  RowGroupingPanelModule,
  SetFilterModule,
} from "ag-grid-enterprise";
import "./styles.css";
import CustomDragAndDropImage from "./customDragAndDropImageVue";
import { IOlympicData } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  NumberFilterModule,
  ClientSideRowModelModule,
  ColumnsToolPanelModule,
  FiltersToolPanelModule,
  ColumnMenuModule,
  ContextMenuModule,
  PivotModule,
  SetFilterModule,
  RowGroupingPanelModule,
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :sideBar="true"
      :rowGroupPanelShow="rowGroupPanelShow"
      :dragAndDropImageComponent="dragAndDropImageComponent"
      :dragAndDropImageComponentParams="dragAndDropImageComponentParams"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
    CustomDragAndDropImage,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "athlete" },
      { field: "country" },
      { field: "year", width: 100 },
      { field: "date" },
      { field: "sport" },
      { field: "gold" },
      { field: "silver" },
      { field: "bronze" },
    ]);
    const defaultColDef = ref<ColDef>({
      width: 170,
      filter: true,
      // allow every column to be aggregated
      enableValue: true,
      // allow every column to be grouped
      enableRowGroup: true,
      // allow every column to be pivoted
      enablePivot: true,
    });
    const rowGroupPanelShow = ref<"always" | "onlyWhenGrouping" | "never">(
      "always",
    );
    const dragAndDropImageComponent = ref("CustomDragAndDropImage");
    const dragAndDropImageComponentParams = ref({
      accentColour: "SlateGray",
    });
    const rowData = ref<IOlympicData[]>(null);

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => (rowData.value = data);

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      rowGroupPanelShow,
      dragAndDropImageComponent,
      dragAndDropImageComponentParams,
      rowData,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");

Any valid Vue component can be a drag and drop image component, however it must implement the IDragAndDropImage interface:

IDragAndDropImage Copy Link


interface IDragAndDropImage {
  setIcon(iconName: string | null, shake: boolean): void;

  setLabel(label: string): void;

}

Custom Params Copy Link

On top of the parameters provided by the grid, you can also provide your own parameters. This is useful if you want to allow configuring the component. For example, you might have parts of the grid that you want to highlight with a different colour. The example above passes its own parameters through dragAndDropImageComponentParams.

const gridOptions = {
    dragAndDropImageComponent: 'MyDragAndDropImageComponent',
    dragAndDropImageComponentParams : {
        accentColour: 'SlateGray'
    }
}

API Copy Link

Custom Label Renderer Parameters Copy Link

any

Component used to render column and column group labels. The checkbox, drag handle and expand controls remain grid managed.

any

Additional parameters passed to the columnLabelRenderer.

ColumnSelectionLabelRendererSelectorFunc

Callback to select which renderer to use for an individual column or column group label. The result can also provide renderer-specific params. Return undefined to use columnLabelRenderer.

The parameters passed to a custom label renderer:

Properties available on the IColumnSelectionLabelRendererParams<TData = any, TContext = any> interface.

string | null

The text value resolved from the column or column group definition.

Column | null

The column being rendered, or null when rendering a column group.

ProvidedColumnGroup | null

The column group being rendered, or null when rendering a column.

ColumnSelectionPanelSource

The panel in which the label is rendered.

GridApi

The grid api.

TContext

Application context as set on gridOptions.context.

Expand / Collapse API Copy Link

const columnsToolPanel = this.gridApi.getToolPanelInstance('columns');

// expands all column groups in the Columns Tool Panel
columnsToolPanel.expandColumnGroups();

// collapses all column groups in the Columns Tool Panel
columnsToolPanel.collapseColumnGroups();

// expands the 'Athlete' and 'Competition' column groups in the Columns Tool Panel
columnsToolPanel.expandColumnGroups(['athleteGroupId', 'competitionGroupId']);

// collapses the 'Competition' column group in the Columns Tool Panel
columnsToolPanel.collapseColumnGroups(['competitionGroupId']);

Function

Expands the column groups with the supplied groupIds, or all column groups if not supplied.

Function

Collapses the column groups with the supplied groupIds, or all column groups if not supplied.

Getting Started

AI Features

Layout & Styling

Charting

Core Features

Advanced Features

Vue Data GridColumns Tool Panel - Customisation

Styling Columns Copy Link

Naming Columns Copy Link

Custom Label Renderers Copy Link

Expand / Collapse Column Groups Copy Link

Context Menu Copy Link

Built-In Menu Items Copy Link

Custom Menu Items Copy Link

Drop Zone Menus Copy Link

Custom Drag and Drop Image Copy Link

IDragAndDropImage Copy Link

Custom Params Copy Link

API Copy Link

Custom Label Renderer Parameters Copy Link

Expand / Collapse API Copy Link