ag-Grid Simple Example

<html>
<head>
    <script src="https://unpkg.com/ag-grid/dist/ag-grid.js"></script>
    <script src="example-js.js"></script>
</head>
<body>
    <div id="myGrid" style="height: 115px;width:100%;margin: 5em 0;" class="ag-fresh"></div>
</body>
</html>

// specify the columns
var columnDefs = [
    {
      headerName: "Contrat",
      marryChildren: true,
      children: [
        { headerName: 'Nom', field: "name", minWidth: 300},
        { headerName: 'LE', columnGroupShow: 'open', field: "leList", minWidth: 500},
      ]
    },
    {
      headerName: "Client",
      marryChildren: true,
      children: [
        { headerName: 'Nom', field: "clientName", minWidth: 120, maxWidth: 250},
        { headerName: 'Distributeur', columnGroupShow: 'open', field: "distributorName", minWidth: 120, maxWidth: 250},
      ]
    },
    {
      headerName: "Solution",
      marryChildren: true,
      children: [
        { headerName: 'Nom', field: "solutionName", minWidth: 100, maxWidth: 150},
        { headerName: 'Offre', columnGroupShow: 'open', field: "offerName", minWidth: 120, maxWidth: 120},
      ]
    },
    {headerName: "Date de création", field: "createdAt", minWidth: 120, maxWidth: 120},
    {
      headerName: "Status",
      marryChildren: true,
      children: [
        { headerName: 'Status', columnGroupShow: 'closed', field: "aggregatedStatus", minWidth: 180, maxWidth: 180},
        { headerName: 'Date de début', columnGroupShow: 'open', field: "startOn", minWidth: 100, maxWidth: 100 },
        { headerName: 'Date de fin', columnGroupShow: 'open', field: "endOn", minWidth: 100, maxWidth: 100},
        { headerName: 'Status', columnGroupShow: 'open', field: "status", minWidth: 100, maxWidth: 100},
      ]
    },
    {headerName: "État", field: "state", minWidth: 35, maxWidth: 35},
];

// specify the data
var rowData = [
    {
      name: 'ASMODEE - DIMO GESTION - FIG16',
      leList: 'Asmodee France, Asmodee Digital, 	Asmodee Holding',
      clientName: 'ASMODEE',
      distributorName: 'DIM - Dimo Gestion',
      solutionName: 'Figgo',
      offerName: 'Figgo',
      createdAt: '30/11/2015',
      startOn: '01/02/2016',
      endOn: '',
      status: 'En cours',
      aggregatedStatus: 'Débuté le 01/02/2016',
      state: '\u2713'
    },
];

// let the grid know which columns and what data to use
var gridOptions = {
    columnDefs: columnDefs,
    rowData: rowData,
    onGridReady: function () {
        gridOptions.api.sizeColumnsToFit();
    },
    onColumnGroupOpened: function() {
      gridOptions.api.sizeColumnsToFit();
    },
};

// wait for the document to be loaded, otherwise
// ag-Grid will not find the div in the document.
document.addEventListener("DOMContentLoaded", function() {

    // lookup the container we want the Grid to use
    var eGridDiv = document.querySelector('#myGrid');

    // create the grid passing in the div to use together with the columns & data we want to use
    var grid = new agGrid.Grid(eGridDiv, gridOptions);
});