Published
Edited
Apr 14, 2020
1 fork
5 stars
grid = html`<div id="myGrid" style="width: 50%;height:200px" class="ag-theme-balham"></div>`
gridOptions = {
const eGridDiv = document.getElementById('myGrid');
const columnDefs = [
{ headerName: "Make", field: "make" },
{ headerName: "Model", field: "model" },
{ headerName: "Price", field: "price" }
];
const rowData = [
{ make: "Toyota", model: "Celica", price: 35000 },
{ make: "Ford", model: "Mondeo", price: 32000 },
{ make: "Porsche", model: "Boxter", price: 72000 }
];
// let the grid know which columns and what data to use
const gridOptions = {
columnDefs: columnDefs,
rowData: rowData,
rowSelection: 'single'
};
new AgGrid.Grid(eGridDiv, gridOptions);
gridOptions.api.sizeColumnsToFit();
return gridOptions;
}
stylesheet2 = html`<link rel='stylesheet'
href='https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css' />`
stylesheet1 = html`<link rel='stylesheet'
href='https://unpkg.com/ag-grid-community/dist/styles/ag-theme-balham.css' />`
AgGrid = require('ag-grid-community@23.0.2/dist/ag-grid-community.js')
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
