Applications can display an overlay on demand regardless of grid state. This is achieved by providing an active overlay which can be one of the provided overlays or be a custom overlay component.
import { createApp, defineComponent, ref, shallowRef } from "vue";
import type { ColDef, GridApi, GridReadyEvent } from "ag-grid-community";
import {
ClientSideRowModelModule,
ModuleRegistry,
enableDevValidations,
} from "ag-grid-community";
import { AgGridVue } from "ag-grid-vue3";
import { CustomOverlay } from "./customOverlay";
import "./styles.css";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
ModuleRegistry.registerModules([ClientSideRowModelModule]);
interface IAthlete {
athlete: string;
country: string;
}
const VueExample = defineComponent({
template: `<div class="example-wrapper">
<div class="button-row">
<button v-on:click="showActiveOverlay()">Show custom overlay</button>
<button v-on:click="clearActiveOverlay()">Hide custom overlay</button>
<button v-on:click="incrementParam()">Increment Param</button>
</div>
<ag-grid-vue
class="grid-wrapper"
:columnDefs="columnDefs"
:rowData="rowData"
:activeOverlay="activeOverlay"
:activeOverlayParams="activeOverlayParams"
/>
</div>`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const columnDefs = ref<ColDef[]>([
{ field: "athlete", flex: 1 },
{ field: "country", flex: 1 },
]);
const rowData = ref<IAthlete[] | null>([
{ athlete: "Michael Phelps", country: "United States" },
{ athlete: "Natalie Coughlin", country: "United States" },
{ athlete: "Aleksey Nemov", country: "Russia" },
{ athlete: "Alicia Coutts", country: "Australia" },
]);
const activeOverlay = shallowRef<any>(CustomOverlay);
const activeOverlayParams = ref<{ count: number }>({ count: 1 });
function showActiveOverlay() {
activeOverlay.value = CustomOverlay;
}
function clearActiveOverlay() {
activeOverlay.value = undefined;
}
function incrementParam() {
activeOverlayParams.value.count++;
}
return {
columnDefs,
rowData,
activeOverlay,
activeOverlayParams,
showActiveOverlay,
clearActiveOverlay,
incrementParam,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
.example-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.button-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
padding: 12px;
}
.button-row button {
padding: 4px 12px;
}
.grid-wrapper {
flex: 1 1 0;
min-height: 0;
}
.my-custom-overlay {
padding: 16px;
font-size: 32px;
background: rgba(0, 0, 0, 0.1);
border-radius: 20px;
}
import { ref, watch } from "vue";
import type { IOverlayComp, IOverlayParams } from "ag-grid-community";
export interface CustomParams {
count: number;
}
export const CustomOverlay = {
template: `<div class="my-custom-overlay">Custom Overlay: {{ count }}</div>`,
data: function () {
return {
count: 1,
};
},
beforeMount() {
this.count = this.params.count;
},
methods: {
refresh(params) {
this.count = params.count;
return true;
},
},
};
Display an Active Overlay Copy Link
To display an overlay on demand set the activeOverlay / activeOverlayParams grid option. To clear the overlay set activeOverlay = undefined.
Display an overlay on demand. If provided takes precedence over the grid provided overlays. agLoadingOverlay, agNoRowsOverlay, agNoMatchingRowsOverlay, agExportingOverlay components map. undefined to clear. |
Custom parameters to be supplied to the activeOverlay component in addition to IOverlayParams. Updating the params will trigger a refresh of the active overlay. |
Any valid Vue component can be used, however the optional IOverlay interface exposes lifecycle hooks that receive IOverlayParams.
interface IOverlay<TData = any, TContext = any, TParams extends Readonly<IOverlayParams<TData, TContext>> = IOverlayParams<TData, TContext>> {
// Gets called when the `overlayComponentParams` grid option is updated
refresh?(params: TParams): void;
}The example below demonstrates using the grid provided overlays as an active overlay. Note the following:
- activeOverlays take precedence over the provided loading overlay.
- activeOverlay can be displayed no matter what the grid state, i.e showing the no-rows overlay even when there are rows.
- StatusOverlay is registered in the components map and shown by setting
activateOverlay = "statusOverlay"to the key used.
import { createApp, defineComponent, ref } from "vue";
import type { ColDef } from "ag-grid-community";
import {
ClientSideRowModelModule,
ModuleRegistry,
enableDevValidations,
} from "ag-grid-community";
import { AgGridVue } from "ag-grid-vue3";
import { StatusOverlay } from "./statusOverlay";
import "./styles.css";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
ModuleRegistry.registerModules([ClientSideRowModelModule]);
interface Athlete {
athlete: string;
country: string;
}
const columnDefs: ColDef<Athlete>[] = [
{ field: "athlete", flex: 1 },
{ field: "country", flex: 1 },
];
const rowData: Athlete[] = [
{ athlete: "Michael Phelps", country: "United States" },
{ athlete: "Alicia Coutts", country: "Australia" },
];
const VueExample = defineComponent({
components: {
"ag-grid-vue": AgGridVue,
},
template: `
<div class="example-wrapper">
<div class="button-row">
<label class="toggle loading-toggle">
<input type="checkbox" :checked="loading === true" @change="onLoadingToggle" /> Loading
</label>
<button type="button" @click="showNoRowsOverlay">activeOverlay = agNoRowsOverlay</button>
<button type="button" @click="showCustomOverlay">activeOverlay = CustomOverlay</button>
<button type="button" @click="clearOverlay">Hide activeOverlay</button>
</div>
<ag-grid-vue
class="grid-wrapper"
:columnDefs="columnDefs"
:rowData="rowData"
:components="components"
:loading="loading"
:activeOverlay="activeOverlay"
/>
</div>
`,
setup() {
const activeOverlay = ref<string | undefined>();
const loading = ref<boolean | undefined>(undefined);
const components = { statusOverlay: StatusOverlay };
const showNoRowsOverlay = () => {
activeOverlay.value = "agNoRowsOverlay";
};
const showCustomOverlay = () => {
activeOverlay.value = "statusOverlay";
};
const clearOverlay = () => {
activeOverlay.value = undefined;
};
const onLoadingToggle = (event: Event) => {
const checked = (event.target as HTMLInputElement).checked;
loading.value = checked ? true : undefined;
};
return {
columnDefs,
rowData,
components,
activeOverlay,
loading,
onLoadingToggle,
showNoRowsOverlay,
showCustomOverlay,
clearOverlay,
};
},
});
createApp(VueExample).mount("#app");
.example-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.button-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
padding: 12px;
}
.button-row button {
padding: 4px 12px;
}
.button-row .loading-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 600;
user-select: none;
}
.grid-wrapper {
flex: 1 1 0;
min-height: 0;
}
.status-overlay {
padding: 16px;
border-radius: 16px;
border: 3px solid pink;
font-size: 32px;
}
export interface StatusOverlayParams {
myCounter?: number;
}
export const StatusOverlay = {
template: `<div class="status-overlay">Custom</div>`,
};