data table margin fix

Author: tolgamizrakci

main.js

@@ -1,12 +1,18 @@
 const {
-  app, BrowserWindow, Menu, shell, dialog, ipcMain,
-} = require('electron');
+  app,
+  BrowserWindow,
+  Menu,
+  shell,
+  dialog,
+  ipcMain
+} = require("electron");
 
 // Uncomment below for hot reloading during development
-require('electron-reload')(__dirname);
+require("electron-reload")(__dirname);
 
 // const isDev = true;
-const isDev = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test';
+const isDev =
+  process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test";
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
@@ -16,76 +22,76 @@ let mainWindow;
 function openFile() {
   // Opens file dialog looking for markdown
   const files = dialog.showOpenDialog(mainWindow, {
-    properties: ['openFile'],
+    properties: ["openFile"],
     filters: [
       {
-        name: 'Images',
-        extensions: ['jpeg', 'jpg', 'png', 'gif', 'pdf'],
-      },
-    ],
+        name: "Images",
+        extensions: ["jpeg", "jpg", "png", "gif", "pdf"]
+      }
+    ]
   });
 
   // if no files
   if (!files) return;
   const file = files[0];
 
   // Send fileContent to renderer
-  mainWindow.webContents.send('new-file', file);
+  mainWindow.webContents.send("new-file", file);
 }
 
 // Choose directory
-ipcMain.on('choose_app_dir', (event) => {
+ipcMain.on("choose_app_dir", event => {
   const directory = dialog.showOpenDialog(mainWindow, {
-    properties: ['openDirectory'],
-    buttonLabel: 'Export',
+    properties: ["openDirectory"],
+    buttonLabel: "Export"
   });
 
   if (!directory) return;
-  event.sender.send('app_dir_selected', directory[0]);
+  event.sender.send("app_dir_selected", directory[0]);
 });
 
-ipcMain.on('view_app_dir', (event, appDir) => {
+ipcMain.on("view_app_dir", (event, appDir) => {
   shell.openItem(appDir);
 });
 
 // Update file
-ipcMain.on('update-file', () => {
+ipcMain.on("update-file", () => {
   openFile();
 });
 
 const createWindow = () => {
   // Create the browser window.
   // eslint-disable-next-line
-  const { width, height } = require('electron').screen.getPrimaryDisplay().size;
+  const { width, height } = require("electron").screen.getPrimaryDisplay().size;
   mainWindow = new BrowserWindow({
     width,
     height,
     webPreferences: {
-      zoomFactor: 0.9,
-      'node-Integration': false,
+      zoomFactor: 0.7,
+      "node-Integration": false
     },
-    show: false,
+    show: false
   });
 
   // and load the index.html of the app.
   mainWindow.loadURL(`file://${__dirname}/build/index.html`);
   // load page once window is loaded
-  mainWindow.once('ready-to-show', () => {
+  mainWindow.once("ready-to-show", () => {
     mainWindow.show();
   });
 
   const template = [
     {
-      label: 'File',
+      label: "File",
       submenu: [
         {
-          label: 'Open File',
-          accelerator: process.platform === 'darwin' ? 'Cmd+O' : 'Ctrl+Shift+O',
+          label: "Open File",
+          accelerator: process.platform === "darwin" ? "Cmd+O" : "Ctrl+Shift+O",
           click() {
             openFile();
-          },
-        },
-      ],
+          }
+        }
+      ]
     },
     // {
     //   label: 'Edit',
@@ -102,89 +108,90 @@ const createWindow = () => {
     //   ],
     // },
     {
-      label: 'View',
+      label: "View",
       submenu: [
-        { role: 'reload' },
-        { role: 'forcereload' },
-        { type: 'separator' },
-        { role: 'resetzoom' },
-        { role: 'zoomin' },
-        { role: 'zoomout' },
-        { type: 'separator' },
-        { role: 'togglefullscreen' },
-      ],
+        { role: "reload" },
+        { role: "forcereload" },
+        { type: "separator" },
+        { role: "resetzoom" },
+        { role: "zoomin" },
+        { role: "zoomout" },
+        { type: "separator" },
+        { role: "togglefullscreen" }
+      ]
     },
     {
-      role: 'window',
-      submenu: [{ role: 'minimize' }, { role: 'close' }],
+      role: "window",
+      submenu: [{ role: "minimize" }, { role: "close" }]
     },
     {
-      role: 'help',
+      role: "help",
       submenu: [
         {
-          label: 'Learn More',
+          label: "Learn More",
           click() {
-            shell.openExternal('https://electronjs.org');
-          },
-        },
-      ],
+            shell.openExternal("https://electronjs.org");
+          }
+        }
+      ]
     },
     {
-      label: 'Developer',
+      label: "Developer",
       submenu: [
         {
-          label: 'Toggle Developer Tools',
-          accelerator: process.platform === 'darwin' ? 'Alt+Command+I' : 'Ctrl+Shift+I',
+          label: "Toggle Developer Tools",
+          accelerator:
+            process.platform === "darwin" ? "Alt+Command+I" : "Ctrl+Shift+I",
           click() {
             mainWindow.webContents.toggleDevTools();
-          },
-        },
-      ],
-    },
+          }
+        }
+      ]
+    }
   ];
 
