filter controls

packages/datalib/src/GridConfig.ts

@@ -1,12 +1,16 @@
 import { DisplayColumn } from './GridDisplay';
 import { TableInfo } from '@dbgate/types';
 
-export interface GridConfig {
+export interface GridConfigColumns {
   hiddenColumns: string[];
   expandedColumns: string[];
   addedColumns: string[];
 }
 
+export interface GridConfig extends GridConfigColumns {
+  filters: { [uniqueName: string]: string };
+}
+
 export interface GridCache {
   tables: { [uniqueName: string]: TableInfo };
   refreshTime: number;
@@ -17,6 +21,7 @@ export function createGridConfig(): GridConfig {
     hiddenColumns: [],
     expandedColumns: [],
     addedColumns: [],
+    filters: {},
   };
 }
 

packages/datalib/src/GridDisplay.ts

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { GridConfig, GridCache } from './GridConfig';
+import { GridConfig, GridCache, GridConfigColumns } from './GridConfig';
 import { ForeignKeyInfo, TableInfo, ColumnInfo } from '@dbgate/types';
 import { filterName } from './filterName';
 import { Select } from '@dbgate/sqltree';
@@ -54,7 +54,7 @@ export abstract class GridDisplay {
     });
   }
 
-  includeInColumnSet(field: keyof GridConfig, uniqueName: string, isIncluded: boolean) {
+  includeInColumnSet(field: keyof GridConfigColumns, uniqueName: string, isIncluded: boolean) {
     if (isIncluded) {
       this.setConfig({
         ...this.config,
@@ -248,13 +248,15 @@ export abstract class GridDisplay {
   }
 
   getDisplayColumns(table: TableInfo, parentPath: string[]) {
-    return table?.columns
-      ?.map(col => this.getDisplayColumn(table, col, parentPath))
-      ?.map(col => ({
-        ...col,
-        isChecked: this.isColumnChecked(col),
-        hintColumnName: col.foreignKey ? `hint_${col.uniqueName}` : null,
-      }));
+    return (
+      table?.columns
+        ?.map(col => this.getDisplayColumn(table, col, parentPath))
+        ?.map(col => ({
+          ...col,
+          isChecked: this.isColumnChecked(col),
+          hintColumnName: col.foreignKey ? `hint_${col.uniqueName}` : null,
+        })) || []
+    );
   }
 
   getColumns(columnFilter) {
@@ -272,4 +274,19 @@ export abstract class GridDisplay {
   toggleExpandedColumn(uniqueName: string) {
     this.includeInColumnSet('expandedColumns', uniqueName, !this.isExpandedColumn(uniqueName));
   }
+
+  getFilter(uniqueName: string) {
+    return this.config.filters[uniqueName];
+  }
+
+  setFilter(uniqueName, value) {
+    this.setConfig({
+      ...this.config,
+      filters: {
+        ...this.config.filters,
+        [uniqueName]: value,
+      },
+    });
+    this.reload();
+  }
 }

packages/datalib/src/TableGridDisplay.ts

@@ -18,6 +18,7 @@ export class TableGridDisplay extends GridDisplay {
   }
 
   createSelect() {
+    if (!this.table.columns) return null;
     const orderColumnName = this.table.columns[0].columnName;
     const select: Select = {
       commandType: 'select',

packages/web/src/datagrid/DataFilterControl.js

@@ -0,0 +1,401 @@
+import React from 'react';
+import { DropDownMenuItem, DropDownMenuDivider, showMenu } from '../modals/DropDownMenu';
+import styled from 'styled-components';
+import keycodes from '../utility/keycodes';
+// import { $ } from '../../Utility/jquery';
+// import autobind from 'autobind-decorator';
+// import * as React from 'react';
+
+// import { createMultiLineFilter } from '../../DataLib/FilterTools';
+// import { ModalDialog } from '../Dialogs';
+// import { FilterDialog } from '../Dialogs/FilterDialog';
+// import { FilterMultipleValuesDialog } from '../Dialogs/FilterMultipleValuesDialog';
+// import { IconSpan } from '../Navigation/NavUtils';
+// import { KeyCodes } from '../ReactDataGrid/KeyCodes';
+// import { DropDownMenu, DropDownMenuDivider, DropDownMenuItem, DropDownSubmenuItem } from './DropDownMenu';
+// import { FilterParserType } from '../../SwaggerClients';
+// import { IFilterHolder } from '../CommonControls';
+// import { GrayFilterIcon } from '../Icons';
+
+// export interface IDataFilterControlProps {
+//     filterType: FilterParserType;
+//     getFilter: Function;
+//     setFilter: Function;
+//     width: number;
+//     onControlKey?: Function;
+//     isReadOnly?: boolean;
+//     inputElementId?: string;
+// }
+
+const FilterDiv = styled.div`
+  display: flex;
+`;
+const FilterInput = styled.input`
+  flex: 1;
+  width: 10px;
+`;
+const FilterButton = styled.button`
+  color: gray;
+`;
+
+function DropDownContent({ filterType, setFilter, filterMultipleValues, openFilterWindow }) {
+  switch (filterType) {
+    case 'number':
+      return (
+        <>
+          <DropDownMenuItem onClick={x => setFilter('')}>Clear Filter</DropDownMenuItem>
+          <DropDownMenuItem onClick={x => filterMultipleValues()}>Filter multiple values</DropDownMenuItem>
+          <DropDownMenuItem onClick={x => openFilterWindow('=')}>Equals...</DropDownMenuItem>
+          <DropDownMenuItem onClick={x => openFilterWindow('<>')}>Does Not Equal...</DropDownMenuItem>
+          <DropDownMenuItem onClick={x => setFilter('NULL')}>Is Null</DropDownMenuItem>
+          <DropDownMenuItem onClick={x => setFilter('NOT NULL')}>Is Not Null</DropDownMenuItem>
+          <DropDownMenuItem onClick={x => openFilterWindow('>')}>Greater Than...</DropDownMenuItem>
+          <DropDownMenuItem onClick={x => openFilterWindow('>=')}>Greater Than Or Equal To...</DropDownMenuItem>
+          <DropDownMenuItem onClick={x => openFilterWindow('<')}>Less Than...</DropDownMenuItem>
+          <DropDownMenuItem onClick={x => openFilterWindow('<=')}>Less Than Or Equal To...</DropDownMenuItem>
+        </>
+      );
+    case 'logical':
+      return (
+        <>
+          <DropDownMenuItem onClick={x => setFilter('')}>Clear Filter</DropDownMenuItem>
+          <DropDownMenuItem onClick={x => filterMultipleValues()}>Filter multiple values</DropDownMenuItem>
+          <DropDownMenuItem onClick={x => setFilter('NULL')}>Is Null</DropDownMenuItem>
+          <DropDownMenuItem onClick={x => setFilter('NOT NULL')}>Is Not Null</DropDownMenuItem>
+          <DropDownMenuItem onClick={x => setFilter('TRUE')}>Is True</DropDownMenuItem>
+          <DropDownMenuItem onClick={x => setFilter('FALSE')}>Is False</DropDownMenuItem>
+          <DropDownMenuItem onClick={x => setFilter('TRUE, NULL')}>Is True or NULL</DropDownMenuItem>
+          <DropDownMenuItem onClick={x => setFilter('FALSE, NULL')}>Is False or NULL</DropDownMenuItem>
+        </>
+      );
+    case 'datetime':
+      return (
+        <>
+          <DropDownMenuItem onClick={x => setFilter('')}>Clear Filter</DropDownMenuItem>
+          <DropDownMenuItem onClick={x => filterMultipleValues()}>Filter multiple values</DropDownMenuItem>
+          <DropDownMenuItem onClick={x => setFilter('NULL')}>Is Null</DropDownMenuItem>
+          <DropDownMenuItem onClick={x => setFilter('NOT NULL')}>Is Not Null</DropDownMenuItem>
+
+          <DropDownMenuDivider />
+
+          <DropDownMenuItem onClick={x => openFilterWindow('<=')}>Before...</DropDownMenuItem>
+          <DropDownMenuItem onClick={x => openFilterWindow('>=')}>After...</DropDownMenuItem>
+          <DropDownMenuItem onClick={x => openFilterWindow('>=;<=')}>Between...</DropDownMenuItem>
+
+          <DropDownMenuDivider />
+
+          <DropDownMenuItem onClick={x => setFilter('TOMORROW')}>Tomorrow</DropDownMenuItem>
+          <DropDownMenuItem onClick={x => setFilter('TODAY')}>Today</DropDownMenuItem>
+          <DropDownMenuItem onClick={x => setFilter('YESTERDAY')}>Yesterday</DropDownMenuItem>
+
+          <DropDownMenuDivider />
+
+          <DropDownMenuItem onClick={x => setFilter('NEXT WEEK')}>Next Week</DropDownMenuItem>
+          <DropDownMenuItem onClick={x => setFilter('THIS WEEK')}>This Week</DropDownMenuItem>
+          <DropDownMenuItem onClick={x => setFilter('LAST WEEK')}>Last Week</DropDownMenuItem>
+
+          <DropDownMenuDivider />
+
+          <DropDownMenuItem onClick={x => setFilter('NEXT MONTH')}>Next Month</DropDownMenuItem>
+          <DropDownMenuItem onClick={x => setFilter('THIS MONTH')}>This Month</DropDownMenuItem>
+          <DropDownMenuItem onClick={x => setFilter('LAST MONTH')}>Last Month</DropDownMenuItem>
+
+          <DropDownMenuDivider />
+
+          <DropDownMenuItem onClick={x => setFilter('NEXT YEAR')}>Next Year</DropDownMenuItem>
+          <DropDownMenuItem onClick={x => setFilter('THIS YEAR')}>This Year</DropDownMenuItem>
+          <DropDownMenuItem onClick={x => setFilter('LAST YEAR')}>Last Year</DropDownMenuItem>
+
+          <DropDownMenuDivider />
+
+          {/* <DropDownSubmenuItem title="All dates in period">
+              <DropDownMenuItem onClick={x => setFilter('JAN')}>January</DropDownMenuItem>
+              <DropDownMenuItem onClick={x => setFilter('FEB')}>February</DropDownMenuItem>
+              <DropDownMenuItem onClick={x => setFilter('MAR')}>March</DropDownMenuItem>
+              <DropDownMenuItem onClick={x => setFilter('APR')}>April</DropDownMenuItem>
+              <DropDownMenuItem onClick={x => setFilter('JUN')}>June</DropDownMenuItem>
+              <DropDownMenuItem onClick={x => setFilter('JUL')}>July</DropDownMenuItem>
+              <DropDownMenuItem onClick={x => setFilter('AUG')}>August</DropDownMenuItem>
+              <DropDownMenuItem onClick={x => setFilter('SEP')}>September</DropDownMenuItem>
+              <DropDownMenuItem onClick={x => setFilter('OCT')}>October</DropDownMenuItem>
+              <DropDownMenuItem onClick={x => setFilter('NOV')}>November</DropDownMenuItem>
+              <DropDownMenuItem onClick={x => setFilter('DEC')}>December</DropDownMenuItem>
+
+              <DropDownMenuDivider />
+
+              <DropDownMenuItem onClick={x => setFilter('MON')}>Monday</DropDownMenuItem>
+              <DropDownMenuItem onClick={x => setFilter('TUE')}>Tuesday</DropDownMenuItem>
+              <DropDownMenuItem onClick={x => setFilter('WED')}>Wednesday</DropDownMenuItem>
+              <DropDownMenuItem onClick={x => setFilter('THU')}>Thursday</DropDownMenuItem>
+              <DropDownMenuItem onClick={x => setFilter('FRI')}>Friday</DropDownMenuItem>
+              <DropDownMenuItem onClick={x => setFilter('SAT')}>Saturday</DropDownMenuItem>
+              <DropDownMenuItem onClick={x => setFilter('SUN')}>Sunday</DropDownMenuItem>
+            </DropDownSubmenuItem> */}
+        </>
+      );
+    case 'string':
+      return (
+        <>
+          <DropDownMenuItem onClick={x => setFilter('')}>Clear Filter</DropDownMenuItem>
+          <DropDownMenuItem onClick={x => filterMultipleValues()}>Filter multiple values</DropDownMenuItem>
+
+          <DropDownMenuItem onClick={x => openFilterWindow('=')}>Equals...</DropDownMenuItem>
+          <DropDownMenuItem onClick={x => openFilterWindow('<>')}>Does Not Equal...</DropDownMenuItem>
+          <DropDownMenuItem onClick={x => setFilter('NULL')}>Is Null</DropDownMenuItem>
+          <DropDownMenuItem onClick={x => setFilter('NOT NULL')}>Is Not Null</DropDownMenuItem>
+          <DropDownMenuItem onClick={x => setFilter('EMPTY, NULL')}>Is Empty Or Null</DropDownMenuItem>
+          <DropDownMenuItem onClick={x => setFilter('NOT EMPTY NOT NULL')}>Has Not Empty Value</DropDownMenuItem>
+
+          <DropDownMenuDivider />
+
+          <DropDownMenuItem onClick={x => openFilterWindow('+')}>Contains...</DropDownMenuItem>
+          <DropDownMenuItem onClick={x => openFilterWindow('~')}>Does Not Contain...</DropDownMenuItem>
+          <DropDownMenuItem onClick={x => openFilterWindow('^')}>Begins With...</DropDownMenuItem>
+          <DropDownMenuItem onClick={x => openFilterWindow('!^')}>Does Not Begin With...</DropDownMenuItem>
+          <DropDownMenuItem onClick={x => openFilterWindow('$')}>Ends With...</DropDownMenuItem>
+          <DropDownMenuItem onClick={x => openFilterWindow('!$')}>Does Not End With...</DropDownMenuItem>
+        </>
+      );
+  }
+}
+
+export default function DataFilterControl({ isReadOnly = false, filterType, filter, setFilter }) {
+  const setFilterText = filter => {
+    setFilter(filter);
+    editorRef.current.value = filter || '';
+  };
+  const applyFilter = () => {
+    setFilter(editorRef.current.value);
+  };
+  const filterMultipleValues = () => {};
+  const openFilterWindow = operator => {};
+  const buttonRef = React.createRef();
+  const editorRef = React.createRef();
+
+  const handleKeyDown = ev => {
+    if (isReadOnly) return;
+    if (ev.keyCode == keycodes.enter) {
+      applyFilter();
+    }
+    if (ev.keyCode == keycodes.escape) {
+      setFilterText('');
+    }
+    // if (ev.keyCode == KeyCodes.DownArrow || ev.keyCode == KeyCodes.UpArrow) {
+    //     if (this.props.onControlKey) this.props.onControlKey(ev.keyCode);
+    // }
+  };
+
+  const handleShowMenu = () => {
+    const rect = buttonRef.current.getBoundingClientRect();
+    showMenu(
+      rect.left,
+      rect.bottom,
+      <DropDownContent
+        filterType={filterType}
+        setFilter={setFilterText}
+        filterMultipleValues={filterMultipleValues}
+        openFilterWindow={openFilterWindow}
+      />
+    );
+  };
+
+  return (
+    <FilterDiv>
+      <FilterInput ref={editorRef} onKeyDown={handleKeyDown} type="text" readOnly={isReadOnly} />
+      <FilterButton ref={buttonRef} onClick={handleShowMenu}>
+        <i className="fas fa-filter" />
+      </FilterButton>
+    </FilterDiv>
+  );
+}
+//     domEditor: Element;
+
+//     @autobind
+//     applyFilter() {
+//         this.props.setFilter($(this.domEditor).val());
+//     }
+
+//     @autobind
+//     clearFilter() {
+//         $(this.domEditor).val('');
+//         this.applyFilter();
+//     }
+
+//     setFilter(value: string) {
+//         $(this.domEditor).val(value);
+//         this.applyFilter();
+//         return false;
+//     }
+
+//     render() {
+//         let dropDownContent = null;
+
+//         let filterIconSpan = <span className='fa fa-filter' style={{color: 'gray', display: 'inline-block', width: '8px', height: '0', whiteSpace: 'nowrap'}} ></span>;
+//         //filterIconSpan = null;
+
+//         if (this.props.filterType == 'Number') {
+//             dropDownContent = <DropDownMenu iconSpan={filterIconSpan}>
+//                 <DropDownMenuItem onClick={x => this.setFilter('')}>Clear Filter</DropDownMenuItem>
+//                 <DropDownMenuItem onClick={x => this.filterMultipleValues()}>Filter multiple values</DropDownMenuItem>
+//                 <DropDownMenuItem onClick={x => this.openFilterWindow('=')}>Equals...</DropDownMenuItem>
+//                 <DropDownMenuItem onClick={x => this.openFilterWindow('<>')}>Does Not Equal...</DropDownMenuItem>
+//                 <DropDownMenuItem onClick={x => this.setFilter('NULL')}>Is Null</DropDownMenuItem>
+//                 <DropDownMenuItem onClick={x => this.setFilter('NOT NULL')}>Is Not Null</DropDownMenuItem>
+//                 <DropDownMenuItem onClick={x => this.openFilterWindow('>')}>Greater Than...</DropDownMenuItem>
+//                 <DropDownMenuItem onClick={x => this.openFilterWindow('>=')}>Greater Than Or Equal To...</DropDownMenuItem>
+//                 <DropDownMenuItem onClick={x => this.openFilterWindow('<')}>Less Than...</DropDownMenuItem>
+//                 <DropDownMenuItem onClick={x => this.openFilterWindow('<=')}>Less Than Or Equal To...</DropDownMenuItem>
+//             </DropDownMenu>;
+//         }
+
+//         if (this.props.filterType == 'Logical') {
+//             dropDownContent = <DropDownMenu iconSpan={filterIconSpan}>
+//                 <DropDownMenuItem onClick={x => this.setFilter('')}>Clear Filter</DropDownMenuItem>
+//                 <DropDownMenuItem onClick={x => this.filterMultipleValues()}>Filter multiple values</DropDownMenuItem>
+//                 <DropDownMenuItem onClick={x => this.setFilter('NULL')}>Is Null</DropDownMenuItem>
+//                 <DropDownMenuItem onClick={x => this.setFilter('NOT NULL')}>Is Not Null</DropDownMenuItem>
+//                 <DropDownMenuItem onClick={x => this.setFilter('TRUE')}>Is True</DropDownMenuItem>
+//                 <DropDownMenuItem onClick={x => this.setFilter('FALSE')}>Is False</DropDownMenuItem>
+//                 <DropDownMenuItem onClick={x => this.setFilter('TRUE, NULL')}>Is True or NULL</DropDownMenuItem>
+//                 <DropDownMenuItem onClick={x => this.setFilter('FALSE, NULL')}>Is False or NULL</DropDownMenuItem>
+//             </DropDownMenu>;
+//         }
+
+//         if (this.props.filterType == 'DateTime') {
+//             dropDownContent = <DropDownMenu iconSpan={filterIconSpan}>
+// <DropDownMenuItem onClick={x => this.setFilter('')}>Clear Filter</DropDownMenuItem>
+// <DropDownMenuItem onClick={x => this.filterMultipleValues()}>Filter multiple values</DropDownMenuItem>
+// <DropDownMenuItem onClick={x => this.setFilter('NULL')}>Is Null</DropDownMenuItem>
+// <DropDownMenuItem onClick={x => this.setFilter('NOT NULL')}>Is Not Null</DropDownMenuItem>
+
+// <DropDownMenuDivider />
+
+// <DropDownMenuItem onClick={x => this.openFilterWindow('<=')}>Before...</DropDownMenuItem>
+// <DropDownMenuItem onClick={x => this.openFilterWindow('>=')}>After...</DropDownMenuItem>
+// <DropDownMenuItem onClick={x => this.openFilterWindow('>=;<=')}>Between...</DropDownMenuItem>
+
+// <DropDownMenuDivider />
+
+// <DropDownMenuItem onClick={x => this.setFilter('TOMORROW')}>Tomorrow</DropDownMenuItem>
+// <DropDownMenuItem onClick={x => this.setFilter('TODAY')}>Today</DropDownMenuItem>
+// <DropDownMenuItem onClick={x => this.setFilter('YESTERDAY')}>Yesterday</DropDownMenuItem>
+
+// <DropDownMenuDivider />
+
+// <DropDownMenuItem onClick={x => this.setFilter('NEXT WEEK')}>Next Week</DropDownMenuItem>
+// <DropDownMenuItem onClick={x => this.setFilter('THIS WEEK')}>This Week</DropDownMenuItem>
+// <DropDownMenuItem onClick={x => this.setFilter('LAST WEEK')}>Last Week</DropDownMenuItem>
+
+// <DropDownMenuDivider />
+
+// <DropDownMenuItem onClick={x => this.setFilter('NEXT MONTH')}>Next Month</DropDownMenuItem>
+// <DropDownMenuItem onClick={x => this.setFilter('THIS MONTH')}>This Month</DropDownMenuItem>
+// <DropDownMenuItem onClick={x => this.setFilter('LAST MONTH')}>Last Month</DropDownMenuItem>
+
+// <DropDownMenuDivider />
+
+// <DropDownMenuItem onClick={x => this.setFilter('NEXT YEAR')}>Next Year</DropDownMenuItem>
+// <DropDownMenuItem onClick={x => this.setFilter('THIS YEAR')}>This Year</DropDownMenuItem>
+// <DropDownMenuItem onClick={x => this.setFilter('LAST YEAR')}>Last Year</DropDownMenuItem>
+
+// <DropDownMenuDivider />
+
+// <DropDownSubmenuItem title='All dates in period'>
+
+//     <DropDownMenuItem onClick={x => this.setFilter('JAN')}>January</DropDownMenuItem>
+//     <DropDownMenuItem onClick={x => this.setFilter('FEB')}>February</DropDownMenuItem>
+//     <DropDownMenuItem onClick={x => this.setFilter('MAR')}>March</DropDownMenuItem>
+//     <DropDownMenuItem onClick={x => this.setFilter('APR')}>April</DropDownMenuItem>
+//     <DropDownMenuItem onClick={x => this.setFilter('JUN')}>June</DropDownMenuItem>
+//     <DropDownMenuItem onClick={x => this.setFilter('JUL')}>July</DropDownMenuItem>
+//     <DropDownMenuItem onClick={x => this.setFilter('AUG')}>August</DropDownMenuItem>
+//     <DropDownMenuItem onClick={x => this.setFilter('SEP')}>September</DropDownMenuItem>
+//     <DropDownMenuItem onClick={x => this.setFilter('OCT')}>October</DropDownMenuItem>
+//     <DropDownMenuItem onClick={x => this.setFilter('NOV')}>November</DropDownMenuItem>
+//     <DropDownMenuItem onClick={x => this.setFilter('DEC')}>December</DropDownMenuItem>
+
+//     <DropDownMenuDivider />
+
+//     <DropDownMenuItem onClick={x => this.setFilter('MON')}>Monday</DropDownMenuItem>
+//     <DropDownMenuItem onClick={x => this.setFilter('TUE')}>Tuesday</DropDownMenuItem>
+//     <DropDownMenuItem onClick={x => this.setFilter('WED')}>Wednesday</DropDownMenuItem>
+//     <DropDownMenuItem onClick={x => this.setFilter('THU')}>Thursday</DropDownMenuItem>
+//     <DropDownMenuItem onClick={x => this.setFilter('FRI')}>Friday</DropDownMenuItem>
+//     <DropDownMenuItem onClick={x => this.setFilter('SAT')}>Saturday</DropDownMenuItem>
+//     <DropDownMenuItem onClick={x => this.setFilter('SUN')}>Sunday</DropDownMenuItem>
+
+// </DropDownSubmenuItem>
+//             </DropDownMenu>;
+//         }
+
+//         if (this.props.filterType == 'String') {
+//             dropDownContent = <DropDownMenu iconSpan={filterIconSpan}>
+// <DropDownMenuItem onClick={x => this.setFilter('')}>Clear Filter</DropDownMenuItem>
+// <DropDownMenuItem onClick={x => this.filterMultipleValues()}>Filter multiple values</DropDownMenuItem>
+
+// <DropDownMenuItem onClick={x => this.openFilterWindow('=')}>Equals...</DropDownMenuItem>
+// <DropDownMenuItem onClick={x => this.openFilterWindow('<>')}>Does Not Equal...</DropDownMenuItem>
+// <DropDownMenuItem onClick={x => this.setFilter('NULL')}>Is Null</DropDownMenuItem>
+// <DropDownMenuItem onClick={x => this.setFilter('NOT NULL')}>Is Not Null</DropDownMenuItem>
+// <DropDownMenuItem onClick={x => this.setFilter('EMPTY, NULL')}>Is Empty Or Null</DropDownMenuItem>
+// <DropDownMenuItem onClick={x => this.setFilter('NOT EMPTY NOT NULL')}>Has Not Empty Value</DropDownMenuItem>
+
+// <DropDownMenuDivider />
+
+// <DropDownMenuItem onClick={x => this.openFilterWindow('+')}>Contains...</DropDownMenuItem>
+// <DropDownMenuItem onClick={x => this.openFilterWindow('~')}>Does Not Contain...</DropDownMenuItem>
+// <DropDownMenuItem onClick={x => this.openFilterWindow('^')}>Begins With...</DropDownMenuItem>
+// <DropDownMenuItem onClick={x => this.openFilterWindow('!^')}>Does Not Begin With...</DropDownMenuItem>
+// <DropDownMenuItem onClick={x => this.openFilterWindow('$')}>Ends With...</DropDownMenuItem>
+// <DropDownMenuItem onClick={x => this.openFilterWindow('!$')}>Does Not End With...</DropDownMenuItem>
+//             </DropDownMenu>;
+//         }
+
+//         if (this.props.isReadOnly) {
+//             dropDownContent = <GrayFilterIcon style={{marginLeft: '5px'}} />;
+//         }
+
+//         return <div style={{ minWidth: `${this.props.width}px`, maxWidth: `${this.props.width}px`, width: `${this.props.width}` }}>
+//                 <input id={this.props.inputElementId} type='text' style={{ 'width': `${(this.props.width - 20)}px` }} readOnly={this.props.isReadOnly}
+//                     onBlur={this.applyFilter} ref={x => this.setDomEditor(x)} onKeyDown={this.editorKeyDown} placeholder='Search' ></input>
+
+//                 {dropDownContent}
+//             </div>;
+//     }
+
+//     async filterMultipleValues() {
+//         let result = await ModalDialog.run(<FilterMultipleValuesDialog header='Filter multiple values' />);
+//         if (!result) return;
+//         let { mode, text } = result;
+//         let filter = createMultiLineFilter(mode, text);
+//         this.setFilter(filter);
+//     }
+
+//     openFilterWindow(selectedOperator: string) {
+//         FilterDialog.runFilter(this, this.props.filterType, selectedOperator);
+//         return false;
+//     }
+
+//     setDomEditor(editor) {
+//         this.domEditor = editor;
+//         $(editor).val(this.props.getFilter());
+//     }
+
+//     @autobind
+//     editorKeyDown(ev) {
+//         if (this.props.isReadOnly) return;
+//         if (ev.keyCode == KeyCodes.Enter) {
+//             this.applyFilter();
+//         }
+//         if (ev.keyCode == KeyCodes.Escape) {
+//             this.clearFilter();
+//         }
+//         if (ev.keyCode == KeyCodes.DownArrow || ev.keyCode == KeyCodes.UpArrow) {
+//             if (this.props.onControlKey) this.props.onControlKey(ev.keyCode);
+//         }
+//     }
+
+//     focus() {
+//         $(this.domEditor).focus();
+//     }
+// }

packages/web/src/datagrid/DataGridCore.js

@@ -7,6 +7,7 @@ import useDimensions from '../utility/useDimensions';
 import { SeriesSizes } from './SeriesSizes';
 import axios from '../utility/axios';
 import ColumnLabel from './ColumnLabel';
+import DataFilterControl from './DataFilterControl';
 
 const GridContainer = styled.div`
   position: absolute;
@@ -40,10 +41,10 @@ const TableHeaderRow = styled.tr`
 const TableBodyRow = styled.tr`
   // height: 35px;
   background-color: #ffffff;
-  &:nth-child(6n + 4) {
+  &:nth-child(6n + 3) {
     background-color: #ebebeb;
   }
-  &:nth-child(6n + 7) {
+  &:nth-child(6n + 6) {
     background-color: #ebf5ff;
   }
 `;
@@ -56,6 +57,12 @@ const TableHeaderCell = styled.td`
   background-color: #f6f7f9;
   overflow: hidden;
 `;
+const TableFilterCell = styled.td`
+  text-align: left;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+`;
 const TableBodyCell = styled.td`
   font-weight: normal;
   border: 1px solid #c0c0c0;
@@ -308,6 +315,20 @@ export default function DataGridCore(props) {
               </TableHeaderCell>
             ))}
           </TableHeaderRow>
+          <TableHeaderRow>
+            {realColumns.map(col => (
+              <TableFilterCell
+                key={col.uniqueName}
+                style={{ width: col.widthPx, minWidth: col.widthPx, maxWidth: col.widthPx }}
+              >
+                <DataFilterControl
+                  filterType="string"
+                  filter={display.getFilter(col.uniqueName)}
+                  setFilter={value => display.setFilter(col.uniqueName, value)}
+                />
+              </TableFilterCell>
+            ))}
+          </TableHeaderRow>
         </TableHead>
         <TableBody ref={tableBodyRef}>
           {loadedRows

packages/web/src/modals/DropDownMenu.js

@@ -39,6 +39,12 @@ const StyledLink = styled.a`
   }
 `;
 
+export const DropDownMenuDivider = styled.li`
+  margin: 9px 0px 9px 0px;
+  border-top: 1px solid #f2f2f2;
+  border-bottom: 1px solid #fff;
+`;
+
 export function DropDownMenuItem({ children, keyText = undefined, onClick }) {
   const handleMouseEnter = () => {
     // if (this.context.parentMenu) this.context.parentMenu.closeSubmenu();
@@ -90,7 +96,7 @@ export function DropDownMenuItem({ children, keyText = undefined, onClick }) {
 // // }
 
 // export function DropDownMenuDivider(props: {}) {
-//     return <li className="dropdown-divider"></li>;
+//   return <li className="dropdown-divider"></li>;
 // }
 
 // export class DropDownSubmenuItem extends React.Component<IDropDownSubmenuItemProps> {

packages/web/src/utility/keycodes.js

@@ -0,0 +1,99 @@
+export default {
+  backspace: 8,
+  tab: 9,
+  enter: 13,
+  shift: 16,
+  ctrl: 17,
+  alt: 18,
+  pauseBreak: 19,
+  capsLock: 20,
+  escape: 27,
+  pageUp: 33,
+  pageDown: 34,
+  end: 35,
+  home: 36,
+  leftArrow: 37,
+  ppArrow: 38,
+  rightArrow: 39,
+  downArrow: 40,
+  insert: 45,
+  delete: 46,
+  n0: 48,
+  n1: 49,
+  n2: 50,
+  n3: 51,
+  n4: 52,
+  n5: 53,
+  n6: 54,
+  n7: 55,
+  n8: 56,
+  n9: 57,
+  a: 65,
+  b: 66,
+  c: 67,
+  d: 68,
+  e: 69,
+  f: 70,
+  g: 71,
+  h: 72,
+  i: 73,
+  j: 74,
+  k: 75,
+  l: 76,
+  m: 77,
+  n: 78,
+  o: 79,
+  p: 80,
+  q: 81,
+  r: 82,
+  s: 83,
+  t: 84,
+  u: 85,
+  v: 86,
+  w: 87,
+  x: 88,
+  y: 89,
+  z: 90,
+  leftWindowKey: 91,
+  rightWindowKey: 92,
+  selectKey: 93,
+  numPad0: 96,
+  numPad1: 97,
+  numPad2: 98,
+  numPad3: 99,
+  numPad4: 100,
+  numPad5: 101,
+  numPad6: 102,
+  numPad7: 103,
+  numPad8: 104,
+  numPad9: 105,
+  multiply: 106,
+  add: 107,
+  subtract: 109,
+  decimalPoint: 110,
+  divide: 111,
+  f1: 112,
+  f2: 113,
+  f3: 114,
+  f4: 115,
+  f5: 116,
+  f6: 117,
+  f7: 118,
+  f8: 119,
+  f9: 120,
+  f10: 121,
+  f12: 123,
+  numLock: 144,
+  scrollLock: 145,
+  semiColon: 186,
+  equalSign: 187,
+  comma: 188,
+  dash: 189,
+  period: 190,
+  forwardSlash: 191,
+  graveAccent: 192,
+  openBracket: 219,
+  backSlash: 220,
+  closeBracket: 221,
+  singleQuote: 222,
+};