valueformatters-pt-2

<!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);
});