JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/7.1.0/ag-grid.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/7.1.0/styles/ag-grid.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/7.1.0/styles/theme-blue.css">
<button id='addRow' >Add row</button>
<div id="myGrid" style="height: 500px" class="ag-blue"></div>

JavaScript

var columns = [
    {
        headerName: 'ID', field: 'id', width: 50, editable: true  
    }, {
        headerName: 'Name', field: 'name', width: 100, editable: true
    }, {
        headerName: "Address", field: "address", width: 200, editable: true
    }, {
        headerName: "Children", field: "children", width: 200, editable: true
    }
];

var gridOptions = {
    columnDefs: columns,
    rowData: []
};

new agGrid.Grid(document.querySelector('#myGrid'), gridOptions);

document.querySelector('#addRow').addEventListener("click", function() {
    gridOptions.api.addItems([{}]);
});