diff --git a/vuu-ui/packages/vuu-datatable/src/configurable-table/ConfigurableTable.css b/vuu-ui/packages/vuu-datatable/src/configurable-table/ConfigurableTable.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/vuu-ui/packages/vuu-datatable/src/configurable-table/ConfigurableTable.tsx b/vuu-ui/packages/vuu-datatable/src/configurable-table/ConfigurableTable.tsx
deleted file mode 100644
index 1b60895f8..000000000
--- a/vuu-ui/packages/vuu-datatable/src/configurable-table/ConfigurableTable.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { GridConfig } from "@finos/vuu-datagrid-types";
-import { Table, TablePropsDeprecated as TableProps } from "@finos/vuu-table";
-import { ReactElement, useCallback, useState } from "react";
-import { Dialog } from "@finos/vuu-popups";
-
-export const ConfigurableTable = ({
-  config,
-  dataSource,
-  ...restProps
-}: TableProps) => {
-  const [dialogContent, setDialogContent] = useState<ReactElement | null>(null);
-  const [tableConfig] = useState<Omit<GridConfig, "headings">>(config);
-
-  const hideSettings = useCallback(() => {
-    setDialogContent(null);
-  }, []);
-
-  return (
-    <>
-      <Table
-        {...restProps}
-        allowConfigEditing
-        config={tableConfig}
-        dataSource={dataSource}
-      />
-      <Dialog
-        className="vuuDialog-gridConfig"
-        isOpen={dialogContent !== null}
-        onClose={hideSettings}
-        title="Grid and Column Settings"
-      >
-        {dialogContent}
-      </Dialog>
-    </>
-  );
-};
diff --git a/vuu-ui/packages/vuu-datatable/src/configurable-table/index.ts b/vuu-ui/packages/vuu-datatable/src/configurable-table/index.ts
deleted file mode 100644
index 3fe444e02..000000000
--- a/vuu-ui/packages/vuu-datatable/src/configurable-table/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./ConfigurableTable";
diff --git a/vuu-ui/packages/vuu-datatable/src/index.ts b/vuu-ui/packages/vuu-datatable/src/index.ts
index 2aa9e6454..6772e4a5c 100644
--- a/vuu-ui/packages/vuu-datatable/src/index.ts
+++ b/vuu-ui/packages/vuu-datatable/src/index.ts
@@ -1,3 +1,2 @@
-export * from "./configurable-table";
 export * from "./filter-table";
 export * from "./json-table";
diff --git a/vuu-ui/packages/vuu-table/src/table/index.ts b/vuu-ui/packages/vuu-table/src/table/index.ts
index 27c881808..326dd2943 100644
--- a/vuu-ui/packages/vuu-table/src/table/index.ts
+++ b/vuu-ui/packages/vuu-table/src/table/index.ts
@@ -1,7 +1,6 @@
 export * from "./ColumnResizer";
 export * from "./context-menu";
 export * from "./dataTableTypes";
-export * from "./Table";
 export * from "./useMeasuredContainer";
 export * from "./useSelection";
 export * from "./useTableColumnResize";
