fix(table): fix scrollable table

allow no spacing
fix z index issues
fix sticky multiple thead tr

Author: abelflopes

packages/components/base/src/table/Table/index.module.scss

@@ -38,14 +38,19 @@
   max-height: 100%;
 
   @include sticky-column {
+    background-color: theme.get-color(neutral-light-100);
     position: sticky;
     left: 0;
-    background-color: theme.get-color(neutral-light-100);
+    z-index: 2;
   }
 
-  @include sticky_headers {
+  thead {
     position: sticky;
     top: 0;
+    z-index: 3 !important;
+  }
+
+  @include sticky_headers {
     background-color: theme.get-color(neutral-light-300-solid) !important;
     white-space: nowrap;
 
@@ -61,15 +66,15 @@
 .scrollable.skin_bordered {
   @include sticky_headers {
     &::before {
+      content: "";
+      background-color: scss-utils.get-css-var(table, border-color);
+      display: block;
       position: absolute;
-      z-index: 1;
       bottom: calc(#{scss-utils.get-css-var(spacing, border)} * -1);
       left: 0;
-      display: block;
       width: 100%;
       height: scss-utils.get-css-var(spacing, border);
-      background-color: scss-utils.get-css-var(table, border-color);
-      content: "";
+      z-index: 1;
     }
   }
 }
@@ -78,14 +83,14 @@
 .scrollable.skin_bordered {
   @include sticky-column {
     &::after {
+      content: "";
+      background-color: scss-utils.get-css-var(table, border-color);
+      display: block;
       position: absolute;
       top: 0;
       right: 0;
-      display: block;
       width: scss-utils.get-css-var(spacing, border);
       height: 100%;
-      background-color: scss-utils.get-css-var(table, border-color);
-      content: "";
     }
   }
 }
@@ -126,6 +131,11 @@
   @include scss-utils.define-css-var(table, min-height, theme.get-spacing(4));
 }
 
+.spacing_none {
+  @include scss-utils.define-css-var(table, spacing, 0);
+  @include scss-utils.define-css-var(table, min-height, 0);
+}
+
 // Table
 
 .table {

packages/components/base/src/table/context.ts

@@ -4,7 +4,7 @@ export interface TableContextProps {
   /** Specifies the visual style of the table  */
   skin: "default" | "bordered" | "bordered-row" | "bordered-column";
   /** Specifies the spacing between table elements  */
-  spacing: "default" | "compact";
+  spacing: "default" | "compact" | "none";
   /** Allows container to be scrollable and adds sticky headers  */
   scrollable: boolean;
 }

packages/docs/stories/src/generic-table.stories.tsx

@@ -34,13 +34,24 @@ const children = [
         <Table.Th key={i}>{CC.capitalCase(faker.company.buzzAdjective())}</Table.Th>
       ))}
     </Table.Tr>
+    <Table.Tr>
+      <Table.Th>
+        <Checkbox indeterminate />
+      </Table.Th>
+      <Table.Th colSpan={columns}>{CC.capitalCase(faker.company.buzzAdjective())}</Table.Th>
+    </Table.Tr>
   </Table.Thead>,
   <Table.TBody key="body">
     {Object.keys(Array.from({ length: rows })).map((r) => (
       <Table.Tr key={r} selected={r === "1"} interactive={Number(r) < rows / 2}>
         <Table.Td>
           <Checkbox />
         </Table.Td>
+        <Table.Td>
+          <div
+            style={{ background: "pink", position: "relative", zIndex: 1, height: 20, width: 20 }}
+          />
+        </Table.Td>
         {Object.keys(Array.from({ length: columns })).map((i) => (
           <Table.Td key={i}>{faker.company.catchPhraseDescriptor()}</Table.Td>
         ))}