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: 100%;" class="ag-fresh"></div>
</body>
</html>

var columnDefs = [
    {headerName: "Name", field: "name", cellStyle: {'white-space': 'normal'}},
    {headerName: "Price1", field: "price1"},
    {headerName: "Price2", field: "price2"}
];

var totalRow = {name: "Total", price1: 6000, price2: 139000};

var rowData = [
    {name: "Лорем ипсум долор сит амет, ест ан санцтус фуиссет медиоцритатем, атяуи ноструд еа еос. Но ест натум омнис, вим солеат лаборе репудиандае ан. Фиерент пробатус хис еа, хас поссе демоцритум цонсецтетуер но, при еа дигниссим тинцидунт цонсеяуунтур. Еум не путент нострум нолуиссе, вел ерос сале цонцлусионемяуе еи, цлита ессент темпорибус вим не. Омнес примис демоцритум не сед, хас цу популо фиерент номинави.", price1: 1000, price2: 35000},
    {name: "Ford", price1: 2000, price2: 32000},
    {name: "Porsche", price1: 3000, price2: 72000}
];

var gridOptions = {
    columnDefs: columnDefs,
    rowData: rowData,
    floatingBottomRowData: [totalRow],
    getRowHeight: function(params) {
        // assuming 50 characters per line, working how how many lines we need
        return 18 * (Math.floor(params.data.name.length / 45) + 1);
    }
};

document.addEventListener("DOMContentLoaded", function() {

    var eGridDiv = document.querySelector('#myGrid');

    new agGrid.Grid(eGridDiv, gridOptions);
});