Merge pull request #50 from ShlomoPorges/development

TableGrid work

Author: ShlomoPorges

src/components/DataTable.jsx

@@ -8,6 +8,9 @@ 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 => ({
   root: {
@@ -16,7 +19,7 @@ const styles = theme => ({
     overflowX: 'auto',
   },
   table: {
-    minWidth: 700,
+    minWidth: 500,
   },
 });
 
@@ -34,26 +37,33 @@ function dataTable(props) {
     if (!row) return;
     // for some reason we must put each value in a div.
     return rowHeader.map((header, idx) => (
-      <TableCell key={`td_${idx}`}>
-        <div>{typeof row[header] === 'string' ? row[header] : row[header].toString()}</div>
+      <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 => (
     <TableRow key={`row-${row.id}`}>
       {renderRowCells(row)}
-      <TableCell>
-        <Button onClick={() => deletePropHandler(row.id)}>Delete</Button>
+      <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}>
+      <Table className={classes.table}
+         selectable = {"true"}
+      >
         <TableHead>
-          <TableRow>{renderHeader}</TableRow>
+          <TableRow >{renderHeader}</TableRow>
         </TableHead>
         <TableBody>{renderRows}</TableBody>
       </Table>

src/components/LeftColExpansionPanel.jsx

@@ -15,7 +15,7 @@ const LeftColExpansionPanel = props => {
   const { title, id, color } = component;
 
   function isFocused() {
-    return focusComponent.title === title ? 'focused' : '';
+    return focusComponent.id == id ? 'focused' : '';
   }
 
   return (

src/components/Props.jsx

@@ -172,10 +172,10 @@ class Props extends Component {
         ) : (
           <Fragment>
             <div className="props-container">
-              <Grid container spacing={16}>
-                <Grid item xs={5}>
+              <Grid container spacing={8}>
+                <Grid item xs={4}>
                   <form className="props-input" onSubmit={this.handleAddProp}>
-                    <Grid container spacing={24}>
+                    <Grid container spacing={8}>
                       <Grid item xs={6}>
                         <TextField
                           id="propKey"
@@ -255,7 +255,7 @@ class Props extends Component {
                     </Grid>
                   </form>
                 </Grid>
-                <Grid item xs={11}>
+                <Grid item xs={8}>
                   <DataTable rowHeader={rowHeader} rowData={propsRows} deletePropHandler={deleteProp} />
                 </Grid>
               </Grid>

src/components/TableGrid.jsx

@@ -1,30 +1,30 @@
-import React from 'react';
-import ReactDataGrid from 'react-data-grid';
+// import React from 'react';
+// import ReactDataGrid from 'react-data-grid';
 
-function DataGrid() {
-  const columns = [
-    { key: 'idd', name: 'ID' },
-    { key: 'title', name: 'Title' },
-    { key: 'count', name: 'Count' },
-  ];
+// function DataGrid() {
+//   const columns = [
+//     { key: 'idd', name: 'ID' },
+//     { key: 'title', name: 'Title' },
+//     { key: 'count', name: 'Count' },
+//   ];
 
-  const rows = [
-    { idd: 0, title: 'row1', count: 20 },
-    { idd: 1, title: 'row1', count: 40 },
-    { idd: 2, title: 'row1', count: 60 },
-  ];
+//   const rows = [
+//     { idd: 0, title: 'row1', count: 20 },
+//     { idd: 1, title: 'row1', count: 40 },
+//     { idd: 2, title: 'row1', count: 60 },
+//   ];
 
-  // console.log(`ract data grid: rows`)
-  // console.log(rows)
-  // console.log(`ract data grid: columns`)
-  // console.log(columns)
+//   // console.log(`ract data grid: rows`)
+//   // console.log(rows)
+//   // console.log(`ract data grid: columns`)
+//   // console.log(columns)
 
-  function getRow(i) {
-    console.log(`i=${i} rows{i}= ${rows[i]}`);
-    return rows[i];
-  }
+//   function getRow(i) {
+//     console.log(`i=${i} rows{i}= ${rows[i]}`);
+//     return rows[i];
+//   }
 
-  return <ReactDataGrid columns={columns} rowGetter={i => rows[i]} rowsCount={2} minHeight={200} />;
-}
+//   return <ReactDataGrid columns={columns} rowGetter={i => rows[i]} rowsCount={2} minHeight={200} />;
+// }
 
-export default DataGrid;
+// export default DataGrid;