-  if (process.platform === 'darwin') {
+  if (process.platform === "darwin") {
     template.unshift({
       label: app.getName(),
       submenu: [
-        { role: 'about' },
-        { type: 'separator' },
-        { role: 'services', submenu: [] },
-        { type: 'separator' },
-        { role: 'hide' },
-        { role: 'hideothers' },
-        { role: 'unhide' },
-        { type: 'separator' },
-        { role: 'quit' },
-      ],
+        { role: "about" },
+        { type: "separator" },
+        { role: "services", submenu: [] },
+        { type: "separator" },
+        { role: "hide" },
+        { role: "hideothers" },
+        { role: "unhide" },
+        { type: "separator" },
+        { role: "quit" }
+      ]
     });
 
     // Edit menu
     template[2].submenu.push(
       {
-        type: 'separator',
+        type: "separator"
       },
       {
-        label: 'Speech',
-        submenu: [{ role: 'startspeaking' }, { role: 'stopspeaking' }],
-      },
+        label: "Speech",
+        submenu: [{ role: "startspeaking" }, { role: "stopspeaking" }]
+      }
     );
 
     // Window menu
     template[4].submenu = [
-      { role: 'close' },
-      { role: 'minimize' },
-      { role: 'zoom' },
-      { type: 'separator' },
-      { role: 'front' },
+      { role: "close" },
+      { role: "minimize" },
+      { role: "zoom" },
+      { type: "separator" },
+      { role: "front" }
     ];
   }
 
   const menu = Menu.buildFromTemplate(template);
   Menu.setApplicationMenu(menu);
 
   // Emitted when the window is closed.
