fixing many eslint errors

2 files changed, 430 insertions, 332 deletions

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaMovableRow.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaMovableRow.tsx
index 0e19ef3d9..f872637e5 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaMovableRow.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaMovableRow.tsx
@@ -1,17 +1,16 @@
-import React = require("react");
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { action } from "mobx";
-import { ReactTableDefaults, RowInfo, TableCellRenderer } from "react-table";
-import { Doc } from "../../../../fields/Doc";
-import { SchemaHeaderField } from "../../../../fields/SchemaHeaderField";
-import { Cast, FieldValue, StrCast } from "../../../../fields/Types";
-import { DocumentManager } from "../../../util/DocumentManager";
-import { DragManager, dropActionType, SetupDrag } from "../../../util/DragManager";
-import { SnappingManager } from "../../../util/SnappingManager";
-import { Transform } from "../../../util/Transform";
-import { undoBatch } from "../../../util/UndoManager";
-import { ContextMenu } from "../../ContextMenu";
-import "./CollectionSchemaView.scss";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { action } from 'mobx';
+import * as React from 'react';
+import { ReactTableDefaults, RowInfo } from 'react-table';
+import { Doc } from '../../../../fields/Doc';
+import { Cast, FieldValue, StrCast } from '../../../../fields/Types';
+import { DocumentManager } from '../../../util/DocumentManager';
+import { DragManager, dropActionType, SetupDrag } from '../../../util/DragManager';
+import { SnappingManager } from '../../../util/SnappingManager';
+import { Transform } from '../../../util/Transform';
+import { undoBatch } from '../../../util/UndoManager';
+import { ContextMenu } from '../../ContextMenu';
+import './CollectionSchemaView.scss';
 
 export interface MovableRowProps {
     rowInfo: RowInfo;
@@ -25,7 +24,7 @@ export interface MovableRowProps {
     addDocTab: any;
 }
 
-export class MovableRow extends React.Component<MovableRowProps> {
+export class MovableRow extends React.Component<React.PropsWithChildren<MovableRowProps>> {
     private _header?: React.RefObject<HTMLDivElement> = React.createRef();
     private _rowDropDisposer?: DragManager.DragDropDisposer;
 
@@ -33,28 +32,27 @@ export class MovableRow extends React.Component<MovableRowProps> {
     // Create one when the mouse starts hovering...
     onPointerEnter = (e: React.PointerEvent): void => {
         if (e.buttons === 1 && SnappingManager.GetIsDragging()) {
-            this._header!.current!.className = "collectionSchema-row-wrapper";
-            document.addEventListener("pointermove", this.onDragMove, true);
+            this._header!.current!.className = 'collectionSchema-row-wrapper';
+            document.addEventListener('pointermove', this.onDragMove, true);
         }
-    }
+    };
     // ... and delete it when the mouse leaves
     onPointerLeave = (e: React.PointerEvent): void => {
-        this._header!.current!.className = "collectionSchema-row-wrapper";
-        document.removeEventListener("pointermove", this.onDragMove, true);
-    }
+        this._header!.current!.className = 'collectionSchema-row-wrapper';
+        document.removeEventListener('pointermove', this.onDragMove, true);
+    };
     // The method for the event listener, reorders columns when dragged to their new locations.
     onDragMove = (e: PointerEvent): void => {
         const x = this.props.ScreenToLocalTransform().transformPoint(e.clientX, e.clientY);
         const rect = this._header!.current!.getBoundingClientRect();
         const bounds = this.props.ScreenToLocalTransform().transformPoint(rect.left, rect.top + rect.height / 2);
         const before = x[1] < bounds[1];
-        this._header!.current!.className = "collectionSchema-row-wrapper";
-        if (before) this._header!.current!.className += " row-above";
-        if (!before) this._header!.current!.className += " row-below";
+        this._header!.current!.className = 'collectionSchema-row-wrapper';
+        if (before) this._header!.current!.className += ' row-above';
+        if (!before) this._header!.current!.className += ' row-below';
         e.stopPropagation();
-    }
+    };
     componentWillUnmount() {
-
         this._rowDropDisposer?.();
     }
     //
@@ -63,7 +61,7 @@ export class MovableRow extends React.Component<MovableRowProps> {
         if (ele) {
             this._rowDropDisposer = DragManager.MakeDropTarget(ele, this.rowDrop.bind(this));
         }
-    }
+    };
     // Controls what hppens when a row is dragged and dropped
     rowDrop = (e: Event, de: DragManager.DropEvent) => {
         this.onPointerLeave(e as any);
@@ -81,34 +79,34 @@ export class MovableRow extends React.Component<MovableRowProps> {
             if (docDragData.draggedDocuments[0] === rowDoc) return true;
             const addDocument = (doc: Doc | Doc[]) => this.props.addDoc(doc, rowDoc, before);
             const movedDocs = docDragData.draggedDocuments;
-            return (docDragData.dropAction || docDragData.userDropAction) ?
-                docDragData.droppedDocuments.reduce((added: boolean, d) => this.props.addDoc(d, rowDoc, before) || added, false)
-                : (docDragData.moveDocument) ?
-                    movedDocs.reduce((added: boolean, d) => docDragData.moveDocument?.(d, rowDoc, addDocument) || added, false)
-                    : docDragData.droppedDocuments.reduce((added: boolean, d) => this.props.addDoc(d, rowDoc, before), false);
+            return docDragData.dropAction || docDragData.userDropAction
+                ? docDragData.droppedDocuments.reduce((added: boolean, d) => this.props.addDoc(d, rowDoc, before) || added, false)
+                : docDragData.moveDocument
+                ? movedDocs.reduce((added: boolean, d) => docDragData.moveDocument?.(d, rowDoc, addDocument) || added, false)
+                : docDragData.droppedDocuments.reduce((added: boolean, d) => this.props.addDoc(d, rowDoc, before), false);
         }
         return false;
-    }
+    };
 
     onRowContextMenu = (e: React.MouseEvent): void => {
-        const description = this.props.rowWrapped ? "Unwrap text on row" : "Text wrap row";
-        ContextMenu.Instance.addItem({ description: description, event: () => this.props.textWrapRow(this.props.rowInfo.original), icon: "file-pdf" });
-    }
+        const description = this.props.rowWrapped ? 'Unwrap text on row' : 'Text wrap row';
+        ContextMenu.Instance.addItem({ description: description, event: () => this.props.textWrapRow(this.props.rowInfo.original), icon: 'file-pdf' });
+    };
 
     @undoBatch
     @action
     move: DragManager.MoveFunction = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDoc) => {
         const targetView = targetCollection && DocumentManager.Instance.getDocumentView(targetCollection);
         return doc !== targetCollection && doc !== targetView?.props.ContainingCollectionDoc && this.props.removeDoc(doc) && addDoc(doc);
-    }
+    };
 
     @action
     onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-        console.log("yes");
