From bb5990c4d54f6e77ab0c0f2352f817e355637fd9 Mon Sep 17 00:00:00 2001
From: Krzysztof Bialoglowicz <krzysztof@mirumee.com>
Date: Mon, 4 Nov 2019 15:24:48 +0100
Subject: [PATCH] Fix responsive table props

---
 .../ResponsiveTable/ResponsiveTable.tsx       | 25 ++++++++++++++++---
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/components/ResponsiveTable/ResponsiveTable.tsx b/src/components/ResponsiveTable/ResponsiveTable.tsx
index 3db2ee995..370539458 100644
--- a/src/components/ResponsiveTable/ResponsiveTable.tsx
+++ b/src/components/ResponsiveTable/ResponsiveTable.tsx
@@ -1,10 +1,19 @@
+import { Theme } from "@material-ui/core/styles";
 import Table from "@material-ui/core/Table";
 import { makeStyles } from "@material-ui/styles";
 import React from "react";
 
 const useStyles = makeStyles(
-  () => ({
+  (theme: Theme) => ({
+    [theme.breakpoints.up("sm")]: {
+      "& table": {
+        tableLayout: "fixed"
+      }
+    },
     root: {
+      "& table": {
+        tableLayout: "auto"
+      },
       overflowX: "auto"
     }
   }),
@@ -13,14 +22,22 @@ const useStyles = makeStyles(
   }
 );
 
-const ResponsiveTable: React.FC = props => {
-  const { children } = props;
+interface ResponsiveTableProps {
+  children: React.ReactNode | React.ReactNodeArray;
+  className?: string;
+  key?: string;
+}
+
+const ResponsiveTable: React.FC<ResponsiveTableProps> = props => {
+  const { children, className, key } = props;
 
   const classes = useStyles(props);
 
   return (
     <div className={classes.root}>
-      <Table>{children}</Table>
+      <Table className={className} key={key}>
+        {children}
+      </Table>
     </div>
   );
 };