if (typeof window !== 'undefined') {
var waitSeconds = 100;
var head = document.getElementsByTagName('head')[0];
var isWebkit = !!window.navigator.userAgent.match(/AppleWebKit\/([^ ;]*)/);
var webkitLoadCheck = function (link, callback) {
setTimeout(function () {
for (var i = 0; i < document.styleSheets.length; i++) {
var sheet = document.styleSheets[i];
if (sheet.href == link.href) return callback();
}
webkitLoadCheck(link, callback);
}, 10);
};
var cssIsReloadable = function cssIsReloadable(links) {
// Css loaded on the page initially should be skipped by the first
// systemjs load, and marked for reload
var reloadable = true;
forEach(links, function (link) {
if (!link.hasAttribute('data-systemjs-css')) {
reloadable = false;
link.setAttribute('data-systemjs-css', '');
}
});
return reloadable;
};
var findExistingCSS = function findExistingCSS(url) {
// Search for existing link to reload
var links = head.getElementsByTagName('link');
return filter(links, function (link) {
return link.href === url;
});
};
var noop = function () {};
var loadCSS = function (url, existingLinks) {
const stylesUrl = url.includes('styles.css') || url.includes('style.css');
return new Promise((outerResolve, outerReject) => {
setTimeout(
() => {
new Promise(function (resolve, reject) {
var timeout = setTimeout(function () {
reject('Unable to load CSS');
}, waitSeconds * 1000);
var _callback = function (error) {
clearTimeout(timeout);
link.onload = link.onerror = noop;
setTimeout(function () {
if (error) {
reject(error);
outerReject(error);
} else {
resolve('');
outerResolve('');
}
}, 7);
};
var link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = url;
link.setAttribute('data-systemjs-css', '');
if (!isWebkit) {
link.onload = function () {
_callback();
};
} else {
webkitLoadCheck(link, _callback);
}
link.onerror = function (event) {
_callback(event.error || new Error('Error loading CSS file.'));
};
if (existingLinks.length) head.insertBefore(link, existingLinks[0]);
else head.appendChild(link);
})
// Remove the old link regardless of loading outcome
.then(
function (result) {
forEach(existingLinks, function (link) {
link.parentElement.removeChild(link);
});
return result;
},
function (err) {
forEach(existingLinks, function (link) {
link.parentElement.removeChild(link);
});
throw err;
}
);
},
stylesUrl ? 5 : 0
);
});
};
exports.fetch = function (load) {
// dont reload styles loaded in the head
var links = findExistingCSS(load.address);
if (!cssIsReloadable(links)) return '';
return loadCSS(load.address, links);
};
} else {
var builderPromise;
function getBuilder(loader) {
if (builderPromise) return builderPromise;
return (builderPromise = System['import']('./css-plugin-base.js', module.id).then(function (CSSPluginBase) {
return new CSSPluginBase(function compile(source, address) {
return {
css: source,
map: null,
moduleSource: null,
moduleFormat: null,
};
});
}));
}
exports.cssPlugin = true;
exports.fetch = function (load, fetch) {
if (!this.builder) return '';
return fetch(load);
};
exports.translate = function (load, opts) {
if (!this.builder) return '';
var loader = this;
return getBuilder(loader).then(function (builder) {
return builder.translate.call(loader, load, opts);
});
};
exports.instantiate = function (load, opts) {
if (!this.builder) return;
var loader = this;
return getBuilder(loader).then(function (builder) {
return builder.instantiate.call(loader, load, opts);
});
};
exports.bundle = function (loads, compileOpts, outputOpts) {
var loader = this;
return getBuilder(loader).then(function (builder) {
return builder.bundle.call(loader, loads, compileOpts, outputOpts);
});
};
exports.listAssets = function (loads, opts) {
var loader = this;
return getBuilder(loader).then(function (builder) {
return builder.listAssets.call(loader, loads, opts);
});
};
}
// Because IE8?
function filter(arrayLike, func) {
var arr = [];
forEach(arrayLike, function (item) {
if (func(item)) arr.push(item);
});
return arr;
}
// Because IE8?
function forEach(arrayLike, func) {
for (var i = 0; i < arrayLike.length; i++) {
func(arrayLike[i]);
}
}
<!doctype html>
<html lang="en"> <head><title>Vue 3 Example - Change Detection - Not Working</title><meta charSet="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="robots" content="noindex"><link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap" rel="stylesheet"><style media="only screen">
:root,
body, #app {
height: 100%;
width: 100%;
margin: 0;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
}
html {
position: absolute;
top: 0;
left: 0;
padding: 0;
overflow: auto;
font-family: -apple-system, 'system-ui', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji';
}
body {
padding: 16px;
overflow: auto;
background-color: transparent;
}
</style></head> <body> <div id="app"><my-component></my-component></div> <script>
var appLocation = '';
var boilerplatePath = '';
var systemJsMap = {
"@ag-grid-community/styles":
"https://cdn.jsdelivr.net/npm/@ag-grid-community/styles@33.2.1",
"ag-grid-community":
"https://cdn.jsdelivr.net/npm/ag-grid-community@33.2.1",
"ag-grid-enterprise":
"https://cdn.jsdelivr.net/npm/ag-grid-enterprise@33.2.1/",
"ag-grid-vue3": "https://cdn.jsdelivr.net/npm/ag-grid-vue3@33.2.1/",
};
var systemJsPaths = {
"@ag-grid-community/locale":
"https://cdn.jsdelivr.net/npm/@ag-grid-community/locale@33.2.1/dist/package/main.cjs.js",
"ag-charts-community":
"https://cdn.jsdelivr.net/npm/ag-charts-community@11.2.1/dist/package/main.cjs.js",
"ag-charts-core":
"https://cdn.jsdelivr.net/npm/ag-charts-core@11.2.1/dist/package/main.cjs.js",
"ag-charts-enterprise":
"https://cdn.jsdelivr.net/npm/ag-charts-enterprise@11.2.1/dist/package/main.cjs.js",
"ag-charts-types":
"https://cdn.jsdelivr.net/npm/ag-charts-types@11.2.1/",
};
</script><script src="https://cdn.jsdelivr.net/npm/systemjs@0.19.47/dist/system.js"></script><script src="systemjs.config.js"></script><script>System.import('main.ts').catch(function(err) { document.body.innerHTML = '<div class="example-error" style="background:#fdb022;padding:1rem;">' + 'Example Error: ' + err + '</div>'; console.error(err); });</script> </body></html>
{
"name": "ag-grid-example",
"dependencies": {
"vue": "^3.5.0",
"ag-grid-vue3": "33.2.1",
"ag-grid-community": "33.2.1",
"ag-grid-enterprise": "33.2.1"
}
}
(function (global) {
System.config({
// DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
transpiler: 'ts',
typescriptOptions: {
target: 'es2020',
},
meta: {
typescript: {
exports: 'ts',
},
'*.css': { loader: 'css' },
},
defaultExtension: 'js',
paths: {
// paths serve as alias
'npm:': 'https://cdn.jsdelivr.net/npm/',
...systemJsPaths,
},
map: {
css: (boilerplatePath.length === 0 ? `./` : `${boilerplatePath}/`) + 'css.js',
ts: 'npm:plugin-typescript@8.0.0/lib/plugin.js',
tslib: 'npm:tslib@2.3.1/tslib.js',
typescript: 'npm:typescript@5.4.5/lib/typescript.min.js',
vue: 'npm:vue@3.5.0/dist/vue.esm-browser.js',
'@vue/reactivity': 'npm:@vue/reactivity@3.0.0/dist/reactivity.esm-browser.prod.js',
// vue class component
'vue-class-component': 'npm:vue-class-component@^8.0.0-beta.3/dist/vue-class-component.cjs.js',
app: appLocation,
// systemJsMap comes from index.html
...systemJsMap,
},
packages: {
'css.js': {
defaultExtension: 'js',
},
vue: {
defaultExtension: 'js',
},
app: {
defaultExtension: 'ts',
},
'ag-grid-community': {
main: './dist/package/main.cjs.js',
defaultExtension: 'js',
format: 'cjs',
},
'ag-grid-enterprise': {
main: './dist/package/main.cjs.js',
defaultExtension: 'js',
format: 'cjs',
},
'ag-grid-vue3': {
main: './dist/main.umd.js',
defaultExtension: 'js',
format: 'cjs',
},
'ag-charts-types': {
defaultExtension: 'js',
format: 'cjs',
},
'ag-charts-core': {
defaultExtension: 'js',
format: 'cjs',
},
'ag-charts-community': {
defaultExtension: 'js',
format: 'cjs',
},
'ag-charts-enterprise': {
defaultExtension: 'js',
format: 'cjs',
},
'@ag-grid-community/locale': {
format: 'cjs',
},
},
});
})(this);
window.addEventListener('error', (e) => {
console.error('ERROR', e.message, e.filename);
});
import {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
ClientSideRowModelApiModule,
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GetRowIdParams,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
RowSelectionModule,
RowSelectionOptions,
ValidationModule,
} from "ag-grid-community";
ModuleRegistry.registerModules([
RowSelectionModule,
ClientSideRowModelModule,
ClientSideRowModelApiModule,
ValidationModule /* Development Only */,
]);
interface ICar {
make: string;
model: string;
price: number
}
// specify the data
const rowDataA: ICar[] = [
{ make: "Toyota", model: "Celica", price: 35000 },
{ make: "Porsche", model: "Boxster", price: 72000 },
{ make: "Aston Martin", model: "DBX", price: 190000 },
];
const rowDataB: ICar[] = [
{ make: "Toyota", model: "Celica", price: 35000 },
{ make: "Ford", model: "Mondeo", price: 32000 },
{ make: "Porsche", model: "Boxster", price: 72000 },
{ make: "BMW", model: "M50", price: 60000 },
{ make: "Aston Martin", model: "DBX", price: 190000 },
];
const VueExample = defineComponent({
template: `
<div style="height: 100%">
<div style="height: 100%; width: 100%; display: flex; flex-direction: column">
<div style="margin-bottom: 5px; min-height: 30px">
<button v-on:click="onRowDataA()">Row Data A</button>
<button v-on:click="onRowDataB()">Row Data B</button>
<button v-on:click="onClearRowData()">Clear Row Data</button>
</div>
<div style="flex: 1 1 0px">
<ag-grid-vue
style="width: 100%; height: 100%;"
@grid-ready="onGridReady"
:columnDefs="columnDefs"
:rowData="rowData"
:getRowId='getRowId'
:rowSelection="rowSelection"></ag-grid-vue>
</div>
</div>
</div>
`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const gridApi = shallowRef<GridApi<ICar> | null>(null);
const columnDefs = ref<ColDef[]>([
{ field: "make" },
{ field: "model" },
{ field: "price" },
]);
const rowData = ref<ICar[] | null>(rowDataA);
const rowSelection = ref<RowSelectionOptions | "single" | "multiple">({
mode: "singleRow",
checkboxes: false,
enableClickSelection: true,
});
function onRowDataA() {
rowData.value[0].price = Math.random();
}
function getRowId(params: GetRowIdParams<ICar>) {
return `${params.data.make}:${params.data.model}`
}
function onRowDataB() {
gridApi.value!.setGridOption("rowData", rowDataB);
}
function onClearRowData() {
// Clear rowData by setting it to an empty array
gridApi.value!.setGridOption("rowData", []);
}
const onGridReady = (params: GridReadyEvent) => {
gridApi.value = params.api;
setInterval(onRowDataA, 200)
};
return {
getRowId,
gridApi,
columnDefs,
rowData,
rowSelection,
onGridReady,
onRowDataA,
onRowDataB,
onClearRowData,
};
},
});
createApp(VueExample).mount("#app");