<!DOCTYPE html>
<html lang="en">
<head>
<script>
var __basePath = '/';
</script>
<style media="only screen">
html,
body,
#myGrid {
height: 100%;
width: 100%;
}
</style>
<script src="https://unpkg.com/@ag-grid-enterprise/all-modules@23.1.0/dist/ag-grid-enterprise.min.js"></script>
</head>
<body>
<div id="myGrid" class="ag-theme-alpine-dark"></div>
<script src="main.js"></script>
</body>
</html>
// DATA GENERATION
const _randNum = size => Math.random() * size;
const _zeroPad = num => (num < 10 ? '0' + num : num);
const _generateDate = () => {
var day = Math.round(_randNum(27)) + 1;
var month = Math.round(_randNum(11)) + 1;
var year = Math.round(_randNum(70)) + 1950;
return `${_zeroPad(day)}/${_zeroPad(month)}/${year}`;
};
function createRowData(maxRows) {
rowData = [];
for (var i = 0; i < maxRows; i++) {
var row = {
date: _generateDate(),
};
rowData.push(row);
}
return rowData;
}
// DATE COMPARATOR FOR SORTING
function dateComparator(date1, date2) {
var date1Number = _monthToNum(date1);
var date2Number = _monthToNum(date2);
if (date1Number === null && date2Number === null) {
return 0;
}
if (date1Number === null) {
return -1;
}
if (date2Number === null) {
return 1;
}
return date1Number - date2Number;
}
// HELPER FOR DATE COMPARISON
function _monthToNum(date) {
if (date === undefined || date === null || date.length !== 10) {
return null;
}
var yearNumber = date.substring(6, 10);
var monthNumber = date.substring(3, 5);
var dayNumber = date.substring(0, 2);
var result = yearNumber * 10000 + monthNumber * 100 + dayNumber;
// 29/08/2004 => 20040829
return result;
}
// DATA FORMATTING
function dateFormatter(params) {
var dateAsString = params.data.date;
var dateParts = dateAsString.split('/');
return `${dateParts[0]} - ${dateParts[1]} - ${dateParts[2]}`;
}
var gridOptions = {
columnDefs: [
{
field: 'date',
},
{
headerName: 'Date Formatted',
field: 'date',
valueFormatter: dateFormatter,
comparator: dateComparator,
filter: 'agDateColumnFilter',
floatingFilter: true,
floatingFilterComponentParams: {
suppressFilterButton: true,
},
filterParams: {
debounceMs: 500,
suppressAndOrCondition: true,
comparator: function(filterLocalDateAtMidnight, cellValue) {
if (cellValue == null) {
return 0;
}
var dateParts = cellValue.split('/');
var year = Number(dateParts[2]);
var month = Number(dateParts[1]) - 1;
var day = Number(dateParts[0]);
var cellDate = new Date(year, month, day);
if (cellDate < filterLocalDateAtMidnight) {
return -1;
} else if (cellDate > filterLocalDateAtMidnight) {
return 1;
} else {
return 0;
}
},
},
},
],
defaultColDef: {
flex: 1,
sortable: true,
},
rowData: createRowData(50),
suppressMenuHide: true,
};
document.addEventListener('DOMContentLoaded', function() {
var eGridDiv = document.querySelector('#myGrid');
new agGrid.Grid(eGridDiv, gridOptions);
});