Add table

Author: PrinceSumberia

src/components/CovidApp.js

@@ -47,20 +47,31 @@ const styles = {
     borderRadius: "2rem",
     marginTop: "3rem",
     display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
     padding: "4rem",
+    flexDirection: "column",
+    justifyContent: "center",
   },
   contentArea: {
-    minWidth: "50%",
+    display: "flex",
+  },
+  mapArea: {
+    flex: "1",
   },
   chartArea: {
-    // flex: "1",
     minWidth: "50%",
     display: "flex",
-    flexDirection: "column",
     justifyContent: "center",
-    // alignItems: "center",
+  },
+  tableContainer: {
+    padding: "2rem",
+    margin: "5rem 0",
+  },
+
+  tableHeading: {
+    textAlign: "center",
+    margin: "4rem 0",
+    fontSize: "3rem",
+    // textTransform: "uppercase",
   },
 };
 
@@ -208,17 +219,33 @@ class CovidApp extends Component {
           />
           {!this.state.isLoading && (
             <div className={classes.content}>
-              <div className={classes.contentArea}></div>
+              <div className={classes.contentArea}>
+                <div className={classes.mapArea}>
+                  <Map mapData={mapData} />
+                </div>
+                <div></div>
+              </div>
               <div className={classes.chartArea}>
-                <Map mapData={mapData} />
                 <Charts
                   data={this.state.completeData}
                   isLoading={this.state.isLoading}
                 />
+                <Charts
+                  data={this.state.completeData}
+                  isLoading={this.state.isLoading}
+                />
+              </div>
+              <div className={classes.tableContainer}>
+                <h2 className={classes.tableHeading}>
+                  State/UT Wise Data (Sortable){" "}
+                </h2>
+                <DisplayTable tableData={tableData} />
               </div>
             </div>
           )}
-          <DisplayTable tableData={tableData} />
+          {/* {!this.state.isLoading && (
+           
+          )} */}
         </div>
       </div>
     );

src/components/Overview.js

@@ -17,7 +17,7 @@ const styles = {
   },
   btnBox: {
     position: "absolute",
-    top: "-1.5%",
+    top: "-.5%",
     left: "27%",
     marginLeft: "2rem",
     // transform: "translate(-50%, 0)",

src/components/Table/DisplayTable.css

@@ -5,36 +5,69 @@ table {
 
 thead th {
   text-align: left;
-  border-bottom: 2px solid black;
+  margin-right: 1rem;
+  margin-left: 1rem;
+  color: #1A1053;
+  /* border-bottom: 2px solid black; */
 }
 
 thead button {
+  font-family: inherit;
+  width: 100%;
   border: 0;
-  border-radius: none;
+  border-radius: 2rem;
   font-family: inherit;
   font-weight: 700;
   font-size: inherit;
-  padding: 0.5em;
+  padding: 1rem 2rem;
+  text-align: left;
   margin-bottom: 1px;
+  color: #1A1053;
+
+  /* margin: 1rem; */
+  transition: all .4s;
+}
+
+thead button:hover,
+thead button:focus {
+  outline: none;
+  border: none;
 }
 
 thead button.ascending::after {
-  content: '👇';
+  content: '\2193';
   display: inline-block;
   margin-left: 1em;
 }
 
 thead button.descending::after {
-  content: '☝️';
+  content: '\2191';
   display: inline-block;
   margin-left: 1em;
 }
 
 tbody td {
-  padding: 0.5em;
-  border-bottom: 1px solid #ccc;
+  padding: 1rem;
+  color: #817C9B;
+  /* border-radius: 2rem; */
+  padding: 1rem 2rem;
+  margin-top: 5rem;
+  /* background-color: #ccc; */
+  /* border-bottom: 1px solid #ccc; */
+
+}
+
+tbody tr {
+  border-radius: 2rem;
+  /* transition: background-color .5s; */
 }
 
 tbody tr:hover {
-  background-color: #eee;
+  background-color: #1A1053;
+  transition: all .3s;
+
+}
+
+tbody tr:hover td {
+  color: #fff;
 }