I tried to create a grid for a report dashboard using AG Grid, but it doesn't seem to work, the grid gets stuck in the Loading screen. I tried using a different dataset from JsonPlaceholder/todos which worked, so I double-checked that the right names were given to the column definitions, but it didn't help much
I'm using Javascript Vanilla and HTML
Thanks in advance
Javascript:
var pcStatus = [
{
"userId": "Front Desk 1",
"id": "192.168.1.1",
"info": "Updating",
"status": "UP"
}
];
document.addEventListener('DOMContentLoaded', function(){
var grid = document.getElementById('myGrid');
var cellClassRules = {
'false': function(params){
return params.value == false
},
'true': function(params){
return params.value == true
}
};
const columnDefs = [
{ headerName: "Device", field: 'userId', filter: 'agNumberColumnFilter'},
{ headerName: "IP Address", field: 'id', filter: 'agNumberColumnFilter' },
{ headerName: "Status", field: 'status'},
{ headerName: "More Info", field: 'info' }
];
const gridOptions = {
defaultColDef: {
flex: 1,
minWidth: 90,
resizable: true,
sortable: true,
filter: 'agTextColumnFilter',
filterParams: {
buttons: ['reset', 'apply'],
closeOnApply: true,
}
},
animateRows: true,
rowSelection: 'multiple',
columnDefs: columnDefs,
onGridReady: pcStatus,
};
new agGrid.Grid(grid, gridOptions);
});
HTML
<!DOCTYPE html>
<html>
<head>
<script src="./javas.js"></script>
<script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script>
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css">
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-balham.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="myGrid" class="ag-theme-balham">
</div>
</body>
</html>