Untitled

<!DOCTYPE html>
<html lang="en">
<head>
<script> var __basePath = ''; </script>
<style> html, body { margin: 0; padding: 0; height: 100%; } </style>
    <script src="https://unpkg.com/ag-grid@18.1.1/dist/ag-grid.min.js"></script></head>
<body>

<div id="myGrid" style="height: 100%;" class="ag-theme-balham"></div>
    <script src="main.js"></script>
</body>
</html>

/* Styles go here */

var data = [
  {'clientCode':1,'clientName':'client1', 'groupName' : 'groupA', 'assignmentId':1},
  {'clientCode':2,'clientName':'client2', 'groupName' : 'groupA', 'assignmentId':0},
  {'clientCode':3,'clientName':'client3', 'groupName' : 'groupA', 'assignmentId':1},
  ];

var gridOption = {
  enableFilter: true,
  enableSorting: true,
  enableColResize: true,
  pagination: true,
  paginationPageSize: 5,
  rowSelection: 'multiple',
  suppressRowClickSelection: true,
  rowData: data,
  columnDefs: [
      {
        headerName: '',
        width: 40,
        editable: true,
        cellRenderer: params => {
          return `<input type='checkbox' ${params.value ? 'checked' : ''} />`;
        },
        field: 'assignmentId'
    },
    {headerName: 'Client Code', field: 'clientCode'},
    {headerName: 'Client Name', field: 'clientName'},
    {headerName: 'Group Name', field: 'groupName'},
  ],
  getRowStyle: function(params) {
    if (params.node.rowIndex % 2 === 0) {
        return { background: '#dfffdf' }
    }
  }      
};


var mygrid = new agGrid.Grid(document.querySelector('#myGrid'),gridOption);