setup columns drawer

src/components/ColumnDrawer.tsx

@@ -0,0 +1,114 @@
+import React, { useState, useEffect } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Drawer from "@material-ui/core/Drawer";
+import List from "@material-ui/core/List";
+import Divider from "@material-ui/core/Divider";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemText from "@material-ui/core/ListItemText";
+import MailIcon from "@material-ui/icons/Mail";
+import CheckBoxIcon from "@material-ui/icons/CheckBox";
+import SimpleTextIcon from "@material-ui/icons/TextFields";
+import LongTextIcon from "@material-ui/icons/Notes";
+import AddIcon from "@material-ui/icons/Add";
+import PhoneIcon from "@material-ui/icons/Phone";
+
+import IconButton from "@material-ui/core/IconButton";
+import TextField from "@material-ui/core/TextField";
+import _camelCase from "lodash/camelCase";
+
+const FIELDS = [
+  { icon: <SimpleTextIcon />, name: "Simple Text", type: "SIMPLE_TEXT" },
+  { icon: <LongTextIcon />, name: "Long Text", type: "LONG_TEXT" },
+  { icon: <MailIcon />, name: "Email", type: "EMAIL" },
+  { icon: <PhoneIcon />, name: "Phone", type: "PHONE_NUMBER" },
+  { icon: <CheckBoxIcon />, name: "Check Box", type: "CHECK_BOX" }
+];
+const useStyles = makeStyles({
+  list: {
+    width: 250
+  },
+  fields: {
+    padding: 15
+  },
+
+  fullList: {
+    width: "auto"
+  }
+});
+
+export default function ColumnDrawer() {
+  const classes = useStyles();
+  const [drawerState, toggleDrawer] = useState(false);
+  const [columnName, setColumnName] = useState("");
+  const [fieldName, setFieldName] = useState("");
+  useEffect(() => {
+    setFieldName(_camelCase(columnName));
+  }, [columnName]);
+  const sideList = () => (
+    <div
+      className={classes.list}
+      role="presentation"
+      onClick={() => {
+        toggleDrawer(false);
+      }}
+    >
+      <List className={classes.fields}>
+        <TextField
+          autoFocus
+          onChange={e => {
+            setColumnName(e.target.value);
+          }}
+          margin="dense"
+          id="name"
+          label="Table Name"
+          type="text"
+          fullWidth
+        />
+        <TextField
+          value={fieldName}
+          onChange={e => {
+            setFieldName(e.target.value);
+          }}
+          margin="dense"
+          id="field"
+          label="Field Name"
+          type="text"
+          fullWidth
+        />
+      </List>
+      <Divider />
+      <List>
+        {FIELDS.map((field: any) => (
+          <ListItem button key={field.type}>
+            <ListItemIcon>{field.icon}</ListItemIcon>
+            <ListItemText primary={field.name} />
+          </ListItem>
+        ))}
+      </List>
+    </div>
+  );
+
+  return (
+    <div>
+      <IconButton
+        aria-label="add"
+        onClick={() => {
+          toggleDrawer(true);
+        }}
+      >
+        <AddIcon />
+      </IconButton>
+
+      <Drawer
+        anchor="right"
+        open={drawerState}
+        onClose={() => {
+          toggleDrawer(false);
+        }}
+      >
+        {sideList()}
+      </Drawer>
+    </div>
+  );
+}

src/components/Table.tsx

@@ -16,9 +16,10 @@ import {
   TableHeaderProps
 } from "react-virtualized";
 import Button from "@material-ui/core/Button";
-import EditIcon from "@material-ui/icons/Edit";
 
-//  import Skeleton from "@material-ui/lab/Skeleton";
+import { TextField } from "@material-ui/core";
+
+import ColumnDrawer from "./ColumnDrawer";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -95,13 +96,19 @@ class MuiVirtualizedTable extends React.PureComponent<
             : "left"
         }
       >
-        {cellData}
+        <TextField
+          value={cellData}
+          onChange={() => {
+            console.log(columnIndex);
+          }}
+        />
       </TableCell>
     );
   };
 
   headerRenderer = ({
     label,
+    dataKey,
     columnIndex
   }: TableHeaderProps & { columnIndex: number }) => {
     const { headerHeight, columns, classes } = this.props;
@@ -118,9 +125,14 @@ class MuiVirtualizedTable extends React.PureComponent<
         style={{ height: headerHeight }}
         align={columns[columnIndex].numeric || false ? "right" : "left"}
       >
-        <Button size="small">
-          {label} <EditIcon fontSize="small" />
-        </Button>
+        {dataKey === "add" ? (
+          <ColumnDrawer />
+        ) : (
+          <Button size="small">
+            {label}
+            {/* <EditIcon fontSize="small" /> */}
+          </Button>
+        )}
       </TableCell>
     );
   };
@@ -174,20 +186,22 @@ const VirtualizedTable = withStyles(styles)(MuiVirtualizedTable);
 
 export default function fTable(props: any) {
   const { columns, rows } = props;
-  console.log(columns, rows);
   if (columns)
     return (
       <Paper style={{ height: 400, width: "100%" }}>
         <VirtualizedTable
           rowCount={rows.length}
           rowGetter={({ index }) => rows[index]}
-          columns={columns.map(
-            (column: { fieldName: string; name: string; type: string }) => ({
-              width: 200,
-              label: column.name,
-              dataKey: column.fieldName
-            })
-          )}
+          columns={[
+            ...columns.map(
+              (column: { fieldName: string; name: string; type: string }) => ({
+                width: 200,
+                label: column.name,
+                dataKey: column.fieldName
+              })
+            ),
+            { width: 20, label: "add", dataKey: "add" }
+          ]}
         />
       </Paper>
     );