Skip to content

Instantly share code, notes, and snippets.

@rfjakob

rfjakob/aggrid.html

Created December 17, 2023 20:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rfjakob/b37d31b33bf7e137fa32b3441d677405 to your computer and use it in GitHub Desktop.
Save rfjakob/b37d31b33bf7e137fa32b3441d677405 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
aggrid.html
<html lang="en">
<head>
<!-- Includes all JS & CSS for AG Grid -->
<script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script>
</head>
<body>
<input type="text" id="filter-text-box" placeholder="Filter..." oninput="onFilterTextBoxChanged()">
<!-- Your grid container -->
<div id="myGrid" class="ag-theme-quartz"></div>
<script>
// Grid API: Access to Grid API methods
let gridApi;
// Grid Options: Contains all of the grid configurations
const gridOptions = {
// Row Data: The data to be displayed.
rowData: [],
// Column Definitions: Defines & controls grid columns.
columnDefs: [
{ field: 'id' },
{ field: 'done' },
{ field: 'task' },
{ field: 'due' },
],
autoSizeStrategy: {
type: 'fitCellContents'
},
/* no internal scrollbars */
domLayout: 'autoHeight',
};
// Create Grid: Create new grid within the #myGrid div, using the Grid Options object
gridApi = agGrid.createGrid(document.querySelector('#myGrid'), gridOptions);
//gridApi.setGridOption('quickFilterText', 'new filter text');
function onFilterTextBoxChanged() {
gridApi.setGridOption(
'quickFilterText',
document.getElementById('filter-text-box').value
);
}
// Fetch Remote Data
fetch('http://localhost:3000/todos')
.then((response) => response.json())
.then((data) => gridApi.setGridOption('rowData', data));
</script>
<p>Built using AG Grid</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment