add in table formatting

Author: carlyjackson

app/src/components/StateManagement/CreateTab/CreateContainer.tsx

@@ -80,16 +80,16 @@ const CreateContainer = ({isThemeLight, data}) => {
   };
   return (
     <>
-      <Grid container display="flex" justifyContent="space-evenly">
-        <Grid item>
+      <Grid container display="flex" justifyContent="stretch" flexDirection="column">
+        {/* <Grid item>
           <Grid
             container
             spacing={2}
             display="flex"
             direction="column"
             justifyContent="center"
-            alignItems="center"
-          >
+            alignItems="center" */}
+          {/* > */}
             {/* LegacyPD deleted the components below because we're going to replace with the component from CreationPanel */}
             {/* <Grid item>
               <AddContextForm
@@ -109,11 +109,11 @@ const CreateContainer = ({isThemeLight, data}) => {
                 contextInput={contextInput}
               />
             </Grid> */}
-            <Grid item>
+            {/* <Grid item> */}
             <StatePropsPanel isThemeLight={isThemeLight} data={data}/>
-            </Grid>
-          </Grid>
-        </Grid>
+            {/* </Grid> */}
+          {/* </Grid> */}
+        {/* </Grid> */}
 
         {/* 
           LegacyPD commented out the below to move to DisplayContainer

app/src/components/StateManagement/CreateTab/components/StatePropsPanel.tsx

@@ -229,22 +229,32 @@ const StatePropsPanel = ({ isThemeLight, data}): JSX.Element => {
         </FormControl>
       </div>
       <br></br>
-      <div style={{display: 'flex', overflowX: 'scroll', width: '1000px'}}>
+      <div style={{display: 'flex', overflowX: 'scroll', width: '1700px'}}>
+        <div style={{display: 'flex', flexDirection: 'column'}}>
         <h4  className={isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor}>
           Current Component State: {state.components[state.canvasFocus.componentId - 1].name}
         </h4>
         <TableStateProps rows1={rows1} setRows1={setRows1} canDeleteState = {true} selectHandler={handlerRowSelect} isThemeLight={isThemeLight} data={data}/>
+        </div>
 
-          
-        <h4  className={isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor}>
+        <div style={{display: 'flex', flexDirection: 'column'}}>
+        <h4 className={isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor}>
           Available Props from Parent: {parentName ? parentName : 'No Parents'}
         </h4>
-    
         <TableParentProps parentComponent ={parentComponent} parentProps={parentProps} canDeleteState = {true} selectHandler={handlerRowSelect} isThemeLight={isThemeLight} data={data}/>
+        </div>
+        <div style={{display: 'flex', flexDirection: 'column', width: `${40}px`, color: 'black', alignItems: 'center'}}>
+        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-arrow-right-circle-fill" viewBox="0 0 16 16">
+  <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/>
+</svg>
+      </div>
+
+        <div style={{display: 'flex', flexDirection: 'column'}}>
         <h4  className={isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor}>
         Passed in Props from Parent: {parentName ? parentName : 'No Parents'}
         </h4>
         <Table3 canDeleteState = {true} selectHandler={handlerRowSelect} isThemeLight={isThemeLight} data={data}/>
+        </div>
 
 
 

app/src/components/StateManagement/CreateTab/components/Table3.tsx

@@ -133,18 +133,14 @@ const Table3 = props => {
 
   return (
     <div className={'state-prop-grid'}>
-      ({rows.length &&
         <DataGrid
           rows={rows}
           columns={gridColumns}
           pageSize={5}
           editRowsModel={editRowsModel}
           onRowClick={deleteParentProps}
           className={props.isThemeLight ? classes.themeLight : classes.themeDark}
-          checkboxSelection
         />
-      })
-      
     </div>
   );
 };

app/src/components/StateManagement/CreateTab/components/TableParentProps.tsx

@@ -23,31 +23,31 @@ const TableParentProps = props => {
     {
       field: 'id',
       headerName: 'ID',
-      width: 70,
+      width: 50,
       editable: false
     },
     {
       field: 'key',
       headerName: 'Key',
-      width: 90,
+      width: 50,
       editable: true
     },
     {
       field: 'value',
       headerName: 'Value',
-      width: 90,
+      width: 50,
       editable: true
     },
     {
       field: 'type',
       headerName: 'Type',
-      width: 90,
+      width: 50,
       editable: false
     },
     {
       field: 'delete',
       headerName: '+',
-      width: 70,
+      width: 50,
       editable: false,
       renderCell: function renderCell(params: any) {
         return (
@@ -130,17 +130,14 @@ const TableParentProps = props => {
 
 
   return (
-    <div className={'state-prop-grid'}>
-         {(rows.length &&   
+    <div className={'state-prop-grid'}> 
       <DataGrid
         rows={rows}
         columns={gridColumns}
         pageSize={5}
         editRowsModel={editRowsModel}
         className={props.isThemeLight ? classes.themeLight : classes.themeDark}
-        // checkboxSelection
       />
-         )}
     </div>
   );
 };

app/src/components/StateManagement/CreateTab/components/TableStateProps.tsx

@@ -26,31 +26,31 @@ const TableStateProps = props => {
     {
       field: 'id',
       headerName: 'ID',
-      width: 70,
+      width: 50,
       editable: false
     },
     {
       field: 'key',
       headerName: 'Key',
-      width: 90,
+      width: 50,
       editable: true
     },
     {
       field: 'value',
       headerName: 'Value',
-      width: 90,
+      width: 50,
       editable: true
     },
     {
       field: 'type',
       headerName: 'Type',
-      width: 90,
+      width: 50,
       editable: false
     },
     {
       field: 'delete',
       headerName: 'X',
-      width: 70,
+      width: 50,
       editable: false,
       renderCell: function renderCell(params: any) {
         return (

app/src/public/styles/style.css

@@ -44,7 +44,7 @@ h4 {
 }
 .state-prop-grid {
   height: 300px;
-  width: 500px;
+  width: max-content;
   flex-grow: 1;
 }
 .HTMLItemCreate {