-        if (e.key === "Backspace" || e.key === "Delete") {
+        console.log('yes');
+        if (e.key === 'Backspace' || e.key === 'Delete') {
             undoBatch(() => this.props.removeDoc(this.props.rowInfo.original));
         }
-    }
+    };
 
     render() {
         const { children = null, rowInfo } = this.props;
@@ -120,23 +118,29 @@ export class MovableRow extends React.Component<MovableRowProps> {
         const { original } = rowInfo;
         const doc = FieldValue(Cast(original, Doc));
 
-        if (!doc) return (null);
+        if (!doc) return null;
 
         const reference = React.createRef<HTMLDivElement>();
         const onItemDown = SetupDrag(reference, () => doc, this.move, StrCast(this.props.dropAction) as dropActionType);
 
-        let className = "collectionSchema-row";
-        if (this.props.rowFocused) className += " row-focused";
-        if (this.props.rowWrapped) className += " row-wrapped";
+        let className = 'collectionSchema-row';
+        if (this.props.rowFocused) className += ' row-focused';
+        if (this.props.rowWrapped) className += ' row-wrapped';
 
         return (
             <div className={className} onKeyPress={this.onKeyDown} ref={this.createRowDropTarget} onContextMenu={this.onRowContextMenu}>
                 <div className="collectionSchema-row-wrapper" onKeyPress={this.onKeyDown} ref={this._header} onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave}>
-                    <ReactTableDefaults.TrComponent onKeyPress={this.onKeyDown} >
+                    <ReactTableDefaults.TrComponent onKeyPress={this.onKeyDown}>
                         <div className="row-dragger">
-                            <div className="row-option" onClick={undoBatch(() => this.props.removeDoc(this.props.rowInfo.original))}><FontAwesomeIcon icon="trash" size="sm" /></div>
-                            <div className="row-option" style={{ cursor: "grab" }} ref={reference} onPointerDown={onItemDown}><FontAwesomeIcon icon="grip-vertical" size="sm" /></div>
-                            <div className="row-option" onClick={() => this.props.addDocTab(this.props.rowInfo.original, "add:right")}><FontAwesomeIcon icon="external-link-alt" size="sm" /></div>
+                            <div className="row-option" onClick={undoBatch(() => this.props.removeDoc(this.props.rowInfo.original))}>
+                                <FontAwesomeIcon icon="trash" size="sm" />
+                            </div>
+                            <div className="row-option" style={{ cursor: 'grab' }} ref={reference} onPointerDown={onItemDown}>
+                                <FontAwesomeIcon icon="grip-vertical" size="sm" />
+                            </div>
+                            <div className="row-option" onClick={() => this.props.addDocTab(this.props.rowInfo.original, 'add:right')}>
+                                <FontAwesomeIcon icon="external-link-alt" size="sm" />
+                            </div>
                         </div>
                         {children}
                     </ReactTableDefaults.TrComponent>
@@ -144,4 +148,4 @@ export class MovableRow extends React.Component<MovableRowProps> {
             </div>
         );
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/collections/collectionSchema/SchemaTable.tsx b/src/client/views/collections/collectionSchema/SchemaTable.tsx
index 43266a571..fafea5ce3 100644
--- a/src/client/views/collections/collectionSchema/SchemaTable.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTable.tsx
@@ -1,37 +1,47 @@
-import React = require("react");
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed, observable, trace } from "mobx";
-import { observer } from "mobx-react";
-import ReactTable, { CellInfo, Column, ComponentPropsGetterR, Resize, SortingRule } from "react-table";
-import { DateField } from "../../../../fields/DateField";
-import { AclPrivate, AclReadonly, DataSym, Doc, DocListCast, Field, Opt } from "../../../../fields/Doc";
-import { Id } from "../../../../fields/FieldSymbols";
-import { List } from "../../../../fields/List";
-import { listSpec } from "../../../../fields/Schema";
-import { SchemaHeaderField } from "../../../../fields/SchemaHeaderField";
-import { ComputedField } from "../../../../fields/ScriptField";
-import { Cast, FieldValue, NumCast, StrCast } from "../../../../fields/Types";
-import { ImageField } from "../../../../fields/URLField";
-import { GetEffectiveAcl } from "../../../../fields/util";
-import { emptyFunction, emptyPath, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from "../../../../Utils";
-import { Docs, DocumentOptions, DocUtils } from "../../../documents/Documents";
-import { DocumentType } from "../../../documents/DocumentTypes";
-import { CompileScript, Transformer, ts } from "../../../util/Scripting";
-import { Transform } from "../../../util/Transform";
-import { undoBatch } from "../../../util/UndoManager";
-import { COLLECTION_BORDER_WIDTH, SCHEMA_DIVIDER_WIDTH } from '../../global/globalCssVariables.scss';
-import { ContextMenu } from "../../ContextMenu";
+import { action, computed, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import ReactTable, { CellInfo, Column, ComponentPropsGetterR, Resize, SortingRule } from 'react-table';
+import { DateField } from '../../../../fields/DateField';
+import { AclPrivate, AclReadonly, DataSym, Doc, DocListCast, Field, Opt } from '../../../../fields/Doc';
+import { Id } from '../../../../fields/FieldSymbols';
+import { List } from '../../../../fields/List';
+import { listSpec } from '../../../../fields/Schema';
+import { SchemaHeaderField } from '../../../../fields/SchemaHeaderField';
+import { ComputedField } from '../../../../fields/ScriptField';
+import { Cast, FieldValue, NumCast, StrCast } from '../../../../fields/Types';
+import { ImageField } from '../../../../fields/URLField';
+import { GetEffectiveAcl } from '../../../../fields/util';
+import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from '../../../../Utils';
+import { Docs, DocumentOptions, DocUtils } from '../../../documents/Documents';
+import { DocumentType } from '../../../documents/DocumentTypes';
+import { CompileScript, Transformer, ts } from '../../../util/Scripting';
+import { Transform } from '../../../util/Transform';
+import { undoBatch } from '../../../util/UndoManager';
 import '../../../views/DocumentDecorations.scss';
-import { DocumentView } from "../../nodes/DocumentView";
-import { DefaultStyleProvider } from "../../StyleProvider";
-import { CellProps, CollectionSchemaButtons, CollectionSchemaCell, CollectionSchemaCheckboxCell, CollectionSchemaDateCell, CollectionSchemaDocCell, CollectionSchemaImageCell, CollectionSchemaListCell, CollectionSchemaNumberCell, CollectionSchemaStringCell } from "./CollectionSchemaCells";
-import { CollectionSchemaAddColumnHeader, KeysDropdown } from "./CollectionSchemaHeaders";
-import { MovableColumn } from "./CollectionSchemaMovableColumn";
-import { MovableRow } from "./CollectionSchemaMovableRow";
-import "./CollectionSchemaView.scss";
-import { CollectionView } from "../CollectionView";
-
+import { ContextMenu } from '../../ContextMenu';
+import { COLLECTION_BORDER_WIDTH, SCHEMA_DIVIDER_WIDTH } from '../../global/globalCssVariables.scss';
+import { DocumentView } from '../../nodes/DocumentView';
+import { DefaultStyleProvider } from '../../StyleProvider';
+import { CollectionView } from '../CollectionView';
+import {
+    CellProps,
+    CollectionSchemaButtons,
+    CollectionSchemaCell,
+    CollectionSchemaCheckboxCell,
+    CollectionSchemaDateCell,
+    CollectionSchemaDocCell,
+    CollectionSchemaImageCell,
+    CollectionSchemaListCell,
+    CollectionSchemaNumberCell,
+    CollectionSchemaStringCell,
+} from './CollectionSchemaCells';
+import { CollectionSchemaAddColumnHeader, KeysDropdown } from './CollectionSchemaHeaders';
+import { MovableColumn } from './CollectionSchemaMovableColumn';
+import { MovableRow } from './CollectionSchemaMovableRow';
+import './CollectionSchemaView.scss';
 
 enum ColumnType {
     Any,
@@ -41,15 +51,22 @@ enum ColumnType {
     Doc,
     Image,
     List,
-    Date
+    Date,
 }
 
 // this map should be used for keys that should have a const type of value
 const columnTypes: Map<string, ColumnType> = new Map([
-    ["title", ColumnType.String],
-    ["x", ColumnType.Number], ["y", ColumnType.Number], ["_width", ColumnType.Number], ["_height", ColumnType.Number],
-    ["_nativeWidth", ColumnType.Number], ["_nativeHeight", ColumnType.Number], ["isPrototype", ColumnType.Boolean],
-    ["_curPage", ColumnType.Number], ["_currentTimecode", ColumnType.Number], ["zIndex", ColumnType.Number]
+    ['title', ColumnType.String],
+    ['x', ColumnType.Number],
+    ['y', ColumnType.Number],
+    ['_width', ColumnType.Number],
+    ['_height', ColumnType.Number],
+    ['_nativeWidth', ColumnType.Number],
+    ['_nativeHeight', ColumnType.Number],
+    ['isPrototype', ColumnType.Boolean],
+    ['_curPage', ColumnType.Number],
+    ['_currentTimecode', ColumnType.Number],
+    ['zIndex', ColumnType.Number],
 ]);
 
 export interface SchemaTableProps {
@@ -92,18 +109,24 @@ export interface SchemaTableProps {
 @observer
 export class SchemaTable extends React.Component<SchemaTableProps> {
     @observable _cellIsEditing: boolean = false;
-    @observable _focusedCell: { row: number, col: number } = { row: 0, col: 0 };
-    @observable _openCollections: Set<number> = new Set;
+    @observable _focusedCell: { row: number; col: number } = { row: 0, col: 0 };
+    @observable _openCollections: Set<number> = new Set();
 
     @observable _showDoc: Doc | undefined;
-    @observable _showDataDoc: any = "";
+    @observable _showDataDoc: any = '';
     @observable _showDocPos: number[] = [];
 
     @observable _showTitleDropdown: boolean = false;
 
-    @computed get previewWidth() { return () => NumCast(this.props.Document.schemaPreviewWidth); }
-    @computed get previewHeight() { return () => this.props.PanelHeight() - 2 * this.borderWidth; }
-    @computed get tableWidth() { return this.props.PanelWidth() - 2 * this.borderWidth - Number(SCHEMA_DIVIDER_WIDTH) - this.previewWidth(); }
+    @computed get previewWidth() {
+        return () => NumCast(this.props.Document.schemaPreviewWidth);
+    }
+    @computed get previewHeight() {
+        return () => this.props.PanelHeight() - 2 * this.borderWidth;
+    }
+    @computed get tableWidth() {
+        return this.props.PanelWidth() - 2 * this.borderWidth - Number(SCHEMA_DIVIDER_WIDTH) - this.previewWidth();
+    }
 
     @computed get childDocs() {
         if (this.props.childDocs) return this.props.childDocs;
@@ -117,17 +140,17 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
     }
 
     @computed get textWrappedRows() {
-        return Cast(this.props.Document.textwrappedSchemaRows, listSpec("string"), []);
+        return Cast(this.props.Document.textwrappedSchemaRows, listSpec('string'), []);
     }
     set textWrappedRows(textWrappedRows: string[]) {
         this.props.Document.textwrappedSchemaRows = new List<string>(textWrappedRows);
     }
 
-    @computed get resized(): { id: string, value: number }[] {
+    @computed get resized(): { id: string; value: number }[] {
         return this.props.columns.reduce((resized, shf) => {
-            (shf.width > -1) && resized.push({ id: shf.heading, value: shf.width });
+            shf.width > -1 && resized.push({ id: shf.heading, value: shf.width });
             return resized;
-        }, [] as { id: string, value: number }[]);
+        }, [] as { id: string; value: number }[]);
     }
     @computed get sorted(): SortingRule[] {
         return this.props.columns.reduce((sorted, shf) => {
@@ -139,12 +162,14 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
     @action
     changeSorting = (col: any) => {
         this.props.changeColumnSort(col, col.desc === true ? false : col.desc === false ? undefined : true);
-    }
+    };
 
     @action
-    changeTitleMode = () => this._showTitleDropdown = !this._showTitleDropdown
+    changeTitleMode = () => (this._showTitleDropdown = !this._showTitleDropdown);
 
-    @computed get borderWidth() { return Number(COLLECTION_BORDER_WIDTH); }
+    @computed get borderWidth() {
+        return Number(COLLECTION_BORDER_WIDTH);
+    }
     @computed get tableColumns(): Column<Doc>[] {
         const possibleKeys = this.props.documentKeys.filter(key => this.props.columns.findIndex(existingKey => existingKey.heading.toUpperCase() === key.toUpperCase()) === -1);
         const columns: Column<Doc>[] = [];
@@ -154,149 +179,185 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
         const isEditable = !this.props.headerIsEditing;
 
         columns.push({
-            expander: true, Header: "", width: 58,
-            Expander: (rowInfo) => {
-                return rowInfo.original.type !== DocumentType.COL ? (null) :
-                    <div className="collectionSchemaView-expander" onClick={action(() => (this._openCollections[rowInfo.isExpanded ? "delete" : "add"])(rowInfo.viewIndex))}>
-                        <FontAwesomeIcon icon={rowInfo.isExpanded ? "caret-down" : "caret-right"} size="lg" />
-                    </div>;
-            }
+            expander: true,
+            Header: '',
+            width: 58,
+            Expander: rowInfo => {
+                return rowInfo.original.type !== DocumentType.COL ? null : (
+                    <div className="collectionSchemaView-expander" onClick={action(() => this._openCollections[rowInfo.isExpanded ? 'delete' : 'add'](rowInfo.viewIndex))}>
+                        <FontAwesomeIcon icon={rowInfo.isExpanded ? 'caret-down' : 'caret-right'} size="lg" />
+                    </div>
+                );
+            },
         });
-        columns.push(...this.props.columns.map(col => {
-            const icon: IconProp = this.getColumnType(col) === ColumnType.Number ? "hashtag" : this.getColumnType(col) === ColumnType.String ? "font" :
-                this.getColumnType(col) === ColumnType.Boolean ? "check-square" : this.getColumnType(col) === ColumnType.Doc ? "file" :
-                    this.getColumnType(col) === ColumnType.Image ? "image" : this.getColumnType(col) === ColumnType.List ? "list-ul" :
-                        this.getColumnType(col) === ColumnType.Date ? "calendar" : "align-justify";
-
-            const keysDropdown = <KeysDropdown
-                keyValue={col.heading}
-                possibleKeys={possibleKeys}
-                existingKeys={this.props.columns.map(c => c.heading)}
-                canAddNew={true}
-                addNew={false}
-                onSelect={this.props.changeColumns}
-                setIsEditing={this.props.setHeaderIsEditing}
-                docs={this.props.childDocs}
-                Document={this.props.Document}
-                dataDoc={this.props.dataDoc}
-                fieldKey={this.props.fieldKey}
-                ContainingCollectionDoc={this.props.ContainingCollectionDoc}
-                ContainingCollectionView={this.props.ContainingCollectionView}
-                active={this.props.active}
-                openHeader={this.props.openHeader}
-                icon={icon}
-                col={col}
-                // try commenting this out
-                width={"100%"}
-            />;
-
-            const sortIcon = col.desc === undefined ? "caret-right" : col.desc === true ? "caret-down" : "caret-up";
-            const header = <div className="collectionSchemaView-menuOptions-wrapper" style={{ background: col.color, padding: "2px", display: "flex", cursor: "default", height: "100%", }}>
-                {keysDropdown}
-                <div onClick={e => this.changeSorting(col)} style={{ width: 21, padding: 1, display: "inline", zIndex: 1, background: "inherit", cursor: "pointer" }}>
-                    <FontAwesomeIcon icon={sortIcon} size="lg" />
-                </div>
-                {/* {this.props.Document._chromeHidden || this.props.addDocument == returnFalse ? undefined : <div className="collectionSchemaView-addRow" onClick={this.createRow}>+ new</div>} */}
-            </div>;
-
-            return {
-                Header: <MovableColumn columnRenderer={header} columnValue={col} allColumns={this.props.columns} reorderColumns={this.props.reorderColumns} ScreenToLocalTransform={this.props.ScreenToLocalTransform} />,
-                accessor: (doc: Doc) => doc ? Field.toString(doc[col.heading] as Field) : 0,
-                id: col.heading,
-                Cell: (rowProps: CellInfo) => {
-                    const rowIndex = rowProps.index;
-                    const columnIndex = this.props.columns.map(c => c.heading).indexOf(rowProps.column.id!);
-                    const isFocused = focusedRow === rowIndex && focusedCol === columnIndex && tableIsFocused;
-
-                    const props: CellProps = {
-                        row: rowIndex,
-                        col: columnIndex,
-                        rowProps: rowProps,
-                        isFocused: isFocused,
-                        changeFocusedCellByIndex: this.changeFocusedCellByIndex,
-                        CollectionView: this.props.CollectionView,
-                        ContainingCollection: this.props.ContainingCollectionView,
-                        Document: this.props.Document,
-                        fieldKey: this.props.fieldKey,
-                        renderDepth: this.props.renderDepth,
-                        addDocTab: this.props.addDocTab,
-                        pinToPres: this.props.pinToPres,
-                        moveDocument: this.props.moveDocument,
-                        setIsEditing: this.setCellIsEditing,
-                        isEditable: isEditable,
-                        setPreviewDoc: this.props.setPreviewDoc,
-                        setComputed: this.setComputed,
-                        getField: this.getField,
-                        showDoc: this.showDoc,
-                    };
-
-
-                    switch (this.getColumnType(col, rowProps.original, rowProps.column.id)) {
-                        case ColumnType.Number: return <CollectionSchemaNumberCell {...props} />;
-                        case ColumnType.String: return <CollectionSchemaStringCell {...props} />;
-                        case ColumnType.Boolean: return <CollectionSchemaCheckboxCell {...props} />;
-                        case ColumnType.Doc: return <CollectionSchemaDocCell {...props} />;
-                        case ColumnType.Image: return <CollectionSchemaImageCell {...props} />;
-                        case ColumnType.List: return <CollectionSchemaListCell {...props} />;
-                        case ColumnType.Date: return <CollectionSchemaDateCell {...props} />;
-                        default:
-                            return <CollectionSchemaCell {...props} />;
-                    }
-                },
-                minWidth: 200,
-            };
-        }));
+        columns.push(
+            ...this.props.columns.map(col => {
+                const icon: IconProp =
+                    this.getColumnType(col) === ColumnType.Number
+                        ? 'hashtag'
+                        : this.getColumnType(col) === ColumnType.String
+                        ? 'font'
+                        : this.getColumnType(col) === ColumnType.Boolean
+                        ? 'check-square'
+                        : this.getColumnType(col) === ColumnType.Doc
+                        ? 'file'
+                        : this.getColumnType(col) === ColumnType.Image
+                        ? 'image'
+                        : this.getColumnType(col) === ColumnType.List
+                        ? 'list-ul'
+                        : this.getColumnType(col) === ColumnType.Date
+                        ? 'calendar'
+                        : 'align-justify';
+
+                const keysDropdown = (
+                    <KeysDropdown
+                        keyValue={col.heading}
+                        possibleKeys={possibleKeys}
+                        existingKeys={this.props.columns.map(c => c.heading)}
+                        canAddNew={true}
+                        addNew={false}
+                        onSelect={this.props.changeColumns}
+                        setIsEditing={this.props.setHeaderIsEditing}
+                        docs={this.props.childDocs}
+                        Document={this.props.Document}
+                        dataDoc={this.props.dataDoc}
+                        fieldKey={this.props.fieldKey}
+                        ContainingCollectionDoc={this.props.ContainingCollectionDoc}
+                        ContainingCollectionView={this.props.ContainingCollectionView}
+                        active={this.props.active}
+                        openHeader={this.props.openHeader}
+                        icon={icon}
+                        col={col}
+                        // try commenting this out
+                        width={'100%'}
+                    />
+                );
+
+                const sortIcon = col.desc === undefined ? 'caret-right' : col.desc === true ? 'caret-down' : 'caret-up';
+                const header = (
+                    <div className="collectionSchemaView-menuOptions-wrapper" style={{ background: col.color, padding: '2px', display: 'flex', cursor: 'default', height: '100%' }}>
+                        {keysDropdown}
+                        <div onClick={e => this.changeSorting(col)} style={{ width: 21, padding: 1, display: 'inline', zIndex: 1, background: 'inherit', cursor: 'pointer' }}>
+                            <FontAwesomeIcon icon={sortIcon} size="lg" />
+                        </div>
+                        {/* {this.props.Document._chromeHidden || this.props.addDocument == returnFalse ? undefined : <div className="collectionSchemaView-addRow" onClick={this.createRow}>+ new</div>} */}
+                    </div>
+                );
+
+                return {
+                    Header: <MovableColumn columnRenderer={header} columnValue={col} allColumns={this.props.columns} reorderColumns={this.props.reorderColumns} ScreenToLocalTransform={this.props.ScreenToLocalTransform} />,
+                    accessor: (doc: Doc) => (doc ? Field.toString(doc[col.heading] as Field) : 0),
+                    id: col.heading,
+                    Cell: (rowProps: CellInfo) => {
+                        const rowIndex = rowProps.index;
+                        const columnIndex = this.props.columns.map(c => c.heading).indexOf(rowProps.column.id!);
+                        const isFocused = focusedRow === rowIndex && focusedCol === columnIndex && tableIsFocused;
+
+                        const props: CellProps = {
+                            row: rowIndex,
+                            col: columnIndex,
+                            rowProps: rowProps,
+                            isFocused: isFocused,
+                            changeFocusedCellByIndex: this.changeFocusedCellByIndex,
+                            CollectionView: this.props.CollectionView,
+                            ContainingCollection: this.props.ContainingCollectionView,
+                            Document: this.props.Document,
+                            fieldKey: this.props.fieldKey,
+                            renderDepth: this.props.renderDepth,
+                            addDocTab: this.props.addDocTab,
+                            pinToPres: this.props.pinToPres,
+                            moveDocument: this.props.moveDocument,
+                            setIsEditing: this.setCellIsEditing,
+                            isEditable: isEditable,
+                            setPreviewDoc: this.props.setPreviewDoc,
+                            setComputed: this.setComputed,
+                            getField: this.getField,
+                            showDoc: this.showDoc,
+                        };
+
+                        switch (this.getColumnType(col, rowProps.original, rowProps.column.id)) {
+                            case ColumnType.Number:
+                                return <CollectionSchemaNumberCell {...props} />;
+                            case ColumnType.String:
+                                return <CollectionSchemaStringCell {...props} />;
+                            case ColumnType.Boolean:
+                                return <CollectionSchemaCheckboxCell {...props} />;
+                            case ColumnType.Doc:
+                                return <CollectionSchemaDocCell {...props} />;
+                            case ColumnType.Image:
+                                return <CollectionSchemaImageCell {...props} />;
+                            case ColumnType.List:
+                                return <CollectionSchemaListCell {...props} />;
+                            case ColumnType.Date:
+                                return <CollectionSchemaDateCell {...props} />;
+                            default:
+                                return <CollectionSchemaCell {...props} />;
+                        }
+                    },
+                    minWidth: 200,
+                };
+            })
+        );
         columns.push({
             Header: <CollectionSchemaAddColumnHeader createColumn={this.createColumn} />,
             accessor: (doc: Doc) => 0,
-            id: "add",
+            id: 'add',
             Cell: (rowProps: CellInfo) => {
                 const rowIndex = rowProps.index;
                 const columnIndex = this.props.columns.map(c => c.heading).indexOf(rowProps.column.id!);
                 const isFocused = focusedRow === rowIndex && focusedCol === columnIndex && tableIsFocused;
-                return <CollectionSchemaButtons  {...{
-                    row: rowProps.index,
-                    col: columnIndex,
-                    rowProps: rowProps,
-                    isFocused: isFocused,
-                    changeFocusedCellByIndex: this.changeFocusedCellByIndex,
-                    CollectionView: this.props.CollectionView,
-                    ContainingCollection: this.props.ContainingCollectionView,
-                    Document: this.props.Document,
-                    fieldKey: this.props.fieldKey,
-                    renderDepth: this.props.renderDepth,
-                    addDocTab: this.props.addDocTab,
-                    pinToPres: this.props.pinToPres,
-                    moveDocument: this.props.moveDocument,
-                    setIsEditing: this.setCellIsEditing,
-                    isEditable: isEditable,
-                    setPreviewDoc: this.props.setPreviewDoc,
-                    setComputed: this.setComputed,
-                    getField: this.getField,
-                    showDoc: this.showDoc,
-                }} />;
+                return (
+                    <CollectionSchemaButtons
+                        {...{
+                            row: rowProps.index,
+                            col: columnIndex,
+                            rowProps: rowProps,
+                            isFocused: isFocused,
+                            changeFocusedCellByIndex: this.changeFocusedCellByIndex,
+                            CollectionView: this.props.CollectionView,
+                            ContainingCollection: this.props.ContainingCollectionView,
+                            Document: this.props.Document,
+                            fieldKey: this.props.fieldKey,
+                            renderDepth: this.props.renderDepth,
+                            addDocTab: this.props.addDocTab,
+                            pinToPres: this.props.pinToPres,
+                            moveDocument: this.props.moveDocument,
+                            setIsEditing: this.setCellIsEditing,
+                            isEditable: isEditable,
+                            setPreviewDoc: this.props.setPreviewDoc,
+                            setComputed: this.setComputed,
+                            getField: this.getField,
+                            showDoc: this.showDoc,
+                        }}
+                    />
+                );
             },
             width: 28,
-            resizable: false
+            resizable: false,
         });
         return columns;
     }
 
-
     constructor(props: SchemaTableProps) {
         super(props);
         if (this.props.Document._schemaHeaders === undefined) {
-            this.props.Document._schemaHeaders = new List<SchemaHeaderField>([new SchemaHeaderField("title", "#f1efeb"), new SchemaHeaderField("author", "#f1efeb"), new SchemaHeaderField("*lastModified", "#f1efeb", ColumnType.Date),
-            new SchemaHeaderField("text", "#f1efeb", ColumnType.String), new SchemaHeaderField("type", "#f1efeb"), new SchemaHeaderField("context", "#f1efeb", ColumnType.Doc)]);
+            this.props.Document._schemaHeaders = new List<SchemaHeaderField>([
+                new SchemaHeaderField('title', '#f1efeb'),
+                new SchemaHeaderField('author', '#f1efeb'),
+                new SchemaHeaderField('*lastModified', '#f1efeb', ColumnType.Date),
+                new SchemaHeaderField('text', '#f1efeb', ColumnType.String),
+                new SchemaHeaderField('type', '#f1efeb'),
+                new SchemaHeaderField('context', '#f1efeb', ColumnType.Doc),
+            ]);
         }
     }
 
     componentDidMount() {
-        document.addEventListener("keydown", this.onKeyDown);
+        document.addEventListener('keydown', this.onKeyDown);
     }
 
     componentWillUnmount() {
-        document.removeEventListener("keydown", this.onKeyDown);
+        document.removeEventListener('keydown', this.onKeyDown);
     }
 
     tableAddDoc = (doc: Doc, relativeTo?: Doc, before?: boolean) => {
@@ -305,25 +366,27 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
 
         if (effectiveAcl !== AclPrivate && effectiveAcl !== AclReadonly) {
             doc.context = this.props.Document;
-            tableDoc[this.props.fieldKey + "-lastModified"] = new DateField(new Date(Date.now()));
+            tableDoc[this.props.fieldKey + '-lastModified'] = new DateField(new Date(Date.now()));
             return Doc.AddDocToList(this.props.Document, this.props.fieldKey, doc, relativeTo, before);
         }
         return false;
-    }
+    };
 
     private getTrProps: ComponentPropsGetterR = (state, rowInfo) => {
-        return !rowInfo ? {} : {
-            ScreenToLocalTransform: this.props.ScreenToLocalTransform,
-            addDoc: this.tableAddDoc,
-            removeDoc: this.props.deleteDocument,
-            rowInfo,
-            rowFocused: !this.props.headerIsEditing && rowInfo.index === this._focusedCell.row && this.props.isFocused(this.props.Document, true),
-            textWrapRow: this.toggleTextWrapRow,
-            rowWrapped: this.textWrappedRows.findIndex(id => rowInfo.original[Id] === id) > -1,
-            dropAction: StrCast(this.props.Document.childDropAction),
-            addDocTab: this.props.addDocTab
-        };
-    }
+        return !rowInfo
+            ? {}
+            : {
+                  ScreenToLocalTransform: this.props.ScreenToLocalTransform,
+                  addDoc: this.tableAddDoc,
+                  removeDoc: this.props.deleteDocument,
+                  rowInfo,
+                  rowFocused: !this.props.headerIsEditing && rowInfo.index === this._focusedCell.row && this.props.isFocused(this.props.Document, true),
+                  textWrapRow: this.toggleTextWrapRow,
+                  rowWrapped: this.textWrappedRows.findIndex(id => rowInfo.original[Id] === id) > -1,
+                  dropAction: StrCast(this.props.Document.childDropAction),
+                  addDocTab: this.props.addDocTab,
+              };
+    };
 
     private getTdProps: ComponentPropsGetterR = (state, rowInfo, column, instance) => {
         if (!rowInfo || column) return {};
@@ -334,16 +397,17 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
         const isFocused = this._focusedCell.row === row && this._focusedCell.col === col && this.props.isFocused(this.props.Document, true);
         // TODO: editing border doesn't work :(
         return {
-            style: { border: !this.props.headerIsEditing && isFocused ? "2px solid rgb(255, 160, 160)" : "1px solid #f1efeb" }
+            style: { border: !this.props.headerIsEditing && isFocused ? '2px solid rgb(255, 160, 160)' : '1px solid #f1efeb' },
         };
-    }
+    };
 
-    @action setCellIsEditing = (isEditing: boolean) => this._cellIsEditing = isEditing;
+    @action setCellIsEditing = (isEditing: boolean) => (this._cellIsEditing = isEditing);
 
     @action
     onKeyDown = (e: KeyboardEvent): void => {
-        if (!this._cellIsEditing && !this.props.headerIsEditing && this.props.isFocused(this.props.Document, true)) {// && this.props.isSelected(true)) {
-            const direction = e.key === "Tab" ? "tab" : e.which === 39 ? "right" : e.which === 37 ? "left" : e.which === 38 ? "up" : e.which === 40 ? "down" : "";
+        if (!this._cellIsEditing && !this.props.headerIsEditing && this.props.isFocused(this.props.Document, true)) {
+            // && this.props.isSelected(true)) {
+            const direction = e.key === 'Tab' ? 'tab' : e.which === 39 ? 'right' : e.which === 37 ? 'left' : e.which === 38 ? 'up' : e.which === 40 ? 'down' : '';
             this._focusedCell = this.changeFocusedCellByDirection(direction, this._focusedCell.row, this._focusedCell.col);
 
             if (direction) {
@@ -353,20 +417,25 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
             }
         } else if (e.keyCode === 27) {
             this.props.setPreviewDoc(undefined);
-            e.stopPropagation(); // stopPropagation for left/right arrows 
+            e.stopPropagation(); // stopPropagation for left/right arrows
         }
-    }
+    };
 
     changeFocusedCellByDirection = (direction: string, curRow: number, curCol: number) => {
         switch (direction) {
-            case "tab": return { row: (curRow + 1 === this.childDocs.length ? 0 : curRow + 1), col: curCol + 1 === this.props.columns.length ? 0 : curCol + 1 };
-            case "right": return { row: curRow, col: curCol + 1 === this.props.columns.length ? curCol : curCol + 1 };
-            case "left": return { row: curRow, col: curCol === 0 ? curCol : curCol - 1 };
-            case "up": return { row: curRow === 0 ? curRow : curRow - 1, col: curCol };
-            case "down": return { row: curRow + 1 === this.childDocs.length ? curRow : curRow + 1, col: curCol };
+            case 'tab':
+                return { row: curRow + 1 === this.childDocs.length ? 0 : curRow + 1, col: curCol + 1 === this.props.columns.length ? 0 : curCol + 1 };
+            case 'right':
+                return { row: curRow, col: curCol + 1 === this.props.columns.length ? curCol : curCol + 1 };
+            case 'left':
+                return { row: curRow, col: curCol === 0 ? curCol : curCol - 1 };
+            case 'up':
+                return { row: curRow === 0 ? curRow : curRow - 1, col: curCol };
+            case 'down':
+                return { row: curRow + 1 === this.childDocs.length ? curRow : curRow + 1, col: curCol };
         }
         return this._focusedCell;
-    }
+    };
 
     @action
     changeFocusedCellByIndex = (row: number, col: number): void => {
@@ -374,25 +443,25 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
             this._focusedCell = { row: row, col: col };
         }
         this.props.setFocused(this.props.Document);
-    }
+    };
 
     @undoBatch
     createRow = action(() => {
-        this.props.addDocument?.(Docs.Create.TextDocument("", { title: "", _width: 100, _height: 30 }));
+        this.props.addDocument?.(Docs.Create.TextDocument('', { title: '', _width: 100, _height: 30 }));
         this._focusedCell = { row: this.childDocs.length, col: this._focusedCell.col };
     });
 
     @undoBatch
     @action
     createColumn = () => {
-        const newFieldName = (index: number) => `New field${index ? ` (${index})` : ""}`;
+        const newFieldName = (index: number) => `New field${index ? ` (${index})` : ''}`;
         for (let index = 0; index < 100; index++) {
             if (this.props.columns.findIndex(col => col.heading === newFieldName(index)) === -1) {
-                this.props.columns.push(new SchemaHeaderField(newFieldName(index), "#f1efeb"));
+                this.props.columns.push(new SchemaHeaderField(newFieldName(index), '#f1efeb'));
                 break;
             }
         }
-    }
+    };
 
     @action
     getColumnType = (column: SchemaHeaderField, doc?: Doc, field?: string): ColumnType => {
@@ -407,15 +476,15 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
             return column.type;
         }
         if (columnTypes.get(column.heading)) {
-            return column.type = columnTypes.get(column.heading)!;
+            return (column.type = columnTypes.get(column.heading)!);
         }
-        return column.type = ColumnType.Any;
-    }
+        return (column.type = ColumnType.Any);
+    };
 
     @undoBatch
     @action
     toggleTextwrap = async () => {
-        const textwrappedRows = Cast(this.props.Document.textwrappedSchemaRows, listSpec("string"), []);
+        const textwrappedRows = Cast(this.props.Document.textwrappedSchemaRows, listSpec('string'), []);
         if (textwrappedRows.length) {
             this.props.Document.textwrappedSchemaRows = new List<string>([]);
         } else {
@@ -423,7 +492,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
             const allRows = docs instanceof Doc ? [docs[Id]] : docs.map(doc => doc[Id]);
             this.props.Document.textwrappedSchemaRows = new List<string>(allRows);
         }
-    }
+    };
 
     @action
     toggleTextWrapRow = (doc: Doc): void => {
@@ -433,41 +502,50 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
         index > -1 ? textWrapped.splice(index, 1) : textWrapped.push(doc[Id]);
 
         this.textWrappedRows = textWrapped;
-    }
+    };
 
     @computed
     get reactTable() {
         const children = this.childDocs;
         const hasCollectionChild = children.reduce((found, doc) => found || doc.type === DocumentType.COL, false);
         const expanded: { [name: string]: any } = {};
-        Array.from(this._openCollections.keys()).map(col => expanded[col.toString()] = true);
+        Array.from(this._openCollections.keys()).map(col => (expanded[col.toString()] = true));
         const rerender = [...this.textWrappedRows]; // TODO: get component to rerender on text wrap change without needign to console.log :((((
 
-        return <ReactTable
-            style={{ position: "relative" }}
-            data={children}
-            page={0}
-            pageSize={children.length}
-            showPagination={false}
-            columns={this.tableColumns}
-            getTrProps={this.getTrProps}
-            getTdProps={this.getTdProps}
-            sortable={false}
-            TrComponent={MovableRow}
-            sorted={this.sorted}
-            expanded={expanded}
-            resized={this.resized}
-            onResizedChange={this.props.onResizedChange}
-            // if it has a child, render another table with the children
-            SubComponent={!hasCollectionChild ? undefined : row => (row.original.type !== DocumentType.COL) ? (null) :
-                <div style={{ paddingLeft: 57 + "px" }} className="reactTable-sub"><SchemaTable {...this.props} Document={row.original} dataDoc={undefined} childDocs={undefined} /></div>}
-
-        />;
+        return (
+            <ReactTable
+                style={{ position: 'relative' }}
+                data={children}
+                page={0}
+                pageSize={children.length}
+                showPagination={false}
+                columns={this.tableColumns}
+                getTrProps={this.getTrProps}
+                getTdProps={this.getTdProps}
+                sortable={false}
+                TrComponent={MovableRow}
+                sorted={this.sorted}
+                expanded={expanded}
+                resized={this.resized}
+                onResizedChange={this.props.onResizedChange}
+                // if it has a child, render another table with the children
+                SubComponent={
+                    !hasCollectionChild
+                        ? undefined
+                        : row =>
+                              row.original.type !== DocumentType.COL ? null : (
+                                  <div style={{ paddingLeft: 57 + 'px' }} className="reactTable-sub">
+                                      <SchemaTable {...this.props} Document={row.original} dataDoc={undefined} childDocs={undefined} />
+                                  </div>
+                              )
+                }
+            />
+        );
     }
 
     onContextMenu = (e: React.MouseEvent): void => {
-        ContextMenu.Instance.addItem({ description: "Toggle text wrapping", event: this.toggleTextwrap, icon: "table" });
-    }
+        ContextMenu.Instance.addItem({ description: 'Toggle text wrapping', event: this.toggleTextwrap, icon: 'table' });
+    };
 
     getField = (row: number, col?: number) => {
         const docs = this.childDocs;
@@ -484,7 +562,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
             return doc[column];
         }
         return undefined;
