From fbc00b151e31e19b778b1ed2c39d3d780e7819b8 Mon Sep 17 00:00:00 2001
From: shams mosowi <shams.mosowi@gmail.com>
Date: Fri, 20 Sep 2019 11:46:38 +1000
Subject: [PATCH] column editor popper setup

---
 src/components/Table/HeaderPopper.tsx | 42 +++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 src/components/Table/HeaderPopper.tsx

diff --git a/src/components/Table/HeaderPopper.tsx b/src/components/Table/HeaderPopper.tsx
new file mode 100644
index 00000000..b7573c5b
--- /dev/null
+++ b/src/components/Table/HeaderPopper.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+import Button from "@material-ui/core/Button";
+import Typography from "@material-ui/core/Typography";
+import Popper from "@material-ui/core/Popper";
+import Fade from "@material-ui/core/Fade";
+import Paper from "@material-ui/core/Paper";
+import { createStyles, Theme, makeStyles } from "@material-ui/core/styles";
+const useStyles = makeStyles(Theme =>
+  createStyles({
+    typography: {
+      padding: 1
+    },
+    header: {
+      position: "absolute",
+      left: 0,
+      top: 0
+      //zIndex: 100000
+    },
+    button: {
+      // margin: theme.spacing(1)
+    }
+  })
+);
+const HeaderPopper = (props: any) => {
+  const { anchorEl } = props;
+  const classes = useStyles();
+  return (
+    <Popper id={"id"} open={!!anchorEl} anchorEl={anchorEl} transition>
+      {({ TransitionProps }) => (
+        <Fade {...TransitionProps} timeout={350}>
+          <Paper>
+            <Typography className={classes.typography}>
+              The content of the Popper.
+            </Typography>
+          </Paper>
+        </Fade>
+      )}
+    </Popper>
+  );
+};
+
+export default HeaderPopper;