Make table responsive

src/components/ResponsiveTable.js

@@ -0,0 +1,64 @@
+import React from "react";
+import { makeStyles } 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 TableContainer from "@material-ui/core/TableContainer";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import Paper from "@material-ui/core/Paper";
+
+const useStyles = makeStyles({
+  table: {
+    minWidth: 650,
+  },
+});
+
+function createData(name, calories, fat, carbs, protein) {
+  return { name, calories, fat, carbs, protein };
+}
+
+// tableData = { data };
+// districtLevel = { districtLevel };
+// isDarkMode = { isDarkMode };
+
+const rows = [
+  createData("Frozen yoghurt", 159, 6.0, 24, 4.0),
+  createData("Ice cream sandwich", 237, 9.0, 37, 4.3),
+  createData("Eclair", 262, 16.0, 24, 6.0),
+  createData("Cupcake", 305, 3.7, 67, 4.3),
+  createData("Gingerbread", 356, 16.0, 49, 3.9),
+];
+
+export default function SimpleTable(props) {
+  const classes = useStyles();
+
+  return (
+    <TableContainer component={Paper}>
+      <Table className={classes.table} aria-label="simple table">
+        <TableHead>
+          <TableRow>
+            <TableCell>Name</TableCell>
+            <TableCell align="right">Confirmed</TableCell>
+            <TableCell align="right">Active</TableCell>
+            <TableCell align="right">Recovered</TableCell>
+            <TableCell align="right">Deceased</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {props.tableData.map((row) => (
+            <TableRow key={row.state}>
+              <TableCell component="th" scope="row">
+                {row.state}
+              </TableCell>
+              <TableCell align="right">{row.confirmed}</TableCell>
+              <TableCell align="right">{row.active}</TableCell>
+              <TableCell align="right">{row.recovered}</TableCell>
+              <TableCell align="right">{row.deaths}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}

src/styles/DisplayTable.css

@@ -40,13 +40,13 @@ table {
 .tableHead-Button.ascending::after {
   content: '\2193';
   display: inline-block;
-  margin-left: 1em;
+  margin-left: 1rem;
 }
 
 .tableHead-Button.descending::after {
   content: '\2191';
   display: inline-block;
-  margin-left: 1em;
+  margin-left: 1rem;
 }
 
 .state-td {
@@ -147,6 +147,17 @@ table {
   .districtHead {
     padding: .2rem;
     margin: 0;
-    /* font-size: 1rem; */
   }
+}
+
+@media (max-width: 575px) {
+  .state-td {
+    padding: 1rem;
+    margin-top: 2.5rem;
+  }
+
+  .state-tr {
+    border-radius: 1rem;
+  }
+
 }