rfjakob/aggrid.html

## 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>
	<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>