<!DOCTYPE html>
<html lang="en">
<head>
<title>ag-Grid Vue Example</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body {
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;
}
body {
padding: 1rem;
overflow: auto;
}
</style>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="app" style="height: 100%">
<my-component></my-component>
</div>
<script>
var appLocation = '';
var boilerplatePath = '';
var systemJsMap = {"ag-grid-community":"https:\/\/unpkg.com\/ag-grid-community@21.2.1\/dist\/ag-grid-community.js","ag-grid-community\/main":"https:\/\/unpkg.com\/ag-grid-community@21.2.1\/dist\/ag-grid-community.js","ag-grid-enterprise":"https:\/\/unpkg.com\/ag-grid-enterprise@21.2.1\/","ag-grid-react":"npm:ag-grid-react@21.2.1\/","ag-grid-angular":"npm:ag-grid-angular@21.2.1\/","ag-grid-vue":"npm:ag-grid-vue@21.2.1\/"} </script>
<script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('main.js').catch( function(err) { console.error(err); })
</script>
</body>
</html>
import Vue from "vue";
import { AgGridVue } from "ag-grid-vue";
import "ag-grid-enterprise";
const VueExample = {
template: `
<div style="height: 100%">
<div class="topContainer">
<div class="topHeader">
<div class="item details">
<label>
File Name:
<input type="text" id="fileName" placeholder="export">
</label>
<label>
Sheet Name:
<input type="text" id="sheetName" placeholder="ag-grid" maxlength="31">
</label>
<label>
Export Mode:
<input type="radio" name="mode" value="xlsx" id="xlsxMode" checked="true">
<label for="xlsx">.xlsx</label>
<input type="radio" name="mode" id="xmlMode" value="xml">
<label for="xml">.xml</label>
</label>
</div>
<fieldset class="item">
<legend>Export Options</legend>
<div class="options">
<div>
<label>
<input type="checkbox" id="skipHeader">
Skip Header
</label>
<label>
<input type="checkbox" id="columnGroups">
Column Groups
</label>
<label>
<input type="checkbox" id="skipFooters">
Skip Footers
</label>
</div>
<div>
<label>
<input type="checkbox" id="onlySelected">
Only Selected
</label>
<label>
<input type="checkbox" id="useCellCallback">
Use Cell Callback
</label>
<label>
<input type="checkbox" id="processHeaders">
Format Headers
</label>
</div>
<div>
<label>
<input type="checkbox" id="skipPinnedTop">
Skip Pinned Top
</label>
<label>
<input type="checkbox" id="skipPinnedBottom">
Skip Pinned Bottom
</label>
<label>
<input type="checkbox" id="skipGroups">
Skip Groups
</label>
</div>
<div>
<label>
<input type="checkbox" id="useSpecificColumns">
Specify Columns
</label>
<label>
<input type="checkbox" id="allColumns">
All Columns
</label>
<label>
<input type="checkbox" id="skipGroupR">
Skip Group R
</label>
</div>
<div>
<label>
<input type="checkbox" id="appendHeader">
Append Header
</label>
<label>
<input type="checkbox" id="appendFooter">
Append Footer
</label>
</div>
</div>
</fieldset>
</div>
<div style="margin: 5px; text-align: right">
<label>
<button v-on:click="onBtExport()" style="height: 25px; cursor: pointer">Export to Excel</button>
</label>
</div>
<div class="grid-wrapper">
<ag-grid-vue style="width: 100%; height: 100%;" class="ag-theme-balham" id="myGrid"
:gridOptions="gridOptions"
@grid-ready="onGridReady"
:columnDefs="columnDefs"
:defaultColDef="defaultColDef"
:rowSelection="rowSelection"
:pinnedTopRowData="pinnedTopRowData"
:pinnedBottomRowData="pinnedBottomRowData"
:excelStyles="excelStyles"
:rowData="rowData"></ag-grid-vue>
</div>
</div>
</div>
`,
components: {
"ag-grid-vue": AgGridVue
},
data: function() {
return {
gridOptions: null,
gridApi: null,
columnApi: null,
columnDefs: null,
defaultColDef: null,
rowSelection: null,
pinnedTopRowData: null,
pinnedBottomRowData: null,
excelStyles: null,
rowData: null
};
},
beforeMount() {
this.gridOptions = {};
this.columnDefs = [
{
headerName: "Top Level Column Group",
children: [
{
headerName: "Group A",
children: [
{
headerName: "Athlete",
field: "athlete",
width: 150
},
{
headerName: "Age",
field: "age",
width: 90,
cellClass: "twoDecimalPlaces",
cellClassRules: {
greenBackground: params => {
return params.value < 23;
},
redFont: function(params) {
return params.value < 20;
}
}
},
{
headerName: "Country",
field: "country",
width: 120,
cellClassRules: {
redFont: function(params) {
return params.value === "United States";
}
}
},
{
headerName: "Group",
valueGetter: "data.country.charAt(0)",
width: 75,
cellClassRules: {
boldBorders: function(params) {
return params.value === "U";
}
},
cellClass: "redFont greenBackground"
},
{
headerName: "Year",
field: "year",
width: 75,
cellClassRules: {
notInExcel: function(params) {
return true;
}
}
}
]
},
{
headerName: "Group B",
children: [
{
headerName: "Date",
field: "date",
width: 110,
cellClass: "dateFormat",
valueGetter: function(params) {
var val = params.data.date;
if (val.indexOf("/") < 0) {
return val;
}
var split = val.split("/");
return split[2] + "-" + split[1] + "-" + split[0];
}
},
{
headerName: "Sport",
field: "sport",
width: 110
},
{
headerName: "Gold",
field: "gold",
width: 100,
cellClassRules: {
boldBorders: function(params) {
return params.value > 2;
}
}
},
{
headerName: "Silver",
field: "silver",
width: 100,
cellClass: "textFormat"
},
{
headerName: "Bronze",
field: "bronze",
width: 100
},
{
headerName: "Total",
field: "total",
width: 100
}
]
}
]
}
];
this.defaultColDef = {
cellClassRules: {
darkGreyBackground: params => {
return params.rowIndex % 2 == 0;
}
},
sortable: true,
filter: true
};
this.rowSelection = "multiple";
this.pinnedTopRowData = [
{
athlete: "Floating <Top> Athlete",
age: 999,
country: "Floating <Top> Country",
year: 2020,
date: "2020-08-01",
sport: "Track & Field",
gold: 22,
silver: "003",
bronze: 44,
total: 55
}
];
this.pinnedBottomRowData = [
{
athlete: "Floating <Bottom> Athlete",
age: 888,
country: "Floating <Bottom> Country",
year: 2030,
date: "2030-08-01",
sport: "Track & Field",
gold: 222,
silver: "005",
bronze: 244,
total: 255
}
];
this.excelStyles = [
{
id: "greenBackground",
alignment: {
wrapText: true,
},
interior: {
color: "#b5e6b5",
pattern: "Solid"
}
},
{
id: "redFont",
font: {
fontName: "Calibri Light",
underline: "Single",
italic: true,
color: "#ff0000"
}
},
{
id: "darkGreyBackground",
alignment: {
wrapText: true,
},
},
{
id: "boldBorders",
borders: {
borderBottom: {
color: "#000000",
lineStyle: "Continuous",
weight: 3
},
borderLeft: {
color: "#000000",
lineStyle: "Continuous",
weight: 3
},
borderRight: {
color: "#000000",
lineStyle: "Continuous",
weight: 3
},
borderTop: {
color: "#000000",
lineStyle: "Continuous",
weight: 3
}
}
},
{
id: "header",
interior: {
color: "#CCCCCC",
pattern: "Solid"
},
borders: {
borderBottom: {
color: "#5687f5",
lineStyle: "Continuous",
weight: 1
},
borderLeft: {
color: "#5687f5",
lineStyle: "Continuous",
weight: 1
},
borderRight: {
color: "#5687f5",
lineStyle: "Continuous",
weight: 1
},
borderTop: {
color: "#5687f5",
lineStyle: "Continuous",
weight: 1
}
}
},
{
id: "dateFormat",
dataType: "dateTime",
numberFormat: { format: "mm/dd/yyyy;@" }
},
{
id: "twoDecimalPlaces",
numberFormat: { format: "#,##0.00" }
},
{
id: "textFormat",
dataType: "string"
},
{
id: "bigHeader",
font: { size: 25 }
}
];
},
mounted() {
this.gridApi = this.gridOptions.api;
this.gridColumnApi = this.gridOptions.columnApi;
},
methods: {
onBtExport() {
var params = {
skipHeader: getBooleanValue("#skipHeader"),
columnGroups: getBooleanValue("#columnGroups"),
skipFooters: getBooleanValue("#skipFooters"),
skipGroups: getBooleanValue("#skipGroups"),
skipPinnedTop: getBooleanValue("#skipPinnedTop"),
skipPinnedBottom: getBooleanValue("#skipPinnedBottom"),
allColumns: getBooleanValue("#allColumns"),
onlySelected: getBooleanValue("#onlySelected"),
fileName: document.querySelector("#fileName").value,
sheetName: document.querySelector("#sheetName").value,
exportMode: document.querySelector('input[name="mode"]:checked').value
};
if (getBooleanValue("#skipGroupR")) {
params.shouldRowBeSkipped = function(params) {
return params.node.data.country.charAt(0) === "R";
};
}
if (getBooleanValue("#useCellCallback")) {
params.processCellCallback = function(params) {
if (params.value && params.value.toUpperCase) {
return params.value.toUpperCase();
} else {
return params.value;
}
};
}
if (getBooleanValue("#useSpecificColumns")) {
params.columnKeys = ["country", "bronze"];
}
if (getBooleanValue("#processHeaders")) {
params.processHeaderCallback = function(params) {
return params.column.getColDef().headerName.toUpperCase();
};
}
if (getBooleanValue("#appendHeader")) {
params.customHeader = [
[],
[
{
styleId: "bigHeader",
data: {
type: "String",
value: "Summary"
}
}
],
[
{
data: {
type: "String",
value: "Sales"
},
mergeAcross: 2
},
{
data: {
type: "Number",
value: "3695.36"
}
}
],
[]
];
}
if (getBooleanValue("#appendFooter")) {
params.customFooter = [
[],
[
{
styleId: "bigHeader",
data: {
type: "String",
value: "Footer"
}
}
],
[
{
data: {
type: "String",
value: "Purchases"
},
mergeAcross: 2
},
{
data: {
type: "Number",
value: "7896.35"
}
}
],
[]
];
}
if (getBooleanValue("#processHeaders")) {
params.processHeaderCallback = function(params) {
return params.column.getColDef().headerName.toUpperCase();
};
}
this.gridApi.exportDataAsExcel(params);
},
onGridReady(params) {
const httpRequest = new XMLHttpRequest();
const updateData = data => {
console.log(data)
this.rowData = data.map(x => {
x.athlete = x.athlete + "\r\n" + x.athlete
return x;
});
};
httpRequest.open(
"GET",
"https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json"
);
httpRequest.send();
httpRequest.onreadystatechange = () => {
if (httpRequest.readyState === 4 && httpRequest.status === 200) {
updateData(JSON.parse(httpRequest.responseText));
}
};
}
}
};
function getBooleanValue(cssSelector) {
return document.querySelector(cssSelector).checked === true;
}
new Vue({
el: "#app",
components: {
"my-component": VueExample
}
});
.greenBackground {
background-color: #b5e6b5;
}
.redFont {
color: red;
font-style: italic;
text-decoration: underline;
}
.darkGreyBackground {
background-color: #888888;
color: #fff;
}
.boldBorders {
border: 3px solid black !important;
}
.notInExcel {
color: #1b6d85;
}
.topContainer {
display: flex;
flex-direction: column;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 13px;
height: 100%;
width: 100%;
}
.topHeader {
display: flex;
}
.item {
display: flex;
flex: 1;
}
fieldset.item {
border-radius: 5px;
border-color: #cecece;
border-style: solid;
height: 80px;
}
.details {
flex: none;
width: 250px;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
}
.details label {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-right: 15px;
}
.details > label {
margin-bottom: 10px;
}
.details > label:first-of-type {
margin-top: 10px;
}
.details > label:last-of-type {
margin-bottom: 0;
}
.options {
display: flex;
flex: 1;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
height: calc(100% - 10px);
overflow-y: auto;
}
.options label {
display: flex;
flex-direction: row;
white-space: nowrap;
margin-right: 10px;
}
.options div {
width: 150px;
}
.grid-wrapper {
display: flex;
flex: 1;
}
.grid-wrapper > div {
width: 100%;
height: 100%;
}
@media (max-width: 900px) {
fieldset.item {
height: 120px;
}
}
(function(global) {
// simplified version of Object.assign for es3
function assign() {
var result = {};
for (var i = 0, len = arguments.length; i < len; i++) {
var arg = arguments[i];
for (var prop in arg) {
result[prop] = arg[prop];
}
}
return result;
}
System.config({
transpiler: 'plugin-babel',
defaultExtension: 'js',
paths: {
'npm:': 'https://unpkg.com/'
},
map: assign(
{
// babel transpiler
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
// css plugin
'css': 'npm:systemjs-plugin-css/css.js',
// vuejs
'vue': 'npm:vue/dist/vue.min.js',
// vue property decorator
'vue-class-component': 'npm:vue-class-component@6.3.2/dist/vue-class-component.min.js',
'vue-property-decorator': 'npm:vue-property-decorator@7.2.0/lib/vue-property-decorator.umd.js',
app: appLocation + 'app'
},
systemJsMap
), // systemJsMap comes from index.html
packages: {
'vue': {
defaultExtension: 'js'
},
'vue-class-component': {
defaultExtension: 'js'
},
'vue-property-decorator': {
defaultExtension: 'js'
},
app: {
defaultExtension: 'js'
},
'ag-grid-vue': {
main: './main.js',
defaultExtension: 'js'
},
'ag-grid-enterprise': {
main: './main.js',
defaultExtension: 'js'
}
},
meta: {
'*.js': {
babelOptions: {
stage1: true,
stage2: true,
es2015: true
}
},
'*.css': { loader: 'css' }
}
});
})(this);