Custom Tool Panel Components can be included into the grid's Side Bar. Implement these when you require more Tool Panels to meet your application requirements.
The example below provides a 'Custom Stats' Tool Panel to demonstrates how to create and register a Custom Tool Panel Component with the grid and include it the Side Bar:
import {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
CellValueChangedEvent,
ClientSideRowModelApiModule,
ClientSideRowModelModule,
ColDef,
ColGroupDef,
EventApiModule,
GridApi,
GridOptions,
GridReadyEvent,
Icons,
ModuleRegistry,
NumberEditorModule,
NumberFilterModule,
RowApiModule,
SideBarDef,
TextEditorModule,
TextFilterModule,
Theme,
enableDevValidations,
iconOverrides,
themeQuartz,
} from "ag-grid-community";
import {
ColumnsToolPanelModule,
FiltersToolPanelModule,
SetFilterModule,
} from "ag-grid-enterprise";
import CustomStatsToolPanel from "./customStatsToolPanelVue";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
ModuleRegistry.registerModules([
ClientSideRowModelApiModule,
NumberEditorModule,
TextEditorModule,
NumberFilterModule,
ClientSideRowModelModule,
ColumnsToolPanelModule,
FiltersToolPanelModule,
SetFilterModule,
TextFilterModule,
RowApiModule,
EventApiModule,
]);
const VueExample = defineComponent({
template: `
<div style="height: 100%">
<div style="height: 100%; box-sizing: border-box">
<ag-grid-vue
style="width: 100%; height: 100%;"
@grid-ready="onGridReady"
:columnDefs="columnDefs"
:theme="theme"
:defaultColDef="defaultColDef"
:icons="icons"
:sideBar="sideBar"
:rowData="rowData"
@cell-value-changed="onCellValueChanged"></ag-grid-vue>
</div>
</div>
`,
components: {
"ag-grid-vue": AgGridVue,
CustomStatsToolPanel,
},
setup(props) {
const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
const columnDefs = ref<ColDef[]>([
{ field: "athlete", width: 150, filter: "agTextColumnFilter" },
{ field: "age", width: 90 },
{ field: "country", width: 120 },
{ field: "year", width: 90 },
{ field: "date", width: 110 },
{ field: "gold", width: 100, filter: false },
{ field: "silver", width: 100, filter: false },
{ field: "bronze", width: 100, filter: false },
{ field: "total", width: 100, filter: false },
]);
const theme = ref<Theme | "legacy">(
themeQuartz.withPart(
iconOverrides({
type: "image",
mask: true,
icons: {
// map of icon names to images
"custom-stats": {
svg: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><g stroke="#7F8C8D" fill="none" fill-rule="evenodd"><path d="M10.5 6V4.5h-5v.532a1 1 0 0 0 .36.768l1.718 1.432a1 1 0 0 1 0 1.536L5.86 10.2a1 1 0 0 0-.36.768v.532h5V10"/><rect x="1.5" y="1.5" width="13" height="13" rx="2"/></g></svg>',
},
},
}),
),
);
const defaultColDef = ref<ColDef>({
editable: true,
flex: 1,
minWidth: 100,
filter: true,
});
const icons = ref<Icons>({
"custom-stats": '<span class="ag-icon ag-icon-custom-stats"></span>',
});
const sideBar = ref<SideBarDef | string | string[] | boolean | null>({
toolPanels: [
{
id: "columns",
labelDefault: "Columns",
labelKey: "columns",
iconKey: "columns",
toolPanel: "agColumnsToolPanel",
},
{
id: "filters",
labelDefault: "Filters",
labelKey: "filters",
iconKey: "filter",
toolPanel: "agFiltersToolPanel",
},
{
id: "customStats",
labelDefault: "Custom Stats",
labelKey: "customStats",
iconKey: "custom-stats",
toolPanel: "CustomStatsToolPanel",
toolPanelParams: {
title: "Custom Stats",
},
},
],
defaultToolPanel: "customStats",
});
const rowData = ref<IOlympicData[]>(null);
function onCellValueChanged(params: CellValueChangedEvent) {
params.api.refreshClientSideRowModel();
}
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,
theme,
defaultColDef,
icons,
sideBar,
rowData,
onGridReady,
onCellValueChanged,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
export default {
template: `
<div style="text-align: center">
<span>
<h2><i class="fa fa-calculator"></i> {{ title }}</h2>
<dl style="font-size: large; padding: 30px 40px 10px 30px">
<dt style="padding-bottom: 15px">Total Medals: <b>{{ numGold + numSilver + numBronze }}</b></dt>
<dt style="padding-bottom: 15px">Total Gold: <b>{{ numGold }}</b></dt>
<dt style="padding-bottom: 15px">Total Silver: <b>{{ numSilver }}</b></dt>
<dt style="padding-bottom: 15px">Total Bronze: <b>{{ numBronze }}</b></dt>
</dl>
</span>
</div>
`,
data() {
return {
numGold: 0,
numSilver: 0,
numBronze: 0,
title: undefined,
};
},
methods: {
renderStats() {
let numGold = 0;
let numSilver = 0;
let numBronze = 0;
this.title = this.params.title;
this.params.api.forEachNode((rowNode) => {
const data = rowNode.data;
if (data.gold) numGold += data.gold;
if (data.silver) numSilver += data.silver;
if (data.bronze) numBronze += data.bronze;
});
this.numGold = numGold;
this.numSilver = numSilver;
this.numBronze = numBronze;
},
},
created() {
this.params.api.addEventListener('modelUpdated', this.renderStats.bind(this));
},
};
Implementing a Tool Panel Component Copy Link
Any valid Vue component can be a tool panel component, however it is also possible to implement the following optional methods:
interface IToolPanel {
// Called when `api.refreshToolPanel()` is called (with the current params).
// Also called when the `sideBar` grid option is updated, and when `api.setState`
// restores side bar state (with the updated params).
// When `sideBar` is updated or state is restored, if this method returns `true`,
// then the grid will take no further action.
// Otherwise, the tool panel will be destroyed and recreated.
refresh(params: IToolPanelParams): boolean | void;
// If saving and restoring state, this should return the current state
getState(): any;
}When a custom tool panel component is instantiated then the following will be made available on this.params:
Properties available on the IToolPanelParams<TData = any, TContext = any, TState = any> interface.
If tool panel is saving and restoring state, this should be called after the state is updated |
The tool panel state to apply, if applicable. Provided from initialState in the grid options, and again with each api.setState restore that includes side bar state.
|
The grid api. |
Application context as set on gridOptions.context. |
Registering Tool Panel Components Copy Link
Registering a Tool Panel component follows the same approach as any other custom components in the grid. For more details see: Registering Custom Components.
Once the Tool Panel Component is registered with the grid it needs to be included into the Side Bar. The following snippet illustrates this:
this.gridOptions: {
sideBar: {
toolPanels: [
{
id: 'customStats',
labelDefault: 'Custom Stats',
labelKey: 'customStats',
iconKey: 'custom-stats',
toolPanel: 'customStatsToolPanel',
toolPanelParams: {
// can pass any custom params here
},
}
]
},
// other grid properties
}For more details on the configuration properties above, refer to the Side Bar Configuration section.