-  mainWindow.on('closed', () => {
+  mainWindow.on("closed", () => {
     // Dereference the window object, usually you would store windows
     // in an array if your app supports multi windows, this is the time
     // when you should delete the corresponding element.
@@ -195,13 +202,13 @@ const createWindow = () => {
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
-app.on('ready', () => {
+app.on("ready", () => {
   if (isDev) {
     const {
       default: installExtension,
       REACT_DEVELOPER_TOOLS,
-      REDUX_DEVTOOLS,
-    } = require('electron-devtools-installer');
+      REDUX_DEVTOOLS
+    } = require("electron-devtools-installer");
 
     installExtension([REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS])
       .then(() => {
@@ -214,15 +221,15 @@ app.on('ready', () => {
 });
 
 // Quit when all windows are closed.
-app.on('window-all-closed', () => {
+app.on("window-all-closed", () => {
   // On OS X it is common for applications and their menu bar
   // to stay active until the user quits explicitly with Cmd + Q
-  if (process.platform !== 'darwin') {
+  if (process.platform !== "darwin") {
     app.quit();
   }
 });
 
-app.on('activate', () => {
+app.on("activate", () => {
   // On OS X it's common to re-create a window in the app when the
   // dock icon is clicked and there are no other windows open.
   if (mainWindow === null) {

src/components/DataTable.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+// import PropTypes from 'prop-types';
+import { withStyles } from "@material-ui/core/styles";
+import Table from "@material-ui/core/Table";
+import TableBody from "@material-ui/core/TableBody";
+import TableCell from "@material-ui/core/TableCell";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import Paper from "@material-ui/core/Paper";
+import Button from "@material-ui/core/Button";
+import DeleteIcon from "@material-ui/icons/Delete";
+import { IconButton } from "@material-ui/core";
+
+const styles = (theme: any) => ({
+  root: {
+    width: "80%",
+    marginTop: theme.spacing.unit * 3,
+    marginRight: "100px"
+    // overflowX: "auto"
+  },
+  table: {
+    minWidth: 500,
+    marginRight: "100px"
+  }
+});
+
+/** **************************
+ * cannot have a row header or a key in the data  called "key"
+ * ,ust have unique id
+ * ****************************** */
+
+function dataTable(props: any) {
+  const { classes, rowData, rowHeader, deletePropHandler } = props;
+
+  const renderHeader = rowHeader.map((col: any, idx: number) => (
+    <TableCell key={`head_+${idx}`}>{col}</TableCell>
+  ));
+
+  function renderRowCells(row: any) {
+    if (!row) return;
+    // for some reason we must put each value in a div.
+    return rowHeader.map((header: string, idx: number) => (
+      <TableCell align={"center"} key={`td_${idx}`}>
+        {/* <div  align={'center'} padding = {'none'} >{typeof row[header] === 'string' ? row[header] : row[header].toString()}</div> */}
+        {/* {row[header]} */}
+        {typeof row[header] === "string" ? row[header] : row[header].toString()}
+      </TableCell>
+    ));
+  }
+  // style={{height: 30}}
+  const renderRows = rowData.map((row: any) => (
+    <TableRow key={`row-${row.id}`}>
+      {renderRowCells(row)}
+      <TableCell align={"center"} padding={"none"}>
+        <IconButton
+          color="default"
+          fontSize="small"
+          onClick={() => deletePropHandler(row.id)}
+        >
+          <DeleteIcon />
+        </IconButton>
+        {/* <Button style={{height: 20}} onClick={() => deletePropHandler(row.id)}>Delete</Button> */}
+      </TableCell>
+    </TableRow>
+  ));
+
+  return (
+    <Paper className={classes.root}>
+      <Table className={classes.table} selectable={"true"}>
+        <TableHead>
+          <TableRow>{renderHeader}</TableRow>
+        </TableHead>
+        <TableBody>{renderRows}</TableBody>
+      </Table>
+    </Paper>
+  );
+}
+
+// dataTable.propTypes = {
+//   classes: PropTypes.object.isRequired,
+// };
+
+export default withStyles(styles)(dataTable);

src/components/Props.jsx

@@ -181,7 +181,7 @@ class Props extends Component {
           <Fragment>
             <div className="props-container" style={{ marginTop: '20px', width: '90%', height: '80%' }}>
               <Grid container spacing={8}>
-                <Grid item xs={4}>
+                <Grid item xs={3}>
                   <form className="props-input" onSubmit={this.handleAddProp}>
                     <Grid container spacing={8}>
                       <Grid item xs={6}>
@@ -266,6 +266,7 @@ class Props extends Component {
                 <Grid item xs={8}>
                   <DataTable rowHeader={rowHeader} rowData={propsRows} deletePropHandler={deleteProp} />
                 </Grid>
+                <Grid item xs={1} />
               </Grid>
               {/* <div className="chips">
               {focusComponent.props.map(({