diff --git a/src/session.ts b/src/session.ts
index c266e5d9a..4cf8547df 100644
--- a/src/session.ts
+++ b/src/session.ts
@@ -450,7 +450,45 @@ export async function getTableHtml(webview: Webview, file: string): Promise<stri
   <link href="${String(webview.asWebviewUri(Uri.file(path.join(resDir, 'ag-theme-balham.min.css'))))}" rel="stylesheet">
   <link href="${String(webview.asWebviewUri(Uri.file(path.join(resDir, 'ag-theme-balham-dark.min.css'))))}" rel="stylesheet">
   <script>
+    const dateFilterParams = {
+        browserDatePicker: true,
+        comparator: function (filterLocalDateAtMidnight, cellValue) {
+            var dateAsString = cellValue;
+            if (dateAsString == null) return -1;
+            var dateParts = dateAsString.split('-');
+            var cellDate = new Date(Number(dateParts[0]), Number(dateParts[1]) - 1, Number(dateParts[2].substr(0, 2)));
+            if (filterLocalDateAtMidnight.getTime() == cellDate.getTime()) {
+                return 0;
+            }
+            if (cellDate < filterLocalDateAtMidnight) {
+                return -1;
+            }
+            if (cellDate > filterLocalDateAtMidnight) {
+                return 1;
+            }
+        }
+    };
     const data = ${String(content)};
+    const gridOptions = {
+        defaultColDef: {
+            sortable: true,
+            resizable: true,
+            filter: true,
+            filterParams: {
+            buttons: ['reset', 'apply']
+            }
+        },
+        columnDefs: data.columns,
+        rowData: data.data,
+        rowSelection: 'multiple',
+        pagination: true,
+        enableCellTextSelection: true,
+        ensureDomOrder: true,
+        onGridReady: function (params) {
+            gridOptions.api.sizeColumnsToFit();
+            autoSizeAll(false);
+        }
+    };
     function updateTheme() {
         const gridDiv = document.querySelector('#myGrid');
         if (document.body.classList.contains('vscode-light')) {
@@ -460,35 +498,20 @@ export async function getTableHtml(webview: Webview, file: string): Promise<stri
         }
     }
     function autoSizeAll(skipHeader) {
-      var allColumnIds = [];
-      gridOptions.columnApi.getAllColumns().forEach(function (column) {
-        allColumnIds.push(column.colId);
-      });
-      gridOptions.columnApi.autoSizeColumns(allColumnIds, skipHeader);
+        var allColumnIds = [];
+        gridOptions.columnApi.getAllColumns().forEach(function (column) {
+            allColumnIds.push(column.colId);
+        });
+        gridOptions.columnApi.autoSizeColumns(allColumnIds, skipHeader);
     }
-    const gridOptions = {
-      defaultColDef: {
-        sortable: true,
-        resizable: true,
-        filter: true,
-        filterParams: {
-          buttons: ['reset', 'apply']
-        }
-      },
-      columnDefs: data.columns,
-      rowData: data.data,
-      rowSelection: 'multiple',
-      pagination: true,
-      enableCellTextSelection: true,
-      ensureDomOrder: true,
-      onGridReady: function (params) {
-        gridOptions.api.sizeColumnsToFit();
-        autoSizeAll(false);
-      }
-    };
     document.addEventListener('DOMContentLoaded', () => {
-      const gridDiv = document.querySelector('#myGrid');
-      new agGrid.Grid(gridDiv, gridOptions);
+        gridOptions.columnDefs.forEach(function(column) {
+            if (column.type === 'dateColumn') {
+                column.filterParams = dateFilterParams;
+            }
+        });
+        const gridDiv = document.querySelector('#myGrid');
+        new agGrid.Grid(gridDiv, gridOptions);
     });
     function onload() {
         updateTheme();