diff --git a/src/components/Fields/DateTime.tsx b/src/components/Fields/DateTime.tsx
deleted file mode 100644
index 487ee1d1..00000000
--- a/src/components/Fields/DateTime.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from "react";
-import "date-fns";
-import DateFnsUtils from "@date-io/date-fns";
-import {
-  MuiPickersUtilsProvider,
-  // KeyboardTimePicker,
-  // KeyboardDatePicker,
-  DateTimePicker
-} from "@material-ui/pickers";
-import Button from "@material-ui/core/Button";
-
-const DateTime = (props: any) => {
-  const {
-    isFocusedCell,
-    columnData,
-    cellData,
-    cellActions,
-    rowData,
-    rowIndex
-  } = props;
-  function handleDateChange(date: Date | null) {
-    if (date) {
-      const cell = {
-        rowIndex,
-        value: date,
-        docRef: rowData.ref,
-        fieldName: columnData.fieldName
-      };
-      cellActions.updateFirestore(cell);
-    }
-  }
-  if (!cellData && !isFocusedCell) return <Button>click to set</Button>;
-  else
-    return (
-      <MuiPickersUtilsProvider utils={DateFnsUtils}>
-        <DateTimePicker
-          value={cellData && cellData.toDate()}
-          onChange={handleDateChange}
-          emptyLabel="select a date"
-        />
-      </MuiPickersUtilsProvider>
-    );
-};
-export default DateTime;
diff --git a/src/components/Fields/Number.tsx b/src/components/Fields/Number.tsx
index 88278fa0..ff693937 100644
--- a/src/components/Fields/Number.tsx
+++ b/src/components/Fields/Number.tsx
@@ -1,18 +1,15 @@
 import React from "react";
 import TextField from "@material-ui/core/TextField";
 const Number = (props: any) => {
-  const { isFocusedCell, cellData, cellActions } = props;
-  if (isFocusedCell)
-    return (
-      <TextField
-        autoFocus
-        type="number"
-        defaultValue={cellData}
-        onChange={e => {
-          cellActions.update(e.target.value);
-        }}
-      />
-    );
-  else return <p>{cellData}</p>;
+  const { value, cellActions } = props;
+  return (
+    <TextField
+      autoFocus
+      type="number"
+      defaultValue={value}
+      onChange={e => {}}
+    />
+  );
+  // else return <p>{cellData}</p>;
 };
 export default Number;