-    }
+    };
 
     createTransformer = (row: number, col: number): Transformer => {
         const self = this;
@@ -498,11 +576,11 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
                         const isntPropAccess = !ts.isPropertyAccessExpression(node.parent) || node.parent.expression === node;
                         const isntPropAssign = !ts.isPropertyAssignment(node.parent) || node.parent.name !== node;
                         if (isntPropAccess && isntPropAssign) {
-                            if (node.text === "$r") {
+                            if (node.text === '$r') {
                                 return ts.createNumericLiteral(row.toString());
-                            } else if (node.text === "$c") {
+                            } else if (node.text === '$c') {
                                 return ts.createNumericLiteral(col.toString());
-                            } else if (node.text === "$") {
+                            } else if (node.text === '$') {
                                 if (ts.isCallExpression(node.parent)) {
                                     // captures.doc = self.props.Document;
                                     // captures.key = self.props.fieldKey;
@@ -521,12 +599,11 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
         //     return { capturedVariables: captures };
         // };
 
-        return { transformer, /*getVars*/ };
-    }
+        return { transformer /*getVars*/ };
+    };
 
     setComputed = (script: string, doc: Doc, field: string, row: number, col: number): boolean => {
-        script =
-            `const $ = (row:number, col?:number) => {
+        script = `const $ = (row:number, col?:number) => {
                 const rval = (doc as any)[key][row + ${row}];
                 return col === undefined ? rval : rval[(doc as any)._schemaHeaders[col + ${col}].heading];
             }
@@ -537,7 +614,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
             return true;
         }
         return false;
-    }
+    };
 
     @action
     showDoc = (doc: Doc | undefined, dataDoc?: Doc, screenX?: number, screenY?: number) => {
@@ -545,55 +622,72 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
         if (dataDoc && screenX && screenY) {
             this._showDocPos = this.props.ScreenToLocalTransform().transformPoint(screenX, screenY);
         }
-    }
+    };
 
     onOpenClick = () => {
-        this._showDoc && this.props.addDocTab(this._showDoc, "add:right");
-    }
+        this._showDoc && this.props.addDocTab(this._showDoc, 'add:right');
+    };
 
     getPreviewTransform = (): Transform => {
-        return this.props.ScreenToLocalTransform().translate(- this.borderWidth - 4 - this.tableWidth, - this.borderWidth);
-    }
+        return this.props.ScreenToLocalTransform().translate(-this.borderWidth - 4 - this.tableWidth, -this.borderWidth);
+    };
 
     render() {
-        const preview = "";
-        return <div className="collectionSchemaView-table"
-            onPointerDown={this.props.onPointerDown} onClick={this.props.onClick} onWheel={e => this.props.active(true) && e.stopPropagation()}
-            onDrop={e => this.props.onDrop(e, {})} onContextMenu={this.onContextMenu} >
-            {this.reactTable}
-            {this.props.Document._chromeHidden || this.props.addDocument === returnFalse ? undefined : <div className="collectionSchemaView-addRow" onClick={this.createRow}>+ new</div>}
-            {!this._showDoc ? (null) :
-                <div className="collectionSchemaView-documentPreview" ref="overlay"
-                    style={{
-                        position: "absolute", width: 150, height: 150,
-                        background: "dimgray", display: "block", top: 0, left: 0,
-                        transform: `translate(${this._showDocPos[0]}px, ${this._showDocPos[1] - 180}px)`
-                    }} >
-                    <DocumentView
-                        Document={this._showDoc}
-                        DataDoc={this._showDataDoc}
-                        styleProvider={DefaultStyleProvider}
-                        docViewPath={returnEmptyDoclist}
-                        focus={DocUtils.DefaultFocus}
-                        renderDepth={this.props.renderDepth}
-                        rootSelected={returnFalse}
-                        isContentActive={returnTrue}
-                        isDocumentActive={returnFalse}
-                        PanelWidth={() => 150}
-                        PanelHeight={() => 150}
-                        ScreenToLocalTransform={this.getPreviewTransform}
-                        docFilters={returnEmptyFilter}
-                        docRangeFilters={returnEmptyFilter}
-                        searchFilterDocs={returnEmptyDoclist}
-                        ContainingCollectionDoc={this.props.CollectionView?.props.Document}
-                        ContainingCollectionView={this.props.CollectionView}
-                        moveDocument={this.props.moveDocument}
-                        whenChildContentsActiveChanged={emptyFunction}
-                        addDocTab={this.props.addDocTab}
-                        pinToPres={this.props.pinToPres}
-                        bringToFront={returnFalse}>
-                    </DocumentView>
-                </div>}
-        </div>;
+        const preview = '';
+        return (
+            <div
+                className="collectionSchemaView-table"
+                onPointerDown={this.props.onPointerDown}
+                onClick={this.props.onClick}
+                onWheel={e => this.props.active(true) && e.stopPropagation()}
+                onDrop={e => this.props.onDrop(e, {})}
+                onContextMenu={this.onContextMenu}>
+                {this.reactTable}
+                {this.props.Document._chromeHidden || this.props.addDocument === returnFalse ? undefined : (
+                    <div className="collectionSchemaView-addRow" onClick={this.createRow}>
+                        + new
+                    </div>
+                )}
+                {!this._showDoc ? null : (
+                    <div
+                        className="collectionSchemaView-documentPreview"
+                        ref="overlay"
+                        style={{
+                            position: 'absolute',
+                            width: 150,
+                            height: 150,
+                            background: 'dimgray',
+                            display: 'block',
+                            top: 0,
+                            left: 0,
+                            transform: `translate(${this._showDocPos[0]}px, ${this._showDocPos[1] - 180}px)`,
+                        }}>
+                        <DocumentView
+                            Document={this._showDoc}
+                            DataDoc={this._showDataDoc}
+                            styleProvider={DefaultStyleProvider}
+                            docViewPath={returnEmptyDoclist}
+                            focus={DocUtils.DefaultFocus}
+                            renderDepth={this.props.renderDepth}
+                            rootSelected={returnFalse}
+                            isContentActive={returnTrue}
+                            isDocumentActive={returnFalse}
+                            PanelWidth={() => 150}
+                            PanelHeight={() => 150}
+                            ScreenToLocalTransform={this.getPreviewTransform}
+                            docFilters={returnEmptyFilter}
+                            docRangeFilters={returnEmptyFilter}
+                            searchFilterDocs={returnEmptyDoclist}
+                            ContainingCollectionDoc={this.props.CollectionView?.props.Document}
+                            ContainingCollectionView={this.props.CollectionView}
+                            moveDocument={this.props.moveDocument}
+                            whenChildContentsActiveChanged={emptyFunction}
+                            addDocTab={this.props.addDocTab}
+                            pinToPres={this.props.pinToPres}
+                            bringToFront={returnFalse}></DocumentView>
+                    </div>
+                )}
+            </div>
+        );
     }
-}
\ No newline at end of file
+}