Vue.js - Boolean Checkbox Renderer

<!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>
            </head>
<body>
<div id="app" style="height: 100%">
    <my-component>Loading Vue example&hellip;</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.3/",
    "@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.3/",
    "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>

import Vue from 'vue';
import { AgGridVue } from 'ag-grid-vue';
import 'ag-grid-enterprise';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

import CheckboxCellRenderer from './checkbox-cell-renderer.js';

const VueExample = {
  template: `
        <div style="height: 100%">
            <ag-grid-vue
                style="width: 100%; height: 100%;"
                class="ag-theme-alpine"
                id="myGrid"
                :gridOptions="gridOptions"
                @grid-ready="onGridReady"
                :columnDefs="columnDefs"
                :defaultColDef="defaultColDef"
                :frameworkComponents="frameworkComponents"
                :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    'ag-grid-vue': AgGridVue,
  },
  data: function() {
    return {
      gridOptions: null,
      gridApi: null,
      columnApi: null,
      columnDefs: null,
      defaultColDef: null,
      rowData: null,
      frameworkComponents: null,
    };
  },
  beforeMount() {
    this.gridOptions = {};
    this.columnDefs = [
      { field: 'athlete' },
      {
        headerName: 'Registered - Checkbox',
        field: 'registered',
        cellRenderer: 'checkboxRenderer',
      },
      {
        headerName: 'Registered - Boolean',
        field: 'registered',
      }
    ];
    this.defaultColDef = {
      flex: 1,
    };
    this.frameworkComponents = {
      checkboxRenderer: CheckboxCellRenderer,
    };
  },
  mounted() {
    this.gridApi = this.gridOptions.api;
    this.gridColumnApi = this.gridOptions.columnApi;
  },
  methods: {
    onGridReady(params) {
      const httpRequest = new XMLHttpRequest();
      const updateData = data => {
        this.rowData = data;
      };

      httpRequest.open(
        'GET',
        'https://raw.githubusercontent.com/ag-grid/ag-grid/master/grid-packages/ag-grid-docs/src/olympicWinnersSmall.json'
      );
      httpRequest.send();
      httpRequest.onreadystatechange = () => {
        if (httpRequest.readyState === 4 && httpRequest.status === 200) {
          let data = JSON.parse(httpRequest.responseText).map(d => ({
            ...d,
            registered: Math.random() < 0.5,
          }));
          updateData(data);
        }
      };
    }
  },
};

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: `
    <input 
      type="checkbox" 
      @click="checkedHandler($event)"
      :checked="params.value"
    />
`,
  methods: {
    checkedHandler(event) {
      let checked = event.target.checked;
      let colId = this.params.column.colId;
      this.params.node.setDataValue(colId, checked);
  }
  },
});