diff --git a/vuu-ui/sample-apps/feature-basket-trading/src/useBasketTrading.tsx b/vuu-ui/sample-apps/feature-basket-trading/src/useBasketTrading.tsx
index a20970a56..28aae02e1 100644
--- a/vuu-ui/sample-apps/feature-basket-trading/src/useBasketTrading.tsx
+++ b/vuu-ui/sample-apps/feature-basket-trading/src/useBasketTrading.tsx
@@ -109,7 +109,6 @@ export const useBasketTrading = ({
   const handleMessageFromBasketTradingControl = useCallback<SubscribeCallback>(
     (message) => {
       if (message.type === "viewport-update") {
-        console.table(message.rows);
         if (message.size) {
           setBasketCount(message.size);
         }
diff --git a/vuu-ui/sample-apps/feature-vuu-blotter/index.ts b/vuu-ui/sample-apps/feature-vuu-blotter/index.ts
deleted file mode 100644
index 1e94b6afe..000000000
--- a/vuu-ui/sample-apps/feature-vuu-blotter/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import VuuBlotter from "./src/VuuBlotter";
-export default VuuBlotter;
diff --git a/vuu-ui/sample-apps/feature-vuu-blotter/package.json b/vuu-ui/sample-apps/feature-vuu-blotter/package.json
deleted file mode 100644
index 964636da1..000000000
--- a/vuu-ui/sample-apps/feature-vuu-blotter/package.json
+++ /dev/null
@@ -1,41 +0,0 @@
-{
-  "name": "feature-vuu-blotter",
-  "version": "0.0.26",
-  "description": "Vuu Blotter",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "node ../../scripts/build-feature.mjs",
-    "start": "serve -p 5002 ../../deployed_apps/app-vuu-example"
-  },
-  "private": true,
-  "keywords": [],
-  "author": "heswell",
-  "license": "Apache-2.0",
-  "sideEffects": [
-    "**/*.css"
-  ],
-  "devDependencies": {},
-  "dependencies": {
-    "@finos/vuu-data": "0.0.26",
-    "@finos/vuu-data-react": "0.0.26",
-    "@finos/vuu-datagrid": "0.0.26",
-    "@finos/vuu-filters": "0.0.26",
-    "@finos/vuu-layout": "0.0.26",
-    "@finos/vuu-popups": "0.0.26",
-    "@finos/vuu-protocol-types": "0.0.26",
-    "@finos/vuu-shell": "0.0.26",
-    "@finos/vuu-theme": "0.0.26",
-    "@finos/vuu-utils": "0.0.26",
-    "@salt-ds/core": "1.8.0",
-    "@salt-ds/icons": "1.5.1",
-    "@salt-ds/lab": "1.0.0-alpha.15"
-  },
-  "peerDependencies": {
-    "classnames": "^2.3.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
-  },
-  "engines": {
-    "node": ">=16.0.0"
-  }
-}
diff --git a/vuu-ui/sample-apps/feature-vuu-blotter/src/VuuBlotter.css b/vuu-ui/sample-apps/feature-vuu-blotter/src/VuuBlotter.css
deleted file mode 100644
index ba9ccedce..000000000
--- a/vuu-ui/sample-apps/feature-vuu-blotter/src/VuuBlotter.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.vuDialog, /* until we correctly set the className on FilteredGrid view in a dialog */
-.vuuBlotter {
-  --hwDialog-margin: 200px auto 0 auto;
-  --hwParsedInput-background: white;
-  --hwParsedInput-input-font-size: 12px;
-  --hwParsedInput-height: 28px;
-  --hwParsedInput-border-style: none none none solid;
-  --hwParsedInput-width: calc(100% - var(--hwParsedInput-height));
-  --vuuDataGrid-flex: 100% 0 0;
-  --vuuDataGrid-font-size: 10px;
-  --vuuDataGridCell-border-style: none;
-  --vuuDataGridRow-background-odd: var(--salt-palette-neutral-background-high);
-  max-height: 100%;
-}
-
-.vuuBlotter-gridContainer {
-  height: calc(100% - 22px);
-  inset: var(--hwParsedInput-height) 0 0 0;
-}
diff --git a/vuu-ui/sample-apps/feature-vuu-blotter/src/VuuBlotter.tsx b/vuu-ui/sample-apps/feature-vuu-blotter/src/VuuBlotter.tsx
deleted file mode 100644
index dbd16ab7a..000000000
--- a/vuu-ui/sample-apps/feature-vuu-blotter/src/VuuBlotter.tsx
+++ /dev/null
@@ -1,275 +0,0 @@
-import {
-  ConfigChangeMessage,
-  DataSourceVisualLinkCreatedMessage,
-  isViewportMenusAction,
-  isVisualLinkCreatedAction,
-  isVisualLinkRemovedAction,
-  isVisualLinksAction,
-  RemoteDataSource,
-  TableSchema,
-} from "@finos/vuu-data";
-import { MenuActionConfig, useVuuMenuActions } from "@finos/vuu-data-react";
-import { Grid, GridProvider } from "@finos/vuu-datagrid";
-import { GridAction, KeyedColumnDescriptor } from "@finos/vuu-datagrid-types";
-import { Filter, FilterState } from "@finos/vuu-filter-types";
-import {
-  addFilter,
-  FilterInput,
-  useFilterSuggestionProvider,
-} from "@finos/vuu-filters";
-import { useViewContext } from "@finos/vuu-layout";
-import { ContextMenuProvider } from "@finos/vuu-popups";
-import {
-  LinkDescriptorWithLabel,
-  VuuGroupBy,
-  VuuMenu,
-  VuuSort,
-} from "@finos/vuu-protocol-types";
-import {
-  FeatureProps,
-  ShellContextProps,
-  useShellContext,
-} from "@finos/vuu-shell";
-import { filterAsQuery } from "@finos/vuu-utils";
-import { Button } from "@salt-ds/core";
-import { LinkedIcon } from "@salt-ds/icons";
-import { useCallback, useEffect, useMemo, useState } from "react";
-
-import "./VuuBlotter.css";
-
-const classBase = "vuuBlotter";
-
-const CONFIG_KEYS = ["filter", "filterQuery", "groupBy", "sort"];
-
-type BlotterConfig = {
-  columns?: KeyedColumnDescriptor[];
-  groupBy?: VuuGroupBy;
-  sort?: VuuSort;
-  "visual-link"?: DataSourceVisualLinkCreatedMessage;
-};
-export interface FilteredGridProps extends FeatureProps {
-  schema: TableSchema;
-}
-
-const applyDefaults = (
-  { columns, table }: TableSchema,
-  getDefaultColumnConfig?: ShellContextProps["getDefaultColumnConfig"]
-) => {
-  if (typeof getDefaultColumnConfig === "function") {
-    return columns.map((column) => {
-      const config = getDefaultColumnConfig(table.table, column.name);
-      if (config) {
-        return {
-          ...column,
-          ...config,
-        };
-      } else {
-        return column;
-      }
-    });
-  } else {
-    return columns;
-  }
-};
-
-const VuuBlotter = ({ schema, ...props }: FilteredGridProps) => {
-  const { id, dispatch, load, purge, save, loadSession, saveSession, title } =
-    useViewContext();
-  const config = useMemo(() => load?.() as BlotterConfig | undefined, [load]);
-  const { getDefaultColumnConfig, handleRpcResponse } = useShellContext();
-  const [filterState, setFilterState] = useState<FilterState>({
-    filter: undefined,
-    filterQuery: "",
-  });
-
-  const suggestionProvider = useFilterSuggestionProvider({
-    columns: schema.columns,
-    table: schema.table,
-  });
-
-  const dataSource: RemoteDataSource = useMemo(() => {
-    let ds = loadSession?.("data-source") as RemoteDataSource;
-    if (ds) {
-      return ds;
-    }
-    const columns = schema.columns.map((col) => col.name);
-    ds = new RemoteDataSource({
-      viewport: id,
-      table: schema.table,
-      ...config,
-      columns,
-      title,
-    });
-    saveSession?.(ds, "data-source");
-    return ds;
-    // Note: despite the dependency array, because we load dataStore from session
-    // after initial load, changes to the following dependencies will not cause
-    // us to create a new dataSource, which is correct.
-  }, [config, id, loadSession, saveSession, schema, title]);
-
-  useEffect(() => {
-    dataSource.enable();
-    return () => {
-      dataSource.disable();
-    };
-  }, [dataSource]);
-
-  useEffect(() => {
-    if (title !== dataSource.title) {
-      dataSource.title = title;
-    }
-  }, [dataSource, title]);
-
-  const removeVisualLink = useCallback(() => {
-    dataSource.visualLink = undefined;
-  }, [dataSource]);
-
-  const dispatchGridAction = useCallback(
-    (action: GridAction) => {
-      if (isVisualLinksAction(action)) {
-        saveSession?.(action.links, "visual-links");
-        return true;
-      } else if (isVisualLinkCreatedAction(action)) {
-        dispatch?.({
-          type: "add-toolbar-contribution",
-          location: "post-title",
-          content: (
-            <Button aria-label="remove-link" onClick={removeVisualLink}>
-              <LinkedIcon />
-            </Button>
-          ),
-        });
-        save?.(action, "visual-link");
-        return true;
-      } else if (isVisualLinkRemovedAction(action)) {
-        dispatch?.({
-          type: "remove-toolbar-contribution",
-          location: "post-title",
-        });
-        purge?.("visual-link");
-        return true;
-      } else if (isViewportMenusAction(action)) {
-        saveSession?.(action.menu, "vs-context-menu");
-        return true;
-      }
-      return false;
-    },
-    [dispatch, purge, removeVisualLink, save, saveSession]
-  );
-
-  const handleConfigChange = useCallback(
-    (update: ConfigChangeMessage) => {
-      switch (update.type) {
-        default:
-          for (const [key, state] of Object.entries(update)) {
-            if (CONFIG_KEYS.includes(key)) {
-              save?.(state, key);
-            }
-          }
-      }
-    },
-    [save]
-  );
-
-  // It is important that these values are not assigned in advance. They
-  // are accessed at the point of construction of ContextMenu
-  const menuActionConfig: MenuActionConfig = useMemo(
-    () => ({
-      get visualLink() {
-        return load?.("visual-link") as DataSourceVisualLinkCreatedMessage;
-      },
-      get visualLinks() {
-        return loadSession?.("visual-links") as LinkDescriptorWithLabel[];
-      },
-      get vuuMenu() {
-        return loadSession?.("vs-context-menu") as VuuMenu;
-      },
-    }),
-    [load, loadSession]
-  );
-
-  const { buildViewserverMenuOptions, handleMenuAction } = useVuuMenuActions({
-    dataSource,
-    menuActionConfig,
-    onRpcResponse: handleRpcResponse,
-  });
-
-  const namedFilters = useMemo(() => new Map<string, string>(), []);
-
-  const handleSubmitFilter = useCallback(
-    (
-      newFilter: Filter | undefined,
-      filterQuery: string,
-      mode = "add",
-      filterName?: string
-    ) => {
-      let newFilterState: FilterState;
-      if (newFilter && (mode === "and" || mode === "or")) {
-        const fullFilter = addFilter(filterState.filter, newFilter, {
-          combineWith: mode,
-        }) as Filter;
-        newFilterState = {
-          filter: fullFilter,
-          filterQuery: filterAsQuery(fullFilter),
-          filterName,
-        };
-      } else {
-        newFilterState = {
-          filter: newFilter,
-          filterQuery,
-          filterName,
-        };
-      }
-
-      dataSource.filter = {
-        filter: newFilterState.filterQuery,
-        filterStruct: newFilterState.filter,
-      };
-      setFilterState(newFilterState);
-      if (filterName && newFilterState.filter) {
-        namedFilters.set(filterName, newFilterState.filterQuery);
-      }
-    },
-    [dataSource, filterState.filter, namedFilters]
-  );
-
-  const configColumns = config?.columns;
-
-  const columns = useMemo(() => {
-    return configColumns || applyDefaults(schema, getDefaultColumnConfig);
-  }, [configColumns, getDefaultColumnConfig, schema]);
-
-  return (
-    <ContextMenuProvider
-      menuActionHandler={handleMenuAction}
-      menuBuilder={buildViewserverMenuOptions}
-    >
-      <div className={classBase}>
-        <FilterInput
-          existingFilter={filterState.filter}
-          onSubmitFilter={handleSubmitFilter}
-          suggestionProvider={suggestionProvider}
-        />
-        <GridProvider value={{ dispatchGridAction }}>
-          <div className={`${classBase}-gridContainer`}>
-            <Grid
-              {...props}
-              columnSizing="fill"
-              dataSource={dataSource}
-              columns={columns}
-              onConfigChange={handleConfigChange}
-              renderBufferSize={80}
-              rowHeight={18}
-              selectionModel="extended"
-              // showLineNumbers
-            />
-          </div>
-        </GridProvider>
-      </div>
-    </ContextMenuProvider>
-  );
-};
-
-VuuBlotter.displayName = "FilteredGrid";
-
-export default VuuBlotter;
diff --git a/vuu-ui/sample-apps/feature-vuu-table/index.ts b/vuu-ui/sample-apps/feature-vuu-table/index.ts
deleted file mode 100644
index f039814e9..000000000
--- a/vuu-ui/sample-apps/feature-vuu-table/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import VuuTable from "./src/vuuTable";
-export default VuuTable;
diff --git a/vuu-ui/sample-apps/feature-vuu-table/package.json b/vuu-ui/sample-apps/feature-vuu-table/package.json
deleted file mode 100644
index a35d4c398..000000000
--- a/vuu-ui/sample-apps/feature-vuu-table/package.json
+++ /dev/null
@@ -1,44 +0,0 @@
-{
-  "name": "feature-vuu-table",
-  "version": "0.0.26",
-  "description": "Vuu Table",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "node ../../scripts/build-feature.mjs",
-    "start": "serve -p 5002 ../../deployed_apps/app-vuu-example"
-  },
-  "private": true,
-  "keywords": [],
-  "author": "heswell",
-  "license": "Apache-2.0",
-  "sideEffects": [
-    "**/*.css"
-  ],
-  "devDependencies": {},
-  "dependencies": {
-    "@finos/vuu-data": "0.0.26",
-    "@finos/vuu-data-react": "0.0.26",
-    "@finos/vuu-datagrid-types": "0.0.26",
-    "@finos/vuu-filters": "0.0.26",
-    "@finos/vuu-filter-types": "0.0.26",
-    "@finos/vuu-layout": "0.0.26",
-    "@finos/vuu-popups": "0.0.26",
-    "@finos/vuu-protocol-types": "0.0.26",
-    "@finos/vuu-shell": "0.0.26",
-    "@finos/vuu-table": "0.0.26",
-    "@finos/vuu-table-extras": "0.0.26",
-    "@finos/vuu-theme": "0.0.26",
-    "@finos/vuu-utils": "0.0.26",
-    "@salt-ds/core": "1.8.0",
-    "@salt-ds/icons": "1.5.1",
-    "@salt-ds/lab": "1.0.0-alpha.15"
-  },
-  "peerDependencies": {
-    "classnames": "^2.3.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
-  },
-  "engines": {
-    "node": ">=16.0.0"
-  }
-}
diff --git a/vuu-ui/sample-apps/feature-vuu-table/src/ConfigurableDataTable.tsx b/vuu-ui/sample-apps/feature-vuu-table/src/ConfigurableDataTable.tsx
deleted file mode 100644
index cc743d6fa..000000000
--- a/vuu-ui/sample-apps/feature-vuu-table/src/ConfigurableDataTable.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { GridConfig } from "@finos/vuu-datagrid-types";
-import { Dialog } from "@finos/vuu-popups";
-import { Table, TablePropsDeprecated as TableProps } from "@finos/vuu-table";
-import { ReactElement, useCallback, useState } from "react";
-
-export const ConfigurableDataTable = ({
-  config,
-  dataSource,
-  ...restProps
-}: TableProps) => {
-  const [dialogContent, setDialogContent] = useState<ReactElement | null>(null);
-  const [tableConfig] = useState<Omit<GridConfig, "headings">>(config);
-
-  const hideSettings = useCallback(() => {
-    setDialogContent(null);
-  }, []);
-
-  return (
-    <>
-      <Table
-        {...restProps}
-        allowConfigEditing
-        config={tableConfig}
-        dataSource={dataSource}
-      />
-      <Dialog
-        className="vuuDialog-gridConfig"
-        isOpen={dialogContent !== null}
-        onClose={hideSettings}
-        title="Grid and Column Settings"
-      >
-        {dialogContent}
-      </Dialog>
-    </>
-  );
-};
diff --git a/vuu-ui/sample-apps/feature-vuu-table/src/vuuTable.css b/vuu-ui/sample-apps/feature-vuu-table/src/vuuTable.css
deleted file mode 100644
index 1dc4f41e7..000000000
--- a/vuu-ui/sample-apps/feature-vuu-table/src/vuuTable.css
+++ /dev/null
@@ -1,35 +0,0 @@
-.vuDialog, /* until we correctly set the className on FilteredGrid view in a dialog */
-.vuuTable {
-  --hwDialog-margin: 200px auto 0 auto;
-  --hwParsedInput-background: white;
-  --hwParsedInput-input-font-size: 12px;
-  --hwParsedInput-height: 28px;
-  --hwParsedInput-border-style: none none none solid;
-  --hwParsedInput-width: calc(100% - var(--hwParsedInput-height));
-  --vuuDataGrid-flex: 100% 0 0;
-  --vuuDataGrid-font-size: 10px;
-  --vuuDataGridCell-border-style: none;
-  --vuuDataGridRow-background-odd: var(--salt-palette-neutral-background-high);
-  display: flex;
-  flex-direction: column;
-}
-
-.vuuTable .vuuFilterInput {
-  flex: 22px 0 0;
-}
-
-.vuuTable .vuuTable-footer {
-  flex: 22px 0 0;
-  --saltToolbar-height: 20px;
-  --saltToolbar-background: var(--salt-container-primary-background);
-  border-top: solid 1px var(--salt-container-primary-borderColor);
-  color: var(--salt-text-secondary-foreground);
-
-}
-
-
-.vuuTable-gridContainer {
-  height: calc(100% - 22px);
-  inset: var(--hwParsedInput-height) 0 0 0;
-}
-
diff --git a/vuu-ui/sample-apps/feature-vuu-table/src/vuuTable.tsx b/vuu-ui/sample-apps/feature-vuu-table/src/vuuTable.tsx
deleted file mode 100644
index de7da7910..000000000
--- a/vuu-ui/sample-apps/feature-vuu-table/src/vuuTable.tsx
+++ /dev/null
@@ -1,281 +0,0 @@
-import {
-  DataSource,
-  DataSourceConfig,
-  DataSourceVisualLinkCreatedMessage,
-  RemoteDataSource,
-  TableSchema,
-  VuuFeatureInvocationMessage,
-} from "@finos/vuu-data";
-import { MenuActionConfig, useVuuMenuActions } from "@finos/vuu-data-react";
-import { GridConfig } from "@finos/vuu-datagrid-types";
-import { Filter, FilterState } from "@finos/vuu-filter-types";
-import {
-  addFilter,
-  FilterInput,
-  useFilterSuggestionProvider,
-} from "@finos/vuu-filters";
-import { useViewContext } from "@finos/vuu-layout";
-import { ContextMenuProvider } from "@finos/vuu-popups";
-import { LinkDescriptorWithLabel, VuuMenu } from "@finos/vuu-protocol-types";
-import {
-  FeatureProps,
-  ShellContextProps,
-  useShellContext,
-} from "@finos/vuu-shell";
-import { DataSourceStats } from "@finos/vuu-table-extras";
-import { filterAsQuery } from "@finos/vuu-utils";
-import { Button } from "@salt-ds/core";
-import { LinkedIcon } from "@salt-ds/icons";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { ConfigurableDataTable } from "./ConfigurableDataTable";
-
-import "./vuuTable.css";
-
-const classBase = "vuuTable";
-
-type BlotterConfig = {
-  "datasource-config"?: DataSourceConfig;
-  "table-config"?: Omit<GridConfig, "headings">;
-};
-
-const NO_CONFIG: BlotterConfig = {};
-
-export interface FilteredTableProps extends FeatureProps {
-  schema: TableSchema;
-}
-
-const applyDefaults = (
-  { columns, table }: TableSchema,
-  getDefaultColumnConfig?: ShellContextProps["getDefaultColumnConfig"]
-) => {
-  if (typeof getDefaultColumnConfig === "function") {
-    return columns.map((column) => {
-      const config = getDefaultColumnConfig(table.table, column.name);
-      if (config) {
-        return {
-          ...column,
-          ...config,
-        };
-      } else {
-        return column;
-      }
-    });
-  } else {
-    return columns;
-  }
-};
-
-const VuuTable = ({ schema, ...props }: FilteredTableProps) => {
-  const { id, dispatch, load, save, loadSession, saveSession, title } =
-    useViewContext();
-  const {
-    "datasource-config": dataSourceConfigFromState,
-    "table-config": tableConfigFromState,
-  } = useMemo(() => (load?.() ?? NO_CONFIG) as BlotterConfig, [load]);
-
-  const { getDefaultColumnConfig, handleRpcResponse } = useShellContext();
-  const [filterState, setFilterState] = useState<FilterState>({
-    filter: undefined,
-    filterQuery: "",
-  });
-
-  const configColumns = tableConfigFromState?.columns;
-
-  const tableConfig = useMemo(
-    () => ({
-      columns: configColumns || applyDefaults(schema, getDefaultColumnConfig),
-    }),
-    [configColumns, getDefaultColumnConfig, schema]
-  );
-
-  const tableConfigRef = useRef<Omit<GridConfig, "headings">>(tableConfig);
-
-  const suggestionProvider = useFilterSuggestionProvider({
-    columns: schema.columns,
-    table: schema.table,
-  });
-
-  const handleDataSourceConfigChange = useCallback(
-    (config: DataSourceConfig | undefined, confirmed?: boolean) => {
-      // confirmed / unconfirmed messages are used for UI updates, not state saving
-      if (confirmed === undefined) {
-        save?.(config, "datasource-config");
-      }
-    },
-    [save]
-  );
-
-  const handleTableConfigChange = useCallback(
-    (config: Omit<GridConfig, "headings">) => {
-      save?.(config, "table-config");
-      tableConfigRef.current = config;
-    },
-    [save]
-  );
-
-  const dataSource: DataSource = useMemo(() => {
-    let ds = loadSession?.("data-source") as RemoteDataSource;
-    if (ds) {
-      return ds;
-    }
-    const columns =
-      dataSourceConfigFromState?.columns ??
-      schema.columns.map((col) => col.name);
-
-    ds = new RemoteDataSource({
-      bufferSize: 200,
-      viewport: id,
-      table: schema.table,
-      ...dataSourceConfigFromState,
-      columns,
-      title,
-    });
-    ds.on("config", handleDataSourceConfigChange);
-    saveSession?.(ds, "data-source");
-    return ds;
-  }, [
-    dataSourceConfigFromState,
-    handleDataSourceConfigChange,
-    id,
-    loadSession,
-    saveSession,
-    schema.columns,
-    schema.table,
-    title,
-  ]);
-
-  useEffect(() => {
-    dataSource.resume?.();
-    return () => {
-      // suspend activity on the dataSource when component is unmounted
-      dataSource.suspend?.();
-    };
-  }, [dataSource]);
-
-  const removeVisualLink = useCallback(() => {
-    dataSource.visualLink = undefined;
-  }, [dataSource]);
-
-  const handleVuuFeatureInvoked = useCallback(
-    (message: VuuFeatureInvocationMessage) => {
-      if (message.type === "vuu-link-created") {
-        dispatch?.({
-          type: "add-toolbar-contribution",
-          location: "post-title",
-          content: (
-            <Button aria-label="remove-link" onClick={removeVisualLink}>
-              <LinkedIcon />
-            </Button>
-          ),
-        });
-      } else {
-        dispatch?.({
-          type: "remove-toolbar-contribution",
-          location: "post-title",
-        });
-      }
-    },
-    [dispatch, removeVisualLink]
-  );
-
-  // It is important that these values are not assigned in advance. They
-  // are accessed at the point of construction of ContextMenu
-  const menuActionConfig: MenuActionConfig = useMemo(
-    () => ({
-      get visualLink() {
-        return load?.("visual-link") as DataSourceVisualLinkCreatedMessage;
-      },
-      get visualLinks() {
-        return loadSession?.("vuu-links") as LinkDescriptorWithLabel[];
-      },
-      get vuuMenu() {
-        return loadSession?.("vuu-menu") as VuuMenu;
-      },
-    }),
-    [load, loadSession]
-  );
-
-  const { buildViewserverMenuOptions, handleMenuAction } = useVuuMenuActions({
-    dataSource,
-    menuActionConfig,
-    onRpcResponse: handleRpcResponse,
-  });
-
-  useEffect(() => {
-    if (title !== dataSource.title) {
-      dataSource.title = title;
-    }
-  }, [dataSource, title]);
-
-  const namedFilters = useMemo(() => new Map<string, string>(), []);
-
-  const handleSubmitFilter = useCallback(
-    (
-      newFilter: Filter | undefined,
-      filterQuery: string,
-      mode = "add",
-      filterName?: string
-    ) => {
-      let newFilterState: FilterState;
-      if (newFilter && (mode === "and" || mode === "or")) {
-        const fullFilter = addFilter(filterState.filter, newFilter, {
-          combineWith: mode,
-        }) as Filter;
-        newFilterState = {
-          filter: fullFilter,
-          filterQuery: filterAsQuery(fullFilter),
-          filterName,
-        };
-      } else {
-        newFilterState = {
-          filter: newFilter,
-          filterQuery,
-          filterName,
-        };
-      }
-
-      dataSource.filter = {
-        filter: newFilterState.filterQuery,
-        filterStruct: newFilterState.filter,
-      };
-      setFilterState(newFilterState);
-      if (filterName && newFilterState.filter) {
-        namedFilters.set(filterName, newFilterState.filterQuery);
-      }
-    },
-    [dataSource, filterState.filter, namedFilters]
-  );
-
-  return (
-    <ContextMenuProvider
-      menuActionHandler={handleMenuAction}
-      menuBuilder={buildViewserverMenuOptions}
-    >
-      <div className={classBase}>
-        <FilterInput
-          existingFilter={filterState.filter}
-          onSubmitFilter={handleSubmitFilter}
-          suggestionProvider={suggestionProvider}
-        />
-        <div className={`${classBase}-gridContainer`}>
-          <ConfigurableDataTable
-            {...props}
-            config={tableConfigRef.current}
-            dataSource={dataSource}
-            onConfigChange={handleTableConfigChange}
-            onFeatureInvocation={handleVuuFeatureInvoked}
-            renderBufferSize={100}
-            rowHeight={18}
-          />
-        </div>
-        <div className="vuuToolbarProxy vuuTable-footer">
-          <DataSourceStats dataSource={dataSource as RemoteDataSource} />
-        </div>
-      </div>
-    </ContextMenuProvider>
-  );
-};
-
-VuuTable.displayName = "VuuTable";
-
-export default VuuTable;
diff --git a/vuu-ui/showcase/src/examples/DataGrid/Grid.examples.css b/vuu-ui/showcase/src/examples/DataGrid/Grid.examples.css
deleted file mode 100644
index 7a8b43bb1..000000000
--- a/vuu-ui/showcase/src/examples/DataGrid/Grid.examples.css
+++ /dev/null
@@ -1,7 +0,0 @@
-#drag-canvas {
-  position: absolute;
-}
-
-.Steve {
-  --grid-row-height: 32px;
-}
diff --git a/vuu-ui/showcase/src/examples/DataGrid/Grid.examples.tsx b/vuu-ui/showcase/src/examples/DataGrid/Grid.examples.tsx
deleted file mode 100644
index 951aade1d..000000000
--- a/vuu-ui/showcase/src/examples/DataGrid/Grid.examples.tsx
+++ /dev/null
@@ -1,673 +0,0 @@
-import { ConfigChangeHandler } from "@finos/vuu-data";
-import { Grid } from "@finos/vuu-datagrid";
-import { ColumnDescriptor } from "@finos/vuu-datagrid-types";
-import { Flexbox, View } from "@finos/vuu-layout";
-import { Dialog } from "@finos/vuu-popups";
-import { getAllSchemas } from "@finos/vuu-data-test";
-import {
-  Button,
-  FormField,
-  Input,
-  ToggleButton,
-  ToggleButtonGroup,
-} from "@salt-ds/core";
-import { FormLabel } from "@salt-ds/lab";
-import {
-  ChangeEvent,
-  ReactElement,
-  SyntheticEvent,
-  useCallback,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { ErrorDisplay, useTestDataSource } from "../utils";
-import { instrumentSchema } from "./columnMetaData";
-
-import "./Grid.examples.css";
-
-let displaySequence = 1;
-
-type GridBufferOptions = {
-  bufferSize: number;
-  renderBufferSize: number;
-};
-
-export const DefaultGrid = () => {
-  const tables = useMemo(
-    () => ["instruments", "orders", "parentOrders", "prices"],
-    []
-  );
-
-  const calculatedColumns: ColumnDescriptor[] = useMemo(
-    () => [
-      {
-        name: "notional",
-        expression: "=price*quantity",
-        serverDataType: "double",
-        type: {
-          name: "number",
-          formatting: {
-            decimals: 2,
-          },
-        },
-      },
-      {
-        name: "isBuy",
-        expression: '=if(side="Sell","N","Y")',
-        serverDataType: "char",
-      },
-      {
-        name: "CcySort",
-        expression: '=if(ccy="Gbp",1,if(ccy="USD",2,3))',
-        serverDataType: "char",
-        width: 60,
-      },
-      {
-        name: "CcyLower",
-        expression: "=lower(ccy)",
-        serverDataType: "string",
-        width: 60,
-      },
-      {
-        name: "AccountUpper",
-        expression: "=upper(account)",
-        label: "ACCOUNT",
-        serverDataType: "string",
-      },
-      {
-        name: "ExchangeCcy",
-        expression: '=concatenate("---", exchange,"...",ccy, "---")',
-        serverDataType: "string",
-      },
-      {
-        name: "ExchangeIsNY",
-        expression: '=starts(exchange,"N")',
-        serverDataType: "boolean",
-      },
-      // {
-      //   name: "Text",
-      //   expression: "=text(quantity)",
-      //   serverDataType: "string",
-      // },
-    ],
-    []
-  );
-
-  const [renderBufferSize, setRenderBufferSize] = useState<number | undefined>(
-    0
-  );
-  const [bufferSize, setBufferSize] = useState<number | undefined>(0);
-  const [gridBufferOptions, setGridBufferOptions] = useState<GridBufferOptions>(
-    {
-      bufferSize: 100,
-      renderBufferSize: 0,
-    }
-  );
-  const [selectedIndex, setSelectedIndex] = useState<number>(0);
-  const [dialogContent, setDialogContent] = useState<ReactElement | null>(null);
-  const schemas = getAllSchemas();
-  const { columns, dataSource, error } = useTestDataSource({
-    bufferSize: gridBufferOptions.renderBufferSize,
-    calculatedColumns: selectedIndex === 2 ? calculatedColumns : undefined,
-    schemas,
-    tablename: tables[selectedIndex],
-  });
-
-  const handleChange = (evt: SyntheticEvent<HTMLButtonElement>) => {
-    const { value } = evt.target as HTMLButtonElement;
-    setSelectedIndex(parseInt(value));
-  };
-
-  const hideSettings = useCallback(() => {
-    setDialogContent(null);
-  }, []);
-
-  const handleRenderBufferSizeChange = useCallback(
-    (evt: ChangeEvent<HTMLInputElement>) => {
-      const value = parseInt((evt.target as HTMLInputElement).value || "-1");
-      if (Number.isFinite(value) && value > 0) {
-        setRenderBufferSize(value);
-      } else {
-        setBufferSize(undefined);
-      }
-    },
-    []
-  );
-
-  // const handleBufferSizeChange = useCallback((evt: ChangeEvent) => {
-  //   const value = parseInt((evt.target as HTMLInputElement).value || "-1");
-  //   if (Number.isFinite(value) && value > 0) {
-  //     setBufferSize(value);
-  //   } else {
-  //     setBufferSize(undefined);
-  //   }
-  // }, []);
-
-  const applyBufferSizes = useCallback(() => {
-    setGridBufferOptions({
-      bufferSize: bufferSize ?? 100,
-      renderBufferSize: renderBufferSize ?? 0,
-    });
-  }, [bufferSize, renderBufferSize]);
-
-  if (error) {
-    return <ErrorDisplay>{error}</ErrorDisplay>;
-  }
-
-  return (
-    <>
-      <div className="vuuToolbarProxy" style={{ width: 700 }}>
-        <ToggleButtonGroup onChange={handleChange} value={selectedIndex}>
-          <ToggleButton value={0}>Instruments</ToggleButton>
-          <ToggleButton value={1}>Orders</ToggleButton>
-          <ToggleButton value={2}>Parent Orders</ToggleButton>
-          <ToggleButton value={3}>Prices</ToggleButton>
-        </ToggleButtonGroup>
-      </div>
-
-      <Grid
-        dataSource={dataSource}
-        columns={columns}
-        height={600}
-        key={String(gridBufferOptions.renderBufferSize)}
-        selectionModel="extended"
-        width={900}
-        {...gridBufferOptions}
-      />
-      <Dialog isOpen={dialogContent !== null} onClose={hideSettings}>
-        {dialogContent}
-      </Dialog>
-      <div className="vuuToolbarProxy" style={{ marginTop: 12 }}>
-        <div className="vuuTooltrayProxy">
-          <Input
-            inputProps={{
-              type: "number",
-            }}
-            value={String(renderBufferSize ?? "")}
-            onChange={handleRenderBufferSizeChange}
-            style={{ width: 80 }}
-          />
-          {/* <ToolbarField
-            label="Buffer Size"
-            labelPlacement="left"
-            style={{ width: 250 }}
-          >
-            <Input
-              value={String(bufferSize ?? "")}
-              onChange={handleBufferSizeChange}
-              style={{ width: 80 }}
-              type="number"
-            />
-          </ToolbarField> */}
-          <Button onClick={applyBufferSizes}>Apply</Button>
-        </div>
-      </div>
-    </>
-  );
-};
-DefaultGrid.displaySequence = displaySequence++;
-
-export const BasicGrid = () => {
-  const schemas = getAllSchemas();
-  const { columns, dataSource, error } = useTestDataSource({
-    schemas,
-    tablename: "instruments",
-  });
-  const gridRef = useRef<HTMLDivElement>(null);
-  const [rowHeight, setRowHeight] = useState(18);
-
-  const incrementProp = () => {
-    setRowHeight((value) => value + 1);
-  };
-
-  const decrementProp = () => {
-    setRowHeight((value) => value - 1);
-  };
-
-  const incrementCssProperty = () => {
-    if (gridRef.current) {
-      const rowHeight = parseInt(
-        getComputedStyle(gridRef.current).getPropertyValue(
-          "--hw-grid-row-height"
-        )
-      );
-      gridRef.current.style.setProperty(
-        "--grid-row-height",
-        `${rowHeight + 1}px`
-      );
-    }
-  };
-
-  const decrementCssProperty = () => {
-    if (gridRef.current) {
-      const rowHeight = parseInt(
-        getComputedStyle(gridRef.current).getPropertyValue(
-          "--hw-grid-row-height"
-        )
-      );
-      gridRef.current?.style.setProperty(
-        "--grid-row-height",
-        `${rowHeight - 1}px`
-      );
-    }
-  };
-
-  const setLowDensity = () => {
-    gridRef.current?.style.setProperty("--grid-row-height", `32px`);
-  };
-  const setHighDensity = () => {
-    gridRef.current?.style.setProperty("--grid-row-height", `20px`);
-  };
-
-  const handleConfigChange: ConfigChangeHandler = (config) => {
-    console.log(`handleConfigChange ${JSON.stringify(config, null, 2)}`);
-  };
-
-  if (error) {
-    return <ErrorDisplay>{error}</ErrorDisplay>;
-  }
-
-  return (
-    <>
-      <Grid
-        className="StoryGrid"
-        dataSource={dataSource}
-        columns={columns}
-        height={624}
-        onConfigChange={handleConfigChange}
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        ref={gridRef}
-        renderBufferSize={50}
-        rowHeight={rowHeight}
-        selectionModel="single"
-        style={{ margin: 10, border: "solid 1px #ccc" }}
-      />
-      <br />
-      <button onClick={incrementProp}>Increase row height prop</button>
-      <button onClick={decrementProp}>Decrease row height prop</button>
-      <button onClick={incrementCssProperty}>
-        Increase row height custom property
-      </button>
-      <button onClick={decrementCssProperty}>
-        Decrease row height custom property
-      </button>
-      <br />
-      <button onClick={setHighDensity}>High Density</button>
-      <button onClick={setLowDensity}>Low Density</button>
-    </>
-  );
-};
-
-BasicGrid.displaySequence = displaySequence++;
-
-export const PersistConfig = () => {
-  const configRef = useRef({
-    columns: instrumentSchema.columns,
-  });
-  const [configDisplay, setConfigDisplay] = useState(() => configRef.current);
-  const [config, setConfig] = useState(() => configRef.current);
-
-  const applyConfig = () => {
-    setConfig(configRef.current);
-  };
-
-  const schemas = getAllSchemas();
-  const { columns, dataSource, error } = useTestDataSource({
-    schemas,
-    tablename: "instruments",
-  });
-
-  const handleConfigChange = useCallback(
-    (updates) => {
-      configRef.current = { ...config, ...updates };
-      setConfigDisplay(configRef.current);
-    },
-    [config]
-  );
-
-  const gridStyles = `
-    .StoryGrid {
-      --hwDataGridCell-border-style: none;
-      --hwDataGridRow-background-odd: var(--surface1);
-      --hwDataGrid-font-size: 10px;
-    }
-  `;
-
-  console.log(`render`, config);
-
-  if (error) {
-    return <ErrorDisplay>{error}</ErrorDisplay>;
-  }
-
-  return (
-    <>
-      <style>{gridStyles}</style>
-      <div>
-        <input defaultValue="Life is" />
-      </div>
-      <Grid
-        className="StoryGrid"
-        dataSource={dataSource}
-        columns={columns}
-        columnSizing="fill"
-        height={300}
-        onConfigChange={handleConfigChange}
-        renderBufferSize={50}
-        selectionModel="single"
-        style={{ margin: 10, border: "solid 1px #ccc" }}
-      />
-      <textarea
-        readOnly
-        style={{ height: 500, margin: "0 10px", width: "calc(100% - 20px)" }}
-        value={JSON.stringify(configDisplay, null, 2)}
-      />
-      <Button onClick={applyConfig}>Apply Config</Button>
-    </>
-  );
-};
-PersistConfig.displaySequence = displaySequence++;
-
-export const BasicGridColumnFixedCols = () => {
-  const schemas = getAllSchemas();
-  const { columns, dataSource, error } = useTestDataSource({
-    schemas,
-    tablename: "parentOrders",
-  });
-
-  const fixedColumns = useMemo(
-    () =>
-      columns.map((column) =>
-        column.name === "account" || column.name === "algo"
-          ? {
-              ...column,
-              locked: true,
-            }
-          : column
-      ),
-
-    [columns]
-  );
-
-  if (error) {
-    return <ErrorDisplay>{error}</ErrorDisplay>;
-  }
-
-  return (
-    <>
-      <div>
-        <input defaultValue="Life is" />
-      </div>
-      <Grid
-        dataSource={dataSource}
-        columns={fixedColumns}
-        height={600}
-        renderBufferSize={20}
-        style={{ margin: 10, border: "solid 1px #ccc" }}
-      />
-    </>
-  );
-};
-
-BasicGridColumnFixedCols.displaySequence = displaySequence++;
-
-export const ColumnHeaders1Level = () => {
-  const schemas = getAllSchemas();
-
-  const { columns, dataSource, error } = useTestDataSource({
-    columnConfig: {
-      bbg: { heading: ["BBG", "Instrument"] },
-      isin: { heading: ["ISIN", "Instrument"] },
-      ric: { heading: ["RIC", "Instrument"] },
-      description: { heading: ["Description", "Instrument"] },
-      currency: { heading: ["Currency", "Exchange Details"] },
-      exchange: { heading: ["Exchange", "Exchange Details"] },
-      lotSize: { heading: ["Lot Size", "Exchange Details"] },
-    },
-    columnNames: [
-      "bbg",
-      "isin",
-      "ric",
-      "description",
-      "currency",
-      "exchange",
-      "lotSize",
-    ],
-    schemas,
-    tablename: "instruments",
-  });
-
-  if (error) {
-    return <ErrorDisplay>{error}</ErrorDisplay>;
-  }
-
-  return (
-    <>
-      <div>
-        <input defaultValue="Life is" />
-      </div>
-      <Grid
-        dataSource={dataSource}
-        columns={columns}
-        height={600}
-        renderBufferSize={20}
-        style={{ margin: 10, border: "solid 1px #ccc" }}
-      />
-    </>
-  );
-};
-
-ColumnHeaders1Level.displaySequence = displaySequence++;
-
-export const SizeSpecifiedInProps = () => {
-  const schemas = getAllSchemas();
-  const { columns, dataSource, error } = useTestDataSource({
-    schemas,
-    tablename: "instruments",
-  });
-
-  if (error) {
-    return <ErrorDisplay>{error}</ErrorDisplay>;
-  }
-
-  return (
-    <>
-      <div>
-        <input defaultValue="Life is" />
-      </div>
-      <Grid
-        dataSource={dataSource}
-        columns={columns}
-        height={400}
-        renderBufferSize={20}
-        style={{ margin: 10, border: "solid 1px #ccc" }}
-        width={700}
-      />
-    </>
-  );
-};
-
-SizeSpecifiedInProps.displaySequence = displaySequence++;
-
-export const GridResize = () => {
-  const schemas = getAllSchemas();
-  const {
-    columns: cols1,
-    dataSource: ds1,
-    error: err1,
-  } = useTestDataSource({
-    schemas,
-    tablename: "instruments",
-  });
-  const {
-    columns: cols2,
-    dataSource: ds2,
-    error: err2,
-  } = useTestDataSource({
-    schemas,
-    tablename: "instruments",
-  });
-
-  if (err1) {
-    return <ErrorDisplay>{err1}</ErrorDisplay>;
-  } else if (err2) {
-    return <ErrorDisplay>{err2}</ErrorDisplay>;
-  }
-
-  return (
-    <Flexbox
-      style={{
-        width: 800,
-        height: 600,
-        flexDirection: "row",
-        border: "solid 1px lightgrey",
-      }}
-    >
-      <View resizeable style={{ flex: 1 }}>
-        <Grid
-          dataSource={ds1}
-          columns={cols1}
-          style={{ border: "solid 1px #ccc" }}
-        />
-      </View>
-      <View resizeable style={{ flex: 1 }}>
-        <Grid
-          dataSource={ds2}
-          columns={cols2}
-          style={{ border: "solid 1px #ccc" }}
-        />
-      </View>
-    </Flexbox>
-  );
-};
-
-GridResize.displaySequence = displaySequence++;
-
-export const ColumnHeaders2Levels = () => {
-  const schemas = getAllSchemas();
-  const { columns, dataSource, error } = useTestDataSource({
-    columnConfig: {
-      bbg: { heading: ["BBG", "Group 1", "Instrument"] },
-      isin: { heading: ["ISIN", "Group 1", "Instrument"] },
-      ric: { heading: ["RIC", "Group 2", "Instrument"] },
-      description: { heading: ["Description", "Group 2", "Instrument"] },
-      currency: { heading: ["Currency", "Group 3", "Exchange Details"] },
-      exchange: { heading: ["Exchange", "Group 3", "Exchange Details"] },
-      lotSize: { heading: ["Lot Size", "Group 4", "Exchange Details"] },
-    },
-    schemas,
-    tablename: "instruments",
-  });
-
-  if (error) {
-    return <ErrorDisplay>{error}</ErrorDisplay>;
-  }
-
-  return (
-    <>
-      <div>
-        <input defaultValue="Life is" />
-      </div>
-      <Grid
-        dataSource={dataSource}
-        columns={columns}
-        height={600}
-        renderBufferSize={20}
-        style={{ margin: 10, border: "solid 1px #ccc" }}
-      />
-    </>
-  );
-};
-
-ColumnHeaders2Levels.displaySequence = displaySequence++;
-
-export const BufferVariations = () => {
-  const schemas = getAllSchemas();
-  const { columns, dataSource, error } = useTestDataSource({
-    bufferSize: 10,
-    schemas,
-    tablename: "instruments",
-  });
-
-  const handleConfigChange: ConfigChangeHandler = (config) => {
-    console.log(`handleConfigChange ${JSON.stringify(config, null, 2)}`);
-  };
-
-  const [bufferSize, setBufferSize] = useState(10);
-  const [from, setFrom] = useState(0);
-  const [to, setTo] = useState(10);
-
-  const handleSetBufferSize = useCallback(
-    (evt: ChangeEvent<HTMLInputElement>) =>
-      setBufferSize(parseInt(evt.target.value)),
-    []
-  );
-  const handleSetFrom = useCallback(
-    (evt: ChangeEvent<HTMLInputElement>) => setFrom(parseInt(evt.target.value)),
-    []
-  );
-  const handleSetTo = useCallback(
-    (evt: ChangeEvent<HTMLInputElement>) => setTo(parseInt(evt.target.value)),
-    []
-  );
-
-  const handleSetRange = useCallback(() => {
-    console.log(`setRange ${from} - ${to}`);
-    dataSource.range = { from, to };
-  }, [dataSource, from, to]);
-
-  if (error) {
-    return <ErrorDisplay>{error}</ErrorDisplay>;
-  }
-
-  return (
-    <>
-      <Grid
-        dataSource={dataSource}
-        columns={columns}
-        headerHeight={36}
-        height={380}
-        onConfigChange={handleConfigChange}
-        renderBufferSize={0}
-        rowHeight={36}
-        selectionModel="single"
-        style={{ margin: 10, border: "solid 1px #ccc" }}
-      />
-      <br />
-      <div className="vuuToolbarProxy">
-        <div className="vuuTootrayProxy">
-          <FormField labelPlacement="left">
-            <FormLabel>Buffer Size</FormLabel>
-            <Input
-              onChange={handleSetBufferSize}
-              value={`${bufferSize}`}
-              style={{ width: 50 }}
-            />
-          </FormField>
-        </div>
-        <div className="vuuTootrayProxy">
-          <FormField labelPlacement="left">
-            <FormLabel>from</FormLabel>
-            <Input
-              onChange={handleSetFrom}
-              value={from.toString()}
-              style={{ width: 50 }}
-            />
-          </FormField>
-          <FormField labelPlacement="left">
-            <FormLabel>to</FormLabel>
-            <Input
-              onChange={handleSetTo}
-              value={to.toString()}
-              style={{ width: 50 }}
-            />
-          </FormField>
-          <Button onClick={handleSetRange}>set range</Button>
-        </div>
-      </div>
-    </>
-  );
-};
-
-BufferVariations.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/DataGrid/columnMetaData.ts b/vuu-ui/showcase/src/examples/DataGrid/columnMetaData.ts
deleted file mode 100644
index 8b7c83528..000000000
--- a/vuu-ui/showcase/src/examples/DataGrid/columnMetaData.ts
+++ /dev/null
@@ -1,152 +0,0 @@
-export const pricesColumns = [
-  { name: 'ric', width: 100 },
-  {
-    name: 'bid',
-    type: {
-      name: 'number',
-      renderer: { name: 'background', flashStyle: 'arrow-bg' },
-      formatting: { decimals: 2, zeroPad: true }
-    },
-    aggregate: 'avg'
-  },
-  {
-    name: 'ask',
-    type: {
-      name: 'number',
-      renderer: { name: 'background', flashStyle: 'arrow-bg' },
-      formatting: { decimals: 2, zeroPad: true }
-    },
-    aggregate: 'avg'
-  },
-  { name: 'last', type: { name: 'number' } },
-  { name: 'open', type: { name: 'number' } },
-  { name: 'close', type: { name: 'number' } },
-  { name: 'scenario' }
-];
-
-export const orderColumns = [
-  { name: 'orderId', width: 120 },
-  { name: 'side', width: 100 },
-  { name: 'ric', width: 100 },
-  { name: 'ccy', width: 100 },
-  { name: 'quantity', width: 100 },
-  { name: 'filledQuantity', width: 100 },
-  { name: 'trader', width: 100 },
-  { name: 'lastUpdate', width: 100 }
-];
-
-export const instrumentPriceColumns = [
-  { name: 'ric', width: 120 },
-  { name: 'description', width: 200 },
-  { name: 'currency' },
-  { name: 'exchange' },
-  { name: 'lotSize', type: { name: 'number' } },
-  {
-    name: 'bid',
-    type: {
-      name: 'number',
-      renderer: { name: 'background', flashStyle: 'arrow-bg' },
-      formatting: { decimals: 2, zeroPad: true }
-    },
-    aggregate: 'avg'
-  },
-  {
-    name: 'ask',
-    type: {
-      name: 'number',
-      renderer: { name: 'background', flashStyle: 'arrow-bg' },
-      formatting: { decimals: 2, zeroPad: true }
-    },
-    aggregate: 'avg'
-  },
-  { name: 'last', type: { name: 'number' } },
-  { name: 'open', type: { name: 'number' } },
-  { name: 'close', type: { name: 'number' } },
-  { name: 'scenario' }
-];
-
-export const instrumentSchema = {
-  columns: [
-    { name: 'Symbol', width: 120 },
-    { name: 'Name', width: 200 },
-    {
-      name: 'Price',
-      type: {
-        name: 'number',
-        renderer: { name: 'background', flashStyle: 'arrow-bg' },
-        formatting: { decimals: 2, zeroPad: true }
-      },
-      aggregate: 'avg'
-    },
-    { name: 'MarketCap', type: 'number', aggregate: 'sum' },
-    { name: 'IPO' },
-    { name: 'Sector' },
-    { name: 'Industry' }
-  ]
-};
-
-export const instrumentSchemaFixed = {
-  columns: [
-    { name: 'Symbol', width: 120, locked: true },
-    { name: 'Name', width: 200 },
-    {
-      name: 'Price',
-      type: {
-        name: 'number',
-        renderer: { name: 'background', flashStyle: 'arrow-bg' },
-        formatting: { decimals: 2, zeroPad: true }
-      },
-      aggregate: 'avg'
-    },
-    { name: 'MarketCap', type: 'number', aggregate: 'sum' },
-    { name: 'IPO' },
-    { name: 'Sector' },
-    { name: 'Industry' }
-  ]
-};
-
-export const instrumentSchemaLabels = {
-  columns: [
-    { name: 'Symbol', width: 120, label: 'SYM' },
-    { name: 'Name', width: 200, label: 'Instrument Name' },
-    {
-      name: 'Price',
-      type: {
-        name: 'number',
-        renderer: { name: 'background', flashStyle: 'arrow-bg' },
-        formatting: { decimals: 2, zeroPad: true }
-      },
-      aggregate: 'avg'
-    },
-    { name: 'MarketCap', label: 'Market Cap', type: 'number', aggregate: 'sum' },
-    { name: 'IPO', label: 'IPO Date' },
-    { name: 'Sector' },
-    { name: 'Industry' }
-  ]
-};
-
-export const instrumentSchemaHeaders = {
-  columns: [
-    { name: 'Symbol', width: 120, heading: ['Symbol', 'Instrument'] },
-    { name: 'Name', width: 200, heading: ['Name', 'Instrument'] },
-    {
-      name: 'Price',
-      type: {
-        name: 'number',
-        renderer: { name: 'background', flashStyle: 'arrow-bg' },
-        formatting: { decimals: 2, zeroPad: true }
-      },
-      aggregate: 'avg',
-      heading: ['Price', 'Fundamentals']
-    },
-    {
-      name: 'MarketCap',
-      type: 'number',
-      aggregate: 'sum',
-      heading: ['Market Cap', 'Fundamentals']
-    },
-    { name: 'IPO', heading: ['IPO Date', 'Fundamentals'] },
-    { name: 'Sector', heading: ['Sector', 'Categorisation'] },
-    { name: 'Industry', heading: ['Industry', 'Categorisation'] }
-  ]
-};
diff --git a/vuu-ui/showcase/src/examples/DataGrid/index.ts b/vuu-ui/showcase/src/examples/DataGrid/index.ts
deleted file mode 100644
index 0ebaf574b..000000000
--- a/vuu-ui/showcase/src/examples/DataGrid/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./Grid.examples";
diff --git a/vuu-ui/showcase/src/examples/Table/TableArrayData.examples.tsx b/vuu-ui/showcase/src/examples/Table/TableArrayData.examples.tsx
deleted file mode 100644
index edecbb1a9..000000000
--- a/vuu-ui/showcase/src/examples/Table/TableArrayData.examples.tsx
+++ /dev/null
@@ -1,314 +0,0 @@
-import { Flexbox, View } from "@finos/vuu-layout";
-import { Table } from "@finos/vuu-table";
-import { DragVisualizer } from "@finos/vuu-table/src/table/DragVisualizer";
-import { Checkbox, ToggleButton } from "@salt-ds/core";
-import { ChangeEvent, CSSProperties, useCallback, useState } from "react";
-import { useTableConfig, useTestDataSource } from "../utils";
-import { getAllSchemas } from "@finos/vuu-data-test";
-
-let displaySequence = 1;
-
-export const DefaultTable = () => {
-  const { typeaheadHook, ...config } = useTableConfig({
-    columnCount: 10,
-    count: 1_000,
-  });
-  const [zebraStripes, setZebraStripes] = useState(true);
-  const handleZebraChanged = useCallback(
-    (evt: ChangeEvent<HTMLInputElement>) => {
-      const { checked } = evt.target as HTMLInputElement;
-      setZebraStripes(checked);
-    },
-    []
-  );
-  return (
-    <div style={{ display: "flex", gap: 12 }}>
-      <Table
-        {...config}
-        height={440}
-        renderBufferSize={100}
-        rowHeight={20}
-        width={700}
-      />
-      <div
-        className="vuuToolbarProxy vuuToolbarProxy-vertical"
-        style={{ height: "unset" } as CSSProperties}
-      >
-        <Checkbox
-          checked={zebraStripes === true}
-          onChange={handleZebraChanged}
-        />
-      </div>
-    </div>
-  );
-};
-DefaultTable.displaySequence = displaySequence++;
-
-export const TableLoading = () => {
-  const { typeaheadHook: _, ...config } = useTableConfig({ count: 0 });
-  return (
-    <>
-      <Table
-        {...config}
-        height={700}
-        renderBufferSize={20}
-        width={700}
-        className="vuuTable-loading"
-      />
-    </>
-  );
-};
-TableLoading.displaySequence = displaySequence++;
-
-export const SmallTable = () => {
-  const { typeaheadHook: _, ...config } = useTableConfig({
-    columnCount: 10,
-    count: 1000,
-  });
-  return (
-    <>
-      <Table
-        {...config}
-        headerHeight={30}
-        height={645}
-        renderBufferSize={20}
-        rowHeight={30}
-        width={715}
-      />
-    </>
-  );
-};
-SmallTable.displaySequence = displaySequence++;
-
-export const WideTableLowRowcount = () => {
-  const { typeaheadHook: _, ...config } = useTableConfig({
-    columnCount: 20,
-    count: 10,
-  });
-  return (
-    <>
-      <Table {...config} height={500} renderBufferSize={20} width={700} />
-    </>
-  );
-};
-WideTableLowRowcount.displaySequence = displaySequence++;
-
-export const DefaultTable10Rows = () => {
-  const { typeaheadHook: _, ...config } = useTableConfig();
-  return (
-    <>
-      <Table {...config} height={240} renderBufferSize={20} width={700} />
-    </>
-  );
-};
-DefaultTable10Rows.displaySequence = displaySequence++;
-
-export const DefaultTable1millionRows = () => {
-  const { typeaheadHook: _, ...config } = useTableConfig({ count: 1_000_000 });
-  return (
-    <>
-      <Table {...config} height={440} renderBufferSize={20} width={700} />
-    </>
-  );
-};
-DefaultTable1millionRows.displaySequence = displaySequence++;
-
-export const DefaultTable2millionRows = () => {
-  const { typeaheadHook: _, ...config } = useTableConfig({ count: 2_000_000 });
-  return (
-    <>
-      <Table {...config} height={440} renderBufferSize={20} width={700} />
-    </>
-  );
-};
-DefaultTable2millionRows.displaySequence = displaySequence++;
-
-export const DefaultTable200C0lumns = () => {
-  const { typeaheadHook: _, ...config } = useTableConfig({ columnCount: 200 });
-  return (
-    <>
-      <Table {...config} height={600} renderBufferSize={50} width={700} />
-    </>
-  );
-};
-
-DefaultTable200C0lumns.displaySequence = displaySequence++;
-
-export const ColumnHeaders1Level = () => {
-  const schemas = getAllSchemas();
-  const { config, dataSource } = useTestDataSource({
-    columnConfig: {
-      bbg: { heading: ["Instrument"] },
-      isin: { heading: ["Instrument"] },
-      ric: { heading: ["Instrument"] },
-      description: { heading: ["Instrument"] },
-      currency: { heading: ["Exchange Details"] },
-      exchange: { heading: ["Exchange Details"] },
-      lotSize: { heading: ["Exchange Details"] },
-    },
-    columnNames: [
-      "bbg",
-      "isin",
-      "ric",
-      "description",
-      "currency",
-      "exchange",
-      "lotSize",
-    ],
-    schemas,
-  });
-
-  return (
-    <>
-      <div>
-        <input defaultValue="Life is" />
-      </div>
-      <Table
-        config={config}
-        dataSource={dataSource}
-        height={700}
-        renderBufferSize={20}
-        style={{ margin: 10, border: "solid 1px #ccc" }}
-      />
-    </>
-  );
-};
-
-ColumnHeaders1Level.displaySequence = displaySequence++;
-
-export const ColumnHeadingsMultiLevel = () => {
-  const { typeaheadHook: _, ...config } = useTableConfig({
-    columnConfig: {
-      "row number": { heading: ["Level 0 Heading A", "Heading 1"] },
-      "column 1": { heading: ["Level 0 Heading A", "Heading 1"] },
-      "column 2": { heading: ["Level 0 Heading A", "Heading 1"] },
-      "column 3": { heading: ["Level 0 Heading A", "Heading 1"] },
-      "column 4": { heading: ["Level 0 Heading A", "Heading 2"] },
-      "column 5": { heading: ["Level 0 Heading A", "Heading 2"] },
-      "column 6": { heading: ["Level 0 Heading A", "Heading 2"] },
-      "column 7": { heading: ["Level 0 Heading B", "Heading 3"] },
-      "column 8": { heading: ["Level 0 Heading B", "Heading 3"] },
-      "column 9": { heading: ["Level 0 Heading B", "Heading 3"] },
-      "column 10": { heading: ["Level 0 Heading B", "Heading 3"] },
-    },
-  });
-  return (
-    <>
-      {/* <DragVisualizer orientation="horizontal"> */}
-      <Table {...config} height={700} renderBufferSize={20} width={700} />
-      {/* </DragVisualizer> */}
-    </>
-  );
-};
-
-ColumnHeadingsMultiLevel.displaySequence = displaySequence++;
-
-export const LeftPinnedColumns = () => {
-  const [isColumnBased, setIsColumnBased] = useState<boolean>(false);
-  const handleToggleLayout = useCallback(() => {
-    setIsColumnBased((value) => !value);
-  }, []);
-
-  const { typeaheadHook: _, ...config } = useTableConfig({
-    leftPinnedColumns: [0, 3],
-  });
-
-  return (
-    <div style={{ width: 900, height: 900 }}>
-      <div className="vuuToolbarProxy">
-        <ToggleButton
-          selected={isColumnBased}
-          onChange={handleToggleLayout}
-          value={0}
-        >
-          {isColumnBased ? "Column based table" : "Row based table"}
-        </ToggleButton>
-      </div>
-      <DragVisualizer orientation="horizontal">
-        <Table {...config} height={700} width={700} />
-      </DragVisualizer>
-    </div>
-  );
-};
-
-LeftPinnedColumns.displaySequence = displaySequence++;
-
-export const RightPinnedColumns = () => {
-  const [isColumnBased, setIsColumnBased] = useState<boolean>(false);
-  const handleToggleLayout = useCallback(() => {
-    setIsColumnBased((value) => !value);
-  }, []);
-  const { typeaheadHook: _, ...config } = useTableConfig({
-    rightPinnedColumns: [0, 3],
-  });
-
-  return (
-    <div style={{ width: 900, height: 900 }}>
-      <div className="vuuToolbarProxy">
-        <ToggleButton
-          selected={isColumnBased}
-          onChange={handleToggleLayout}
-          value={0}
-        >
-          {isColumnBased ? "Column based table" : "Row based table"}
-        </ToggleButton>
-      </div>
-      <DragVisualizer orientation="horizontal">
-        <Table {...config} height={700} width={700} />
-      </DragVisualizer>
-    </div>
-  );
-};
-
-RightPinnedColumns.displaySequence = displaySequence++;
-
-export const BetterTableFillContainer = () => {
-  const { typeaheadHook: _, ...config } = useTableConfig();
-  return (
-    <div style={{ height: 700, width: 700 }}>
-      <Table {...config} />
-    </div>
-  );
-};
-BetterTableFillContainer.displaySequence = displaySequence++;
-
-export const BetterTableWithBorder = () => {
-  const { typeaheadHook: _, ...config } = useTableConfig();
-  return (
-    <div style={{ height: 700, width: 700 }}>
-      <Table {...config} style={{ border: "solid 2px red" }} />
-    </div>
-  );
-};
-
-BetterTableWithBorder.displaySequence = displaySequence++;
-
-export const FlexLayoutTables = () => {
-  const config1 = useTableConfig({ renderBufferSize: 0 });
-  const config2 = useTableConfig({ renderBufferSize: 20 });
-  const config3 = useTableConfig({ renderBufferSize: 50 });
-  const config4 = useTableConfig({ renderBufferSize: 100 });
-  return (
-    <Flexbox style={{ flexDirection: "column", width: "100%", height: "100%" }}>
-      <Flexbox resizeable style={{ flexDirection: "row", flex: 1 }}>
-        <View resizeable style={{ flex: 1 }}>
-          <Table {...config1} />
-        </View>
-
-        <View resizeable style={{ flex: 1 }}>
-          <Table {...config2} />
-        </View>
-      </Flexbox>
-      <Flexbox resizeable style={{ flexDirection: "row", flex: 1 }}>
-        <View resizeable style={{ flex: 1 }}>
-          <Table {...config3} />
-        </View>
-
-        <View resizeable style={{ flex: 1 }}>
-          <Table {...config4} />
-        </View>
-      </Flexbox>
-    </Flexbox>
-  );
-};
-FlexLayoutTables.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Table/TableExtras.examples.tsx b/vuu-ui/showcase/src/examples/Table/TableExtras.examples.tsx
deleted file mode 100644
index c71dcef44..000000000
--- a/vuu-ui/showcase/src/examples/Table/TableExtras.examples.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import { ArrayDataSource } from "@finos/vuu-data";
-import {
-  ColumnDescriptor,
-  Selection,
-  SelectionChangeHandler,
-} from "@finos/vuu-datagrid-types";
-import { Table, TableProps } from "@finos/vuu-table";
-import { DockLayout, Drawer } from "@finos/vuu-layout";
-import { VuuRowDataItemType } from "@finos/vuu-protocol-types";
-import { useCallback, useMemo, useRef, useState } from "react";
-import { List, ListItem } from "@salt-ds/lab";
-
-let displaySequence = 1;
-
-const NO_CONFIG = {} as const;
-const EMPTY_ARRAY: number[] = [];
-const useTableConfig = ({
-  columnConfig = NO_CONFIG,
-  leftPinnedColumns = EMPTY_ARRAY,
-  rightPinnedColumns = EMPTY_ARRAY,
-  renderBufferSize = 0,
-}: {
-  columnConfig?: { [key: string]: Partial<ColumnDescriptor> };
-  leftPinnedColumns?: number[];
-  rightPinnedColumns?: number[];
-  renderBufferSize?: number;
-} = {}) => {
-  return useMemo(() => {
-    const count = 1000;
-    const data: VuuRowDataItemType[][] = [];
-    for (let i = 0; i < count; i++) {
-      // prettier-ignore
-      data.push([
-    `row ${i + 1}`, `#${i+1}  value 1`, "value 2", "value 3", "value 4", "value 5", "value 6", "value 7",  "value 8", "value 9", "value 10" 
-  ] );
-    }
-    const columns: ColumnDescriptor[] = [
-      { name: "row number", width: 150 },
-      { name: "column 1", width: 120 },
-      { name: "column 2", width: 120 },
-      { name: "column 3", width: 120 },
-      { name: "column 4", width: 120 },
-      { name: "column 5", width: 120 },
-      { name: "column 6", width: 120 },
-      { name: "column 7", width: 120 },
-      { name: "column 8", width: 120 },
-      { name: "column 9", width: 120 },
-      { name: "column 10", width: 120 },
-    ].map((col) => ({
-      ...col,
-      ...columnConfig[col.name],
-    }));
-
-    leftPinnedColumns.forEach((index) => (columns[index].pin = "left"));
-    rightPinnedColumns.forEach((index) => (columns[index].pin = "right"));
-
-    const dataSource = new ArrayDataSource({
-      columnDescriptors: columns,
-      data,
-    });
-
-    return { config: { columns }, dataSource, renderBufferSize };
-  }, [columnConfig, leftPinnedColumns, renderBufferSize, rightPinnedColumns]);
-};
-
-export const DataTable = (props: Partial<TableProps>) => {
-  const config = useTableConfig();
-  return (
-    <>
-      <Table
-        {...props}
-        {...config}
-        height={500}
-        renderBufferSize={20}
-        width={600}
-      />
-    </>
-  );
-};
-
-DataTable.displaySequence = displaySequence++;
-
-type InlineDrawerProps = {
-  inline?: boolean;
-  position: "left" | "right" | "top" | "bottom";
-  peekaboo?: boolean;
-};
-
-const InlineDrawer = ({
-  inline = false,
-  position,
-  peekaboo = false,
-}: InlineDrawerProps) => {
-  const list = useRef<HTMLDivElement>(null);
-  const [open, setOpen] = useState(false);
-
-  const handleSelectionChange: SelectionChangeHandler = useCallback(
-    (selection: Selection) => {
-      if (selection.length > 0) {
-        setOpen(true);
-      } else {
-        setOpen(false);
-      }
-    },
-    []
-  );
-
-  return (
-    <DockLayout style={{ width: 500, height: 500 }}>
-      <Drawer
-        inline={inline}
-        open={open}
-        peekaboo={peekaboo}
-        position={position}
-        title="Rebecca"
-        defaultOpen={false}
-      >
-        <div
-          ref={list}
-          style={{ width: "100%", height: "100%", background: "yellow" }}
-        >
-          <List>
-            <ListItem>Item 1</ListItem>
-            <ListItem>Item 2</ListItem>
-            <ListItem>Item 3</ListItem>
-            <ListItem>Item 4</ListItem>
-            <ListItem>Item 5</ListItem>
-            <ListItem>Item 6</ListItem>
-          </List>
-        </div>
-      </Drawer>
-      <DataTable onSelectionChange={handleSelectionChange} />
-    </DockLayout>
-  );
-};
-
-export const RightInlineDrawerPeek = () => (
-  <InlineDrawer position="right" inline peekaboo />
-);
-RightInlineDrawerPeek.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Table/TableVuuData.examples.tsx b/vuu-ui/showcase/src/examples/Table/TableVuuData.examples.tsx
deleted file mode 100644
index 793d76ae9..000000000
--- a/vuu-ui/showcase/src/examples/Table/TableVuuData.examples.tsx
+++ /dev/null
@@ -1,837 +0,0 @@
-import {
-  DataSource,
-  DataSourceConfig,
-  RemoteDataSource,
-  TableSchema,
-} from "@finos/vuu-data";
-import { getAllSchemas, getSchema, SimulTableName } from "@finos/vuu-data-test";
-import { DataSourceFilter } from "@finos/vuu-data-types";
-import { ColumnDescriptor, GridConfig } from "@finos/vuu-datagrid-types";
-import { Filter } from "@finos/vuu-filter-types";
-import { FilterInput, useFilterSuggestionProvider } from "@finos/vuu-filters";
-import { Flexbox, useViewContext, View } from "@finos/vuu-layout";
-import { Dialog } from "@finos/vuu-popups";
-import { VuuGroupBy, VuuSort, VuuTable } from "@finos/vuu-protocol-types";
-import { Table, TableProps } from "@finos/vuu-table";
-import { DataSourceStats } from "@finos/vuu-table-extras";
-import { itemsChanged, toDataSourceColumns } from "@finos/vuu-utils";
-import { Button, ToggleButton, ToggleButtonGroup } from "@salt-ds/core";
-import { FilterTable } from "@finos/vuu-datatable";
-import {
-  ReactElement,
-  SyntheticEvent,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { ErrorDisplay, useTestDataSource } from "../utils";
-
-let displaySequence = 1;
-
-export const VuuDataTable = () => {
-  const [columnConfig] = useMemo(
-    () => [
-      {
-        description: { editable: true },
-        currency: {
-          label: "Currency",
-          type: {
-            name: "string" as const,
-            renderer: {
-              map: {
-                CAD: "Canadian $",
-                EUR: "Euros",
-                GBX: "Pounds",
-                USD: "Dollars",
-              },
-            },
-          },
-        },
-      },
-    ],
-    []
-  );
-  const [tableName, setTableName] = useState<SimulTableName>("instruments");
-  const [selectedGroupIndex, setSelectedGroupIndex] = useState<number>(-1);
-
-  const schemas = getAllSchemas();
-  const { columns, config, dataSource, error } = useTestDataSource({
-    columnConfig,
-    schemas,
-    tablename: tableName,
-  });
-
-  console.log({ columns });
-
-  const configRef = useRef<Omit<GridConfig, "headings">>(config);
-  const [tableConfig, setTableConfig] =
-    useState<Omit<GridConfig, "headings">>(config);
-
-  useMemo(() => {
-    setTableConfig((configRef.current = config));
-  }, [config]);
-
-  const handleChange = (evt: SyntheticEvent<HTMLButtonElement>) => {
-    const { value } = evt.target as HTMLButtonElement;
-    setTableName(value as SimulTableName);
-  };
-
-  const getCcyCol = (dataSource: DataSource) =>
-    (dataSource as RemoteDataSource).table.table === "instruments"
-      ? "currency"
-      : "ccy";
-
-  const groupByCurrency = useCallback(() => {
-    if (selectedGroupIndex === 0) {
-      dataSource.groupBy = [];
-      setSelectedGroupIndex(-1);
-    } else {
-      dataSource.config = {
-        ...dataSource.config,
-        columns: columns.map((col) => col.name),
-        groupBy: [getCcyCol(dataSource)],
-      };
-      // dataSource.groupBy = [getCcyCol(dataSource)];
-      setSelectedGroupIndex(0);
-    }
-  }, [columns, dataSource, selectedGroupIndex]);
-  const groupByCurrencyExchange = useCallback(() => {
-    if (selectedGroupIndex === 1) {
-      dataSource.groupBy = [];
-      setSelectedGroupIndex(-1);
-    } else {
-      dataSource.config = {
-        ...dataSource.config,
-        columns: columns.map((col) => col.name),
-        groupBy: [getCcyCol(dataSource), "exchange"],
-      };
-
-      // dataSource.groupBy = [getCcyCol(dataSource), "exchange"];
-      setSelectedGroupIndex(1);
-    }
-  }, [columns, dataSource, selectedGroupIndex]);
-  const groupByCurrencyExchangeRic = useCallback(() => {
-    if (selectedGroupIndex === 2) {
-      dataSource.groupBy = [];
-      setSelectedGroupIndex(-1);
-    } else {
-      dataSource.config = {
-        ...dataSource.config,
-        columns: columns.map((col) => col.name),
-        groupBy: [getCcyCol(dataSource), "exchange", "ric"],
-      };
-      setSelectedGroupIndex(2);
-    }
-  }, [columns, dataSource, selectedGroupIndex]);
-  const groupByAccountAlgo = useCallback(() => {
-    if (selectedGroupIndex === 2) {
-      dataSource.groupBy = [];
-      setSelectedGroupIndex(-1);
-    } else {
-      dataSource.config = {
-        ...dataSource.config,
-        aggregations: [
-          { column: "price", aggType: 1 },
-          { column: "quantity", aggType: 1 },
-          { column: "filledQty", aggType: 1 },
-        ],
-        columns: [
-          "account",
-          "algo",
-          "ccy",
-          "averagePrice",
-          "price",
-          "quantity",
-          "filledQty",
-        ],
-        groupBy: ["account", "algo"],
-      };
-      setSelectedGroupIndex(3);
-    }
-  }, [dataSource, selectedGroupIndex]);
-
-  if (error) {
-    return <ErrorDisplay>{error}</ErrorDisplay>;
-  }
-
-  return (
-    <>
-      <ToggleButtonGroup onChange={handleChange} value={tableName}>
-        <ToggleButton value="instruments">Instruments</ToggleButton>
-        <ToggleButton value="orders">Orders</ToggleButton>
-        <ToggleButton value="parentOrders">Parent Orders</ToggleButton>
-        <ToggleButton value="childOrders">Child Orders</ToggleButton>
-        <ToggleButton value="prices">Prices</ToggleButton>
-      </ToggleButtonGroup>
-      <div
-        className="vuuToolbarProxy salt-density-high"
-        style={{ display: "flex" }}
-      >
-        <div className="vuuTooltrayProxy">
-          <ToggleButtonGroup value={selectedGroupIndex}>
-            <ToggleButton onClick={groupByCurrency} value={0}>
-              Currency
-            </ToggleButton>
-            <ToggleButton onClick={groupByCurrencyExchange} value={1}>
-              Currency, Exchange
-            </ToggleButton>
-            <ToggleButton onClick={groupByCurrencyExchangeRic} value={2}>
-              CCY, Exchange, Ric
-            </ToggleButton>
-            {tableName === "parentOrders" ? (
-              <ToggleButton onClick={groupByAccountAlgo} value={3}>
-                Account, Algo, 7 columns
-              </ToggleButton>
-            ) : (
-              <ToggleButton value={4}>Ignore</ToggleButton>
-            )}
-          </ToggleButtonGroup>
-        </div>
-      </div>
-      <FilterTable
-        FilterBarProps={{
-          filters: [],
-          onApplyFilter: () => console.log("onApplyFilter"),
-          onChangeActiveFilterIndex: () =>
-            console.log("onChangeActiveFilterIndex"),
-          tableSchema: getSchema(tableName),
-        }}
-        TableProps={{
-          dataSource,
-          config: tableConfig,
-          height: 645,
-          renderBufferSize: 20,
-          width: 750,
-        }}
-      />
-      <div
-        className="vuuToolbarProxy vuuTable-footer"
-        style={{
-          height: 20,
-          borderTop: "solid 1px var(--salt-container-primary-borderColor)",
-          color: "var(--salt-text-secondary-foreground)",
-          width: 750,
-        }}
-      >
-        <DataSourceStats dataSource={dataSource} />
-      </div>
-    </>
-  );
-};
-VuuDataTable.displaySequence = displaySequence++;
-
-export const FlexLayoutVuuTables = () => {
-  const schemas = getAllSchemas();
-  const { config: conf1, dataSource: ds1 } = useTestDataSource({ schemas });
-  const { config: conf2, dataSource: ds2 } = useTestDataSource({ schemas });
-  const { config: conf3, dataSource: ds3 } = useTestDataSource({ schemas });
-  const { config: conf4, dataSource: ds4 } = useTestDataSource({ schemas });
-
-  return (
-    <Flexbox style={{ flexDirection: "column", width: 800, height: 700 }}>
-      <Flexbox resizeable style={{ flexDirection: "row", flex: 1 }}>
-        <View resizeable style={{ flex: 1 }}>
-          <Table config={conf1} dataSource={ds1} />
-        </View>
-
-        <View resizeable style={{ flex: 1 }}>
-          <Table config={conf2} dataSource={ds2} />
-        </View>
-      </Flexbox>
-      <Flexbox resizeable style={{ flexDirection: "row", flex: 1 }}>
-        <View resizeable style={{ flex: 1 }}>
-          <Table config={conf3} dataSource={ds3} />
-        </View>
-
-        <View resizeable style={{ flex: 1 }}>
-          <Table config={conf4} dataSource={ds4} />
-        </View>
-      </Flexbox>
-    </Flexbox>
-  );
-};
-FlexLayoutVuuTables.displaySequence = displaySequence++;
-
-export const VuuTableCalculatedColumns = () => {
-  const [dialogContent, setDialogContent] = useState<ReactElement | null>(null);
-  const calculatedColumns: ColumnDescriptor[] = useMemo(
-    () => [
-      {
-        name: "notional",
-        expression: "=price*quantity",
-        serverDataType: "double",
-        type: {
-          name: "number",
-          formatting: {
-            decimals: 2,
-          },
-        },
-      },
-      {
-        name: "isBuy",
-        expression: '=if(side="Sell","N","Y")',
-        serverDataType: "char",
-      },
-      {
-        name: "CcySort",
-        expression: '=if(ccy="Gbp",1,if(ccy="USD",2,3))',
-        serverDataType: "char",
-        width: 60,
-      },
-      {
-        name: "CcyLower",
-        expression: "=lower(ccy)",
-        serverDataType: "string",
-        width: 60,
-      },
-      {
-        name: "AccountUpper",
-        expression: "=upper(account)",
-        label: "ACCOUNT",
-        serverDataType: "string",
-      },
-      {
-        name: "ExchangeCcy",
-        expression: '=concatenate("---", exchange,"...",ccy, "---")',
-        serverDataType: "string",
-      },
-      {
-        name: "ExchangeIsNY",
-        expression: '=starts(exchange,"N")',
-        serverDataType: "boolean",
-      },
-      // {
-      //   name: "Text",
-      //   expression: "=text(quantity)",
-      //   serverDataType: "string",
-      // },
-    ],
-    []
-  );
-
-  const schemas = getAllSchemas();
-  const { columns, config, dataSource, error } = useTestDataSource({
-    schemas,
-    tablename: "parentOrders",
-    calculatedColumns,
-  });
-
-  const table = { table: "parentOrders", module: "SIMUL" };
-
-  const configRef = useRef<Omit<GridConfig, "headings">>(config);
-  const [tableConfig, setTableConfig] =
-    useState<Omit<GridConfig, "headings">>(config);
-
-  const filterSuggestionProvider = useFilterSuggestionProvider({
-    columns,
-    table,
-  });
-
-  useMemo(() => {
-    setTableConfig((configRef.current = config));
-  }, [config]);
-
-  const handleConfigChange = useCallback(
-    (config: Omit<GridConfig, "headings">, closePanel = false) => {
-      setTableConfig((currentConfig) => {
-        if (
-          dataSource &&
-          itemsChanged(currentConfig.columns, config.columns, "name")
-        ) {
-          dataSource.columns = config.columns.map(toDataSourceColumns);
-        }
-        return (configRef.current = config);
-      });
-      closePanel && setDialogContent(null);
-    },
-    [dataSource]
-  );
-
-  const handleTableConfigChange = useCallback(
-    (config: Omit<GridConfig, "headings">) => {
-      // we want this to be used when editor is opened next, but we don;t want
-      // to trigger a re-render of our dataTable
-      configRef.current = config;
-    },
-    []
-  );
-
-  const hideSettings = useCallback(() => {
-    setDialogContent(null);
-  }, []);
-
-  const groupByCurrency = useCallback(() => {
-    if (dataSource) {
-      dataSource.groupBy = ["currency"];
-    }
-  }, [dataSource]);
-
-  const groupByCurrencyExchange = useCallback(() => {
-    if (dataSource) {
-      dataSource.groupBy = ["currency", "exchange"];
-    }
-  }, [dataSource]);
-
-  const handleSubmitFilter = useCallback(
-    (filterStruct: Filter | undefined, filter: string, filterName?: string) => {
-      filterName && console.log(`named filter created '${filterName}'`);
-      dataSource.filter = { filter, filterStruct };
-    },
-    [dataSource]
-  );
-
-  if (error) {
-    return <ErrorDisplay>{error}</ErrorDisplay>;
-  }
-
-  return (
-    <>
-      <div
-        className="vuuToolbarProxy salt-density-high"
-        style={{
-          height: 28,
-        }}
-      >
-        <div className="vuuTooltrayProxy">
-          <Button onClick={groupByCurrency}>Currency</Button>
-          <Button onClick={groupByCurrencyExchange}>Currency, Exchange</Button>
-        </div>
-        <div className="vuuTooltrayProxy">
-          <FilterInput
-            existingFilter={dataSource.filter.filterStruct}
-            onSubmitFilter={handleSubmitFilter}
-            style={{ width: 300 }}
-            suggestionProvider={filterSuggestionProvider}
-          />
-        </div>
-      </div>
-      <Table
-        allowConfigEditing
-        dataSource={dataSource}
-        config={tableConfig}
-        // columnSizing="fill"
-        height={600}
-        onConfigChange={handleTableConfigChange}
-        width={750}
-      />
-      <Dialog
-        className="vuuDialog-gridConfig"
-        isOpen={dialogContent !== null}
-        onClose={hideSettings}
-        title="Grid and Column Settings"
-      >
-        {dialogContent}
-      </Dialog>
-    </>
-  );
-};
-VuuTableCalculatedColumns.displaySequence = displaySequence++;
-
-const ConfigurableDataTable = ({
-  table,
-  ...props
-}: Omit<TableProps, "config" | "dataSource"> & {
-  table: VuuTable;
-}) => {
-  const [dialogContent, setDialogContent] = useState<ReactElement | null>(null);
-  const { save } = useViewContext();
-  const schemas = getAllSchemas();
-
-  // const handleDataSourceConfigChange = useCallback(
-  //   (config?: DataSourceConfig) => {
-  //     save?.(config, "datasource-config");
-  //   },
-  //   [save]
-  // );
-
-  const { columns, config, dataSource, error } = useTestDataSource({
-    // onConfigChange: handleDataSourceConfigChange,
-    schemas,
-    tablename: table.table,
-  });
-
-  const configRef = useRef<Omit<GridConfig, "headings">>(config);
-  const [tableConfig, setTableConfig] =
-    useState<Omit<GridConfig, "headings">>(config);
-
-  useMemo(() => {
-    setTableConfig((configRef.current = config));
-  }, [config]);
-
-  // This does NOT need to trigger a re-render of Table
-  const handleTableConfigChange = useCallback(
-    (config: Omit<GridConfig, "headings">) => {
-      // we want this to be used when editor is opened next, but we don;t want
-      // to trigger a re-render of our dataTable
-      configRef.current = config;
-      save?.(config, "table-config");
-    },
-    [save]
-  );
-
-  const handleSubmitFilter = useCallback(
-    (filterStruct: Filter | undefined, filter: string, filterName?: string) => {
-      filterName && console.log(`named filter created '${filterName}'`);
-      dataSource.filter = { filter, filterStruct };
-    },
-    [dataSource]
-  );
-
-  const hideSettings = useCallback(() => {
-    setDialogContent(null);
-  }, []);
-
-  const filterSuggestionProvider = useFilterSuggestionProvider({
-    columns,
-    table,
-  });
-
-  if (error) {
-    return <ErrorDisplay>{error}</ErrorDisplay>;
-  }
-
-  return (
-    <>
-      <div
-        className="vuuToolbarProxy salt-density-high"
-        style={{
-          height: 28,
-        }}
-      >
-        <div className="vuuTooltrayProxy">
-          <FilterInput
-            existingFilter={dataSource.filter.filterStruct}
-            onSubmitFilter={handleSubmitFilter}
-            style={{ width: 300 }}
-            suggestionProvider={filterSuggestionProvider}
-          />
-        </div>
-      </div>
-
-      <Table
-        allowConfigEditing
-        dataSource={dataSource}
-        onConfigChange={handleTableConfigChange}
-        {...props}
-        config={tableConfig}
-      />
-      <Dialog
-        className="vuuDialog-gridConfig"
-        isOpen={dialogContent !== null}
-        onClose={hideSettings}
-        title="Grid and Column Settings"
-      >
-        {dialogContent}
-      </Dialog>
-    </>
-  );
-};
-
-export const VuuTablePersistedConfig = () => {
-  const table: VuuTable = useMemo(
-    () => ({ module: "SIMUL", table: "instruments" }),
-    []
-  );
-  return (
-    <>
-      <View>
-        <ConfigurableDataTable
-          height={600}
-          renderBufferSize={20}
-          table={table}
-          width={750}
-        />
-      </View>
-    </>
-  );
-};
-VuuTablePersistedConfig.displaySequence = displaySequence++;
-
-export const VuuTablePredefinedConfig = () => {
-  const schemas = getAllSchemas();
-  const sort: VuuSort = { sortDefs: [{ column: "lotSize", sortType: "D" }] };
-  const filter: DataSourceFilter = {
-    filter: 'currency="EUR"',
-    filterStruct: {
-      op: "=",
-      column: "currency",
-      value: "EUR",
-    },
-  };
-  const { config, dataSource } = useTestDataSource({ filter, schemas, sort });
-
-  return (
-    <Flexbox style={{ flexDirection: "column", width: 800, height: 800 }}>
-      <View resizeable style={{ flex: 1 }}>
-        <Table config={config} dataSource={dataSource} />
-      </View>
-      <div data-resizeable style={{ flex: 1 }} />
-    </Flexbox>
-  );
-};
-VuuTablePredefinedConfig.displaySequence = displaySequence++;
-
-export const VuuTablePredefinedGroupBy = () => {
-  const schemas = getAllSchemas();
-  const groupBy: VuuGroupBy = ["exchange", "currency"];
-  const { config, dataSource } = useTestDataSource({ groupBy, schemas });
-
-  return (
-    <Flexbox style={{ flexDirection: "column", height: 800 }}>
-      <View resizeable style={{ flex: 1 }}>
-        <Table config={config} dataSource={dataSource} />
-      </View>
-      <div data-resizeable style={{ flex: 1 }} />
-    </Flexbox>
-  );
-};
-VuuTablePredefinedGroupBy.displaySequence = displaySequence++;
-
-export const HiddenColumns = () => {
-  const columnConfig = useMemo(
-    () => ({ averagePrice: { hidden: true }, childCount: { hidden: true } }),
-    []
-  );
-  const [dialogContent, setDialogContent] = useState<ReactElement | null>(null);
-  const schemas = getAllSchemas();
-  const { columns, config, dataSource, error } = useTestDataSource({
-    columnConfig,
-    schemas,
-    tablename: "parentOrders",
-  });
-
-  const configRef = useRef<Omit<GridConfig, "headings">>(config);
-  const [tableConfig, setTableConfig] =
-    useState<Omit<GridConfig, "headings">>(config);
-
-  useMemo(() => {
-    setTableConfig((configRef.current = config));
-  }, [config]);
-
-  const handleSettingsConfigChange = useCallback(
-    (config: Omit<GridConfig, "headings">, closePanel = false) => {
-      setTableConfig((currentConfig) => {
-        if (itemsChanged(currentConfig.columns, config.columns, "name")) {
-          dataSource.columns = config.columns.map(toDataSourceColumns);
-        }
-        return (configRef.current = config);
-      });
-      closePanel && setDialogContent(null);
-    },
-    [dataSource]
-  );
-
-  const handleTableConfigChange = useCallback(
-    (config: Omit<GridConfig, "headings">) => {
-      // we want this to be used when editor is opened next, but we don;t want
-      // to trigger a re-render of our dataTable
-      configRef.current = config;
-    },
-    []
-  );
-
-  const hideSettings = useCallback(() => {
-    setDialogContent(null);
-  }, []);
-
-  if (error) {
-    return <ErrorDisplay>{error}</ErrorDisplay>;
-  }
-
-  return (
-    <>
-      <Table
-        allowConfigEditing
-        dataSource={dataSource}
-        config={tableConfig}
-        // columnSizing="fill"
-        height={600}
-        onConfigChange={handleTableConfigChange}
-        width={750}
-      />
-      <Dialog
-        className="vuuDialog-gridConfig"
-        isOpen={dialogContent !== null}
-        onClose={hideSettings}
-        title="Grid and Column Settings"
-      >
-        {dialogContent}
-      </Dialog>
-    </>
-  );
-};
-HiddenColumns.displaySequence = displaySequence++;
-
-const toColumnDescriptor =
-  (schema: TableSchema) =>
-  (columnName: string): ColumnDescriptor => {
-    const column = schema.columns.find(({ name }) => name === columnName);
-    if (column) {
-      return column;
-    } else {
-      throw Error(`No column '${columnName}' in schema`);
-    }
-  };
-
-type SavedConfig = Array<{
-  "datasource-config": DataSourceConfig;
-  "table-config": { columns: ColumnDescriptor[] };
-}>;
-
-export const SwitchColumns = () => {
-  const [selectedIndex, _setSelectedIndex] = useState<number>(0);
-  const selectedIndexRef = useRef(0);
-  const setSelectedIndex = useCallback((value: number) => {
-    _setSelectedIndex((selectedIndexRef.current = value));
-  }, []);
-
-  const schemas = getAllSchemas();
-  const { parentOrders: parentOrdersSchema } = schemas;
-
-  const [namedConfigurations, setConfig] = useMemo<[SavedConfig, any]>(() => {
-    // prettier-ignore
-    const whpColumns = ["account", "algo", "ccy", "exchange", "ric"]
-    // prettier-ignore
-    const wovColumns = ["account", "side", "price", "averagePrice", "quantity", "filledQty"];
-    // prettier-ignore
-    const apColumns = ["account", "status", "volLimit"];
-    // prettier-ignore
-    const config: SavedConfig =[
-      { "datasource-config": {columns: whpColumns},
-        "table-config": { columns: whpColumns.map(toColumnDescriptor(parentOrdersSchema)) },
-      },
-      {
-        "datasource-config": { columns: wovColumns, groupBy: ["account"]},
-        "table-config": { columns: wovColumns.map(toColumnDescriptor(parentOrdersSchema)) },
-      },
-      {
-        "datasource-config": { columns: apColumns },
-        "table-config": { columns: apColumns.map(toColumnDescriptor(parentOrdersSchema))},
-      },
-      {
-        "datasource-config": { 
-          columns: parentOrdersSchema.columns.map((col) => col.name),
-          filter: { filter: 'algo = "TWAP"' },
-        },
-        "table-config": { columns: parentOrdersSchema.columns },
-      },
-    ];
-
-    const setConfig = (dataSourceConfig: DataSourceConfig) => {
-      console.log(
-        `set [${selectedIndexRef.current}] to ${JSON.stringify(
-          dataSourceConfig,
-          null,
-          2
-        )}`
-      );
-      config[selectedIndexRef.current]["datasource-config"] = dataSourceConfig;
-    };
-
-    return [config, setConfig];
-  }, [parentOrdersSchema]);
-
-  const namedConfiguration = namedConfigurations[selectedIndex];
-  const config = namedConfiguration["table-config"];
-
-  const [dialogContent, setDialogContent] = useState<ReactElement | null>(null);
-  const { columns, dataSource, error } = useTestDataSource({
-    columnNames: namedConfiguration["datasource-config"].columns,
-    schemas,
-    tablename: "parentOrders",
-  });
-
-  const configRef = useRef<Omit<GridConfig, "headings">>(config);
-  const [tableConfig, setTableConfig] =
-    useState<Omit<GridConfig, "headings">>(config);
-
-  useMemo(() => {
-    setTableConfig((configRef.current = config));
-  }, [config]);
-
-  useEffect(() => {
-    setTableConfig(
-      (configRef.current = {
-        columns: namedConfiguration["table-config"].columns,
-      })
-    );
-    if (dataSource) {
-      dataSource.config = namedConfiguration["datasource-config"];
-    }
-  }, [dataSource, namedConfiguration]);
-
-  const handleSettingsConfigChange = useCallback(
-    (config: Omit<GridConfig, "headings">, closePanel = false) => {
-      setTableConfig((currentConfig) => {
-        if (itemsChanged(currentConfig.columns, config.columns, "name")) {
-          if (dataSource) {
-            dataSource.columns = config.columns.map(toDataSourceColumns);
-          }
-        }
-        return (configRef.current = config);
-      });
-      closePanel && setDialogContent(null);
-    },
-    [dataSource]
-  );
-
-  useMemo(() => {
-    dataSource.on("config", (config) => {
-      setConfig(config);
-    });
-  }, [dataSource, setConfig]);
-
-  const handleTableConfigChange = useCallback(
-    (config: Omit<GridConfig, "headings">) => {
-      // we want this to be used when editor is opened next, but we don;t want
-      // to trigger a re-render of our dataTable
-      configRef.current = config;
-    },
-    []
-  );
-
-  const hideSettings = useCallback(() => {
-    setDialogContent(null);
-  }, []);
-
-  const handleChange = (evt: SyntheticEvent<HTMLButtonElement>) => {
-    const { value } = evt.target as HTMLButtonElement;
-    setSelectedIndex(parseInt(value));
-  };
-
-  if (error) {
-    return <ErrorDisplay>{error}</ErrorDisplay>;
-  }
-
-  return (
-    <>
-      <ToggleButtonGroup onChange={handleChange} value={selectedIndex}>
-        <ToggleButton value={0}>Set 1</ToggleButton>
-        <ToggleButton value={1}>Set 2</ToggleButton>
-        <ToggleButton value={2}>Set 3</ToggleButton>
-        <ToggleButton value={3}>All Columns</ToggleButton>
-      </ToggleButtonGroup>
-
-      <Table
-        allowConfigEditing
-        dataSource={dataSource}
-        config={tableConfig}
-        // columnSizing="fill"
-        height={600}
-        onConfigChange={handleTableConfigChange}
-        width={750}
-      />
-      <Dialog
-        className="vuuDialog-gridConfig"
-        isOpen={dialogContent !== null}
-        onClose={hideSettings}
-        title="Grid and Column Settings"
-      >
-        {dialogContent}
-      </Dialog>
-    </>
-  );
-};
-SwitchColumns.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Table/index.ts b/vuu-ui/showcase/src/examples/Table/index.ts
index c185e8ee1..d64594512 100644
--- a/vuu-ui/showcase/src/examples/Table/index.ts
+++ b/vuu-ui/showcase/src/examples/Table/index.ts
@@ -1,6 +1,3 @@
-export * as TableArrayData from "./TableArrayData.examples";
-export * as TableVuuData from "./TableVuuData.examples";
-export * as TableExtras from "./TableExtras.examples";
 export * as TableList from "./TableList.examples";
 export * as TableNext from "./TableNext.examples";
 export * as BasketTables from "./BasketTables.examples";
diff --git a/vuu-ui/showcase/src/examples/html/LayoutExperiments.examples.tsx b/vuu-ui/showcase/src/examples/html/LayoutExperiments.examples.tsx
index dee955d12..a84dd3080 100644
--- a/vuu-ui/showcase/src/examples/html/LayoutExperiments.examples.tsx
+++ b/vuu-ui/showcase/src/examples/html/LayoutExperiments.examples.tsx
@@ -1,7 +1,7 @@
-import { Table } from "@finos/vuu-table";
+// import { Table } from "@finos/vuu-table";
 import { Button } from "@salt-ds/core";
 import { useState } from "react";
-import { useTableConfig } from "../utils/useTableConfig";
+// import { useTableConfig } from "../utils/useTableConfig";
 import { DockLayout } from "./components/DockLayout";
 
 import "./LayoutExperiments.examples.css";
@@ -64,51 +64,51 @@ export const DefaultDockLayout = () => {
 };
 DefaultDockLayout.displaySequence = displaySequence++;
 
-export const DockLayoutWithTable = () => {
-  const [openPanels, setOpenPanels] = useState(CONTENT_ONLY);
-  const config = useTableConfig({ count: 1_000 });
+// export const DockLayoutWithTable = () => {
+//   const [openPanels, setOpenPanels] = useState(CONTENT_ONLY);
+//   const config = useTableConfig({ count: 1_000 });
 
-  return (
-    <div style={{ height: "100%", display: "flex", gap: 12 }}>
-      <DockLayout
-        resize="defer"
-        showBottomPanel={Boolean(BOTTOM & openPanels)}
-        showLeftPanel={Boolean(LEFT & openPanels)}
-        showRightPanel={Boolean(RIGHT & openPanels)}
-        showTopPanel={Boolean(TOP & openPanels)}
-        style={{ flex: "1 1 auto", height: "100%" }}
-      >
-        <div data-dock="top" style={{ backgroundColor: "cornflowerblue" }} />
-        <div data-dock="left" style={{ backgroundColor: "aliceblue" }} />
-        <div data-dock="right" style={{ backgroundColor: "paleturquoise" }} />
-        <div data-dock="bottom" style={{ backgroundColor: "beige" }} />
-        <Table
-          {...config}
-          data-dock="content"
-          renderBufferSize={100}
-          rowHeight={20}
-        />
-      </DockLayout>
-      <div
-        className="vuuToolbarProxy vuuToolbarProxy-vertical DockToolbar"
-        style={{ flex: "0 0 200px" }}
-      >
-        <Button onClick={() => setOpenPanels(CONTENT_ONLY)}>
-          Content Only
-        </Button>
-        <Button onClick={() => setOpenPanels(CONTENT + TOP)}>Top</Button>
-        <Button onClick={() => setOpenPanels(CONTENT + TOP + LEFT)}>
-          Left and Top
-        </Button>
-        <Button onClick={() => setOpenPanels(CONTENT + TOP + BOTTOM)}>
-          Top and Bottom
-        </Button>
-        <Button onClick={() => setOpenPanels(CONTENT + TOP + LEFT + BOTTOM)}>
-          Left, Top and Bottom
-        </Button>
-        <Button onClick={() => setOpenPanels(CONTENT + RIGHT)}>Right</Button>
-      </div>
-    </div>
-  );
-};
-DockLayoutWithTable.displaySequence = displaySequence++;
+//   return (
+//     <div style={{ height: "100%", display: "flex", gap: 12 }}>
+//       <DockLayout
+//         resize="defer"
+//         showBottomPanel={Boolean(BOTTOM & openPanels)}
+//         showLeftPanel={Boolean(LEFT & openPanels)}
+//         showRightPanel={Boolean(RIGHT & openPanels)}
+//         showTopPanel={Boolean(TOP & openPanels)}
+//         style={{ flex: "1 1 auto", height: "100%" }}
+//       >
+//         <div data-dock="top" style={{ backgroundColor: "cornflowerblue" }} />
+//         <div data-dock="left" style={{ backgroundColor: "aliceblue" }} />
+//         <div data-dock="right" style={{ backgroundColor: "paleturquoise" }} />
+//         <div data-dock="bottom" style={{ backgroundColor: "beige" }} />
+//         <Table
+//           {...config}
+//           data-dock="content"
+//           renderBufferSize={100}
+//           rowHeight={20}
+//         />
+//       </DockLayout>
+//       <div
+//         className="vuuToolbarProxy vuuToolbarProxy-vertical DockToolbar"
+//         style={{ flex: "0 0 200px" }}
+//       >
+//         <Button onClick={() => setOpenPanels(CONTENT_ONLY)}>
+//           Content Only
+//         </Button>
+//         <Button onClick={() => setOpenPanels(CONTENT + TOP)}>Top</Button>
+//         <Button onClick={() => setOpenPanels(CONTENT + TOP + LEFT)}>
+//           Left and Top
+//         </Button>
+//         <Button onClick={() => setOpenPanels(CONTENT + TOP + BOTTOM)}>
+//           Top and Bottom
+//         </Button>
+//         <Button onClick={() => setOpenPanels(CONTENT + TOP + LEFT + BOTTOM)}>
+//           Left, Top and Bottom
+//         </Button>
+//         <Button onClick={() => setOpenPanels(CONTENT + RIGHT)}>Right</Button>
+//       </div>
+//     </div>
+//   );
+// };
+// DockLayoutWithTable.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/index.ts b/vuu-ui/showcase/src/examples/index.ts
index 62156fc69..24e406a24 100644
--- a/vuu-ui/showcase/src/examples/index.ts
+++ b/vuu-ui/showcase/src/examples/index.ts
@@ -1,6 +1,5 @@
 export * as Apps from "./Apps";
 export * as TableExtras from "./TableExtras";
-export * as DataGrid from "./DataGrid";
 export * as DataTable from "./DataTable";
 export * as Filters from "./Filters";
 export * as html from "./html";
diff --git a/vuu-ui/showcase/src/features/VuuBlotter.feature.css b/vuu-ui/showcase/src/features/VuuBlotter.feature.css
deleted file mode 100644
index 804d1005d..000000000
--- a/vuu-ui/showcase/src/features/VuuBlotter.feature.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.vuuBlotter {
-    background-color: antiquewhite;
-    height: 400px;
-    width: 600px;
-}
-
-.vuuBlotter-footer {
-    --saltToolbar-alignItems: center;
-    --saltToolbar-height: 24px;
-}
\ No newline at end of file
diff --git a/vuu-ui/showcase/src/features/VuuBlotter.feature.tsx b/vuu-ui/showcase/src/features/VuuBlotter.feature.tsx
deleted file mode 100644
index 3c6d84413..000000000
--- a/vuu-ui/showcase/src/features/VuuBlotter.feature.tsx
+++ /dev/null
@@ -1,204 +0,0 @@
-import {
-  DataSource,
-  DataSourceConfig,
-  RemoteDataSource,
-  TableSchema,
-} from "@finos/vuu-data";
-import { GridConfig } from "@finos/vuu-datagrid-types";
-import { ConfigurableTable } from "@finos/vuu-datatable";
-import { Filter, FilterState } from "@finos/vuu-filter-types";
-import {
-  addFilter,
-  FilterInput,
-  useFilterSuggestionProvider,
-} from "@finos/vuu-filters";
-import { useViewContext } from "@finos/vuu-layout";
-import { ShellContextProps, useShellContext } from "@finos/vuu-shell";
-import { DataSourceStats } from "@finos/vuu-table-extras";
-import { filterAsQuery } from "@finos/vuu-utils";
-import { useCallback, useMemo, useState } from "react";
-import { DockLayout } from "../examples/html/components/DockLayout";
-
-import "./VuuBlotter.feature.css";
-
-export interface VuuBlotterProps {
-  schema: TableSchema;
-  showFilter?: boolean;
-}
-
-const classBase = "vuuBlotter2";
-
-type BlotterConfig = {
-  "datasource-config"?: DataSourceConfig;
-  "table-config"?: Omit<GridConfig, "headings">;
-};
-
-const NO_CONFIG: BlotterConfig = {};
-
-const applyDefaults = (
-  { columns, table }: TableSchema,
-  getDefaultColumnConfig?: ShellContextProps["getDefaultColumnConfig"]
-) => {
-  if (typeof getDefaultColumnConfig === "function") {
-    return columns.map((column) => {
-      const config = getDefaultColumnConfig(table.table, column.name);
-      if (config) {
-        return {
-          ...column,
-          ...config,
-        };
-      } else {
-        return column;
-      }
-    });
-  } else {
-    return columns;
-  }
-};
-
-export const VuuBlotter = ({
-  schema,
-  showFilter = false,
-  ...props
-}: VuuBlotterProps) => {
-  const { id, load, loadSession, save, saveSession, title } = useViewContext();
-  const { getDefaultColumnConfig } = useShellContext();
-  const namedFilters = useMemo(() => new Map<string, string>(), []);
-  const [filterState, setFilterState] = useState<FilterState>({
-    filter: undefined,
-    filterQuery: "",
-  });
-
-  console.log("VuuBlotter render", { props, schema });
-
-  const {
-    "datasource-config": dataSourceConfigFromState,
-    "table-config": tableConfigFromState,
-  } = useMemo(() => (load?.() ?? NO_CONFIG) as BlotterConfig, [load]);
-
-  const configColumns = tableConfigFromState?.columns;
-
-  const tableConfig = useMemo(
-    () => ({
-      columns: configColumns || applyDefaults(schema, getDefaultColumnConfig),
-    }),
-    [configColumns, getDefaultColumnConfig, schema]
-  );
-
-  const suggestionProvider = useFilterSuggestionProvider({
-    columns: schema.columns,
-    table: schema.table,
-  });
-
-  const dataSource: DataSource = useMemo(() => {
-    let ds = loadSession?.("data-source") as RemoteDataSource;
-    if (ds) {
-      return ds;
-    }
-    const columns =
-      dataSourceConfigFromState?.columns ??
-      schema.columns.map((col) => col.name);
-
-    ds = new RemoteDataSource({
-      bufferSize: 200,
-      viewport: id,
-      table: schema.table,
-      ...dataSourceConfigFromState,
-      columns,
-      title,
-    });
-    // ds.on("config", handleDataSourceConfigChange);
-    saveSession?.(ds, "data-source");
-    return ds;
-  }, [
-    dataSourceConfigFromState,
-    id,
-    loadSession,
-    saveSession,
-    schema.columns,
-    schema.table,
-    title,
-  ]);
-
-  const handleTableConfigChange = useCallback(
-    (config: Omit<GridConfig, "headings">) => {
-      console.log(`VuuBlotter config changed`);
-      save?.(config, "table-config");
-      // tableConfigRef.current = config;
-    },
-    [save]
-  );
-
-  const handleSubmitFilter = useCallback(
-    (
-      newFilter: Filter | undefined,
-      filterQuery: string,
-      mode = "add",
-      filterName?: string
-    ) => {
-      let newFilterState: FilterState;
-      if (newFilter && (mode === "and" || mode === "or")) {
-        const fullFilter = addFilter(filterState.filter, newFilter, {
-          combineWith: mode,
-        }) as Filter;
-        newFilterState = {
-          filter: fullFilter,
-          filterQuery: filterAsQuery(fullFilter),
-          filterName,
-        };
-      } else {
-        newFilterState = {
-          filter: newFilter,
-          filterQuery,
-          filterName,
-        };
-      }
-
-      dataSource.filter = {
-        filter: newFilterState.filterQuery,
-        filterStruct: newFilterState.filter,
-      };
-      setFilterState(newFilterState);
-      if (filterName && newFilterState.filter) {
-        namedFilters.set(filterName, newFilterState.filterQuery);
-      }
-    },
-    [dataSource, filterState.filter, namedFilters]
-  );
-
-  const handleFilterShown = useCallback(() => {
-    console.log("here we go");
-  }, []);
-
-  return (
-    <DockLayout
-      bottomPanelSize={24}
-      onTopPanelVisible={handleFilterShown}
-      resize="defer"
-      showTopPanel={showFilter}
-      showBottomPanel
-      topPanelSize={28}
-    >
-      <FilterInput
-        data-dock="top"
-        existingFilter={filterState.filter}
-        iconName="chevron-right"
-        onSubmitFilter={handleSubmitFilter}
-        suggestionProvider={suggestionProvider}
-      />
-
-      <ConfigurableTable
-        className={classBase}
-        config={tableConfig}
-        data-dock="content"
-        dataSource={dataSource}
-        onConfigChange={handleTableConfigChange}
-      />
-      <div className="vuuToolbarProxy vuuBlotter-footer" data-dock="bottom">
-        <DataSourceStats dataSource={dataSource as RemoteDataSource} />
-      </div>
-    </DockLayout>
-  );
-};
-
-export default VuuBlotter;
diff --git a/vuu-ui/showcase/src/features/VuuBlotterMockData.feature.tsx b/vuu-ui/showcase/src/features/VuuBlotterMockData.feature.tsx
deleted file mode 100644
index 82a386224..000000000
--- a/vuu-ui/showcase/src/features/VuuBlotterMockData.feature.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import { TableSchema } from "@finos/vuu-data";
-import { GridConfig } from "@finos/vuu-datagrid-types";
-import { ConfigurableTable } from "@finos/vuu-datatable";
-import { Filter, FilterState } from "@finos/vuu-filter-types";
-import {
-  addFilter,
-  FilterInput,
-  useFilterSuggestionProvider,
-} from "@finos/vuu-filters";
-import { useViewContext } from "@finos/vuu-layout";
-import { DataSourceStats } from "@finos/vuu-table-extras";
-import { filterAsQuery } from "@finos/vuu-utils";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { DockLayout } from "../examples/html/components/DockLayout";
-import { useTableConfig } from "../examples/utils";
-
-import "./VuuBlotter.feature.css";
-
-const classBase = "vuuBlotter2";
-
-interface VuuBlotterProps {
-  schema: TableSchema;
-  showFilter?: boolean;
-}
-
-export const VuuBlotterMockData = ({
-  schema,
-  showFilter = false,
-  ...props
-}: VuuBlotterProps) => {
-  const { save } = useViewContext();
-  const namedFilters = useMemo(() => new Map<string, string>(), []);
-  const [filterState, setFilterState] = useState<FilterState>({
-    filter: undefined,
-    filterQuery: "",
-  });
-  const { config, dataSource, typeaheadHook } = useTableConfig({
-    count: 1000,
-    lazyData: false,
-    table: schema.table,
-  });
-
-  console.log("VuuBlotter render", { props, schema });
-  useEffect(() => {
-    console.log("%cVuuBlotterMockDataFeature mount", "color: green;");
-    return () => {
-      console.log("%cVuuBlotterMockDataFeature unmount", "color:red;");
-    };
-  }, []);
-
-  const suggestionProvider = useFilterSuggestionProvider({
-    columns: schema.columns,
-    table: schema.table,
-    typeaheadHook,
-  });
-
-  const handleTableConfigChange = useCallback(
-    (config: Omit<GridConfig, "headings">) => {
-      console.log(`VuuBlotter config changed`);
-      save?.(config, "table-config");
-      // tableConfigRef.current = config;
-    },
-    [save]
-  );
-
-  const handleSubmitFilter = useCallback(
-    (
-      newFilter: Filter | undefined,
-      filterQuery: string,
-      mode = "add",
-      filterName?: string
-    ) => {
-      let newFilterState: FilterState;
-      if (newFilter && (mode === "and" || mode === "or")) {
-        const fullFilter = addFilter(filterState.filter, newFilter, {
-          combineWith: mode,
-        }) as Filter;
-        newFilterState = {
-          filter: fullFilter,
-          filterQuery: filterAsQuery(fullFilter),
-          filterName,
-        };
-      } else {
-        newFilterState = {
-          filter: newFilter,
-          filterQuery,
-          filterName,
-        };
-      }
-
-      dataSource.filter = {
-        filter: newFilterState.filterQuery,
-        filterStruct: newFilterState.filter,
-      };
-      setFilterState(newFilterState);
-      if (filterName && newFilterState.filter) {
-        namedFilters.set(filterName, newFilterState.filterQuery);
-      }
-    },
-    [dataSource, filterState.filter, namedFilters]
-  );
-
-  const handleFilterShown = useCallback(() => {
-    console.log("here we go");
-  }, []);
-
-  return (
-    <DockLayout
-      bottomPanelSize={24}
-      onTopPanelVisible={handleFilterShown}
-      resize="defer"
-      showTopPanel={showFilter}
-      showBottomPanel
-      style={{ height: 700 }}
-      topPanelSize={28}
-    >
-      <FilterInput
-        data-dock="top"
-        existingFilter={filterState.filter}
-        iconName="chevron-right"
-        onSubmitFilter={handleSubmitFilter}
-        suggestionProvider={suggestionProvider}
-      />
-
-      <ConfigurableTable
-        className={classBase}
-        config={config}
-        data-dock="content"
-        dataSource={dataSource}
-        onConfigChange={handleTableConfigChange}
-      />
-      <div className="vuuToolbarProxy vuuBlotter-footer" data-dock="bottom">
-        <DataSourceStats dataSource={dataSource} />
-      </div>
-    </DockLayout>
-  );
-};
-
-export default VuuBlotterMockData;
diff --git a/vuu-ui/showcase/src/generated/stories.json b/vuu-ui/showcase/src/generated/stories.json
index 3d378fc34..80ae817f5 100644
--- a/vuu-ui/showcase/src/generated/stories.json
+++ b/vuu-ui/showcase/src/generated/stories.json
@@ -17,9 +17,6 @@
   "ParsedInput": {
     "ParsedInput": "./src/examples/ParsedInput/ParsedInput.stories.jsx"
   },
-  "Table": {
-    "Table": "./src/examples/Table/Table.stories.jsx"
-  },
   "Tools": {
     "LayoutConfigurator": "./src/examples/Tools/LayoutConfigurator.stories.jsx"
   },