<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue example</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style media="only screen">
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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/alasql/0.5.5/alasql.min.js"></script>
<script src="fakeServer.js"></script>
</head>
<body>
<div id="app" style="height: 100%">
<my-component>Loading Vue example…</my-component>
</div>
<script>
var appLocation = '';
var boilerplatePath = '';
var systemJsMap = {
"@ag-grid-community/core/dist/styles/ag-grid.css": "https://unpkg.com/@ag-grid-community/all-modules@23.0.2/dist/styles/ag-grid.css",
"@ag-grid-community/core/dist/styles/ag-theme-balham.css": "https://unpkg.com/@ag-grid-community/all-modules@23.0.2/dist/styles/ag-theme-balham.css",
"@ag-grid-community/core/dist/styles/ag-theme-alpine.css": "https://unpkg.com/@ag-grid-community/all-modules@23.0.2/dist/styles/ag-theme-alpine.css",
"@ag-grid-community/all-modules/dist/styles/ag-grid.css": "https://unpkg.com/@ag-grid-community/all-modules@23.0.2/dist/styles/ag-grid.css",
"@ag-grid-community/all-modules/dist/styles/ag-theme-alpine-dark.css": "https://unpkg.com/@ag-grid-community/all-modules@23.0.2/dist/styles/ag-theme-alpine-dark.css",
"@ag-grid-community/all-modules/dist/styles/ag-theme-alpine.css": "https://unpkg.com/@ag-grid-community/all-modules@23.0.2/dist/styles/ag-theme-alpine.css",
"@ag-grid-community/all-modules/dist/styles/ag-theme-balham-dark.css": "https://unpkg.com/@ag-grid-community/all-modules@23.0.2/dist/styles/ag-theme-balham-dark.css",
"@ag-grid-community/all-modules/dist/styles/ag-theme-balham.css": "https://unpkg.com/@ag-grid-community/all-modules@23.0.2/dist/styles/ag-theme-balham.css",
"@ag-grid-community/all-modules/dist/styles/ag-theme-blue.css": "https://unpkg.com/@ag-grid-community/all-modules@23.0.2/dist/styles/ag-theme-blue.css",
"@ag-grid-community/all-modules/dist/styles/ag-theme-bootstrap.css": "https://unpkg.com/@ag-grid-community/all-modules@23.0.2/dist/styles/ag-theme-bootstrap.css",
"@ag-grid-community/all-modules/dist/styles/ag-theme-dark.css": "https://unpkg.com/@ag-grid-community/all-modules@23.0.2/dist/styles/ag-theme-dark.css",
"@ag-grid-community/all-modules/dist/styles/ag-theme-fresh.css": "https://unpkg.com/@ag-grid-community/all-modules@23.0.2/dist/styles/ag-theme-fresh.css",
"@ag-grid-community/all-modules/dist/styles/ag-theme-material.css": "https://unpkg.com/@ag-grid-community/all-modules@23.0.2/dist/styles/ag-theme-material.css",
"@ag-grid-community/react": "https://unpkg.com/@ag-grid-community/react@23.0.2/",
"@ag-grid-community/angular": "https://unpkg.com/@ag-grid-community/angular@23.0.2/",
"@ag-grid-community/vue": "https://unpkg.com/@ag-grid-community/vue@23.0.2/",
"ag-charts-community": "https://unpkg.com/ag-charts-community@1.0.1/dist/ag-charts-community.cjs.js",
"ag-grid-community": "https://unpkg.com/ag-grid-community@23.0.2/",
"ag-grid-enterprise": "https://unpkg.com/ag-grid-enterprise@23.0.2/",
"ag-grid-angular": "https://unpkg.com/ag-grid-angular@23.0.2/",
"ag-grid-react": "https://unpkg.com/ag-grid-react@23.0.2/",
"ag-grid-vue": "https://unpkg.com/ag-grid-vue@23.0.2/"
};
var systemJsPaths = {
"@ag-grid-community/all-modules": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.0.2/dist/ag-grid-enterprise.cjs.js",
"@ag-grid-community/client-side-row-model": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.0.2/dist/ag-grid-enterprise.cjs.js",
"@ag-grid-community/core": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.0.2/dist/ag-grid-enterprise.cjs.js",
"@ag-grid-community/csv-export": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.0.2/dist/ag-grid-enterprise.cjs.js",
"@ag-grid-community/infinite-row-model": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.0.2/dist/ag-grid-enterprise.cjs.js",
"@ag-grid-enterprise/all-modules": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.0.2/dist/ag-grid-enterprise.cjs.js",
"@ag-grid-enterprise/charts": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.0.2/dist/ag-grid-enterprise.cjs.js",
"@ag-grid-enterprise/clipboard": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.0.2/dist/ag-grid-enterprise.cjs.js",
"@ag-grid-enterprise/column-tool-panel": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.0.2/dist/ag-grid-enterprise.cjs.js",
"@ag-grid-enterprise/core": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.0.2/dist/ag-grid-enterprise.cjs.js",
"@ag-grid-enterprise/excel-export": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.0.2/dist/ag-grid-enterprise.cjs.js",
"@ag-grid-enterprise/filter-tool-panel": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.0.2/dist/ag-grid-enterprise.cjs.js",
"@ag-grid-enterprise/master-detail": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.0.2/dist/ag-grid-enterprise.cjs.js",
"@ag-grid-enterprise/menu": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.0.2/dist/ag-grid-enterprise.cjs.js",
"@ag-grid-enterprise/range-selection": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.0.2/dist/ag-grid-enterprise.cjs.js",
"@ag-grid-enterprise/rich-select": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.0.2/dist/ag-grid-enterprise.cjs.js",
"@ag-grid-enterprise/row-grouping": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.0.2/dist/ag-grid-enterprise.cjs.js",
"@ag-grid-enterprise/server-side-row-model": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.0.2/dist/ag-grid-enterprise.cjs.js",
"@ag-grid-enterprise/set-filter": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.0.2/dist/ag-grid-enterprise.cjs.js",
"@ag-grid-enterprise/side-bar": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.0.2/dist/ag-grid-enterprise.cjs.js",
"@ag-grid-enterprise/status-bar": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.0.2/dist/ag-grid-enterprise.cjs.js",
"@ag-grid-enterprise/viewport-row-model": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.0.2/dist/ag-grid-enterprise.cjs.js"
};
</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>
// This fake server uses http://alasql.org/ to mimic how a real server
// might generate sql queries from the Server-side Row Model request.
// To keep things simple it does the bare minimum to support the example.
function FakeServer(allData) {
alasql.options.cache = false;
return {
getData: function(request) {
var results = executeQuery(request);
return {
success: true,
rows: results,
lastRow: getLastRowIndex(request, results),
};
},
getCountries: function() {
var SQL = 'SELECT DISTINCT country FROM ? ORDER BY country asc';
var result = alasql(SQL, [allData]);
return result.map(Object.values);
},
};
function executeQuery(request) {
var SQL = buildSql(request);
console.log('[FakeServer] - about to execute query:', SQL);
return alasql(SQL, [allData]);
}
function buildSql(request) {
var select = 'SELECT * ';
var from = 'FROM ? ';
var where = whereSql(request);
var orderBy = orderBySql(request);
var limit = limitSql(request);
return select + from + where + orderBy + limit;
}
function whereSql(request) {
var whereParts = [];
var filterModel = request.filterModel;
if (filterModel) {
var columnKeys = Object.keys(filterModel);
whereParts = columnKeys.map(function(columnKey) {
var filter = filterModel[columnKey];
if (filter.filterType === 'set') {
return columnKey + " IN ('" + filter.values.join("', '") + "')";
}
console.log('unsupported filter type: ' + filter.filterType);
return '';
});
}
if (whereParts.length > 0) {
return ' WHERE ' + whereParts.join(' AND ') + ' ';
}
return '';
}
function orderBySql(request) {
var sortModel = request.sortModel;
if (sortModel.length === 0) return '';
var sorts = sortModel.map(function(s) {
return s.colId + ' ' + s.sort;
});
return 'ORDER BY ' + sorts.join(', ') + ' ';
}
function limitSql(request) {
var blockSize = request.endRow - request.startRow;
return ' LIMIT ' + (blockSize + 1) + ' OFFSET ' + request.startRow;
}
function getLastRowIndex(request, results) {
if (!results || results.length === 0) {
return request.startRow;
}
var currentLastRow = request.startRow + results.length;
return currentLastRow <= request.endRow ? currentLastRow : -1;
}
}
function ServerSideDatasource(server) {
return {
getRows: function(params) {
console.log('[Datasource] - rows requested by grid: ', params.request);
// get data for request from our fake server
var response = server.getData(params.request);
// simulating real server call with a 500ms delay
setTimeout(function() {
if (response.success) {
// supply rows for requested block to grid
params.successCallback(response.rows, response.lastRow);
} else {
params.failCallback();
}
}, 500);
},
};
}
import Vue from 'vue';
import { AgGridVue } from '@ag-grid-community/vue';
import { AllModules } from '@ag-grid-enterprise/all-modules';
import '@ag-grid-community/all-modules/dist/styles/ag-grid.css';
import '@ag-grid-community/all-modules/dist/styles/ag-theme-alpine-dark.css';
import CustomHeader from './customHeaderVue.js';
const VueExample = {
template: `
<div style="height: 100%">
<ag-grid-vue
style="width: 100%; height: 100%;"
class="ag-theme-alpine-dark"
id="myGrid"
:gridOptions="gridOptions"
@grid-ready="onGridReady"
:columnDefs="columnDefs"
:defaultColDef="defaultColDef"
:rowModelType="rowModelType"
:pagination="true"
:paginationPageSize="paginationPageSize"
:cacheBlockSize="cacheBlockSize"
:animateRows="true"
:modules="modules"
:frameworkComponents="frameworkComponents"
:isRowSelectable="isRowSelectable"
:rowSelection = "rowSelection"
:suppressRowClickSelection="true"
></ag-grid-vue>
</div>
`,
components: {
'ag-grid-vue': AgGridVue,
},
data: function() {
return {
gridOptions: null,
gridApi: null,
columnApi: null,
columnDefs: null,
defaultColDef: null,
rowModelType: null,
frameworkComponents: null,
paginationPageSize: null,
cacheBlockSize: null,
modules: AllModules,
};
},
beforeMount() {
this.gridOptions = {};
this.columnDefs = [
{
field: 'check',
maxWidth: 50,
headerName: '', checkboxSelection: true,
headerComponentParams: { showMe: true},
},
{
field: 'athlete',
minWidth: 190,
},
{ field: 'age' },
{ field: 'year' }
];
this.defaultColDef = {
flex: 1,
minWidth: 90,
resizable: true,
};
this.frameworkComponents = { agColumnHeader: CustomHeader };
this.rowModelType = 'serverSide';
this.paginationPageSize = 10;
this.cacheBlockSize = 10;
this.rowSelection = "multiple";
},
mounted() {
this.gridApi = this.gridOptions.api;
this.gridColumnApi = this.gridOptions.columnApi;
},
methods: {
isRowSelectable(rowNode) {
return rowNode.data ? (rowNode.data.age >= 0) : false;
},
onGridReady(params) {
const httpRequest = new XMLHttpRequest();
const updateData = data => {
var idSequence = 1;
data.forEach(function(item) {
item.id = idSequence++;
});
var fakeServer = new FakeServer(data);
var datasource = new ServerSideDatasource(fakeServer);
params.api.setServerSideDatasource(datasource);
};
httpRequest.open(
'GET',
'https://raw.githubusercontent.com/ag-grid/ag-grid/master/grid-packages/ag-grid-docs/src/olympicWinners.json'
);
httpRequest.send();
httpRequest.onreadystatechange = () => {
if (httpRequest.readyState === 4 && httpRequest.status === 200) {
updateData(JSON.parse(httpRequest.responseText));
}
};
},
},
};
window.ServerSideDatasource = function ServerSideDatasource(server) {
return {
getRows: function(params) {
console.log('[Datasource] - rows requested by grid: ', params.request);
var response = server.getData(params.request);
setTimeout(function() {
if (response.success) {
params.successCallback(response.rows, response.lastRow);
} else {
params.failCallback();
}
}, 200);
},
};
};
new Vue({
el: '#app',
components: {
'my-component': VueExample,
},
});
(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:
Object.assign(
{
// paths serve as alias
"npm:": "https://unpkg.com/",
}, systemJsPaths),
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-community': {
main: './dist/ag-grid-community.cjs.js',
defaultExtension: 'js'
},
'ag-grid-enterprise': {
main: './dist/ag-grid-enterprise.cjs.js',
defaultExtension: 'js'
},
'@ag-grid-community/vue': {
main: './main.js',
defaultExtension: 'js'
}
},
meta: {
'*.js': {
babelOptions: {
stage1: true,
stage2: true,
es2015: true
}
},
'*.css': {loader: 'css'}
}
});
})(this);
import Vue from 'vue';
export default Vue.extend({
/*template: `
<div>
<div v-if="params.enableMenu" ref="menuButton" class="customHeaderMenuButton" @click="onMenuClicked($event)"><i class="fa" :class="params.menuIcon"></i></div>
<div class="customHeaderLabel">{{params.displayName}}</div>
<div v-if="params.enableSorting" @click="onSortRequested('asc', $event)" :class="ascSort" class="customSortDownLabel"><i class="fa fa-long-arrow-alt-down"></i></div>
<div v-if="params.enableSorting" @click="onSortRequested('desc', $event)" :class="descSort" class="customSortUpLabel"><i class="fa fa-long-arrow-alt-up"></i></div>
<div v-if="params.enableSorting" @click="onSortRequested('', $event)" :class="noSort" class="customSortRemoveLabel"><i class="fa fa-times"></i></div>
</div>
`,*/
template: `
<div v-if="params.showMe">
<input v-model="isChecked" type="checkbox" @change="sedeall()"></input>
</div>
<div v-else>
<span> {{params.displayName}}</span>
</div>
`,
data: function() {
return {
ascSort: null,
descSort: null,
noSort: null,
isChecked: false
};
},
beforeMount() {},
mounted() {
this.params.column.addEventListener('sortChanged', this.onSortChanged);
this.onSortChanged();
},
methods: {
sedeall() {
if(this.isChecked === true) {
console.log("select All");
this.params.api.forEachNode(function(node) {
node.setSelected(true);
});
}
else {
console.log("deselect All");
this.params.api.deselectAll();
}
},
onMenuClicked() {
this.params.showColumnMenu(this.$refs.menuButton);
},
onSortChanged() {
this.ascSort = this.descSort = this.noSort = 'inactive';
if (this.params.column.isSortAscending()) {
this.ascSort = 'active';
} else if (this.params.column.isSortDescending()) {
this.descSort = 'active';
} else {
this.noSort = 'active';
}
},
onSortRequested(order, event) {
this.params.setSort(order, event.shiftKey);
},
},
});
.customHeaderMenuButton {
float: left;
margin: 0 0 0 3px;
}
.customHeaderLabel {
float: left;
margin: 0 0 0 3px;
}
.customSortDownLabel {
float: left;
margin: 0 0 0 3px;
}
.customSortUpLabel {
float: left;
margin: 0;
}
.customSortRemoveLabel {
float: left;
margin: 0 0 0 3px;
font-size: 11px;
}
.active {
color: cornflowerblue;
}