├── .gitignore ├── .postcssrc.js ├── README.md ├── babel.config.js ├── hashDirectory.sh ├── images ├── alberto.png ├── favicon.ico ├── fire.png ├── flags │ ├── ar.png │ ├── br.png │ ├── co.png │ ├── de.png │ ├── es.png │ ├── fr.png │ ├── gb.png │ ├── gr.png │ ├── ie.png │ ├── is.png │ ├── it.png │ ├── mt.png │ ├── no.png │ ├── pe.png │ ├── pt.png │ ├── se.png │ ├── uy.png │ └── ve.png ├── frost.png ├── horse.png ├── niall.png ├── phone.png ├── sean.png ├── skills │ ├── android.png │ ├── css.png │ ├── html5.png │ ├── mac.png │ └── windows.png ├── smiley-sad.png ├── smiley.png ├── statue.png └── sun.png ├── jest.config.js ├── package.json ├── public ├── favicon.ico └── index.html ├── src ├── App.vue ├── large-data-set-example │ └── LargeDataSetExample.vue ├── main.js ├── rich-grid-example │ ├── CellComponentEditor.vue │ ├── CellComponentRenderer.vue │ ├── DateComponent.vue │ ├── HeaderGroupComponent.vue │ ├── RichGridExample.vue │ ├── proficiencyFilter.js │ ├── refData.js │ └── skillFilter.js ├── router.js └── routes.js ├── tests ├── Editor.vue ├── GridExample.vue ├── Renderer.vue └── unit │ └── example.spec.js └── vue.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | .DS_Store 6 | package-lock.json 7 | *.nosync 8 | .hash 9 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | AG Grid VueJS Component Examples 2 | =================== 3 | 4 | ## Build Setup 5 | 6 | ``` bash 7 | # install dependencies 8 | npm install 9 | 10 | # build for dev 11 | npm run start 12 | 13 | # build for production 14 | npm run build 15 | ``` 16 | 17 | ## Examples 18 | 19 | See [www.ag-grid.com](http://www.ag-grid.com) for full documentation and examples. 20 | 21 | Frameworks Supported 22 | ==================== 23 | Framework specific Getting Started guides: 24 | [Angular](https://www.ag-grid.com/angular-grid/)) 25 | [Javascript](https://www.ag-grid.com/javascript-grid/) | [React](https://www.ag-grid.com/react-grid/) 26 | | [TypeScript](https://www.ag-grid.com/ag-grid-typescript-webpack-2/) 27 | [VueJS](https://www.ag-grid.com/vuejs-grid/) | [Web Components](https://www.ag-grid.com/best-web-component-data-grid/) 28 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } -------------------------------------------------------------------------------- /hashDirectory.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | working_directory=$(pwd) 4 | if [ "$#" -eq 1 ] 5 | then 6 | working_directory=$1 7 | fi 8 | 9 | SHASUM='shasum' 10 | if [[ `uname -s` == MINGW* ]]; then 11 | SHASUM='/usr/bin/core_perl/shasum' 12 | fi 13 | 14 | find "$working_directory" -type d \( -path $working_directory/cypress/videos -o -path $working_directory/umd -o -path $working_directory/lib -o -path $working_directory/node_modules -o -path $working_directory/.git -o -path $working_directory/dist -o -path $working_directory/.idea \) -prune -o -type f -print | grep -Ev "$working_directory/.hash|$working_directory/.examplesHash" | sort -z | tr '\n' '\0' | xargs -0 $SHASUM | $SHASUM 15 | -------------------------------------------------------------------------------- /images/alberto.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ag-grid/ag-grid-vue-example/c93cb283eeadb950c979e931fe7f6ac39ec90b26/images/alberto.png -------------------------------------------------------------------------------- /images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ag-grid/ag-grid-vue-example/c93cb283eeadb950c979e931fe7f6ac39ec90b26/images/favicon.ico -------------------------------------------------------------------------------- /images/fire.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ag-grid/ag-grid-vue-example/c93cb283eeadb950c979e931fe7f6ac39ec90b26/images/fire.png -------------------------------------------------------------------------------- /images/flags/ar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ag-grid/ag-grid-vue-example/c93cb283eeadb950c979e931fe7f6ac39ec90b26/images/flags/ar.png -------------------------------------------------------------------------------- /images/flags/br.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ag-grid/ag-grid-vue-example/c93cb283eeadb950c979e931fe7f6ac39ec90b26/images/flags/br.png -------------------------------------------------------------------------------- /images/flags/co.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ag-grid/ag-grid-vue-example/c93cb283eeadb950c979e931fe7f6ac39ec90b26/images/flags/co.png -------------------------------------------------------------------------------- /images/flags/de.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ag-grid/ag-grid-vue-example/c93cb283eeadb950c979e931fe7f6ac39ec90b26/images/flags/de.png -------------------------------------------------------------------------------- /images/flags/es.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ag-grid/ag-grid-vue-example/c93cb283eeadb950c979e931fe7f6ac39ec90b26/images/flags/es.png -------------------------------------------------------------------------------- /images/flags/fr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ag-grid/ag-grid-vue-example/c93cb283eeadb950c979e931fe7f6ac39ec90b26/images/flags/fr.png -------------------------------------------------------------------------------- /images/flags/gb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ag-grid/ag-grid-vue-example/c93cb283eeadb950c979e931fe7f6ac39ec90b26/images/flags/gb.png -------------------------------------------------------------------------------- /images/flags/gr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ag-grid/ag-grid-vue-example/c93cb283eeadb950c979e931fe7f6ac39ec90b26/images/flags/gr.png -------------------------------------------------------------------------------- /images/flags/ie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ag-grid/ag-grid-vue-example/c93cb283eeadb950c979e931fe7f6ac39ec90b26/images/flags/ie.png -------------------------------------------------------------------------------- /images/flags/is.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ag-grid/ag-grid-vue-example/c93cb283eeadb950c979e931fe7f6ac39ec90b26/images/flags/is.png -------------------------------------------------------------------------------- /images/flags/it.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ag-grid/ag-grid-vue-example/c93cb283eeadb950c979e931fe7f6ac39ec90b26/images/flags/it.png -------------------------------------------------------------------------------- /images/flags/mt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ag-grid/ag-grid-vue-example/c93cb283eeadb950c979e931fe7f6ac39ec90b26/images/flags/mt.png -------------------------------------------------------------------------------- /images/flags/no.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ag-grid/ag-grid-vue-example/c93cb283eeadb950c979e931fe7f6ac39ec90b26/images/flags/no.png -------------------------------------------------------------------------------- /images/flags/pe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ag-grid/ag-grid-vue-example/c93cb283eeadb950c979e931fe7f6ac39ec90b26/images/flags/pe.png -------------------------------------------------------------------------------- /images/flags/pt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ag-grid/ag-grid-vue-example/c93cb283eeadb950c979e931fe7f6ac39ec90b26/images/flags/pt.png -------------------------------------------------------------------------------- /images/flags/se.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ag-grid/ag-grid-vue-example/c93cb283eeadb950c979e931fe7f6ac39ec90b26/images/flags/se.png -------------------------------------------------------------------------------- /images/flags/uy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ag-grid/ag-grid-vue-example/c93cb283eeadb950c979e931fe7f6ac39ec90b26/images/flags/uy.png -------------------------------------------------------------------------------- /images/flags/ve.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ag-grid/ag-grid-vue-example/c93cb283eeadb950c979e931fe7f6ac39ec90b26/images/flags/ve.png -------------------------------------------------------------------------------- /images/frost.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ag-grid/ag-grid-vue-example/c93cb283eeadb950c979e931fe7f6ac39ec90b26/images/frost.png -------------------------------------------------------------------------------- /images/horse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ag-grid/ag-grid-vue-example/c93cb283eeadb950c979e931fe7f6ac39ec90b26/images/horse.png -------------------------------------------------------------------------------- /images/niall.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ag-grid/ag-grid-vue-example/c93cb283eeadb950c979e931fe7f6ac39ec90b26/images/niall.png -------------------------------------------------------------------------------- /images/phone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ag-grid/ag-grid-vue-example/c93cb283eeadb950c979e931fe7f6ac39ec90b26/images/phone.png -------------------------------------------------------------------------------- /images/sean.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ag-grid/ag-grid-vue-example/c93cb283eeadb950c979e931fe7f6ac39ec90b26/images/sean.png -------------------------------------------------------------------------------- /images/skills/android.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ag-grid/ag-grid-vue-example/c93cb283eeadb950c979e931fe7f6ac39ec90b26/images/skills/android.png -------------------------------------------------------------------------------- /images/skills/css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ag-grid/ag-grid-vue-example/c93cb283eeadb950c979e931fe7f6ac39ec90b26/images/skills/css.png -------------------------------------------------------------------------------- /images/skills/html5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ag-grid/ag-grid-vue-example/c93cb283eeadb950c979e931fe7f6ac39ec90b26/images/skills/html5.png -------------------------------------------------------------------------------- /images/skills/mac.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ag-grid/ag-grid-vue-example/c93cb283eeadb950c979e931fe7f6ac39ec90b26/images/skills/mac.png -------------------------------------------------------------------------------- /images/skills/windows.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ag-grid/ag-grid-vue-example/c93cb283eeadb950c979e931fe7f6ac39ec90b26/images/skills/windows.png -------------------------------------------------------------------------------- /images/smiley-sad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ag-grid/ag-grid-vue-example/c93cb283eeadb950c979e931fe7f6ac39ec90b26/images/smiley-sad.png -------------------------------------------------------------------------------- /images/smiley.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ag-grid/ag-grid-vue-example/c93cb283eeadb950c979e931fe7f6ac39ec90b26/images/smiley.png -------------------------------------------------------------------------------- /images/statue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ag-grid/ag-grid-vue-example/c93cb283eeadb950c979e931fe7f6ac39ec90b26/images/statue.png -------------------------------------------------------------------------------- /images/sun.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ag-grid/ag-grid-vue-example/c93cb283eeadb950c979e931fe7f6ac39ec90b26/images/sun.png -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | moduleFileExtensions: [ 3 | 'js', 4 | 'jsx', 5 | 'json', 6 | 'vue' 7 | ], 8 | transform: { 9 | '^.+\\.vue$': 'vue-jest', 10 | '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub', 11 | '^.+\\.jsx?$': 'babel-jest' 12 | }, 13 | moduleNameMapper: { 14 | '^@/(.*)$': '/src/$1' 15 | }, 16 | snapshotSerializers: [ 17 | 'jest-serializer-vue' 18 | ], 19 | transformIgnorePatterns: ['node_modules/(?!(@ag-grid-community/vue)/)'], 20 | testMatch: [ 21 | '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)' 22 | ], 23 | testURL: 'http://localhost/' 24 | } 25 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ag-grid-vue-example", 3 | "version": "31.1.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "npm run serve", 7 | "serve": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve --host 0.0.0.0", 8 | "build": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service build", 9 | "build-prod": "npm run build", 10 | "testx": "vue-cli-service test:unit --env=jest-environment-jsdom-fourteen", 11 | "test:debug": "node --inspect-brk ./node_modules/@vue/cli-service/bin/vue-cli-service.js test:unit" 12 | }, 13 | "dependencies": { 14 | "@ag-grid-community/client-side-row-model": "~31.1.0", 15 | "@ag-grid-community/core": "~31.1.0", 16 | "@ag-grid-community/csv-export": "~31.1.0", 17 | "@ag-grid-community/infinite-row-model": "~31.1.0", 18 | "@ag-grid-community/vue": "~31.1.0", 19 | "@ag-grid-community/styles": "~31.1.0", 20 | "@ag-grid-enterprise/charts": "~31.1.0", 21 | "@ag-grid-enterprise/clipboard": "~31.1.0", 22 | "@ag-grid-enterprise/column-tool-panel": "~31.1.0", 23 | "@ag-grid-enterprise/core": "~31.1.0", 24 | "@ag-grid-enterprise/excel-export": "~31.1.0", 25 | "@ag-grid-enterprise/filter-tool-panel": "~31.1.0", 26 | "@ag-grid-enterprise/master-detail": "~31.1.0", 27 | "@ag-grid-enterprise/menu": "~31.1.0", 28 | "@ag-grid-enterprise/multi-filter": "~31.1.0", 29 | "@ag-grid-enterprise/range-selection": "~31.1.0", 30 | "@ag-grid-enterprise/rich-select": "~31.1.0", 31 | "@ag-grid-enterprise/row-grouping": "~31.1.0", 32 | "@ag-grid-enterprise/server-side-row-model": "~31.1.0", 33 | "@ag-grid-enterprise/set-filter": "~31.1.0", 34 | "@ag-grid-enterprise/side-bar": "~31.1.0", 35 | "@ag-grid-enterprise/sparklines": "~31.1.0", 36 | "@ag-grid-enterprise/status-bar": "~31.1.0", 37 | "@ag-grid-enterprise/viewport-row-model": "~31.1.0", 38 | "bootstrap": "4.6.0", 39 | "vue": "2.6.14", 40 | "vue-property-decorator": "9.1.2", 41 | "vue-router": "3.5.3" 42 | }, 43 | "devDependencies": { 44 | "@vue/cli-plugin-babel": "4.5.15", 45 | "@vue/cli-plugin-unit-jest": "4.5.15", 46 | "@vue/cli-service": "4.5.15", 47 | "@vue/test-utils": "1.1.3", 48 | "babel-core": "7.0.0-bridge.0", 49 | "babel-jest": "26.6.3", 50 | "jest-environment-jsdom-fourteen": "1.0.1", 51 | "vue-template-compiler": "2.6.14" 52 | }, 53 | "browserslist": [ 54 | "> 1%", 55 | "last 2 versions", 56 | "not ie >= 0", 57 | "not ie_mob >= 0" 58 | ] 59 | } -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ag-grid/ag-grid-vue-example/c93cb283eeadb950c979e931fe7f6ac39ec90b26/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | AG Grid Vue Examples 11 | 12 | 13 |
14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 14 | 28 | -------------------------------------------------------------------------------- /src/large-data-set-example/LargeDataSetExample.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 102 | 103 | 105 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import '../node_modules/@ag-grid-community/styles/ag-grid.css'; 2 | import '../node_modules/@ag-grid-community/styles/ag-theme-alpine.css'; 3 | import '../node_modules/bootstrap/dist/css/bootstrap.css'; 4 | 5 | import '@ag-grid-community/client-side-row-model'; 6 | import '@ag-grid-community/infinite-row-model'; 7 | import '@ag-grid-community/csv-export'; 8 | 9 | import Vue from 'vue'; 10 | import VueRouter from 'vue-router'; 11 | import App from './App.vue'; 12 | import routes from './routes'; 13 | 14 | // import "@ag-grid-community/client-side-row-model"; 15 | 16 | // only needed if you use ag-grid enterprise features 17 | // import "ag-grid-enterprise"; 18 | // import {LicenseManager} from "ag-grid-enterprise"; 19 | // LicenseManager.setLicenseKey("your license key"); 20 | 21 | Vue.use(VueRouter); 22 | 23 | const router = new VueRouter({ 24 | routes 25 | }); 26 | 27 | new Vue({ 28 | router, 29 | render: h => h(App) 30 | }).$mount('#app'); 31 | -------------------------------------------------------------------------------- /src/rich-grid-example/CellComponentEditor.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 44 | 45 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /src/rich-grid-example/CellComponentRenderer.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | 9 | 14 | -------------------------------------------------------------------------------- /src/rich-grid-example/DateComponent.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 84 | 85 | 111 | -------------------------------------------------------------------------------- /src/rich-grid-example/HeaderGroupComponent.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 43 | 44 | 98 | -------------------------------------------------------------------------------- /src/rich-grid-example/RichGridExample.vue: -------------------------------------------------------------------------------- 1 | 75 | 76 | 364 | 365 | 406 | -------------------------------------------------------------------------------- /src/rich-grid-example/proficiencyFilter.js: -------------------------------------------------------------------------------- 1 | const FILTER_TITLE = 2 | '
' + 3 | 'TITLE_NAME' + 4 | '
'; 5 | 6 | const PROFICIENCY_TEMPLATE = 7 | ''; 11 | 12 | const PROFICIENCY_NONE = 'none'; 13 | const PROFICIENCY_ABOVE40 = 'above40'; 14 | const PROFICIENCY_ABOVE60 = 'above60'; 15 | const PROFICIENCY_ABOVE80 = 'above80'; 16 | 17 | const PROFICIENCY_NAMES = ['No Filter', 'Above 40%', 'Above 60%', 'Above 80%']; 18 | const PROFICIENCY_VALUES = [PROFICIENCY_NONE, PROFICIENCY_ABOVE40, PROFICIENCY_ABOVE60, PROFICIENCY_ABOVE80]; 19 | 20 | export class ProficiencyFilter { 21 | init(params) { 22 | this.filterChangedCallback = params.filterChangedCallback; 23 | this.selected = PROFICIENCY_NONE; 24 | this.valueGetter = params.valueGetter; 25 | } 26 | 27 | getGui() { 28 | let eGui = document.createElement('div'); 29 | let eInstructions = document.createElement('div'); 30 | eInstructions.innerHTML = FILTER_TITLE.replace('TITLE_NAME', 'Custom Proficiency Filter'); 31 | eGui.appendChild(eInstructions); 32 | 33 | let random = '' + Math.random(); 34 | 35 | let that = this; 36 | PROFICIENCY_NAMES.forEach(function (name, index) { 37 | let eFilter = document.createElement('div'); 38 | eFilter.style.marginTop = "3px"; 39 | eFilter.innerHTML = PROFICIENCY_TEMPLATE.replace('PROFICIENCY_NAME', name).replace('RANDOM', random); 40 | let eRadio = eFilter.querySelector('input'); 41 | if (index === 0) { 42 | eRadio.checked = true; 43 | } 44 | eGui.appendChild(eFilter); 45 | 46 | eRadio.addEventListener('click', function () { 47 | that.selected = PROFICIENCY_VALUES[index]; 48 | that.filterChangedCallback(); 49 | }); 50 | }); 51 | 52 | return eGui; 53 | } 54 | 55 | doesFilterPass(params) { 56 | 57 | let value = this.valueGetter(params); 58 | let valueAsNumber = parseFloat(value); 59 | 60 | switch (this.selected) { 61 | case PROFICIENCY_ABOVE40 : 62 | return valueAsNumber >= 40; 63 | case PROFICIENCY_ABOVE60 : 64 | return valueAsNumber >= 60; 65 | case PROFICIENCY_ABOVE80 : 66 | return valueAsNumber >= 80; 67 | default : 68 | return true; 69 | } 70 | 71 | } 72 | 73 | isFilterActive() { 74 | return this.selected !== PROFICIENCY_NONE; 75 | } 76 | 77 | getModel() { 78 | return undefined; 79 | } 80 | 81 | setModel(model) { 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /src/rich-grid-example/refData.js: -------------------------------------------------------------------------------- 1 | export default { 2 | FIRST_NAMES: [ 3 | "Sophie", "Isabelle", "Emily", "Olivia", "Lily", "Chloe", "Isabella", 4 | "Amelia", "Jessica", "Sophia", "Ava", "Charlotte", "Mia", "Lucy", "Grace", "Ruby", 5 | "Ella", "Evie", "Freya", "Isla", "Poppy", "Daisy", "Layla" 6 | ], 7 | 8 | LAST_NAMES: [ 9 | "Beckham", "Black", "Braxton", "Brennan", "Brock", "Bryson", "Cadwell", 10 | "Cage", "Carson", "Chandler", "Cohen", "Cole", "Corbin", "Dallas", "Dalton", "Dane", 11 | "Donovan", "Easton", "Fisher", "Fletcher", "Grady", "Greyson", "Griffin", "Gunner", 12 | "Hayden", "Hudson", "Hunter", "Jacoby", "Jagger", "Jaxon", "Jett", "Kade", "Kane", 13 | "Keating", "Keegan", "Kingston", "Kobe" 14 | ], 15 | 16 | COUNTRY_CODES: { 17 | Ireland: "ie", 18 | Spain: "es", 19 | "United Kingdom": "gb", 20 | France: "fr", 21 | Germany: "de", 22 | Sweden: "se", 23 | Italy: "it", 24 | Greece: "gr", 25 | Iceland: "is", 26 | Portugal: "pt", 27 | Malta: "mt", 28 | Norway: "no", 29 | Brazil: "br", 30 | Argentina: "ar", 31 | Colombia: "co", 32 | Peru: "pe", 33 | Venezuela: "ve", 34 | Uruguay: "uy" 35 | }, 36 | 37 | COUNTRIES: [ 38 | {country: "Ireland", continent: "Europe", language: "English"}, 39 | {country: "Spain", continent: "Europe", language: "Spanish"}, 40 | {country: "United Kingdom", continent: "Europe", language: "English"}, 41 | {country: "France", continent: "Europe", language: "French"}, 42 | {country: "Germany", continent: "Europe", language: "(other)"}, 43 | {country: "Sweden", continent: "Europe", language: "(other)"}, 44 | {country: "Norway", continent: "Europe", language: "(other)"}, 45 | {country: "Italy", continent: "Europe", language: "(other)"}, 46 | {country: "Greece", continent: "Europe", language: "(other)"}, 47 | {country: "Iceland", continent: "Europe", language: "(other)"}, 48 | {country: "Portugal", continent: "Europe", language: "Portuguese"}, 49 | {country: "Malta", continent: "Europe", language: "(other)"}, 50 | {country: "Brazil", continent: "South America", language: "Portuguese"}, 51 | {country: "Argentina", continent: "South America", language: "Spanish"}, 52 | {country: "Colombia", continent: "South America", language: "Spanish"}, 53 | {country: "Peru", continent: "South America", language: "Spanish"}, 54 | {country: "Venezuela", continent: "South America", language: "Spanish"}, 55 | {country: "Uruguay", continent: "South America", language: "Spanish"} 56 | ], 57 | 58 | DOBs: [ 59 | new Date(2000, 0, 1), 60 | new Date(2001, 1, 2), 61 | new Date(2002, 2, 3), 62 | new Date(2003, 3, 4), 63 | new Date(2004, 4, 5), 64 | new Date(2005, 5, 6), 65 | new Date(2006, 6, 7), 66 | new Date(2007, 7, 8), 67 | new Date(2008, 8, 9), 68 | new Date(2009, 9, 10), 69 | new Date(2010, 10, 11), 70 | new Date(2011, 11, 12) 71 | ], 72 | 73 | ADDRESSES: [ 74 | '1197 Thunder Wagon Common, Cataract, RI, 02987-1016, US, (401) 747-0763', 75 | '3685 Rocky Glade, Showtucket, NU, X1E-9I0, CA, (867) 371-4215', 76 | '3235 High Forest, Glen Campbell, MS, 39035-6845, US, (601) 638-8186', 77 | '2234 Sleepy Pony Mall , Drain, DC, 20078-4243, US, (202) 948-3634', 78 | '2722 Hazy Turnabout, Burnt Cabins, NY, 14120-5642, US, (917) 604-6597', 79 | '6686 Lazy Ledge, Two Rock, CA, 92639-3020, US, (619) 901-9911', 80 | '2000 Dewy Limits, Wacahoota, NF, A4L-2V9, CA, (709) 065-3959', 81 | '7710 Noble Pond Avenue, Bolivia, RI, 02931-1842, US, (401) 865-2160', 82 | '3452 Sunny Vale, Pyro, ON, M8V-4Z0, CA, (519) 072-8609', 83 | '4402 Dusty Cove, Many Farms, UT, 84853-8223, US, (435) 518-0673', 84 | '5198 Silent Parade, Round Bottom, MD, 21542-9798, US, (301) 060-7245', 85 | '8550 Shady Moor, Kitty Fork, CO, 80941-6207, US, (303) 502-3767', 86 | '2131 Old Dell, Merry Midnight, AK, 99906-8842, US, (907) 369-2206', 87 | '7390 Harvest Crest, Mosquito Crossing, RI, 02957-6116, US, (401) 463-6348', 88 | '874 Little Point, Hot Coffee, BC, V3U-2P6, CA, (250) 706-9207', 89 | '8834 Stony Pioneer Heights, Newlove, OR, 97419-8670, US, (541) 408-2213', 90 | '9829 Grand Beach, Flint, UT, 84965-9900, US, (435) 700-5161', 91 | '3799 Cozy Blossom Ramp, Ptarmigan, MS, 38715-0313, US, (769) 740-1526', 92 | '3254 Silver Island Loop, Maunaloa, DE, 19869-3169, US, (302) 667-7671', 93 | '1081 Middle Wood, Taylors Gut Landing, OR, 97266-2873, US, (541) 357-6310', 94 | '1137 Umber Trail, Shacktown, NW, X3U-5Y8, CA, (867) 702-6883', 95 | '9914 Hidden Bank, Wyoming, MO, 64635-9665, US, (636) 280-4192', 96 | '7080 Misty Nectar Townline, Coward, AB, T9U-3N4, CA, (403) 623-2838', 97 | '1184 Wishing Grounds, Vibank, NW, X7D-0V9, CA, (867) 531-2730', 98 | '126 Easy Pointe, Grandview Beach, KY, 40928-9539, US, (502) 548-0956', 99 | '6683 Colonial Street, Swan River, BC, V1A-9I8, CA, (778) 014-4257', 100 | '960 Gentle Oak Lane, Shakopee, ND, 58618-6277, US, (701) 327-1219', 101 | '6918 Cotton Pine Corner, Kenaston, IA, 52165-3975, US, (515) 906-7427', 102 | '2368 Burning Woods, Ernfold, NY, 11879-9186, US, (646) 819-0355', 103 | '5646 Quiet Shadow Chase, Tiger Tail, IA, 52283-5537, US, (712) 375-9225', 104 | '5466 Foggy Mountain Dale, Sweet Home, MT, 59738-0251, US, (406) 881-1706', 105 | '5313 Clear Willow Route, Amazon, BC, V0S-2S6, CA, (604) 340-7596', 106 | '7000 Pleasant Autoroute, Spaceport City, UT, 84749-2448, US, (435) 154-3360', 107 | '8359 Quaking Anchor Road, Gross, BC, V9O-0H5, CA, (250) 985-3859', 108 | '5143 Amber Deer Hollow, New Deal, ND, 58446-0853, US, (701) 927-0322', 109 | '6230 Jagged Bear Key, Young, AR, 72337-3811, US, (501) 805-7239', 110 | '7207 Heather Vista, Devon, WY, 82520-1771, US, (307) 358-7092', 111 | '9416 Red Rise Place, Spraytown, OK, 73809-4766, US, (580) 867-1973', 112 | '3770 Golden Horse Diversion, Yelland, IL, 60471-1487, US, (224) 717-9349', 113 | '4819 Honey Treasure Park, Alaska, NB, E1U-3I0, CA, (506) 656-9138', 114 | '6187 Round Front, Land O Lakes, AK, 99873-6403, US, (907) 853-9063', 115 | '9218 Crystal Highway, Pickelville, MT, 59847-9299, US, (406) 076-0024', 116 | '6737 Bright Quay, Lazy Mountain, KY, 42390-4772, US, (606) 256-7288', 117 | '237 Merry Campus, Twentysix, SC, 29330-4909, US, (864) 945-0157', 118 | '446 Fallen Gate Rise, Petrolia, SC, 29959-9527, US, (864) 826-0553', 119 | '2347 Indian Boulevard, Frisbee, VA, 23797-6458, US, (703) 656-8445', 120 | '365 Emerald Grove Line, Level, NC, 28381-1514, US, (919) 976-7958', 121 | '1207 Iron Extension, Klickitat, SC, 29197-8571, US, (803) 535-7888', 122 | '6770 Cinder Glen, Caronport, OH, 45053-5002, US, (440) 369-4018', 123 | '7619 Tawny Carrefour, Senlac, NV, 89529-9876, US, (775) 901-6433'], 124 | 125 | IT_SKILLS: ['android', 'css', 'html5', 'mac', 'windows'], 126 | 127 | IT_SKILLS_NAMES: ['Android', 'CSS', 'HTML 5', 'Mac', 'Windows'], 128 | } 129 | -------------------------------------------------------------------------------- /src/rich-grid-example/skillFilter.js: -------------------------------------------------------------------------------- 1 | import RefData from "./refData"; 2 | 3 | const SKILL_TEMPLATE = 4 | ''; 13 | 14 | const FILTER_TITLE = 15 | '
' + 16 | 'TITLE_NAME' + 17 | '
'; 18 | 19 | export class SkillFilter { 20 | init(params) { 21 | this.filterChangedCallback = params.filterChangedCallback; 22 | this.model = { 23 | android: false, 24 | css: false, 25 | html5: false, 26 | mac: false, 27 | windows: false 28 | }; 29 | } 30 | 31 | getGui() { 32 | let eGui = document.createElement('div'); 33 | eGui.style.width = '380px'; 34 | let eInstructions = document.createElement('div'); 35 | eInstructions.innerHTML = FILTER_TITLE.replace('TITLE_NAME', 'Custom Skills Filter'); 36 | eGui.appendChild(eInstructions); 37 | 38 | let that = this; 39 | 40 | RefData.IT_SKILLS.forEach(function (skill, index) { 41 | let skillName = RefData.IT_SKILLS_NAMES[index]; 42 | let eSpan = document.createElement('span'); 43 | let html = SKILL_TEMPLATE.replace("SKILL_NAME", skillName).replace("SKILL", skill); 44 | eSpan.innerHTML = html; 45 | 46 | let eCheckbox = eSpan.querySelector('input'); 47 | eCheckbox.addEventListener('click', function () { 48 | that.model[skill] = eCheckbox.checked; 49 | that.filterChangedCallback(); 50 | }); 51 | 52 | eGui.appendChild(eSpan); 53 | }); 54 | 55 | return eGui; 56 | } 57 | 58 | doesFilterPass(params) { 59 | 60 | let rowSkills = params.data.skills; 61 | let model = this.model; 62 | let passed = true; 63 | 64 | RefData.IT_SKILLS.forEach(function (skill) { 65 | if (model[skill]) { 66 | if (!rowSkills[skill]) { 67 | passed = false; 68 | } 69 | } 70 | }); 71 | 72 | return passed; 73 | } 74 | 75 | isFilterActive() { 76 | let model = this.model; 77 | let somethingSelected = model.android || model.css || model.html5 || model.mac || model.windows; 78 | return somethingSelected; 79 | } 80 | 81 | getModel() { 82 | return undefined; 83 | } 84 | 85 | setModel(model) { 86 | } 87 | } 88 | 89 | -------------------------------------------------------------------------------- /src/router.js: -------------------------------------------------------------------------------- 1 | import RichGridExample from './rich-grid-example/RichGridExample.vue'; 2 | import LargeDataSetExample from './large-data-set-example/LargeDataSetExample.vue'; 3 | 4 | import {createRouter, createWebHistory} from 'vue-router'; 5 | 6 | const router = createRouter({ 7 | history: createWebHistory(), 8 | routes: [ 9 | {path: '/', component: RichGridExample, name: 'Rich Grid with Pure JavaScript'}, 10 | {path: '/large-data', component: LargeDataSetExample, name: 'Large Data Example'}, 11 | ], 12 | }) 13 | 14 | export default router; 15 | -------------------------------------------------------------------------------- /src/routes.js: -------------------------------------------------------------------------------- 1 | import RichGridExample from './rich-grid-example/RichGridExample.vue'; 2 | import LargeDataSetExample from './large-data-set-example/LargeDataSetExample.vue'; 3 | 4 | export default [ 5 | { 6 | path: '/', 7 | components: { 8 | default: RichGridExample 9 | }, 10 | name: 'Rich Grid with Pure JavaScript' 11 | }, 12 | {path: '/large-data', component: LargeDataSetExample, name: 'Large Data Example'} 13 | ]; 14 | -------------------------------------------------------------------------------- /tests/Editor.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 36 | 37 | 39 | -------------------------------------------------------------------------------- /tests/GridExample.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 90 | 91 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /tests/Renderer.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 7 | 8 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /tests/unit/example.spec.js: -------------------------------------------------------------------------------- 1 | import {mount} from '@vue/test-utils' 2 | import GridExample from '../GridExample.vue' 3 | 4 | const ensureGridApiHasBeenSet = vm => new Promise(function (resolve, reject) { 5 | (function waitForGridReady() { 6 | // we need to wait for the gridReady event before we can start interacting with the grid 7 | // in this case we're looking at the api property in our App component, but it could be anything (ie a boolean flag) 8 | if (vm.$data.api) { 9 | 10 | // once our condition has been met we can start the tests 11 | return resolve(); 12 | } 13 | 14 | // not set - wait a bit longer 15 | setTimeout(waitForGridReady, 20); 16 | })(); 17 | }); 18 | 19 | let wrapper = null; 20 | describe('GridExample.vue', () => { 21 | beforeEach((done) => { 22 | wrapper = mount(GridExample, {}); 23 | 24 | // don't start our tests until the grid is ready 25 | // it doesn't take long for the grid to initialise, but it is some finite amount of time after the component is ready 26 | ensureGridApiHasBeenSet(wrapper.vm).then(() => done()); 27 | }); 28 | 29 | 30 | it('grid renders as expected', () => { 31 | const cells = wrapper.findAll('.ag-cell-value'); 32 | expect(cells.length).toEqual(2); 33 | 34 | expect(cells.at(0).text()).toEqual('Toyota'); 35 | expect(cells.at(1).text()).toEqual('70000'); 36 | }); 37 | 38 | // it('cell should be editable and editor component usable', () => { 39 | // // wait for the api to be set before continuing 40 | // const componentInstance = wrapper.vm; 41 | // 42 | // const api = componentInstance.$data.api; 43 | // 44 | // // we use the API to start and stop editing - in a real e2e test we could actually double click on the cell etc 45 | // api.startEditingCell({ 46 | // rowIndex: 0, 47 | // colKey: 'price' 48 | // }); 49 | // 50 | // // update the editor input 51 | // const textInput = wrapper.find('input[type="number"]'); 52 | // textInput.setValue(100000); 53 | // 54 | // // stop editing 55 | // api.stopEditing(); 56 | // 57 | // // test the resulting values in the grid (the edited cell value should have changed) 58 | // const cells = wrapper.findAll('.ag-cell-value'); 59 | // expect(cells.length).toEqual(2); 60 | // 61 | // expect(cells.at(0).text()).toEqual('Toyota'); 62 | // expect(cells.at(1).text()).toEqual('200000'); 63 | // }); 64 | }); 65 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | configureWebpack: { 5 | resolve: { 6 | symlinks: false, 7 | alias: { 8 | // Make sure *our* version of ag-grid & vue is always loaded. 9 | // This is needed for `yarn link / npm link` to work and prevent duplicate versions of these libs 10 | // being loaded 11 | '@ag-grid-community/core$': path.resolve(__dirname, 'node_modules/@ag-grid-community/core'), 12 | vue$: path.resolve(__dirname, 'node_modules/vue/dist/vue.common.js') 13 | } 14 | }, 15 | performance: { 16 | hints: false 17 | } 18 | } 19 | }; 20 | --------------------------------------------------------------------------------