diff --git a/src/components/OldTable.tsx b/src/components/OldTable.tsx
deleted file mode 100644
index 26793a4e..00000000
--- a/src/components/OldTable.tsx
+++ /dev/null
@@ -1,260 +0,0 @@
-import React, { useEffect } from "react";
-import clsx from "clsx";
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
-import { TableCell as MuiTableCell } from "@material-ui/core";
-import Paper from "@material-ui/core/Paper";
-import {
-  AutoSizer,
-  Column,
-  Table as MuiTable,
-  TableCellRenderer,
-  TableHeaderProps
-} from "react-virtualized";
-import Button from "@material-ui/core/Button";
-
-import { FieldType, getFieldIcon } from "./Fields";
-import ColumnDrawer from "./ColumnDrawer";
-import TableCell from "../components/TableCell";
-
-import useCell, { Cell } from "../hooks/useFiretable/useCell";
-import useFiretable from "../hooks/useFiretable";
-
-const styles = (theme: Theme) =>
-  createStyles({
-    flexContainer: {
-      display: "flex",
-      alignItems: "center",
-      boxSizing: "border-box"
-    },
-    tableRow: {
-      cursor: "pointer"
-    },
-    tableRowHover: {
-      "&:hover": {
-        backgroundColor: theme.palette.grey[200]
-      }
-    },
-    tableCell: {
-      flex: 1
-    },
-    noClick: {
-      cursor: "initial"
-    }
-  });
-
-interface ColumnData {
-  columnData: any;
-  dataKey: string;
-  label: string;
-  numeric?: boolean;
-  width: number;
-}
-
-interface Row {
-  index: number;
-}
-
-interface MuiVirtualizedTableProps extends WithStyles<typeof styles> {
-  columns: ColumnData[];
-  focusedCell: Cell | null;
-  cellActions: any;
-  headerHeight?: number;
-  onRowClick?: () => void;
-  rowCount: number;
-  rowGetter: (row: Row) => any;
-  rowHeight?: number;
-}
-
-class MuiVirtualizedTable extends React.PureComponent<
-  MuiVirtualizedTableProps
-> {
-  static defaultProps = {
-    headerHeight: 48,
-    rowHeight: 40
-  };
-
-  getRowClassName = ({ index }: Row) => {
-    const { classes, onRowClick } = this.props;
-
-    return clsx(classes.tableRow, classes.flexContainer, {
-      [classes.tableRowHover]: index !== -1 && onRowClick != null
-    });
-  };
-
-  cellRenderer: TableCellRenderer = ({
-    cellData,
-    columnData,
-    columnIndex,
-    dataKey,
-    isScrolling,
-    rowData,
-    rowIndex
-  }) => {
-    const {
-      columns,
-      classes,
-      rowHeight,
-      onRowClick,
-      cellActions,
-      focusedCell
-    } = this.props;
-    const fieldType = columnData.fieldType;
-    return (
-      <TableCell
-        fieldType={fieldType}
-        rowIndex={rowIndex}
-        rowData={rowData}
-        columnData={columnData}
-        classes={classes}
-        cellActions={cellActions}
-        cellData={cellData}
-        onRowClick={onRowClick}
-        rowHeight={rowHeight}
-        columnIndex={columnIndex}
-        columns={columns}
-        focusedCell={focusedCell}
-      />
-    );
-  };
-  headerRenderer = ({
-    label,
-    columnData,
-    dataKey,
-    columnIndex
-  }: TableHeaderProps & { columnIndex: number }) => {
-    const { headerHeight, columns, classes } = this.props;
-
-    return (
-      <MuiTableCell
-        component="div"
-        className={clsx(
-          classes.tableCell,
-          classes.flexContainer,
-          classes.noClick
-        )}
-        variant="head"
-        style={{ height: headerHeight }}
-        align={columns[columnIndex].numeric || false ? "right" : "left"}
-      >
-        {dataKey === "add" ? (
-          <ColumnDrawer
-            columns={columns}
-            addColumn={columnData.actions.addColumn}
-          />
-        ) : (
-          <Button size="small">
-            {getFieldIcon(columnData.fieldType)} {label}
-          </Button>
-        )}
-      </MuiTableCell>
-    );
-  };
-
-  render() {
-    const {
-      classes,
-      columns,
-      rowHeight,
-      headerHeight,
-      ...tableProps
-    } = this.props;
-    return (
-      <AutoSizer>
-        {({ height, width }) => (
-          <>
-            <MuiTable
-              height={height}
-              width={width}
-              rowHeight={rowHeight!}
-              headerHeight={headerHeight!}
-              {...tableProps}
-              rowClassName={this.getRowClassName}
-            >
-              {[
-                ...columns.map(({ dataKey, ...other }, index) => {
-                  return (
-                    <Column
-                      key={dataKey}
-                      headerRenderer={headerProps =>
-                        this.headerRenderer({
-                          ...headerProps,
-                          columnIndex: index
-                        })
-                      }
-                      className={classes.flexContainer}
-                      cellRenderer={this.cellRenderer}
-                      dataKey={dataKey}
-                      {...other}
-                    />
-                  );
-                })
-              ]}
-            </MuiTable>
-          </>
-        )}
-      </AutoSizer>
-    );
-  }
-}
-
-const VirtualizedTable = withStyles(styles)(MuiVirtualizedTable);
-
-export default function Table(props: any) {
-  const { collection } = props;
-  const { tableState, tableActions } = useFiretable(collection);
-
-  useEffect(() => {
-    tableActions.table.set(collection);
-  }, [collection]);
-
-  if (tableState.columns)
-    return (
-      <>
-        <Paper style={{ height: 400, width: "100%" }}>
-          <VirtualizedTable
-            focusedCell={tableState.cell}
-            cellActions={tableActions.cell}
-            rowCount={tableState.rows.length}
-            rowGetter={({ index }) => tableState.rows[index]}
-            columns={[
-              ...tableState.columns.map(
-                (column: {
-                  fieldName: string;
-                  columnName: string;
-                  type: FieldType;
-                }) => ({
-                  width: 200,
-                  label: column.columnName,
-                  dataKey: column.fieldName,
-                  columnData: {
-                    fieldType: column.type,
-                    fieldName: column.fieldName,
-                    actions: {}
-                  }
-                })
-              ),
-              {
-                width: 80,
-                label: "add",
-                dataKey: "add",
-                columnData: {
-                  fieldType: "DELETE",
-                  actions: {
-                    addColumn: tableActions.column.add,
-                    deleteRow: tableActions.row.delete
-                  }
-                }
-              }
-            ]}
-          />
-        </Paper>
-        <Button onClick={tableActions.row.add}>Add Row</Button>
-      </>
-    );
-  else return <>insert loading Skeleton here</>;
-}
diff --git a/src/components/TableCell.tsx b/src/components/TableCell.tsx
deleted file mode 100644
index 58250e90..00000000
--- a/src/components/TableCell.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-import React, { useState } from "react";
-import { TableCell as MuiTableCell, Switch } from "@material-ui/core";
-import clsx from "clsx";
-import { FieldType } from "./Fields";
-
-import IconButton from "@material-ui/core/IconButton";
-import DeleteIcon from "@material-ui/icons/Delete";
-
-import SimpleText from "./Fields/SimpleText";
-import CheckBox from "./Fields/CheckBox";
-
-import Number from "./Fields/Number";
-import Rating from "./Fields/Rating";
-import Date from "./Fields/Date";
-import DateTime from "./Fields/DateTime";
-import Image from "./Fields/Image";
-
-const TableCell = (props: any) => {
-  const {
-    fieldType,
-    rowIndex,
-    rowData,
-    columnData,
-    classes,
-    cellActions,
-    cellData,
-    onRowClick,
-    rowHeight,
-    columnIndex,
-    columns,
-    focusedCell
-  } = props;
-  const isFocusedCell =
-    focusedCell &&
-    focusedCell.fieldName === columnData.fieldName &&
-    focusedCell.rowIndex === rowIndex;
-
-  const renderCell = () => {
-    switch (fieldType) {
-      case FieldType.checkBox:
-        return (
-          <CheckBox
-            rowIndex={rowIndex}
-            rowData={rowData}
-            isFocusedCell={isFocusedCell}
-            cellData={cellData}
-            cellActions={cellActions}
-            columnData={columnData}
-          />
-        );
-      case FieldType.rating:
-        return (
-          <Rating
-            rowIndex={rowIndex}
-            rowData={rowData}
-            isFocusedCell={isFocusedCell}
-            cellData={cellData}
-            cellActions={cellActions}
-            columnData={columnData}
-          />
-        );
-      case FieldType.image:
-        return (
-          <Image
-            rowIndex={rowIndex}
-            rowData={rowData}
-            isFocusedCell={isFocusedCell}
-            cellData={cellData}
-            cellActions={cellActions}
-            columnData={columnData}
-          />
-        );
-      case FieldType.date:
-        return (
-          <Date
-            rowIndex={rowIndex}
-            rowData={rowData}
-            isFocusedCell={isFocusedCell}
-            cellData={cellData}
-            cellActions={cellActions}
-            columnData={columnData}
-          />
-        );
-      case FieldType.dateTime:
-        return (
-          <DateTime
-            rowIndex={rowIndex}
-            rowData={rowData}
-            isFocusedCell={isFocusedCell}
-            cellData={cellData}
-            cellActions={cellActions}
-            columnData={columnData}
-          />
-        );
-      case FieldType.number:
-        return (
-          <Number
-            isFocusedCell={isFocusedCell}
-            cellData={cellData}
-            cellActions={cellActions}
-            columnData={columnData}
-          />
-        );
-      default:
-        return (
-          <SimpleText
-            isFocusedCell={isFocusedCell}
-            cellData={cellData}
-            cellActions={cellActions}
-            columnData={columnData}
-          />
-        );
-    }
-  };
-  if (fieldType === "DELETE")
-    return (
-      <IconButton
-        aria-label="delete"
-        onClick={() => {
-          columnData.actions.deleteRow(rowIndex, rowData.id);
-        }}
-      >
-        <DeleteIcon />
-      </IconButton>
-    );
-
-  return (
-    <MuiTableCell
-      component="div"
-      className={clsx(classes.tableCell, classes.flexContainer, {
-        [classes.noClick]: onRowClick == null
-      })}
-      variant="body"
-      onClick={() => {
-        // set focusedCell on click
-        cellActions.set({
-          rowIndex,
-          docRef: rowData.ref,
-          fieldName: columnData.fieldName,
-          value: cellData
-        });
-      }}
-      style={{ height: rowHeight }}
-      align={
-        (columnIndex != null && columns[columnIndex].numeric) || false
-          ? "right"
-          : "left"
-      }
-    >
-      {renderCell()}
-    </MuiTableCell>
-  );
-};
-export default TableCell;