ag-grid-vue3-slotted

AG Grid Vue 3 wrapper that lets you render cell content using named Vue slots instead of writing cellRenderer components.

Install

npm install ag-grid-vue3-slotted ag-grid-community ag-grid-vue3
# or
pnpm add ag-grid-vue3-slotted ag-grid-community ag-grid-vue3
# or
yarn add ag-grid-vue3-slotted ag-grid-community ag-grid-vue3

Setup

Register AG Grid modules once in your app entry point (e.g. main.ts):

import { ModuleRegistry, AllCommunityModule } from 'ag-grid-community'

ModuleRegistry.registerModules([AllCommunityModule])

Usage

Instead of importing AgGridVue from ag-grid-vue3, import AgGrid from ag-grid-vue3-slotted — it wraps the original component and adds slot support.

<script setup lang="ts">
import { AgGrid } from 'ag-grid-vue3-slotted'
</script>

<template>
  <AgGrid
    class="ag-theme-alpine"
    style="height: 400px"
    :column-defs="[
      { field: 'name', headerName: 'Name' },
      { field: 'price', headerName: 'Price' },
      { field: 'status', headerName: 'Status' },
      { colId: 'actions', headerName: 'Actions' },
    ]"
    :row-data="[
      { name: 'Widget', price: 9.99, status: 'active' },
      { name: 'Gadget', price: 19.99, status: 'inactive' },
    ]"
  >
    <!-- slot name = col_<field>, receives ICellRendererParams -->
    <template #col_status="{ data }">
      <span :class="data?.status === 'active' ? 'text-green-600' : 'text-red-500'">
        {{ data?.status }}
      </span>
    </template>

    <template #col_price="{ data }">
      <strong>${{ data?.price.toFixed(2) }}</strong>
    </template>

    <!-- slot name = col_<colId> when the column has no field -->
    <template #col_actions="{ data }">
      <button @click="remove(data)">Delete</button>
    </template>
  </AgGrid>
</template>

Slot names follow the pattern col_<field> where <field> matches the field property of the column definition. For columns without a field (e.g. action columns), use col_<colId> where <colId> matches the colId property instead.

Header slots

You can also customize the header label using header_<field> slots. Only the text content of the header is replaced — all AG Grid controls (sort arrow, filter icon, column menu) remain intact.

<!-- slot name = header_<field>, receives IHeaderParams -->
<template #header_status="{ displayName }">
  <em>{{ displayName }} ⚡</em>
</template>

<!-- slot name = header_<colId> when the column has no field -->
<template #header_actions="{ displayName }">
  <em>{{ displayName }}</em>
</template>

Slot names follow the pattern header_<field>, or header_<colId> for columns without a field. The slot receives IHeaderParams from ag-grid-community.

Slot vs explicit renderer priority

If a column definition already has cellRenderer or headerComponent set, it takes priority and the corresponding slot is ignored. Slots are only used when no renderer is defined on the column.

Example

A full working example is available in the example/ directory.

Peer dependencies

| Package | Version | | ------------------- | --------- | | vue | >=3 | | ag-grid-community | >=35 <36| | ag-grid-vue3 | >=35 <36|