diff --git a/src/collections/components/CollectionList/CollectionList.tsx b/src/collections/components/CollectionList/CollectionList.tsx
index d46c53de0..a80b9cd50 100644
--- a/src/collections/components/CollectionList/CollectionList.tsx
+++ b/src/collections/components/CollectionList/CollectionList.tsx
@@ -51,7 +51,7 @@ interface CollectionListProps
   collections: CollectionList_collections_edges_node[];
 }
 
-const numberOfColumns = 5;
+const numberOfColumns = 4;
 
 const CollectionList: React.FC<CollectionListProps> = props => {
   const {
diff --git a/src/components/AssignProductDialog/AssignProductDialog.tsx b/src/components/AssignProductDialog/AssignProductDialog.tsx
index 7c40a65ae..92a2a9a0c 100644
--- a/src/components/AssignProductDialog/AssignProductDialog.tsx
+++ b/src/components/AssignProductDialog/AssignProductDialog.tsx
@@ -32,11 +32,16 @@ export interface FormData {
 const useStyles = makeStyles(
   {
     avatar: {
-      "&:first-child": {
+      "&&:first-child": {
         paddingLeft: 0
-      }
+      },
+      width: 72
     },
     checkboxCell: {
+      paddingLeft: 0,
+      width: 88
+    },
+    colName: {
       paddingLeft: 0
     },
     overflow: {
@@ -44,10 +49,6 @@ const useStyles = makeStyles(
     },
     scrollArea: {
       overflowY: "scroll"
-    },
-    wideCell: {
-      paddingLeft: 0,
-      width: "100%"
     }
   },
   { name: "AssignProductDialog" }
@@ -148,7 +149,7 @@ const AssignProductDialog: React.FC<AssignProductDialogProps> = props => {
                         className={classes.avatar}
                         thumbnail={maybe(() => product.thumbnail.url)}
                       />
-                      <TableCell className={classes.wideCell}>
+                      <TableCell className={classes.colName}>
                         {product.name}
                       </TableCell>
                       <TableCell
diff --git a/src/components/TableCellAvatar/TableCellAvatar.tsx b/src/components/TableCellAvatar/TableCellAvatar.tsx
index a5494e839..5e1a16294 100644
--- a/src/components/TableCellAvatar/TableCellAvatar.tsx
+++ b/src/components/TableCellAvatar/TableCellAvatar.tsx
@@ -1,6 +1,6 @@
 import Avatar from "@material-ui/core/Avatar";
 import { makeStyles } from "@material-ui/core/styles";
-import TableCell from "@material-ui/core/TableCell";
+import TableCell, { TableCellProps } from "@material-ui/core/TableCell";
 import Cached from "@material-ui/icons/Cached";
 import classNames from "classnames";
 import React from "react";
@@ -11,6 +11,9 @@ export const AVATAR_MARGIN = 32;
 
 const useStyles = makeStyles(
   theme => ({
+    alignRight: {
+      justifyContent: "flex-end"
+    },
     avatar: {
       background: "none",
       border: `1px solid ${theme.palette.divider}`,
@@ -39,21 +42,33 @@ const useStyles = makeStyles(
   { name: "TableCellAvatar" }
 );
 
-interface TableCellAvatarProps {
+interface TableCellAvatarProps extends TableCellProps {
   className?: string;
   thumbnail?: string;
+  alignRight?: boolean;
   avatarProps?: string;
   children?: React.ReactNode | React.ReactNodeArray;
 }
 
 const TableCellAvatar: React.FC<TableCellAvatarProps> = props => {
-  const { children, className, thumbnail, avatarProps, ...rest } = props;
+  const {
+    children,
+    className,
+    alignRight,
+    thumbnail,
+    avatarProps,
+    ...rest
+  } = props;
 
   const classes = useStyles(props);
 
   return (
     <TableCell className={classNames(classes.root, className)} {...rest}>
-      <div className={classes.content}>
+      <div
+        className={classNames(classes.content, {
+          [classes.alignRight]: alignRight
+        })}
+      >
         {thumbnail === undefined ? (
           <Avatar className={classNames(classes.avatar, avatarProps)}>
             <Cached color="primary" />
@@ -68,7 +83,7 @@ const TableCellAvatar: React.FC<TableCellAvatarProps> = props => {
             src={thumbnail}
           />
         )}
-        <div className={classes.children}>{children}</div>
+        {!alignRight && <div className={classes.children}>{children}</div>}
       </div>
     </TableCell>
   );
diff --git a/src/components/TableHead/TableHead.tsx b/src/components/TableHead/TableHead.tsx
index f382fa1c7..da846e74e 100644
--- a/src/components/TableHead/TableHead.tsx
+++ b/src/components/TableHead/TableHead.tsx
@@ -63,6 +63,14 @@ const useStyles = makeStyles(
   { name: "TableHead" }
 );
 
+function getColSpan(colSpan: number, dragRows: boolean): number {
+  if (dragRows) {
+    return colSpan - 2;
+  }
+
+  return colSpan - 1;
+}
+
 const TableHead: React.FC<TableHeadProps> = props => {
   const {
     children,
@@ -107,7 +115,7 @@ const TableHead: React.FC<TableHeadProps> = props => {
           <>
             <TableCell
               className={classNames(classes.root)}
-              colSpan={colSpan - 1}
+              colSpan={getColSpan(colSpan, dragRows)}
             >
               <div className={classes.container}>
                 {selected && (
diff --git a/src/discounts/components/DiscountCategories/DiscountCategories.tsx b/src/discounts/components/DiscountCategories/DiscountCategories.tsx
index 419d68187..ddf81ad16 100644
--- a/src/discounts/components/DiscountCategories/DiscountCategories.tsx
+++ b/src/discounts/components/DiscountCategories/DiscountCategories.tsx
@@ -28,23 +28,24 @@ export interface DiscountCategoriesProps extends ListProps, ListActions {
 }
 
 const useStyles = makeStyles(
-  theme => ({
-    iconCell: {
+  {
+    colActions: {
       "&:last-child": {
         paddingRight: 0
       },
-      width: 48 + theme.spacing(0.5)
+      width: 80
+    },
+    colName: {
+      width: "auto"
+    },
+    colProducts: {
+      textAlign: "right",
+      width: 140
     },
     tableRow: {
       cursor: "pointer"
-    },
-    textRight: {
-      textAlign: "right"
-    },
-    wideColumn: {
-      width: "60%"
     }
-  }),
+  },
   { name: "DiscountCategories" }
 );
 
@@ -52,8 +53,7 @@ const numberOfColumns = 4;
 
 const DiscountCategories: React.FC<DiscountCategoriesProps> = props => {
   const {
-    discount: sale,
-
+    discount,
     disabled,
     pageInfo,
     onCategoryAssign,
@@ -88,19 +88,25 @@ const DiscountCategories: React.FC<DiscountCategoriesProps> = props => {
         }
       />
       <ResponsiveTable>
+        <colgroup>
+          <col />
+          <col className={classes.colName} />
+          <col className={classes.colProducts} />
+          <col className={classes.colActions} />
+        </colgroup>
         <TableHead
           colSpan={numberOfColumns}
           selected={selected}
           disabled={disabled}
-          items={maybe(() => sale.categories.edges.map(edge => edge.node))}
+          items={maybe(() => discount.categories.edges.map(edge => edge.node))}
           toggleAll={toggleAll}
           toolbar={toolbar}
         >
           <>
-            <TableCell className={classes.wideColumn}>
+            <TableCell className={classes.colName}>
               <FormattedMessage defaultMessage="Category name" />
             </TableCell>
-            <TableCell className={classes.textRight}>
+            <TableCell className={classes.colProducts}>
               <FormattedMessage
                 defaultMessage="Products"
                 description="number of products"
@@ -124,7 +130,7 @@ const DiscountCategories: React.FC<DiscountCategoriesProps> = props => {
         </TableFooter>
         <TableBody>
           {renderCollection(
-            maybe(() => sale.categories.edges.map(edge => edge.node)),
+            maybe(() => discount.categories.edges.map(edge => edge.node)),
             category => {
               const isSelected = category ? isChecked(category.id) : false;
 
@@ -147,13 +153,13 @@ const DiscountCategories: React.FC<DiscountCategoriesProps> = props => {
                   <TableCell>
                     {maybe<React.ReactNode>(() => category.name, <Skeleton />)}
                   </TableCell>
-                  <TableCell className={classes.textRight}>
+                  <TableCell className={classes.colProducts}>
                     {maybe<React.ReactNode>(
                       () => category.products.totalCount,
                       <Skeleton />
                     )}
                   </TableCell>
-                  <TableCell className={classes.iconCell}>
+                  <TableCell className={classes.colActions}>
                     <IconButton
                       disabled={!category || disabled}
                       onClick={event => {
diff --git a/src/discounts/components/DiscountCollections/DiscountCollections.tsx b/src/discounts/components/DiscountCollections/DiscountCollections.tsx
index 1525ae8e8..4d61dfd7b 100644
--- a/src/discounts/components/DiscountCollections/DiscountCollections.tsx
+++ b/src/discounts/components/DiscountCollections/DiscountCollections.tsx
@@ -28,23 +28,25 @@ export interface DiscountCollectionsProps extends ListProps, ListActions {
 }
 
 const useStyles = makeStyles(
-  theme => ({
-    iconCell: {
+  {
+    colActions: {
       "&:last-child": {
         paddingRight: 0
       },
-      width: 48 + theme.spacing(0.5)
+      width: 80
+    },
+    colName: {
+      width: "auto"
+    },
+    colProducts: {
+      textAlign: "right",
+      width: 140
     },
     tableRow: {
       cursor: "pointer"
     },
-    textRight: {
-      textAlign: "right"
-    },
-    wideColumn: {
-      width: "60%"
-    }
-  }),
+    textRight: {}
+  },
   { name: "DiscountCollections" }
 );
 
@@ -88,6 +90,12 @@ const DiscountCollections: React.FC<DiscountCollectionsProps> = props => {
         }
       />
       <ResponsiveTable>
+        <colgroup>
+          <col />
+          <col className={classes.colName} />
+          <col className={classes.colProducts} />
+          <col className={classes.colActions} />
+        </colgroup>
         <TableHead
           colSpan={numberOfColumns}
           selected={selected}
@@ -96,7 +104,7 @@ const DiscountCollections: React.FC<DiscountCollectionsProps> = props => {
           toggleAll={toggleAll}
           toolbar={toolbar}
         >
-          <TableCell className={classes.wideColumn}>
+          <TableCell className={classes.colName}>
             <FormattedMessage defaultMessage="Collection name" />
           </TableCell>
           <TableCell className={classes.textRight}>
@@ -141,19 +149,19 @@ const DiscountCollections: React.FC<DiscountCollectionsProps> = props => {
                       onChange={() => toggle(collection.id)}
                     />
                   </TableCell>
-                  <TableCell>
+                  <TableCell className={classes.colName}>
                     {maybe<React.ReactNode>(
                       () => collection.name,
                       <Skeleton />
                     )}
                   </TableCell>
-                  <TableCell className={classes.textRight}>
+                  <TableCell className={classes.colProducts}>
                     {maybe<React.ReactNode>(
                       () => collection.products.totalCount,
                       <Skeleton />
                     )}
                   </TableCell>
-                  <TableCell className={classes.iconCell}>
+                  <TableCell className={classes.colActions}>
                     <IconButton
                       disabled={!collection || disabled}
                       onClick={event => {
diff --git a/src/discounts/components/DiscountProducts/DiscountProducts.tsx b/src/discounts/components/DiscountProducts/DiscountProducts.tsx
index 8f3d51b38..e4d682400 100644
--- a/src/discounts/components/DiscountProducts/DiscountProducts.tsx
+++ b/src/discounts/components/DiscountProducts/DiscountProducts.tsx
@@ -44,7 +44,7 @@ const useStyles = makeStyles(
       width: "auto"
     },
     colNameLabel: {
-      marginLeft: AVATAR_MARGIN
+      marginLeft: AVATAR_MARGIN + theme.spacing(3)
     },
     colPublished: {
       width: 150
@@ -102,6 +102,13 @@ const DiscountProducts: React.FC<SaleProductsProps> = props => {
         }
       />
       <ResponsiveTable>
+        <colgroup>
+          <col />
+          <col className={classes.colName} />
+          <col className={classes.colType} />
+          <col className={classes.colPublished} />
+          <col className={classes.colActions} />
+        </colgroup>
         <TableHead
           colSpan={numberOfColumns}
           selected={selected}
@@ -124,7 +131,7 @@ const DiscountProducts: React.FC<SaleProductsProps> = props => {
               description="product is published"
             />
           </TableCell>
-          <TableCell />
+          <TableCell className={classes.colActions} />
         </TableHead>
         <TableFooter>
           <TableRow>
diff --git a/src/discounts/components/VoucherList/VoucherList.tsx b/src/discounts/components/VoucherList/VoucherList.tsx
index 4733999a7..db0536d7a 100644
--- a/src/discounts/components/VoucherList/VoucherList.tsx
+++ b/src/discounts/components/VoucherList/VoucherList.tsx
@@ -17,6 +17,7 @@ import { maybe, renderCollection } from "@saleor/misc";
 import { ListActions, ListProps, SortPage } from "@saleor/types";
 import { DiscountValueTypeEnum } from "@saleor/types/globalTypes";
 import { getArrowDirection } from "@saleor/utils/sort";
+import { getFooterColSpanWithBulkActions } from "@saleor/utils/tables";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
@@ -78,7 +79,7 @@ const useStyles = makeStyles(
   { name: "VoucherList" }
 );
 
-const numberOfColumns = 7;
+const numberOfColumns = 6;
 
 const VoucherList: React.FC<VoucherListProps> = props => {
   const {
@@ -130,6 +131,7 @@ const VoucherList: React.FC<VoucherListProps> = props => {
               ? getArrowDirection(sort.asc)
               : undefined
           }
+          textAlign="right"
           onClick={() => onSort(VoucherListUrlSortField.minSpent)}
           className={classes.colMinSpent}
         >
@@ -144,6 +146,7 @@ const VoucherList: React.FC<VoucherListProps> = props => {
               ? getArrowDirection(sort.asc)
               : undefined
           }
+          textAlign="right"
           onClick={() => onSort(VoucherListUrlSortField.startDate)}
           className={classes.colStart}
         >
@@ -158,6 +161,7 @@ const VoucherList: React.FC<VoucherListProps> = props => {
               ? getArrowDirection(sort.asc)
               : undefined
           }
+          textAlign="right"
           onClick={() => onSort(VoucherListUrlSortField.endDate)}
           className={classes.colEnd}
         >
@@ -172,6 +176,7 @@ const VoucherList: React.FC<VoucherListProps> = props => {
               ? getArrowDirection(sort.asc)
               : undefined
           }
+          textAlign="right"
           onClick={() => onSort(VoucherListUrlSortField.value)}
           className={classes.colValue}
         >
@@ -186,6 +191,7 @@ const VoucherList: React.FC<VoucherListProps> = props => {
               ? getArrowDirection(sort.asc)
               : undefined
           }
+          textAlign="right"
           onClick={() => onSort(VoucherListUrlSortField.limit)}
           className={classes.colUses}
         >
@@ -195,7 +201,7 @@ const VoucherList: React.FC<VoucherListProps> = props => {
       <TableFooter>
         <TableRow>
           <TablePagination
-            colSpan={numberOfColumns}
+            colSpan={getFooterColSpanWithBulkActions(vouchers, numberOfColumns)}
             settings={settings}
             hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
             onNextPage={onNextPage}
diff --git a/src/home/components/HomeProductListCard/HomeProductListCard.tsx b/src/home/components/HomeProductListCard/HomeProductListCard.tsx
index 4ebe0e70c..d68cfbe64 100644
--- a/src/home/components/HomeProductListCard/HomeProductListCard.tsx
+++ b/src/home/components/HomeProductListCard/HomeProductListCard.tsx
@@ -22,10 +22,14 @@ const useStyles = makeStyles(
       height: 64,
       width: 64
     },
-    avatarSpacing: {
+    colAvatar: {
       paddingBottom: theme.spacing(2),
       paddingRight: theme.spacing(),
-      paddingTop: theme.spacing(2)
+      paddingTop: theme.spacing(2),
+      width: 112
+    },
+    colName: {
+      width: "auto"
     },
     label: {
       paddingLeft: 0
@@ -62,6 +66,11 @@ export const HomeProductList: React.FC<HomeProductListProps> = props => {
         })}
       />
       <ResponsiveTable>
+        <colgroup>
+          <col className={classes.colAvatar} />
+          <col className={classes.colName} />
+          <col />
+        </colgroup>
         <TableBody>
           {renderCollection(
             topProducts,
@@ -79,7 +88,7 @@ export const HomeProductList: React.FC<HomeProductListProps> = props => {
                 }
               >
                 <TableCellAvatar
-                  className={classes.avatarSpacing}
+                  className={classes.colAvatar}
                   thumbnail={maybe(() => variant.product.thumbnail.url)}
                   avatarProps={classes.avatarProps}
                 />
@@ -127,7 +136,7 @@ export const HomeProductList: React.FC<HomeProductListProps> = props => {
             ),
             () => (
               <TableRow>
-                <TableCell className={classes.noProducts}>
+                <TableCell colSpan={3} className={classes.noProducts}>
                   <Typography>
                     <FormattedMessage
                       defaultMessage="No products found"
diff --git a/src/navigation/components/MenuList/MenuList.tsx b/src/navigation/components/MenuList/MenuList.tsx
index c2f161e66..d97470143 100644
--- a/src/navigation/components/MenuList/MenuList.tsx
+++ b/src/navigation/components/MenuList/MenuList.tsx
@@ -16,6 +16,7 @@ import { maybe, renderCollection } from "@saleor/misc";
 import { MenuListUrlSortField } from "@saleor/navigation/urls";
 import { ListActions, ListProps, SortPage } from "@saleor/types";
 import { getArrowDirection } from "@saleor/utils/sort";
+import { getFooterColSpanWithBulkActions } from "@saleor/utils/tables";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
@@ -37,6 +38,9 @@ const useStyles = makeStyles(
       },
       colTitle: {}
     },
+    colAction: {
+      width: 80
+    },
     colItems: {
       textAlign: "right"
     },
@@ -50,7 +54,7 @@ const useStyles = makeStyles(
   { name: "MenuList" }
 );
 
-const numberOfColumns = 4;
+const numberOfColumns = 3;
 
 const MenuList: React.FC<MenuListProps> = props => {
   const {
@@ -116,12 +120,12 @@ const MenuList: React.FC<MenuListProps> = props => {
               id="menuListItems"
             />
           </TableCellHeader>
-          <TableCell />
+          <TableCell className={classes.colAction} />
         </TableHead>
         <TableFooter>
           <TableRow>
             <TablePagination
-              colSpan={numberOfColumns}
+              colSpan={getFooterColSpanWithBulkActions(menus, numberOfColumns)}
               settings={settings}
               hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
               onNextPage={onNextPage}
@@ -165,6 +169,7 @@ const MenuList: React.FC<MenuListProps> = props => {
                     )}
                   </TableCell>
                   <IconButtonTableCell
+                    className={classes.colAction}
                     disabled={disabled}
                     onClick={() => onDelete(menu.id)}
                   >
diff --git a/src/orders/components/OrderFulfillment/OrderFulfillment.tsx b/src/orders/components/OrderFulfillment/OrderFulfillment.tsx
index 52ec5e04b..89b79e46d 100644
--- a/src/orders/components/OrderFulfillment/OrderFulfillment.tsx
+++ b/src/orders/components/OrderFulfillment/OrderFulfillment.tsx
@@ -82,7 +82,7 @@ interface OrderFulfillmentProps {
   onTrackingCodeAdd: () => void;
 }
 
-const numberOfColumns = 4;
+const numberOfColumns = 5;
 
 const OrderFulfillment: React.FC<OrderFulfillmentProps> = props => {
   const {
diff --git a/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx b/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
index 0330b72ee..53e588717 100644
--- a/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
+++ b/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
@@ -38,7 +38,8 @@ import {
 const useStyles = makeStyles(
   theme => ({
     avatar: {
-      paddingLeft: 0
+      paddingLeft: 0,
+      width: 64
     },
     colName: {
       paddingLeft: 0
diff --git a/src/plugins/components/PluginsList/PluginsList.tsx b/src/plugins/components/PluginsList/PluginsList.tsx
index 37528e7c2..a6d633ba4 100644
--- a/src/plugins/components/PluginsList/PluginsList.tsx
+++ b/src/plugins/components/PluginsList/PluginsList.tsx
@@ -28,18 +28,16 @@ export interface PluginListProps
 
 const useStyles = makeStyles(
   theme => ({
-    [theme.breakpoints.up("lg")]: {
-      colAction: {
-        "& svg": {
-          color: theme.palette.primary.main
-        },
-        textAlign: "right" as "right"
+    colAction: {
+      "& svg": {
+        color: theme.palette.primary.main
       },
-      colActive: {},
-      colName: {}
+      textAlign: "right",
+      width: 200
+    },
+    colActive: {
+      width: 200
     },
-    colAction: {},
-    colActive: {},
     colName: {},
     link: {
       cursor: "pointer"
@@ -48,7 +46,7 @@ const useStyles = makeStyles(
   { name: "PluginsList" }
 );
 
-const numberOfColumns = 4;
+const numberOfColumns = 3;
 
 const PluginList: React.FC<PluginListProps> = props => {
   const {
diff --git a/src/productTypes/components/ProductTypeAttributes/ProductTypeAttributes.tsx b/src/productTypes/components/ProductTypeAttributes/ProductTypeAttributes.tsx
index 0487366bc..defe87b39 100644
--- a/src/productTypes/components/ProductTypeAttributes/ProductTypeAttributes.tsx
+++ b/src/productTypes/components/ProductTypeAttributes/ProductTypeAttributes.tsx
@@ -26,16 +26,19 @@ import {
 } from "../../types/ProductTypeDetails";
 
 const useStyles = makeStyles(
-  theme => ({
-    colName: {},
-    colSlug: {
-      width: 300
-    },
-    iconCell: {
+  {
+    colAction: {
       "&:last-child": {
         paddingRight: 0
       },
-      width: 48 + theme.spacing(1.5)
+      width: 80
+    },
+    colGrab: {
+      width: 60
+    },
+    colName: {},
+    colSlug: {
+      width: 300
     },
     link: {
       cursor: "pointer"
@@ -43,7 +46,7 @@ const useStyles = makeStyles(
     textLeft: {
       textAlign: "left"
     }
-  }),
+  },
   { name: "ProductTypeAttributes" }
 );
 
@@ -115,6 +118,13 @@ const ProductTypeAttributes: React.FC<ProductTypeAttributesProps> = props => {
         }
       />
       <ResponsiveTable>
+        <colgroup>
+          <col className={classes.colGrab} />
+          <col />
+          <col className={classes.colName} />
+          <col className={classes.colSlug} />
+          <col className={classes.colAction} />
+        </colgroup>
         <TableHead
           colSpan={numberOfColumns}
           disabled={disabled}
@@ -178,7 +188,7 @@ const ProductTypeAttributes: React.FC<ProductTypeAttributesProps> = props => {
                       <Skeleton />
                     )}
                   </TableCell>
-                  <TableCell className={classes.iconCell}>
+                  <TableCell className={classes.colAction}>
                     <IconButton
                       onClick={stopPropagation(() =>
                         onAttributeUnassign(attribute.id)
diff --git a/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx b/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx
index 39ac8e6b2..1b73f0c4f 100644
--- a/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx
+++ b/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx
@@ -22,13 +22,18 @@ import { ProductVariantDetails_productVariant } from "../../types/ProductVariant
 
 const useStyles = makeStyles(
   theme => ({
+    colAvatar: {
+      width: 64
+    },
     colName: {
-      paddingLeft: 0,
-      textAlign: [["left"], "!important"] as any
+      paddingLeft: 0
     },
     link: {
       cursor: "pointer"
     },
+    noHandle: {
+      textAlign: "right"
+    },
     tabActive: {
       "& > td:first-child": {
         "&:before": {
@@ -92,6 +97,7 @@ const ProductVariantNavigation: React.FC<ProductVariantNavigationProps> = props
               onClick={variant ? () => onRowClick(variant.id) : undefined}
             >
               <TableCellAvatar
+                className={classes.colAvatar}
                 thumbnail={maybe(
                   () => variant.images[0].url,
                   fallbackThumbnail
@@ -115,8 +121,17 @@ const ProductVariantNavigation: React.FC<ProductVariantNavigationProps> = props
             </TableRow>
           ) : (
             <TableRow>
-              <TableCellAvatar className={classes.tabActive} thumbnail={null} />
-              <TableCell className={classes.colName} colSpan={2}>
+              <TableCellAvatar
+                alignRight
+                className={classNames(
+                  classes.colAvatar,
+                  classes.tabActive,
+                  classes.noHandle
+                )}
+                thumbnail={null}
+                colSpan={2}
+              />
+              <TableCell className={classes.colName}>
                 <FormattedMessage
                   defaultMessage="New Variant"
                   description="variant name"
diff --git a/src/products/components/ProductVariants/ProductVariants.tsx b/src/products/components/ProductVariants/ProductVariants.tsx
index 3c16477a5..0df83659c 100644
--- a/src/products/components/ProductVariants/ProductVariants.tsx
+++ b/src/products/components/ProductVariants/ProductVariants.tsx
@@ -73,16 +73,19 @@ const useStyles = makeStyles(
         width: 30
       },
       colInventory: {
-        width: 270
+        width: 200
       },
       colName: {},
       colPrice: {
-        width: 150
+        width: 135
       },
       colSku: {
         width: 200
       }
     },
+    colGrab: {
+      width: 60
+    },
     colInventory: {
       textAlign: "right"
     },
@@ -278,6 +281,14 @@ export const ProductVariants: React.FC<ProductVariantsProps> = props => {
       )}
       {hasVariants && (
         <ResponsiveTable className={classes.denseTable}>
+          <colgroup>
+            <col className={classes.colGrab} />
+            <col />
+            <col className={classes.colName} />
+            <col className={classes.colSku} />
+            <col className={classes.colPrice} />
+            <col className={classes.colInventory} />
+          </colgroup>
           <TableHead
             colSpan={numberOfColumns}
             selected={selected}
diff --git a/src/shipping/components/ShippingZonesList/ShippingZonesList.tsx b/src/shipping/components/ShippingZonesList/ShippingZonesList.tsx
index 80a879229..c897b9129 100644
--- a/src/shipping/components/ShippingZonesList/ShippingZonesList.tsx
+++ b/src/shipping/components/ShippingZonesList/ShippingZonesList.tsx
@@ -15,8 +15,8 @@ import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
 import { ShippingZoneFragment } from "@saleor/fragments/types/ShippingZoneFragment";
 import { maybe, renderCollection } from "@saleor/misc";
-import { ICONBUTTON_SIZE } from "@saleor/theme";
 import { ListActions, ListProps } from "@saleor/types";
+import { getFooterColSpanWithBulkActions } from "@saleor/utils/tables";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -28,17 +28,15 @@ export interface ShippingZonesListProps extends ListProps, ListActions {
 
 const useStyles = makeStyles(
   theme => ({
-    [theme.breakpoints.up("lg")]: {
-      colCountries: {},
-      colName: { width: 200 }
-    },
-    alignRight: {
+    colAction: {
       "&:last-child": {
         paddingRight: theme.spacing(1)
       },
-      width: ICONBUTTON_SIZE + theme.spacing(0.5)
+      width: 80
+    },
+    colCountries: {
+      width: 180
     },
-    colCountries: {},
     colName: {
       paddingLeft: 0
     },
@@ -49,7 +47,7 @@ const useStyles = makeStyles(
   { name: "ShippingZonesList" }
 );
 
-const numberOfColumns = 4;
+const numberOfColumns = 3;
 
 const ShippingZonesList: React.FC<ShippingZonesListProps> = props => {
   const {
@@ -108,12 +106,15 @@ const ShippingZonesList: React.FC<ShippingZonesListProps> = props => {
           <TableCell className={classes.colCountries}>
             <FormattedMessage defaultMessage="Countries" />
           </TableCell>
-          <TableCell />
+          <TableCell className={classes.colAction} />
         </TableHead>
         <TableFooter>
           <TableRow>
             <TablePagination
-              colSpan={4}
+              colSpan={getFooterColSpanWithBulkActions(
+                shippingZones,
+                numberOfColumns
+              )}
               settings={settings}
               hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
               onNextPage={onNextPage}
@@ -161,7 +162,7 @@ const ShippingZonesList: React.FC<ShippingZonesListProps> = props => {
                       <Skeleton />
                     )}
                   </TableCell>
-                  <TableCell className={classes.alignRight}>
+                  <TableCell className={classes.colAction}>
                     <IconButton
                       color="primary"
                       disabled={disabled}
diff --git a/src/staff/components/StaffList/StaffList.tsx b/src/staff/components/StaffList/StaffList.tsx
index 2f60804de..cdb2a3f07 100644
--- a/src/staff/components/StaffList/StaffList.tsx
+++ b/src/staff/components/StaffList/StaffList.tsx
@@ -68,6 +68,8 @@ interface StaffListProps extends ListProps, SortPage<StaffListUrlSortField> {
   staffMembers: StaffList_staffUsers_edges_node[];
 }
 
+const numberOfColumns = 2;
+
 const StaffList: React.FC<StaffListProps> = props => {
   const {
     settings,
@@ -119,7 +121,7 @@ const StaffList: React.FC<StaffListProps> = props => {
       <TableFooter>
         <TableRow>
           <TablePagination
-            colSpan={3}
+            colSpan={numberOfColumns}
             settings={settings}
             hasNextPage={
               pageInfo && !disabled ? pageInfo.hasNextPage : undefined
diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index a54c896a3..f47ece1fe 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -49310,7 +49310,7 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
-                colspan="5"
+                colspan="4"
               >
                 <div
                   class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
@@ -50041,7 +50041,7 @@ exports[`Storyshots Views / Collections / Collection list loading 1`] = `
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
-                colspan="5"
+                colspan="4"
               >
                 <div
                   class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
@@ -50433,7 +50433,7 @@ exports[`Storyshots Views / Collections / Collection list no data 1`] = `
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
-                colspan="5"
+                colspan="4"
               >
                 <div
                   class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
@@ -50546,7 +50546,7 @@ exports[`Storyshots Views / Collections / Collection list no data 1`] = `
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id"
-                colspan="5"
+                colspan="4"
               >
                 No collections found
               </td>
@@ -65508,6 +65508,18 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
               <table
                 class="MuiTable-root-id"
               >
+                <colgroup>
+                  <col />
+                  <col
+                    class="DiscountCollections-colName-id"
+                  />
+                  <col
+                    class="DiscountCollections-colProducts-id"
+                  />
+                  <col
+                    class="DiscountCollections-colActions-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -65550,7 +65562,7 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
                       </span>
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountCollections-wideColumn-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountCollections-colName-id"
                       scope="col"
                     >
                       Collection name
@@ -65685,17 +65697,17 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
                       </span>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCollections-colName-id"
                     >
                       Winter Collection
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCollections-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCollections-colProducts-id"
                     >
                       110
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCollections-iconCell-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCollections-colActions-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -66315,6 +66327,18 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
               <table
                 class="MuiTable-root-id"
               >
+                <colgroup>
+                  <col />
+                  <col
+                    class="DiscountCategories-colName-id"
+                  />
+                  <col
+                    class="DiscountCategories-colProducts-id"
+                  />
+                  <col
+                    class="DiscountCategories-colActions-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -66357,13 +66381,13 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
                       </span>
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-wideColumn-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-colName-id"
                       scope="col"
                     >
                       Category name
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-colProducts-id"
                       scope="col"
                     >
                       Products
@@ -66497,12 +66521,12 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
                       Apparel
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-colProducts-id"
                     >
                       18
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-iconCell-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-colActions-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -67132,6 +67156,18 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
               <table
                 class="MuiTable-root-id"
               >
+                <colgroup>
+                  <col />
+                  <col
+                    class="DiscountCategories-colName-id"
+                  />
+                  <col
+                    class="DiscountCategories-colProducts-id"
+                  />
+                  <col
+                    class="DiscountCategories-colActions-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -67174,13 +67210,13 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
                       </span>
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-wideColumn-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-colName-id"
                       scope="col"
                     >
                       Category name
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-colProducts-id"
                       scope="col"
                     >
                       Products
@@ -67314,12 +67350,12 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
                       Apparel
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-colProducts-id"
                     >
                       18
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-iconCell-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-colActions-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -67960,6 +67996,18 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
               <table
                 class="MuiTable-root-id"
               >
+                <colgroup>
+                  <col />
+                  <col
+                    class="DiscountCategories-colName-id"
+                  />
+                  <col
+                    class="DiscountCategories-colProducts-id"
+                  />
+                  <col
+                    class="DiscountCategories-colActions-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -68004,13 +68052,13 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
                       </span>
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-wideColumn-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-colName-id"
                       scope="col"
                     >
                       Category name
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-colProducts-id"
                       scope="col"
                     >
                       Products
@@ -68151,7 +68199,7 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
                       </span>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-textRight-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-colProducts-id"
                     >
                       <span
                         class="Skeleton-skeleton-id"
@@ -68160,7 +68208,7 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
                       </span>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-iconCell-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-colActions-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
@@ -68799,6 +68847,21 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
               <table
                 class="MuiTable-root-id"
               >
+                <colgroup>
+                  <col />
+                  <col
+                    class="DiscountProducts-colName-id"
+                  />
+                  <col
+                    class="DiscountProducts-colType-id"
+                  />
+                  <col
+                    class="DiscountProducts-colPublished-id"
+                  />
+                  <col
+                    class="DiscountProducts-colActions-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -68863,7 +68926,7 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
                       Published
                     </th>
                     <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountProducts-colActions-id"
                       scope="col"
                     />
                   </tr>
@@ -76528,7 +76591,7 @@ exports[`Storyshots Views / Discounts / Voucher list default 1`] = `
                 scope="col"
               >
                 <div
-                  class="TableCellHeader-labelContainer-id"
+                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                 >
                   <div
                     class="TableCellHeader-label-id"
@@ -76542,7 +76605,7 @@ exports[`Storyshots Views / Discounts / Voucher list default 1`] = `
                 scope="col"
               >
                 <div
-                  class="TableCellHeader-labelContainer-id"
+                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                 >
                   <div
                     class="TableCellHeader-label-id"
@@ -76556,7 +76619,7 @@ exports[`Storyshots Views / Discounts / Voucher list default 1`] = `
                 scope="col"
               >
                 <div
-                  class="TableCellHeader-labelContainer-id"
+                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                 >
                   <div
                     class="TableCellHeader-label-id"
@@ -76570,7 +76633,7 @@ exports[`Storyshots Views / Discounts / Voucher list default 1`] = `
                 scope="col"
               >
                 <div
-                  class="TableCellHeader-labelContainer-id"
+                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                 >
                   <div
                     class="TableCellHeader-label-id"
@@ -76584,7 +76647,7 @@ exports[`Storyshots Views / Discounts / Voucher list default 1`] = `
                 scope="col"
               >
                 <div
-                  class="TableCellHeader-labelContainer-id"
+                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                 >
                   <div
                     class="TableCellHeader-label-id"
@@ -77074,7 +77137,7 @@ exports[`Storyshots Views / Discounts / Voucher list loading 1`] = `
                 scope="col"
               >
                 <div
-                  class="TableCellHeader-labelContainer-id"
+                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                 >
                   <div
                     class="TableCellHeader-label-id"
@@ -77088,7 +77151,7 @@ exports[`Storyshots Views / Discounts / Voucher list loading 1`] = `
                 scope="col"
               >
                 <div
-                  class="TableCellHeader-labelContainer-id"
+                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                 >
                   <div
                     class="TableCellHeader-label-id"
@@ -77102,7 +77165,7 @@ exports[`Storyshots Views / Discounts / Voucher list loading 1`] = `
                 scope="col"
               >
                 <div
-                  class="TableCellHeader-labelContainer-id"
+                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                 >
                   <div
                     class="TableCellHeader-label-id"
@@ -77116,7 +77179,7 @@ exports[`Storyshots Views / Discounts / Voucher list loading 1`] = `
                 scope="col"
               >
                 <div
-                  class="TableCellHeader-labelContainer-id"
+                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                 >
                   <div
                     class="TableCellHeader-label-id"
@@ -77130,7 +77193,7 @@ exports[`Storyshots Views / Discounts / Voucher list loading 1`] = `
                 scope="col"
               >
                 <div
-                  class="TableCellHeader-labelContainer-id"
+                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                 >
                   <div
                     class="TableCellHeader-label-id"
@@ -77529,7 +77592,7 @@ exports[`Storyshots Views / Discounts / Voucher list no data 1`] = `
                 scope="col"
               >
                 <div
-                  class="TableCellHeader-labelContainer-id"
+                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                 >
                   <div
                     class="TableCellHeader-label-id"
@@ -77543,7 +77606,7 @@ exports[`Storyshots Views / Discounts / Voucher list no data 1`] = `
                 scope="col"
               >
                 <div
-                  class="TableCellHeader-labelContainer-id"
+                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                 >
                   <div
                     class="TableCellHeader-label-id"
@@ -77557,7 +77620,7 @@ exports[`Storyshots Views / Discounts / Voucher list no data 1`] = `
                 scope="col"
               >
                 <div
-                  class="TableCellHeader-labelContainer-id"
+                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                 >
                   <div
                     class="TableCellHeader-label-id"
@@ -77571,7 +77634,7 @@ exports[`Storyshots Views / Discounts / Voucher list no data 1`] = `
                 scope="col"
               >
                 <div
-                  class="TableCellHeader-labelContainer-id"
+                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                 >
                   <div
                     class="TableCellHeader-label-id"
@@ -77585,7 +77648,7 @@ exports[`Storyshots Views / Discounts / Voucher list no data 1`] = `
                 scope="col"
               >
                 <div
-                  class="TableCellHeader-labelContainer-id"
+                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                 >
                   <div
                     class="TableCellHeader-label-id"
@@ -77604,7 +77667,7 @@ exports[`Storyshots Views / Discounts / Voucher list no data 1`] = `
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
-                colspan="7"
+                colspan="6"
               >
                 <div
                   class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
@@ -77717,7 +77780,7 @@ exports[`Storyshots Views / Discounts / Voucher list no data 1`] = `
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id"
-                colspan="7"
+                colspan="6"
               >
                 No vouchers found
               </td>
@@ -78042,6 +78105,15 @@ exports[`Storyshots Views / HomePage default 1`] = `
             <table
               class="MuiTable-root-id"
             >
+              <colgroup>
+                <col
+                  class="HomeProductListCard-colAvatar-id"
+                />
+                <col
+                  class="HomeProductListCard-colName-id"
+                />
+                <col />
+              </colgroup>
               <tbody
                 class="MuiTableBody-root-id"
               >
@@ -78049,7 +78121,7 @@ exports[`Storyshots Views / HomePage default 1`] = `
                   class="MuiTableRow-root-id HomeProductListCard-tableRow-id MuiTableRow-hover-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id HomeProductListCard-avatarSpacing-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id HomeProductListCard-colAvatar-id"
                   >
                     <div
                       class="TableCellAvatar-content-id"
@@ -78743,6 +78815,15 @@ exports[`Storyshots Views / HomePage loading 1`] = `
             <table
               class="MuiTable-root-id"
             >
+              <colgroup>
+                <col
+                  class="HomeProductListCard-colAvatar-id"
+                />
+                <col
+                  class="HomeProductListCard-colName-id"
+                />
+                <col />
+              </colgroup>
               <tbody
                 class="MuiTableBody-root-id"
               >
@@ -78750,7 +78831,7 @@ exports[`Storyshots Views / HomePage loading 1`] = `
                   class="MuiTableRow-root-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id HomeProductListCard-avatarSpacing-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id HomeProductListCard-colAvatar-id"
                   >
                     <div
                       class="TableCellAvatar-content-id"
@@ -79109,6 +79190,15 @@ exports[`Storyshots Views / HomePage no data 1`] = `
             <table
               class="MuiTable-root-id"
             >
+              <colgroup>
+                <col
+                  class="HomeProductListCard-colAvatar-id"
+                />
+                <col
+                  class="HomeProductListCard-colName-id"
+                />
+                <col />
+              </colgroup>
               <tbody
                 class="MuiTableBody-root-id"
               >
@@ -79117,6 +79207,7 @@ exports[`Storyshots Views / HomePage no data 1`] = `
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id HomeProductListCard-noProducts-id"
+                    colspan="3"
                   >
                     <div
                       class="MuiTypography-root-id MuiTypography-body1-id"
@@ -81859,7 +81950,7 @@ exports[`Storyshots Views / Navigation / Menu list default 1`] = `
                 </div>
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id MenuList-colAction-id"
                 scope="col"
               />
             </tr>
@@ -82028,7 +82119,7 @@ exports[`Storyshots Views / Navigation / Menu list default 1`] = `
                 3
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id MenuList-colAction-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -82101,7 +82192,7 @@ exports[`Storyshots Views / Navigation / Menu list default 1`] = `
                 2
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id MenuList-colAction-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -82269,7 +82360,7 @@ exports[`Storyshots Views / Navigation / Menu list loading 1`] = `
                 </div>
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id MenuList-colAction-id"
                 scope="col"
               />
             </tr>
@@ -82449,7 +82540,7 @@ exports[`Storyshots Views / Navigation / Menu list loading 1`] = `
                 </span>
               </td>
               <td
-                class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id"
+                class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id MenuList-colAction-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
@@ -82581,7 +82672,7 @@ exports[`Storyshots Views / Navigation / Menu list no data 1`] = `
                 </div>
               </th>
               <th
-                class="MuiTableCell-root-id MuiTableCell-head-id"
+                class="MuiTableCell-root-id MuiTableCell-head-id MenuList-colAction-id"
                 scope="col"
               />
             </tr>
@@ -82594,7 +82685,7 @@ exports[`Storyshots Views / Navigation / Menu list no data 1`] = `
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
-                colspan="4"
+                colspan="3"
               >
                 <div
                   class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
@@ -82707,7 +82798,7 @@ exports[`Storyshots Views / Navigation / Menu list no data 1`] = `
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id"
-                colspan="4"
+                colspan="3"
               >
                 No menus found
               </td>
@@ -87381,7 +87472,7 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-infoRow-id"
-                      colspan="4"
+                      colspan="5"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
@@ -87536,7 +87627,7 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-infoRow-id"
-                      colspan="4"
+                      colspan="5"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
@@ -88861,7 +88952,7 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-infoRow-id"
-                      colspan="4"
+                      colspan="5"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
@@ -89057,7 +89148,7 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-infoRow-id"
-                      colspan="4"
+                      colspan="5"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
@@ -90478,7 +90569,7 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-infoRow-id"
-                      colspan="4"
+                      colspan="5"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
@@ -90674,7 +90765,7 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-infoRow-id"
-                      colspan="4"
+                      colspan="5"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
@@ -91951,7 +92042,7 @@ exports[`Storyshots Views / Orders / Order details loading 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-infoRow-id"
-                      colspan="4"
+                      colspan="5"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
@@ -92802,7 +92893,7 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-infoRow-id"
-                      colspan="4"
+                      colspan="5"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
@@ -92998,7 +93089,7 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-infoRow-id"
-                      colspan="4"
+                      colspan="5"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
@@ -94419,7 +94510,7 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-infoRow-id"
-                      colspan="4"
+                      colspan="5"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
@@ -94615,7 +94706,7 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-infoRow-id"
-                      colspan="4"
+                      colspan="5"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
@@ -96036,7 +96127,7 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-infoRow-id"
-                      colspan="4"
+                      colspan="5"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
@@ -96232,7 +96323,7 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-infoRow-id"
-                      colspan="4"
+                      colspan="5"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
@@ -97653,7 +97744,7 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-infoRow-id"
-                      colspan="4"
+                      colspan="5"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
@@ -97849,7 +97940,7 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-infoRow-id"
-                      colspan="4"
+                      colspan="5"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
@@ -99270,7 +99361,7 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-infoRow-id"
-                      colspan="4"
+                      colspan="5"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
@@ -99466,7 +99557,7 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-infoRow-id"
-                      colspan="4"
+                      colspan="5"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
@@ -100887,7 +100978,7 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-infoRow-id"
-                      colspan="4"
+                      colspan="5"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
@@ -101083,7 +101174,7 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-infoRow-id"
-                      colspan="4"
+                      colspan="5"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
@@ -102504,7 +102595,7 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-infoRow-id"
-                      colspan="4"
+                      colspan="5"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
@@ -102700,7 +102791,7 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-infoRow-id"
-                      colspan="4"
+                      colspan="5"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
@@ -104121,7 +104212,7 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-infoRow-id"
-                      colspan="4"
+                      colspan="5"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
@@ -104317,7 +104408,7 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-infoRow-id"
-                      colspan="4"
+                      colspan="5"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
@@ -105738,7 +105829,7 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-infoRow-id"
-                      colspan="4"
+                      colspan="5"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
@@ -105934,7 +106025,7 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-infoRow-id"
-                      colspan="4"
+                      colspan="5"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
@@ -107355,7 +107446,7 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-infoRow-id"
-                      colspan="4"
+                      colspan="5"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
@@ -107551,7 +107642,7 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-infoRow-id"
-                      colspan="4"
+                      colspan="5"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
@@ -124122,7 +124213,7 @@ exports[`Storyshots Views / Plugins / Plugin list default 1`] = `
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
-                colspan="4"
+                colspan="3"
               >
                 <div
                   class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
@@ -124491,7 +124582,7 @@ exports[`Storyshots Views / Plugins / Plugin list loading 1`] = `
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
-                colspan="4"
+                colspan="3"
               >
                 <div
                   class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
@@ -124830,7 +124921,7 @@ exports[`Storyshots Views / Plugins / Plugin list no data 1`] = `
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
-                colspan="4"
+                colspan="3"
               >
                 <div
                   class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
@@ -124943,7 +125034,7 @@ exports[`Storyshots Views / Plugins / Plugin list no data 1`] = `
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id"
-                colspan="4"
+                colspan="3"
               >
                 No plugins found
               </td>
@@ -126330,6 +126421,21 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
               <table
                 class="MuiTable-root-id"
               >
+                <colgroup>
+                  <col
+                    class="ProductTypeAttributes-colGrab-id"
+                  />
+                  <col />
+                  <col
+                    class="ProductTypeAttributes-colName-id"
+                  />
+                  <col
+                    class="ProductTypeAttributes-colSlug-id"
+                  />
+                  <col
+                    class="ProductTypeAttributes-colAction-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -126485,7 +126591,7 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
                       author
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-iconCell-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colAction-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -126599,7 +126705,7 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
                       language
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-iconCell-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colAction-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -126713,7 +126819,7 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
                       publisher
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-iconCell-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colAction-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -127368,6 +127474,21 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
               <table
                 class="MuiTable-root-id"
               >
+                <colgroup>
+                  <col
+                    class="ProductTypeAttributes-colGrab-id"
+                  />
+                  <col />
+                  <col
+                    class="ProductTypeAttributes-colName-id"
+                  />
+                  <col
+                    class="ProductTypeAttributes-colSlug-id"
+                  />
+                  <col
+                    class="ProductTypeAttributes-colAction-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -127523,7 +127644,7 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
                       author
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-iconCell-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colAction-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -127637,7 +127758,7 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
                       language
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-iconCell-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colAction-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -127751,7 +127872,7 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
                       publisher
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-iconCell-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colAction-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -128408,6 +128529,21 @@ exports[`Storyshots Views / Product types / Product type details loading 1`] = `
               <table
                 class="MuiTable-root-id"
               >
+                <colgroup>
+                  <col
+                    class="ProductTypeAttributes-colGrab-id"
+                  />
+                  <col />
+                  <col
+                    class="ProductTypeAttributes-colName-id"
+                  />
+                  <col
+                    class="ProductTypeAttributes-colSlug-id"
+                  />
+                  <col
+                    class="ProductTypeAttributes-colAction-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -128574,7 +128710,7 @@ exports[`Storyshots Views / Product types / Product type details loading 1`] = `
                       </span>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-iconCell-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colAction-id"
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id"
@@ -129019,6 +129155,21 @@ exports[`Storyshots Views / Product types / Product type details no attributes 1
               <table
                 class="MuiTable-root-id"
               >
+                <colgroup>
+                  <col
+                    class="ProductTypeAttributes-colGrab-id"
+                  />
+                  <col />
+                  <col
+                    class="ProductTypeAttributes-colName-id"
+                  />
+                  <col
+                    class="ProductTypeAttributes-colSlug-id"
+                  />
+                  <col
+                    class="ProductTypeAttributes-colAction-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -140711,10 +140862,11 @@ exports[`Storyshots Views / Products / Create product variant add first variant
                     class="MuiTableRow-root-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-tabActive-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id ProductVariantNavigation-tabActive-id ProductVariantNavigation-noHandle-id"
+                      colspan="2"
                     >
                       <div
-                        class="TableCellAvatar-content-id"
+                        class="TableCellAvatar-content-id TableCellAvatar-alignRight-id"
                       >
                         <div
                           class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id MuiAvatar-colorDefault-id"
@@ -140750,14 +140902,10 @@ exports[`Storyshots Views / Products / Create product variant add first variant
                             </defs>
                           </svg>
                         </div>
-                        <div
-                          class="TableCellAvatar-children-id"
-                        />
                       </div>
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
-                      colspan="2"
                     >
                       New Variant
                     </td>
@@ -141513,7 +141661,7 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
                       </svg>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                     >
                       <div
                         class="TableCellAvatar-content-id"
@@ -141578,7 +141726,7 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
                       </svg>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                     >
                       <div
                         class="TableCellAvatar-content-id"
@@ -141606,10 +141754,11 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
                     class="MuiTableRow-root-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-tabActive-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id ProductVariantNavigation-tabActive-id ProductVariantNavigation-noHandle-id"
+                      colspan="2"
                     >
                       <div
-                        class="TableCellAvatar-content-id"
+                        class="TableCellAvatar-content-id TableCellAvatar-alignRight-id"
                       >
                         <div
                           class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id MuiAvatar-colorDefault-id"
@@ -141645,14 +141794,10 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
                             </defs>
                           </svg>
                         </div>
-                        <div
-                          class="TableCellAvatar-children-id"
-                        />
                       </div>
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
-                      colspan="2"
                     >
                       New Variant
                     </td>
@@ -142408,7 +142553,7 @@ exports[`Storyshots Views / Products / Create product variant when loading data
                       </svg>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                     >
                       <div
                         class="TableCellAvatar-content-id"
@@ -142447,10 +142592,11 @@ exports[`Storyshots Views / Products / Create product variant when loading data
                     class="MuiTableRow-root-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-tabActive-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id ProductVariantNavigation-tabActive-id ProductVariantNavigation-noHandle-id"
+                      colspan="2"
                     >
                       <div
-                        class="TableCellAvatar-content-id"
+                        class="TableCellAvatar-content-id TableCellAvatar-alignRight-id"
                       >
                         <div
                           class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id MuiAvatar-colorDefault-id"
@@ -142486,14 +142632,10 @@ exports[`Storyshots Views / Products / Create product variant when loading data
                             </defs>
                           </svg>
                         </div>
-                        <div
-                          class="TableCellAvatar-children-id"
-                        />
                       </div>
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
-                      colspan="2"
                     >
                       New Variant
                     </td>
@@ -143194,7 +143336,7 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
                       </svg>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                     >
                       <div
                         class="TableCellAvatar-content-id"
@@ -143259,7 +143401,7 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
                       </svg>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                     >
                       <div
                         class="TableCellAvatar-content-id"
@@ -143287,10 +143429,11 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
                     class="MuiTableRow-root-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-tabActive-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id ProductVariantNavigation-tabActive-id ProductVariantNavigation-noHandle-id"
+                      colspan="2"
                     >
                       <div
-                        class="TableCellAvatar-content-id"
+                        class="TableCellAvatar-content-id TableCellAvatar-alignRight-id"
                       >
                         <div
                           class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id MuiAvatar-colorDefault-id"
@@ -143326,14 +143469,10 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
                             </defs>
                           </svg>
                         </div>
-                        <div
-                          class="TableCellAvatar-children-id"
-                        />
                       </div>
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
-                      colspan="2"
                     >
                       New Variant
                     </td>
@@ -145124,6 +145263,24 @@ Ctrl + K"
               <table
                 class="MuiTable-root-id ProductVariants-denseTable-id"
               >
+                <colgroup>
+                  <col
+                    class="ProductVariants-colGrab-id"
+                  />
+                  <col />
+                  <col
+                    class="ProductVariants-colName-id"
+                  />
+                  <col
+                    class="ProductVariants-colSku-id"
+                  />
+                  <col
+                    class="ProductVariants-colPrice-id"
+                  />
+                  <col
+                    class="ProductVariants-colInventory-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -147425,6 +147582,24 @@ Ctrl + K"
               <table
                 class="MuiTable-root-id ProductVariants-denseTable-id"
               >
+                <colgroup>
+                  <col
+                    class="ProductVariants-colGrab-id"
+                  />
+                  <col />
+                  <col
+                    class="ProductVariants-colName-id"
+                  />
+                  <col
+                    class="ProductVariants-colSku-id"
+                  />
+                  <col
+                    class="ProductVariants-colPrice-id"
+                  />
+                  <col
+                    class="ProductVariants-colInventory-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -155128,6 +155303,24 @@ Ctrl + K"
               <table
                 class="MuiTable-root-id ProductVariants-denseTable-id"
               >
+                <colgroup>
+                  <col
+                    class="ProductVariants-colGrab-id"
+                  />
+                  <col />
+                  <col
+                    class="ProductVariants-colName-id"
+                  />
+                  <col
+                    class="ProductVariants-colSku-id"
+                  />
+                  <col
+                    class="ProductVariants-colPrice-id"
+                  />
+                  <col
+                    class="ProductVariants-colInventory-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -159057,6 +159250,24 @@ Ctrl + K"
               <table
                 class="MuiTable-root-id ProductVariants-denseTable-id"
               >
+                <colgroup>
+                  <col
+                    class="ProductVariants-colGrab-id"
+                  />
+                  <col />
+                  <col
+                    class="ProductVariants-colName-id"
+                  />
+                  <col
+                    class="ProductVariants-colSku-id"
+                  />
+                  <col
+                    class="ProductVariants-colPrice-id"
+                  />
+                  <col
+                    class="ProductVariants-colInventory-id"
+                  />
+                </colgroup>
                 <thead
                   class="MuiTableHead-root-id"
                 >
@@ -169818,7 +170029,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                       </svg>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                     >
                       <div
                         class="TableCellAvatar-content-id"
@@ -169883,7 +170094,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                       </svg>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                     >
                       <div
                         class="TableCellAvatar-content-id"
@@ -169948,7 +170159,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                       </svg>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                     >
                       <div
                         class="TableCellAvatar-content-id"
@@ -170013,7 +170224,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                       </svg>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                     >
                       <div
                         class="TableCellAvatar-content-id"
@@ -171280,7 +171491,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                       </svg>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                     >
                       <div
                         class="TableCellAvatar-content-id"
@@ -171345,7 +171556,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                       </svg>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                     >
                       <div
                         class="TableCellAvatar-content-id"
@@ -171410,7 +171621,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                       </svg>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                     >
                       <div
                         class="TableCellAvatar-content-id"
@@ -171475,7 +171686,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                       </svg>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                     >
                       <div
                         class="TableCellAvatar-content-id"
@@ -172729,7 +172940,7 @@ exports[`Storyshots Views / Products / Product variant details when loading data
                       </svg>
                     </td>
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                     >
                       <div
                         class="TableCellAvatar-content-id"
@@ -176237,7 +176448,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list default 1`] = `
                     Countries
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZonesList-colAction-id"
                     scope="col"
                   />
                 </tr>
@@ -176406,7 +176617,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list default 1`] = `
                     51
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-alignRight-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colAction-id"
                   >
                     <button
                       class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -176479,7 +176690,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list default 1`] = `
                     29
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-alignRight-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colAction-id"
                   >
                     <button
                       class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -176552,7 +176763,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list default 1`] = `
                     51
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-alignRight-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colAction-id"
                   >
                     <button
                       class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -176625,7 +176836,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list default 1`] = `
                     57
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-alignRight-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colAction-id"
                   >
                     <button
                       class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -176698,7 +176909,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list default 1`] = `
                     60
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-alignRight-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colAction-id"
                   >
                     <button
                       class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -176962,7 +177173,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list loading 1`] = `
                     Countries
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZonesList-colAction-id"
                     scope="col"
                   />
                 </tr>
@@ -177142,7 +177353,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list loading 1`] = `
                     </span>
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-alignRight-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colAction-id"
                   >
                     <button
                       class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
@@ -177369,7 +177580,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list no data 1`] = `
                     Countries
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZonesList-colAction-id"
                     scope="col"
                   />
                 </tr>
@@ -177382,7 +177593,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list no data 1`] = `
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
-                    colspan="4"
+                    colspan="3"
                   >
                     <div
                       class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
@@ -177495,7 +177706,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list no data 1`] = `
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id"
-                    colspan="4"
+                    colspan="3"
                   >
                     No shipping zones found
                   </td>
@@ -177737,7 +177948,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list no site settings perm
                     Countries
                   </th>
                   <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
+                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZonesList-colAction-id"
                     scope="col"
                   />
                 </tr>
@@ -177906,7 +178117,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list no site settings perm
                     51
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-alignRight-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colAction-id"
                   >
                     <button
                       class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -177979,7 +178190,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list no site settings perm
                     29
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-alignRight-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colAction-id"
                   >
                     <button
                       class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -178052,7 +178263,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list no site settings perm
                     51
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-alignRight-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colAction-id"
                   >
                     <button
                       class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -178125,7 +178336,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list no site settings perm
                     57
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-alignRight-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colAction-id"
                   >
                     <button
                       class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -178198,7 +178409,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list no site settings perm
                     60
                   </td>
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-alignRight-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colAction-id"
                   >
                     <button
                       class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
@@ -182445,7 +182656,7 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
-                colspan="3"
+                colspan="2"
               >
                 <div
                   class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
@@ -183124,7 +183335,7 @@ exports[`Storyshots Views / Staff / Staff members when loading 1`] = `
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
-                colspan="3"
+                colspan="2"
               >
                 <div
                   class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
diff --git a/src/utils/tables.ts b/src/utils/tables.ts
new file mode 100644
index 000000000..e7a586dfd
--- /dev/null
+++ b/src/utils/tables.ts
@@ -0,0 +1,10 @@
+export function getFooterColSpanWithBulkActions(
+  arr: any[],
+  numberOfColumns: number
+): number {
+  if (arr === undefined || arr.length > 0) {
+    return numberOfColumns + 1;
+  }
+
+  return numberOfColumns;
+}