Traté de crear una cuadrícula para un tablero de informes usando AG Grid, pero parece que no funciona, la cuadrícula se atasca en la pantalla de carga. Intenté usar un conjunto de datos diferente de JsonPlaceholder/todos que funcionó, así que verifiqué dos veces que se dieron los nombres correctos a las definiciones de columna, pero no ayudó mucho
Estoy usando Javascript Vanilla y HTML
Gracias por adelantado
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>