JS - Boolean Checkbox Renderer

<!DOCTYPE html>
<html lang="en">
<head>
    <script>var __basePath = '/';</script>
    <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://unpkg.com/@ag-grid-enterprise/all-modules@23.1.1/dist/ag-grid-enterprise.min.js"></script>
    </head>

<body>
    <div id="myGrid" class="ag-theme-alpine" style="height: 100%;"></div>

    <script src="CheckboxRenderer.js"></script>
    <script src="main.js"></script>
</body>
</html>

var gridOptions = {
  columnDefs: [
    { field: 'athlete' },
    { 
      headerName: 'Registered - Checkbox',
      field: 'registered',
      cellRenderer: 'checkboxRenderer',
    },
    {
      headerName: 'Registered - Boolean',
      field: 'registered',
    }
  ],
  defaultColDef: {
    flex: 1,
  },
  components: {
    checkboxRenderer: CheckboxRenderer
  },
};

// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
  var gridDiv = document.querySelector('#myGrid');
  new agGrid.Grid(gridDiv, gridOptions);

  agGrid
    .simpleHttpRequest({
      url:
        'https://raw.githubusercontent.com/ag-grid/ag-grid/master/grid-packages/ag-grid-docs/src/olympicWinnersSmall.json',
    })
    .then(function(data) {
      data = data.map(d => ({
        ...d,
        registered: Math.random() < 0.5
      }))
      gridOptions.api.setRowData(data);
    });
});

function CheckboxRenderer() {}

CheckboxRenderer.prototype.init = function(params) {
  this.params = params;

  this.eGui = document.createElement('input');
  this.eGui.type = 'checkbox';
  this.eGui.checked = params.value;

  this.checkedHandler = this.checkedHandler.bind(this);
  this.eGui.addEventListener('click', this.checkedHandler);
}

CheckboxRenderer.prototype.checkedHandler = function(e) {
  let checked = e.target.checked;
  let colId = this.params.column.colId;
  this.params.node.setDataValue(colId, checked);
}

CheckboxRenderer.prototype.getGui = function(params) {
  return this.eGui;
}

CheckboxRenderer.prototype.destroy = function(params) {
  this.eGui.removeEventListener('click', this.checkedHandler);
}