diff --git a/packages/web/src/datagrid/DataFilterControl.js b/packages/web/src/datagrid/DataFilterControl.js
index 0729649c7..abcdc4b23 100644
--- a/packages/web/src/datagrid/DataFilterControl.js
+++ b/packages/web/src/datagrid/DataFilterControl.js
@@ -179,8 +179,8 @@ export default function DataFilterControl({
   filterType,
   filter,
   setFilter,
-  focusIndex,
-  onFocusGrid,
+  focusIndex = 0,
+  onFocusGrid = undefined,
 }) {
   const showModal = useShowModal();
   const showMenu = useShowMenu();
@@ -229,7 +229,7 @@ export default function DataFilterControl({
       setFilterText('');
     }
     if (ev.keyCode == keycodes.downArrow) {
-      onFocusGrid();
+      if (onFocusGrid) onFocusGrid();
       // ev.stopPropagation();
       ev.preventDefault();
     }
diff --git a/packages/web/src/designer/Designer.js b/packages/web/src/designer/Designer.js
index 30a0424c4..d016020c9 100644
--- a/packages/web/src/designer/Designer.js
+++ b/packages/web/src/designer/Designer.js
@@ -2,8 +2,10 @@ import React from 'react';
 import styled from 'styled-components';
 import DesignerTable from './DesignerTable';
 import uuidv1 from 'uuid/v1';
+import _ from 'lodash';
 import useTheme from '../theme/useTheme';
 import DesignerReference from './DesignerReference';
+import cleanupDesignColumns from './cleanupDesignColumns';
 
 const Wrapper = styled.div`
   flex: 1;
@@ -148,7 +150,7 @@ export default function Designer({ value, onChange }) {
           (x) => x.designerId == column.designerId && x.columnName == column.columnName
         )
           ? current.columns
-          : [...(current.columns || []), column],
+          : [...cleanupDesignColumns(current.columns), _.pick(column, ['designerId', 'columnName'])],
       }));
     },
     [onChange]
diff --git a/packages/web/src/designer/QueryDesignColumns.js b/packages/web/src/designer/QueryDesignColumns.js
index 1b9d0319f..03b221d9d 100644
--- a/packages/web/src/designer/QueryDesignColumns.js
+++ b/packages/web/src/designer/QueryDesignColumns.js
@@ -1,10 +1,16 @@
 import React from 'react';
-import { CheckboxField } from '../utility/inputs';
+import DataFilterControl from '../datagrid/DataFilterControl';
+import { CheckboxField, SelectField, TextField } from '../utility/inputs';
 import TableControl, { TableColumn } from '../utility/TableControl';
 
+function getTableDisplayName(column, tables) {
+  const table = tables.find((x) => x.designerId == column.designerId);
+  if (table) return table.alias || table.pureName;
+  return '';
+}
+
 export default function QueryDesignColumns({ value, onChange }) {
-  const { columns } = value || {};
-  console.log('QueryDesignColumns', value);
+  const { columns, tables } = value || {};
 
   const changeColumn = React.useCallback(
     (col) => {
@@ -22,7 +28,7 @@ export default function QueryDesignColumns({ value, onChange }) {
   return (
     <TableControl rows={columns || []}>
       <TableColumn fieldName="columnName" header="Column/Expression" />
-      <TableColumn fieldName="tableDisplayName" header="Table" />
+      <TableColumn fieldName="tableDisplayName" header="Table" formatter={(row) => getTableDisplayName(row, tables)} />
       <TableColumn
         fieldName="isOutput"
         header="Output"
@@ -36,21 +42,85 @@ export default function QueryDesignColumns({ value, onChange }) {
           />
         )}
       />
-      {/* <TableColumn fieldName="queryDesignInfo.alias" editor="textbox" header="Alias" />
-      <TableColumn fieldName="queryDesignInfo.isGrouped" editor="checkbox" header="Group by" />
       <TableColumn
-        fieldName="queryDesignInfo.aggregate"
-        editor="combobox"
+        fieldName="alias"
+        header="Alias"
+        formatter={(row) => (
+          <TextField
+            value={row.alias}
+            onChange={(e) => {
+              changeColumn({ ...row, alias: e.target.value });
+            }}
+          />
+        )}
+      />
+
+      <TableColumn
+        fieldName="isGrouped"
+        header="Group by"
+        formatter={(row) => (
+          <CheckboxField
+            checked={row.isGrouped}
+            onChange={(e) => {
+              if (e.target.checked) changeColumn({ ...row, isGrouped: true });
+              else changeColumn({ ...row, isGrouped: false });
+            }}
+          />
+        )}
+      />
+      <TableColumn
+        fieldName="aggregate"
         header="Aggregate"
-        comboValues={['---', 'MIN', 'MAX', 'COUNT', 'COUNT DISTINCT', 'SUM', 'AVG']}
+        formatter={(row) => (
+          <SelectField
+            value={row.aggregate}
+            onChange={(e) => {
+              changeColumn({ ...row, aggregate: e.target.value });
+            }}
+          >
+            <option value="---">---</option>
+            <option value="MIN">MIN</option>
+            <option value="MAX">MAX</option>
+            <option value="COUNT">COUNT</option>
+            <option value="COUNT DISTINCT">COUNT DISTINCT</option>
+            <option value="SUM">SUM</option>
+            <option value="AVG">AVG</option>
+          </SelectField>
+        )}
       />
       <TableColumn
-        fieldName="queryDesignInfo.sortOrder"
+        fieldName="sortOrder"
         header="Sort order"
-        editor="combobox"
-        comboValues={sortComboValues}
+        formatter={(row) => (
+          <SelectField
+            value={row.sortOrder}
+            onChange={(e) => {
+              changeColumn({ ...row, sortOrder: e.target.value });
+            }}
+          >
+            <option value="0">---</option>
+            <option value="1">1st, ascending</option>
+            <option value="-1">1st, descending</option>
+            <option value="2">2nd, ascending</option>
+            <option value="-2">2nd, descending</option>
+            <option value="3">3rd, ascending</option>
+            <option value="-3">3rd, descending</option>,
+          </SelectField>
+        )}
+      />
+      <TableColumn
+        fieldName="filter"
+        header="Filter"
+        formatter={(row) => (
+          <DataFilterControl
+            filterType="string"
+            filter={row.filter}
+            setFilter={(filter) => {
+              changeColumn({ ...row, filter });
+            }}
+          />
+        )}
       />
-      <TableColumn fieldName="filter" header="Filter" editor="filterbox" getFilterType={this.getFilterType} /> */}
     </TableControl>
   );
 }
diff --git a/packages/web/src/designer/cleanupDesignColumns.js b/packages/web/src/designer/cleanupDesignColumns.js
new file mode 100644
index 000000000..758369ff9
--- /dev/null
+++ b/packages/web/src/designer/cleanupDesignColumns.js
@@ -0,0 +1,5 @@
+export default function cleanupDesignColumns(columns) {
+  return (columns || []).filter(
+    (x) => x.isOutput || x.isGrouped || x.alias || (x.aggregate && x.aggregate != '---') || x.sortOrder || x.filter
+  );
+}