Use responsive table component

src/attributes/components/AttributeList/AttributeList.tsx

@@ -1,5 +1,4 @@
 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 TableFooter from "@material-ui/core/TableFooter";
@@ -8,6 +7,7 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import Checkbox from "@saleor/components/Checkbox";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
@@ -75,7 +75,7 @@ const AttributeList: React.FC<AttributeListProps> = ({
   const intl = useIntl();
 
   return (
-    <Table>
+    <ResponsiveTable>
       <TableHead
         colSpan={numberOfColumns}
         selected={selected}
@@ -207,7 +207,7 @@ const AttributeList: React.FC<AttributeListProps> = ({
           )
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 AttributeList.displayName = "AttributeList";

src/attributes/components/AttributeValues/AttributeValues.tsx

@@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import IconButton from "@material-ui/core/IconButton";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableCell from "@material-ui/core/TableCell";
 import TableHead from "@material-ui/core/TableHead";
 import TableRow from "@material-ui/core/TableRow";
@@ -11,6 +10,7 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import {
   SortableTableBody,
@@ -80,7 +80,7 @@ const AttributeValues: React.FC<AttributeValuesProps> = ({
           </Button>
         }
       />
-      <Table>
+      <ResponsiveTable>
         <TableHead>
           <TableRow>
             <TableCell className={classes.columnDrag} />
@@ -138,7 +138,7 @@ const AttributeValues: React.FC<AttributeValuesProps> = ({
             )
           )}
         </SortableTableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };

src/categories/components/CategoryList/CategoryList.tsx

@@ -1,5 +1,4 @@
 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 TableFooter from "@material-ui/core/TableFooter";
@@ -9,6 +8,7 @@ import { FormattedMessage } from "react-intl";
 
 import { CategoryFragment } from "@saleor/categories/types/CategoryFragment";
 import Checkbox from "@saleor/components/Checkbox";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
@@ -73,7 +73,7 @@ const CategoryList: React.FC<CategoryListProps> = props => {
   const classes = useStyles(props);
 
   return (
-    <Table>
+    <ResponsiveTable>
       <TableHead
         colSpan={numberOfColumns}
         selected={selected}
@@ -174,7 +174,7 @@ const CategoryList: React.FC<CategoryListProps> = props => {
           )
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 

src/categories/components/CategoryProductList/CategoryProductList.tsx

@@ -1,11 +1,11 @@
 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 TableFooter from "@material-ui/core/TableFooter";
 import TableRow from "@material-ui/core/TableRow";
 import Checkbox from "@saleor/components/Checkbox";
 import Money from "@saleor/components/Money";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -98,7 +98,7 @@ export const CategoryProductList: React.FC<
 
   return (
     <div className={classes.tableContainer}>
-      <Table className={classes.table}>
+      <ResponsiveTable className={classes.table}>
         <colgroup>
           <col />
           <col className={classes.colName} />
@@ -229,7 +229,7 @@ export const CategoryProductList: React.FC<
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </div>
   );
 };

src/collections/components/CollectionList/CollectionList.tsx

@@ -1,5 +1,4 @@
 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 TableFooter from "@material-ui/core/TableFooter";
@@ -8,6 +7,7 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import Checkbox from "@saleor/components/Checkbox";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import TableHead from "@saleor/components/TableHead";
@@ -68,7 +68,7 @@ const CollectionList: React.FC<CollectionListProps> = props => {
   const intl = useIntl();
 
   return (
-    <Table>
+    <ResponsiveTable>
       <TableHead
         colSpan={numberOfColumns}
         selected={selected}
@@ -174,7 +174,7 @@ const CollectionList: React.FC<CollectionListProps> = props => {
           )
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 

src/collections/components/CollectionProducts/CollectionProducts.tsx

@@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import IconButton from "@material-ui/core/IconButton";
 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 TableFooter from "@material-ui/core/TableFooter";
@@ -13,6 +12,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import Checkbox from "@saleor/components/Checkbox";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import TableCellAvatar, {
@@ -114,7 +114,7 @@ const CollectionProducts: React.FC<CollectionProductsProps> = props => {
           </Button>
         }
       />
-      <Table className={classes.table}>
+      <ResponsiveTable className={classes.table}>
         <TableHead
           colSpan={numberOfColumns}
           selected={selected}
@@ -232,7 +232,7 @@ const CollectionProducts: React.FC<CollectionProductsProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };

src/components/AssignCategoryDialog/AssignCategoryDialog.tsx

@@ -5,7 +5,6 @@ import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
 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 TableRow from "@material-ui/core/TableRow";
@@ -17,6 +16,7 @@ import ConfirmButton, {
   ConfirmButtonTransitionState
 } from "@saleor/components/ConfirmButton";
 import FormSpacer from "@saleor/components/FormSpacer";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import useSearchQuery from "@saleor/hooks/useSearchQuery";
 import { buttonMessages } from "@saleor/intl";
 import { SearchCategories_search_edges_node } from "../../containers/SearchCategories/types/SearchCategories";
@@ -123,7 +123,7 @@ const AssignCategoriesDialog: React.FC<AssignCategoriesDialogProps> = props => {
           }}
         />
         <FormSpacer />
-        <Table>
+        <ResponsiveTable>
           <TableBody>
             {categories &&
               categories.map(category => {
@@ -156,7 +156,7 @@ const AssignCategoriesDialog: React.FC<AssignCategoriesDialogProps> = props => {
                 );
               })}
           </TableBody>
-        </Table>
+        </ResponsiveTable>
       </DialogContent>
       <DialogActions>
         <Button onClick={onClose}>

src/components/AssignCollectionDialog/AssignCollectionDialog.tsx

@@ -5,7 +5,6 @@ import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
 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 TableRow from "@material-ui/core/TableRow";
@@ -13,6 +12,7 @@ import TextField from "@material-ui/core/TextField";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import useSearchQuery from "@saleor/hooks/useSearchQuery";
 import { buttonMessages } from "@saleor/intl";
 import { SearchCollections_search_edges_node } from "../../containers/SearchCollections/types/SearchCollections";
@@ -123,7 +123,7 @@ const AssignCollectionDialog: React.FC<AssignCollectionDialogProps> = props => {
           }}
         />
         <FormSpacer />
-        <Table>
+        <ResponsiveTable>
           <TableBody>
             {collections &&
               collections.map(collection => {
@@ -156,7 +156,7 @@ const AssignCollectionDialog: React.FC<AssignCollectionDialogProps> = props => {
                 );
               })}
           </TableBody>
-        </Table>
+        </ResponsiveTable>
       </DialogContent>
       <DialogActions>
         <Button onClick={onClose}>

src/components/AssignProductDialog/AssignProductDialog.tsx

@@ -5,7 +5,6 @@ import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
 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 TableRow from "@material-ui/core/TableRow";
@@ -17,6 +16,7 @@ import ConfirmButton, {
   ConfirmButtonTransitionState
 } from "@saleor/components/ConfirmButton";
 import FormSpacer from "@saleor/components/FormSpacer";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import TableCellAvatar from "@saleor/components/TableCellAvatar";
 import useSearchQuery from "@saleor/hooks/useSearchQuery";
 import { buttonMessages } from "@saleor/intl";
@@ -131,7 +131,7 @@ const AssignProductDialog: React.FC<AssignProductDialogProps> = props => {
         />
         <FormSpacer />
         <div className={classes.scrollArea}>
-          <Table>
+          <ResponsiveTable>
             <TableBody>
               {products &&
                 products.map(product => {
@@ -168,7 +168,7 @@ const AssignProductDialog: React.FC<AssignProductDialogProps> = props => {
                   );
                 })}
             </TableBody>
-          </Table>
+          </ResponsiveTable>
         </div>
       </DialogContent>
       <DialogActions>

src/components/CountryList/CountryList.tsx

@@ -3,7 +3,6 @@ import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
 import IconButton from "@material-ui/core/IconButton";
 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 TableRow from "@material-ui/core/TableRow";
@@ -14,6 +13,7 @@ import React from "react";
 import { FormattedMessage } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import { maybe, renderCollection } from "../../misc";
 import { CountryFragment } from "../../taxes/types/CountryFragment";
@@ -100,7 +100,7 @@ const CountryList: React.FC<CountryListProps> = props => {
         }
       />
       <CardContent className={classes.root}>
-        <Table>
+        <ResponsiveTable>
           <TableBody>
             <TableRow className={classes.pointer} onClick={toggleCollapse}>
               <TableCell
@@ -173,7 +173,7 @@ const CountryList: React.FC<CountryListProps> = props => {
                 )
               )}
           </TableBody>
-        </Table>
+        </ResponsiveTable>
       </CardContent>
     </Card>
   );

src/components/TableCellHeader/TableCellHeader.stories.tsx

@@ -1,5 +1,4 @@
 import Card from "@material-ui/core/Card";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableHead from "@material-ui/core/TableHead";
@@ -7,6 +6,7 @@ import TableRow from "@material-ui/core/TableRow";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Decorator from "../../storybook/Decorator";
 import TableCellHeader, {
   TableCellHeaderArrowDirection
@@ -25,7 +25,7 @@ const Story: React.FC<StoryProps> = ({
   onHeaderClick = () => undefined
 }) => (
   <Card style={{ margin: "auto", width: 400 }}>
-    <Table>
+    <ResponsiveTable>
       <TableHead>
         <TableRow>
           <TableCellHeader
@@ -49,7 +49,7 @@ const Story: React.FC<StoryProps> = ({
           <TableCell>Juice</TableCell>
         </TableRow>
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   </Card>
 );
 const InteractiveStory: React.FC = () => {

src/customers/components/CustomerList/CustomerList.tsx

@@ -1,5 +1,4 @@
 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 TableFooter from "@material-ui/core/TableFooter";
@@ -8,6 +7,7 @@ import React from "react";
 import { FormattedMessage } from "react-intl";
 
 import Checkbox from "@saleor/components/Checkbox";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
@@ -61,7 +61,7 @@ const CustomerList: React.FC<CustomerListProps> = props => {
   const classes = useStyles(props);
 
   return (
-    <Table>
+    <ResponsiveTable>
       <TableHead
         colSpan={numberOfColumns}
         selected={selected}
@@ -141,7 +141,7 @@ const CustomerList: React.FC<CustomerListProps> = props => {
           )
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 CustomerList.displayName = "CustomerList";

src/customers/components/CustomerOrders/CustomerOrders.tsx

@@ -1,7 +1,6 @@
 import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 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 TableHead from "@material-ui/core/TableHead";
@@ -12,6 +11,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import CardTitle from "@saleor/components/CardTitle";
 import { DateTime } from "@saleor/components/Date";
 import Money from "@saleor/components/Money";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import { maybe, renderCollection, transformPaymentStatus } from "../../../misc";
@@ -60,7 +60,7 @@ const CustomerOrders: React.FC<CustomerOrdersProps> = props => {
           </Button>
         }
       />
-      <Table>
+      <ResponsiveTable>
         <TableHead>
           <TableRow>
             <TableCell>
@@ -143,7 +143,7 @@ const CustomerOrders: React.FC<CustomerOrdersProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };

src/discounts/components/DiscountCategories/DiscountCategories.tsx

@@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import IconButton from "@material-ui/core/IconButton";
 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 TableFooter from "@material-ui/core/TableFooter";
@@ -13,6 +12,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import Checkbox from "@saleor/components/Checkbox";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
@@ -84,7 +84,7 @@ const DiscountCategories: React.FC<DiscountCategoriesProps> = props => {
           </Button>
         }
       />
-      <Table>
+      <ResponsiveTable>
         <TableHead
           colSpan={numberOfColumns}
           selected={selected}
@@ -173,7 +173,7 @@ const DiscountCategories: React.FC<DiscountCategoriesProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };

src/discounts/components/DiscountCollections/DiscountCollections.tsx

@@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import IconButton from "@material-ui/core/IconButton";
 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 TableFooter from "@material-ui/core/TableFooter";
@@ -13,6 +12,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import Checkbox from "@saleor/components/Checkbox";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
@@ -84,7 +84,7 @@ const DiscountCollections: React.FC<DiscountCollectionsProps> = props => {
           </Button>
         }
       />
-      <Table>
+      <ResponsiveTable>
         <TableHead
           colSpan={numberOfColumns}
           selected={selected}
@@ -173,7 +173,7 @@ const DiscountCollections: React.FC<DiscountCollectionsProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };

src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx

@@ -4,7 +4,6 @@ import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
 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 TableRow from "@material-ui/core/TableRow";
@@ -21,6 +20,7 @@ import ConfirmButton, {
 import Form from "@saleor/components/Form";
 import FormSpacer from "@saleor/components/FormSpacer";
 import Hr from "@saleor/components/Hr";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 // tslint:disable no-submodule-imports
 import { ShopInfo_shop_countries } from "@saleor/components/Shop/types/ShopInfo";
 import { buttonMessages } from "@saleor/intl";
@@ -122,7 +122,7 @@ const DiscountCountrySelectDialog: React.FC<
                     description="country selection"
                   />
                 </Typography>
-                <Table>
+                <ResponsiveTable>
                   <TableBody>
                     {filter(countries, data.query, {
                       key: "country"
@@ -164,7 +164,7 @@ const DiscountCountrySelectDialog: React.FC<
                       );
                     })}
                   </TableBody>
-                </Table>
+                </ResponsiveTable>
               </DialogContent>
               <DialogActions>
                 <Button onClick={onClose}>

src/discounts/components/DiscountProducts/DiscountProducts.tsx

@@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import IconButton from "@material-ui/core/IconButton";
 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 TableFooter from "@material-ui/core/TableFooter";
@@ -13,6 +12,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import Checkbox from "@saleor/components/Checkbox";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import TableCellAvatar, {
@@ -98,7 +98,7 @@ const DiscountProducts: React.FC<SaleProductsProps> = props => {
           </Button>
         }
       />
-      <Table>
+      <ResponsiveTable>
         <TableHead
           colSpan={numberOfColumns}
           selected={selected}
@@ -212,7 +212,7 @@ const DiscountProducts: React.FC<SaleProductsProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };

src/discounts/components/SaleList/SaleList.tsx

@@ -1,5 +1,4 @@
 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 TableFooter from "@material-ui/core/TableFooter";
@@ -11,6 +10,7 @@ import Checkbox from "@saleor/components/Checkbox";
 import Date from "@saleor/components/Date";
 import Money from "@saleor/components/Money";
 import Percent from "@saleor/components/Percent";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
@@ -77,7 +77,7 @@ const SaleList: React.FC<SaleListProps> = props => {
   const classes = useStyles(props);
 
   return (
-    <Table>
+    <ResponsiveTable>
       <TableHead
         colSpan={numberOfColumns}
         selected={selected}
@@ -189,7 +189,7 @@ const SaleList: React.FC<SaleListProps> = props => {
           )
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 SaleList.displayName = "SaleList";

src/discounts/components/VoucherList/VoucherList.tsx

@@ -1,5 +1,4 @@
 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 TableFooter from "@material-ui/core/TableFooter";
@@ -11,6 +10,7 @@ import Checkbox from "@saleor/components/Checkbox";
 import Date from "@saleor/components/Date";
 import Money from "@saleor/components/Money";
 import Percent from "@saleor/components/Percent";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
@@ -92,7 +92,7 @@ const VoucherList: React.FC<VoucherListProps> = props => {
   const classes = useStyles(props);
 
   return (
-    <Table>
+    <ResponsiveTable>
       <TableHead
         colSpan={numberOfColumns}
         selected={selected}
@@ -240,7 +240,7 @@ const VoucherList: React.FC<VoucherListProps> = props => {
           )
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 VoucherList.displayName = "VoucherList";

src/home/components/HomeNotificationTable/HomeNotificationTable.tsx

@@ -1,6 +1,5 @@
 import Card from "@material-ui/core/Card";
 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 TableRow from "@material-ui/core/TableRow";
@@ -10,6 +9,7 @@ import React from "react";
 import { FormattedMessage } from "react-intl";
 
 import RequirePermissions from "@saleor/components/RequirePermissions";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import { UserPermissionProps } from "@saleor/types";
 import { PermissionEnum } from "@saleor/types/globalTypes";
@@ -47,7 +47,7 @@ const HomeNotificationTable: React.FC<HomeNotificationTableProps> = props => {
 
   return (
     <Card>
-      <Table>
+      <ResponsiveTable>
         <TableBody className={classes.tableRow}>
           <RequirePermissions
             userPermissions={userPermissions}
@@ -150,7 +150,7 @@ const HomeNotificationTable: React.FC<HomeNotificationTableProps> = props => {
             </TableRow>
           </RequirePermissions>
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };

src/home/components/HomeProductListCard/HomeProductListCard.tsx

@@ -1,6 +1,5 @@
 import Card from "@material-ui/core/Card";
 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 TableRow from "@material-ui/core/TableRow";
@@ -11,6 +10,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import Money from "@saleor/components/Money";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableCellAvatar from "@saleor/components/TableCellAvatar";
 import { maybe, renderCollection } from "../../../misc";
@@ -58,7 +58,7 @@ export const HomeProductList: React.FC<HomeProductListProps> = props => {
           id: "homeProductsListCardHeader"
         })}
       />
-      <Table>
+      <ResponsiveTable>
         <TableBody>
           {renderCollection(
             topProducts,
@@ -139,7 +139,7 @@ export const HomeProductList: React.FC<HomeProductListProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };

src/navigation/components/MenuList/MenuList.tsx

@@ -1,6 +1,5 @@
 import Card from "@material-ui/core/Card";
 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 TableFooter from "@material-ui/core/TableFooter";
@@ -11,6 +10,7 @@ import { FormattedMessage } from "react-intl";
 
 import Checkbox from "@saleor/components/Checkbox";
 import IconButtonTableCell from "@saleor/components/IconButtonTableCell";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
@@ -65,7 +65,7 @@ const MenuList: React.FC<MenuListProps> = props => {
 
   return (
     <Card>
-      <Table>
+      <ResponsiveTable>
         <TableHead
           colSpan={numberOfColumns}
           selected={selected}
@@ -156,7 +156,7 @@ const MenuList: React.FC<MenuListProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };

src/orders/components/OrderDraftDetailsProducts/OrderDraftDetailsProducts.tsx

@@ -1,6 +1,5 @@
 import IconButton from "@material-ui/core/IconButton";
 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 TableHead from "@material-ui/core/TableHead";
@@ -14,6 +13,7 @@ import { FormattedMessage } from "react-intl";
 import { DebounceForm } from "@saleor/components/DebounceForm";
 import Form from "@saleor/components/Form";
 import Money from "@saleor/components/Money";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableCellAvatar, {
   AVATAR_MARGIN
@@ -76,7 +76,7 @@ const OrderDraftDetailsProducts: React.FC<
   const classes = useStyles(props);
 
   return (
-    <Table className={classes.table}>
+    <ResponsiveTable className={classes.table}>
       {maybe(() => !!lines.length) && (
         <TableHead>
           <TableRow>
@@ -187,7 +187,7 @@ const OrderDraftDetailsProducts: React.FC<
           ))
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 OrderDraftDetailsProducts.displayName = "OrderDraftDetailsProducts";

src/orders/components/OrderDraftList/OrderDraftList.tsx

@@ -1,5 +1,4 @@
 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 TableFooter from "@material-ui/core/TableFooter";
@@ -10,6 +9,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import Checkbox from "@saleor/components/Checkbox";
 import { DateTime } from "@saleor/components/Date";
 import Money from "@saleor/components/Money";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
@@ -83,7 +83,7 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = props => {
     : undefined;
 
   return (
-    <Table>
+    <ResponsiveTable>
       <TableHead
         colSpan={numberOfColumns}
         selected={selected}
@@ -194,7 +194,7 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = props => {
           )
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 OrderDraftList.displayName = "OrderDraftList";

src/orders/components/OrderFulfillment/OrderFulfillment.tsx

@@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import CardActions from "@material-ui/core/CardActions";
 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 TableHead from "@material-ui/core/TableHead";
@@ -14,6 +13,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import CardMenu from "@saleor/components/CardMenu";
 import CardTitle from "@saleor/components/CardTitle";
 import Money from "@saleor/components/Money";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import TableCellAvatar, {
@@ -142,7 +142,7 @@ const OrderFulfillment: React.FC<OrderFulfillmentProps> = props => {
           )
         }
       />
-      <Table className={classes.table}>
+      <ResponsiveTable className={classes.table}>
         <TableHead>
           <TableRow>
             <TableCell className={classes.colName}>
@@ -226,7 +226,7 @@ const OrderFulfillment: React.FC<OrderFulfillmentProps> = props => {
             </TableRow>
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
       {status === FulfillmentStatus.FULFILLED && !fulfillment.trackingNumber && (
         <CardActions>
           <Button color="primary" onClick={onTrackingCodeAdd}>

src/orders/components/OrderFulfillmentDialog/OrderFulfillmentDialog.tsx

@@ -4,7 +4,6 @@ import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
 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 TableHead from "@material-ui/core/TableHead";
@@ -18,6 +17,7 @@ import ConfirmButton, {
 } from "@saleor/components/ConfirmButton";
 import Form from "@saleor/components/Form";
 import { FormSpacer } from "@saleor/components/FormSpacer";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import TableCellAvatar, {
   AVATAR_MARGIN
 } from "@saleor/components/TableCellAvatar";
@@ -111,7 +111,7 @@ const OrderFulfillmentDialog: React.FC<OrderFulfillmentDialogProps> = props => {
                   description="dialog header"
                 />
               </DialogTitle>
-              <Table className={classes.table}>
+              <ResponsiveTable className={classes.table}>
                 <TableHead>
                   <TableRow>
                     <TableCell className={classes.colName}>
@@ -174,7 +174,7 @@ const OrderFulfillmentDialog: React.FC<OrderFulfillmentDialogProps> = props => {
                     );
                   })}
                 </TableBody>
-              </Table>
+              </ResponsiveTable>
               <DialogContent>
                 <FormSpacer />
                 <TextField

src/orders/components/OrderList/OrderList.tsx

@@ -1,5 +1,4 @@
 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 TableFooter from "@material-ui/core/TableFooter";
@@ -10,6 +9,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import Checkbox from "@saleor/components/Checkbox";
 import { DateTime } from "@saleor/components/Date";
 import Money from "@saleor/components/Money";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import TableHead from "@saleor/components/TableHead";
@@ -87,7 +87,7 @@ export const OrderList: React.FC<OrderListProps> = props => {
       }))
     : undefined;
   return (
-    <Table>
+    <ResponsiveTable>
       <TableHead
         colSpan={numberOfColumns}
         selected={selected}
@@ -232,7 +232,7 @@ export const OrderList: React.FC<OrderListProps> = props => {
           )
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 OrderList.displayName = "OrderList";

src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx

@@ -5,7 +5,6 @@ import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
 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 TableRow from "@material-ui/core/TableRow";
@@ -19,6 +18,7 @@ import ConfirmButton, {
   ConfirmButtonTransitionState
 } from "@saleor/components/ConfirmButton";
 import Money from "@saleor/components/Money";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import TableCellAvatar from "@saleor/components/TableCellAvatar";
 import useSearchQuery from "@saleor/hooks/useSearchQuery";
 import { buttonMessages } from "@saleor/intl";
@@ -227,7 +227,7 @@ const OrderProductAddDialog: React.FC<OrderProductAddDialogProps> = props => {
           }
           threshold={10}
         >
-          <Table key="table">
+          <ResponsiveTable key="table">
             <TableBody>
               {renderCollection(
                 products,
@@ -316,7 +316,7 @@ const OrderProductAddDialog: React.FC<OrderProductAddDialogProps> = props => {
                 )
               )}
             </TableBody>
-          </Table>
+          </ResponsiveTable>
         </InfiniteScroll>
       </DialogContent>
       <DialogActions>

src/orders/components/OrderUnfulfilledItems/OrderUnfulfilledItems.tsx

@@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import CardActions from "@material-ui/core/CardActions";
 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 TableHead from "@material-ui/core/TableHead";
@@ -12,6 +11,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import Money from "@saleor/components/Money";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import TableCellAvatar, {
@@ -83,7 +83,7 @@ const OrderUnfulfilledItems: React.FC<OrderUnfulfilledItemsProps> = props => {
           />
         }
       />
-      <Table className={classes.table}>
+      <ResponsiveTable className={classes.table}>
         <TableHead>
           <TableRow>
             <TableCell className={classes.colName}>
@@ -160,7 +160,7 @@ const OrderUnfulfilledItems: React.FC<OrderUnfulfilledItemsProps> = props => {
             </TableRow>
           ))}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
       {canFulfill && (
         <CardActions>
           <Button variant="text" color="primary" onClick={onFulfill}>

src/pages/components/PageList/PageList.tsx

@@ -1,6 +1,5 @@
 import Card from "@material-ui/core/Card";
 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 TableFooter from "@material-ui/core/TableFooter";
@@ -9,6 +8,7 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import Checkbox from "@saleor/components/Checkbox";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import TableHead from "@saleor/components/TableHead";
@@ -65,7 +65,7 @@ const PageList: React.FC<PageListProps> = props => {
 
   return (
     <Card>
-      <Table>
+      <ResponsiveTable>
         <TableHead
           colSpan={numberOfColumns}
           selected={selected}
@@ -169,7 +169,7 @@ const PageList: React.FC<PageListProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };

src/plugins/components/PluginsList/PluginsList.tsx

@@ -1,6 +1,5 @@
 import Card from "@material-ui/core/Card";
 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 TableFooter from "@material-ui/core/TableFooter";
@@ -10,6 +9,7 @@ import EditIcon from "@material-ui/icons/Edit";
 import React from "react";
 import { useIntl } from "react-intl";
 
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import TablePagination from "@saleor/components/TablePagination";
@@ -59,7 +59,7 @@ const PluginList: React.FC<PluginListProps> = props => {
   const intl = useIntl();
   return (
     <Card>
-      <Table>
+      <ResponsiveTable>
         <TableHead>
           <TableCell className={classes.colName}>
             {intl.formatMessage({
@@ -139,7 +139,7 @@ const PluginList: React.FC<PluginListProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };

src/productTypes/components/AssignAttributeDialog/AssignAttributeDialog.tsx

@@ -6,7 +6,6 @@ import DialogContent from "@material-ui/core/DialogContent";
 import DialogContentText from "@material-ui/core/DialogContentText";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import makeStyles from "@material-ui/core/styles/makeStyles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
@@ -24,6 +23,7 @@ import ConfirmButton, {
 import useElementScroll, {
   isScrolledToBottom
 } from "@saleor/hooks/useElementScroll";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
 import useModalDialogOpen from "@saleor/hooks/useModalDialogOpen";
 import useSearchQuery from "@saleor/hooks/useSearchQuery";
@@ -136,7 +136,7 @@ const AssignAttributeDialog: React.FC<AssignAttributeDialogProps> = ({
           threshold={100}
           key="infinite-scroll"
         >
-          <Table key="table">
+          <ResponsiveTable key="table">
             <TableBody>
               {renderCollection(
                 attributes,
@@ -178,7 +178,7 @@ const AssignAttributeDialog: React.FC<AssignAttributeDialogProps> = ({
                   )
               )}
             </TableBody>
-          </Table>
+          </ResponsiveTable>
         </InfiniteScroll>
       </DialogContent>
       {errors.length > 0 && (

src/productTypes/components/ProductTypeAttributes/ProductTypeAttributes.tsx

@@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import IconButton from "@material-ui/core/IconButton";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
 import DeleteIcon from "@material-ui/icons/Delete";
@@ -11,6 +10,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import Checkbox from "@saleor/components/Checkbox";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import {
   SortableTableBody,
@@ -111,7 +111,7 @@ const ProductTypeAttributes: React.FC<ProductTypeAttributesProps> = props => {
           </Button>
         }
       />
-      <Table>
+      <ResponsiveTable>
         <TableHead
           colSpan={numberOfColumns}
           disabled={disabled}
@@ -196,7 +196,7 @@ const ProductTypeAttributes: React.FC<ProductTypeAttributesProps> = props => {
             )
           )}
         </SortableTableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };

src/productTypes/components/ProductTypeList/ProductTypeList.tsx

@@ -1,5 +1,4 @@
 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 TableFooter from "@material-ui/core/TableFooter";
@@ -9,6 +8,7 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import Checkbox from "@saleor/components/Checkbox";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
@@ -61,7 +61,7 @@ const ProductTypeList: React.FC<ProductTypeListProps> = props => {
   const intl = useIntl();
 
   return (
-    <Table>
+    <ResponsiveTable>
       <TableHead
         colSpan={numberOfColumns}
         selected={selected}
@@ -185,7 +185,7 @@ const ProductTypeList: React.FC<ProductTypeListProps> = props => {
           )
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 ProductTypeList.displayName = "ProductTypeList";

src/products/components/ProductList/ProductList.tsx

@@ -1,5 +1,4 @@
 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 TableFooter from "@material-ui/core/TableFooter";
@@ -10,6 +9,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import Checkbox from "@saleor/components/Checkbox";
 import Money from "@saleor/components/Money";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import TableCellAvatar, {
@@ -131,7 +131,7 @@ export const ProductList: React.FC<ProductListProps> = props => {
 
   return (
     <div className={classes.tableContainer}>
-      <Table className={classes.table}>
+      <ResponsiveTable className={classes.table}>
         <colgroup>
           <col />
           <col className={classes.colName} />
@@ -392,7 +392,7 @@ export const ProductList: React.FC<ProductListProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </div>
   );
 };

src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx

@@ -1,7 +1,6 @@
 import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 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 TableRow from "@material-ui/core/TableRow";
@@ -10,6 +9,7 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableCellAvatar from "@saleor/components/TableCellAvatar";
 import { maybe, renderCollection } from "../../../misc";
@@ -64,7 +64,7 @@ const ProductVariantNavigation: React.FC<
           description: "section header"
         })}
       />
-      <Table>
+      <ResponsiveTable>
         <TableBody>
           {renderCollection(variants, variant => (
             <TableRow
@@ -110,7 +110,7 @@ const ProductVariantNavigation: React.FC<
             </TableRow>
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };

src/products/components/ProductVariants/ProductVariants.tsx

@@ -3,7 +3,6 @@ import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
 import Hidden from "@material-ui/core/Hidden";
 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 TableRow from "@material-ui/core/TableRow";
@@ -14,6 +13,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import CardTitle from "@saleor/components/CardTitle";
 import Checkbox from "@saleor/components/Checkbox";
 import Money from "@saleor/components/Money";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import TableHead from "@saleor/components/TableHead";
@@ -133,7 +133,7 @@ export const ProductVariants: React.FC<ProductVariantsProps> = props => {
         </CardContent>
       )}
       {hasVariants && (
-        <Table className={classes.denseTable}>
+        <ResponsiveTable className={classes.denseTable}>
           <TableHead
             colSpan={numberOfColumns}
             selected={selected}
@@ -237,7 +237,7 @@ export const ProductVariants: React.FC<ProductVariantsProps> = props => {
               );
             })}
           </TableBody>
-        </Table>
+        </ResponsiveTable>
       )}
     </Card>
   );

src/services/components/ServiceList/ServiceList.tsx

@@ -1,6 +1,5 @@
 import IconButton from "@material-ui/core/IconButton";
 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 TableFooter from "@material-ui/core/TableFooter";
@@ -12,6 +11,7 @@ import EditIcon from "@material-ui/icons/Edit";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TablePagination from "@saleor/components/TablePagination";
 import { maybe, renderCollection, stopPropagation } from "@saleor/misc";
@@ -68,7 +68,7 @@ const ServiceList: React.FC<ServiceListProps> = props => {
   const classes = useStyles(props);
 
   return (
-    <Table className={classes.table}>
+    <ResponsiveTable className={classes.table}>
       <TableHead>
         <TableRow>
           <TableCell className={classes.colName}>
@@ -154,7 +154,7 @@ const ServiceList: React.FC<ServiceListProps> = props => {
           )
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 ServiceList.displayName = "ServiceList";

src/services/components/ServiceTokens/ServiceTokens.tsx

@@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import IconButton from "@material-ui/core/IconButton";
 import makeStyles from "@material-ui/core/styles/makeStyles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableHead from "@material-ui/core/TableHead";
@@ -12,6 +11,7 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import { maybe, renderCollection } from "@saleor/misc";
 import { ServiceDetailsFragment_tokens } from "@saleor/services/types/ServiceDetailsFragment";
@@ -64,7 +64,7 @@ const ServiceTokens: React.FC<ServiceTokensProps> = props => {
           </Button>
         }
       />
-      <Table>
+      <ResponsiveTable>
         <TableHead>
           <TableRow>
             <TableCell className={classes.colNote}>
@@ -117,7 +117,7 @@ const ServiceTokens: React.FC<ServiceTokensProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };

src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx

@@ -4,7 +4,6 @@ import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
 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 TableRow from "@material-ui/core/TableRow";
@@ -21,6 +20,7 @@ import ConfirmButton, {
 import Form from "@saleor/components/Form";
 import FormSpacer from "@saleor/components/FormSpacer";
 import Hr from "@saleor/components/Hr";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import { ShopInfo_shop_countries } from "@saleor/components/Shop/types/ShopInfo";
 import { buttonMessages } from "@saleor/intl";
 
@@ -122,7 +122,7 @@ const ShippingZoneCountriesAssignDialog: React.FC<
                 <Typography className={classes.heading} variant="subtitle1">
                   <FormattedMessage defaultMessage="Quick Pick" />
                 </Typography>
-                <Table className={classes.table}>
+                <ResponsiveTable className={classes.table}>
                   <TableBody>
                     <TableRow>
                       <TableCell className={classes.wideCell}>
@@ -149,7 +149,7 @@ const ShippingZoneCountriesAssignDialog: React.FC<
                       </TableCell>
                     </TableRow>
                   </TableBody>
-                </Table>
+                </ResponsiveTable>
               </DialogContent>
 
               <DialogContent className={classes.container}>
@@ -159,7 +159,7 @@ const ShippingZoneCountriesAssignDialog: React.FC<
                     description="country selection"
                   />
                 </Typography>
-                <Table className={classes.table}>
+                <ResponsiveTable className={classes.table}>
                   <TableBody>
                     {filter(countries, data.query, {
                       key: "country"
@@ -201,7 +201,7 @@ const ShippingZoneCountriesAssignDialog: React.FC<
                       );
                     })}
                   </TableBody>
-                </Table>
+                </ResponsiveTable>
               </DialogContent>
               <DialogActions>
                 <Button onClick={onClose}>

src/shipping/components/ShippingZoneRates/ShippingZoneRates.tsx

@@ -1,7 +1,6 @@
 import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 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 TableHead from "@material-ui/core/TableHead";
@@ -15,6 +14,7 @@ import CardTitle from "@saleor/components/CardTitle";
 import IconButtonTableCell from "@saleor/components/IconButtonTableCell";
 import Money from "@saleor/components/Money";
 import MoneyRange from "@saleor/components/MoneyRange";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import WeightRange from "@saleor/components/WeightRange";
 import { maybe, renderCollection } from "../../../misc";
@@ -82,7 +82,7 @@ const ShippingZoneRates: React.FC<ShippingZoneRatesProps> = props => {
           </Button>
         }
       />
-      <Table>
+      <ResponsiveTable>
         <TableHead>
           <TableRow>
             <TableCell className={classes.nameColumn}>
@@ -172,7 +172,7 @@ const ShippingZoneRates: React.FC<ShippingZoneRatesProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };

src/shipping/components/ShippingZonesList/ShippingZonesList.tsx

@@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import IconButton from "@material-ui/core/IconButton";
 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 TableFooter from "@material-ui/core/TableFooter";
@@ -13,6 +12,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import Checkbox from "@saleor/components/Checkbox";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
@@ -88,7 +88,7 @@ const ShippingZonesList: React.FC<ShippingZonesListProps> = props => {
           </Button>
         }
       />
-      <Table>
+      <ResponsiveTable>
         <TableHead
           colSpan={numberOfColumns}
           selected={selected}
@@ -183,7 +183,7 @@ const ShippingZonesList: React.FC<ShippingZonesListProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };

src/siteSettings/components/SiteSettingsKeys/SiteSettingsKeys.tsx

@@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import IconButton from "@material-ui/core/IconButton";
 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 TableHead from "@material-ui/core/TableHead";
@@ -12,6 +11,7 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import { authorizationKeyTypes, maybe, renderCollection } from "../../../misc";
 import { ICONBUTTON_SIZE } from "../../../theme";
@@ -58,7 +58,7 @@ const SiteSettingsKeys: React.FC<SiteSettingsKeysProps> = props => {
           </Button>
         }
       />
-      <Table>
+      <ResponsiveTable>
         <TableHead>
           <TableRow>
             <TableCell>
@@ -109,7 +109,7 @@ const SiteSettingsKeys: React.FC<SiteSettingsKeysProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };

src/staff/components/StaffList/StaffList.tsx

@@ -1,5 +1,4 @@
 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 TableFooter from "@material-ui/core/TableFooter";
@@ -10,6 +9,7 @@ import classNames from "classnames";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TablePagination from "@saleor/components/TablePagination";
 import {
@@ -78,7 +78,7 @@ const StaffList: React.FC<StaffListProps> = props => {
   const intl = useIntl();
 
   return (
-    <Table>
+    <ResponsiveTable>
       <TableHead>
         <TableRow>
           <TableCell className={classes.wideColumn}>
@@ -167,7 +167,7 @@ const StaffList: React.FC<StaffListProps> = props => {
           )
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 StaffList.displayName = "StaffList";

src/storybook/stories/components/EditableTableCell.tsx

@@ -1,4 +1,3 @@
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableHead from "@material-ui/core/TableHead";
@@ -7,6 +6,7 @@ import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import EditableTableCell from "@saleor/components/EditableTableCell";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import CardDecorator from "../../CardDecorator";
 import Decorator from "../../Decorator";
 
@@ -14,7 +14,7 @@ storiesOf("Generics / EditableTableCell", module)
   .addDecorator(CardDecorator)
   .addDecorator(Decorator)
   .add("default", () => (
-    <Table>
+    <ResponsiveTable>
       <TableHead>
         <TableCell>Some header</TableCell>
         <TableCell>Some header</TableCell>
@@ -30,5 +30,5 @@ storiesOf("Generics / EditableTableCell", module)
           <TableCell>Some value</TableCell>
         </TableRow>
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   ));

src/storybook/stories/components/TablePagination.tsx

@@ -1,7 +1,7 @@
-import Table from "@material-ui/core/Table";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import TablePagination from "@saleor/components/TablePagination";
 import CardDecorator from "../../CardDecorator";
 import Decorator from "../../Decorator";
@@ -10,7 +10,7 @@ storiesOf("Generics / TablePagination", module)
   .addDecorator(CardDecorator)
   .addDecorator(Decorator)
   .add("no previous / next page", () => (
-    <Table>
+    <ResponsiveTable>
       <TablePagination
         colSpan={1}
         hasNextPage={false}
@@ -18,10 +18,10 @@ storiesOf("Generics / TablePagination", module)
         onPreviousPage={undefined}
         onNextPage={undefined}
       />
-    </Table>
+    </ResponsiveTable>
   ))
   .add("previous page available", () => (
-    <Table>
+    <ResponsiveTable>
       <TablePagination
         colSpan={1}
         hasNextPage={false}
@@ -29,10 +29,10 @@ storiesOf("Generics / TablePagination", module)
         onPreviousPage={undefined}
         onNextPage={undefined}
       />
-    </Table>
+    </ResponsiveTable>
   ))
   .add("next page available", () => (
-    <Table>
+    <ResponsiveTable>
       <TablePagination
         colSpan={1}
         hasNextPage={true}
@@ -40,10 +40,10 @@ storiesOf("Generics / TablePagination", module)
         onPreviousPage={undefined}
         onNextPage={undefined}
       />
-    </Table>
+    </ResponsiveTable>
   ))
   .add("both previous and next pages are available", () => (
-    <Table>
+    <ResponsiveTable>
       <TablePagination
         colSpan={1}
         hasNextPage={true}
@@ -51,5 +51,5 @@ storiesOf("Generics / TablePagination", module)
         onPreviousPage={undefined}
         onNextPage={undefined}
       />
-    </Table>
+    </ResponsiveTable>
   ));

src/taxes/components/CountryList/CountryList.tsx

@@ -1,6 +1,5 @@
 import Card from "@material-ui/core/Card";
 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 TableHead from "@material-ui/core/TableHead";
@@ -9,6 +8,7 @@ import classNames from "classnames";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import { maybe, renderCollection } from "../../../misc";
 import { CountryList_shop_countries } from "../../types/CountryList";
@@ -34,7 +34,7 @@ const CountryList: React.FC<CountryListProps> = props => {
 
   return (
     <Card>
-      <Table>
+      <ResponsiveTable>
         <TableHead>
           <TableRow>
             <TableCell>
@@ -83,7 +83,7 @@ const CountryList: React.FC<CountryListProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };

src/taxes/components/CountryTaxesPage/CountryTaxesPage.tsx

@@ -1,6 +1,5 @@
 import Card from "@material-ui/core/Card";
 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 TableHead from "@material-ui/core/TableHead";
@@ -12,6 +11,7 @@ import AppHeader from "@saleor/components/AppHeader";
 import { Container } from "@saleor/components/Container";
 import Grid from "@saleor/components/Grid";
 import PageHeader from "@saleor/components/PageHeader";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import { sectionNames } from "@saleor/intl";
 import { TaxRateType } from "@saleor/types/globalTypes";
@@ -165,7 +165,7 @@ const CountryTaxesPage: React.FC<CountryTaxesPageProps> = props => {
       <Grid>
         <div>
           <Card>
-            <Table>
+            <ResponsiveTable>
               <TableHead>
                 <TableRow>
                   <TableCell className={classes.wideColumn}>
@@ -206,7 +206,7 @@ const CountryTaxesPage: React.FC<CountryTaxesPageProps> = props => {
                   )
                 )}
               </TableBody>
-            </Table>
+            </ResponsiveTable>
           </Card>
         </div>
       </Grid>

src/translations/components/TranslationsEntitiesList/TranslationsEntitiesList.tsx

@@ -1,6 +1,5 @@
 import { Omit } from "@material-ui/core";
 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 TableFooter from "@material-ui/core/TableFooter";
@@ -12,6 +11,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import { ListProps } from "../../../types";
 
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TablePagination from "@saleor/components/TablePagination";
 import { maybe, renderCollection } from "../../../misc";
@@ -58,7 +58,7 @@ const TranslationsEntitiesList: React.FC<
   const intl = useIntl();
 
   return (
-    <Table>
+    <ResponsiveTable>
       <TableHead>
         <TableRow>
           <TableCell className={classes.wideColumn}>
@@ -126,7 +126,7 @@ const TranslationsEntitiesList: React.FC<
           )
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 TranslationsEntitiesList.displayName = "TranslationsEntitiesList";

src/translations/components/TranslationsLanguageList/TranslationsLanguageList.tsx

@@ -1,6 +1,5 @@
 import Card from "@material-ui/core/Card";
 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 TableHead from "@material-ui/core/TableHead";
@@ -8,6 +7,7 @@ import TableRow from "@material-ui/core/TableRow";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import { ShopInfo_shop_languages } from "@saleor/components/Shop/types/ShopInfo";
 import Skeleton from "@saleor/components/Skeleton";
 import { maybe, renderCollection } from "../../../misc";
@@ -35,7 +35,7 @@ const TranslationsLanguageList: React.FC<
 
   return (
     <Card>
-      <Table>
+      <ResponsiveTable>
         <TableHead>
           <TableRow>
             <TableCell>
@@ -70,7 +70,7 @@ const TranslationsLanguageList: React.FC<
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };

src/webhooks/components/WebhooksList/WebhooksList.tsx

@@ -1,6 +1,5 @@
 import IconButton from "@material-ui/core/IconButton";
 import makeStyles from "@material-ui/core/styles/makeStyles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -11,6 +10,7 @@ import EditIcon from "@material-ui/icons/Edit";
 import React from "react";
 import { useIntl } from "react-intl";
 
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TablePagination from "@saleor/components/TablePagination";
 import { maybe, renderCollection, stopPropagation } from "@saleor/misc";
@@ -68,7 +68,7 @@ const WebhooksList: React.FC<WebhooksListProps> = ({
   const classes = useStyles({});
 
   return (
-    <Table className={classes.table}>
+    <ResponsiveTable className={classes.table}>
       <TableHead>
         <TableRow>
           <TableCell className={classes.colName}>
@@ -156,7 +156,7 @@ const WebhooksList: React.FC<WebhooksListProps> = ({
           )
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 WebhooksList.displayName = "WebhooksList";