From 0b7eb05024bddbcd3fcbe96807929be4f692e18f Mon Sep 17 00:00:00 2001
From: Ayesha Mazumdar <amazumdar@pinterest.com>
Date: Tue, 6 Apr 2021 17:04:16 -0700
Subject: [PATCH] Table: Add ability to specify sticky columns (#1395)

---
 .../integration/accessibility_Table_spec.js   |   7 +-
 docs/src/Table.doc.js                         | 611 +++++++++++++++++-
 packages/gestalt/src/Table.css                |  24 +
 packages/gestalt/src/Table.css.flow           |   4 +
 packages/gestalt/src/Table.js                 |  42 +-
 packages/gestalt/src/Table.test.js            |  11 +
 packages/gestalt/src/TableCell.js             |  29 +-
 packages/gestalt/src/TableCell.test.js        |  11 +
 packages/gestalt/src/TableHeaderCell.js       |  30 +-
 packages/gestalt/src/TableRow.js              |  31 +-
 packages/gestalt/src/TableRowExpandable.js    |  45 +-
 .../src/__snapshots__/Table.test.js.snap      |  19 +
 .../src/__snapshots__/TableCell.test.js.snap  |  26 +
 .../TableHeaderCell.test.js.snap              |  12 +
 .../TableRowExpandable.test.js.snap           |  18 +
 .../TableSortableHeaderCell.test.js.snap      |  12 +
 packages/gestalt/src/contexts/TableContext.js |  27 +
 17 files changed, 940 insertions(+), 19 deletions(-)
 create mode 100644 packages/gestalt/src/contexts/TableContext.js

diff --git a/cypress/integration/accessibility_Table_spec.js b/cypress/integration/accessibility_Table_spec.js
index 23f55b6274..bd4525e793 100644
--- a/cypress/integration/accessibility_Table_spec.js
+++ b/cypress/integration/accessibility_Table_spec.js
@@ -7,8 +7,13 @@ describe('Table Accessibility check', () => {
   it('Tests accessibility on the Table page', () => {
     cy.configureAxe({
       rules: [
+        // Disabled until converted to new docs
         {
-          // Disabled to avoid confusion for sticky header example
+          id: 'color-contrast',
+          enabled: false,
+        },
+        {
+          // Disabled to avoid confusion for sticky header and column examples
           id: 'scrollable-region-focusable',
           enabled: false,
         },
diff --git a/docs/src/Table.doc.js b/docs/src/Table.doc.js
index e88ef0b87e..7e4e311dbb 100644
--- a/docs/src/Table.doc.js
+++ b/docs/src/Table.doc.js
@@ -259,6 +259,380 @@ card(
   />,
 );
 
+card(
+  <Example
+    id="stickyColumn"
+    name="Example: Sticky Column"
+    description="Try scrolling horizontally to see the first column remain in place."
+    defaultCode={`
+<Box width="50%" overflow="auto">
+  <Table maxHeight={200} stickyColumns={1}>
+
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell>
+          <Text weight="bold">Image</Text>
+        </Table.HeaderCell>
+        <Table.HeaderCell>
+          <Text weight="bold">Name</Text>
+        </Table.HeaderCell>
+        <Table.HeaderCell>
+          <Text weight="bold">Super Name</Text>
+        </Table.HeaderCell>
+        <Table.HeaderCell>
+          <Text weight="bold">Favorite Food</Text>
+        </Table.HeaderCell>
+        <Table.HeaderCell>
+          <Text weight="bold">Best Friend</Text>
+        </Table.HeaderCell>
+        <Table.HeaderCell>
+          <Text weight="bold">Birthday</Text>
+        </Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
+
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell>
+          <Box width={50}>
+            <Mask rounding="circle">
+              <Image
+                alt="Tony"
+                src="https://i.ibb.co/r3R04Y9/ironman.jpg"
+                naturalHeight={50}
+                naturalWidth={50}
+              />
+            </Mask>
+          </Box>
+        </Table.Cell>
+        <Table.Cell><Text>Tony Stark</Text></Table.Cell>
+        <Table.Cell><Text>Iron Man</Text></Table.Cell>
+        <Table.Cell><Text>Shwarma</Text></Table.Cell>
+        <Table.Cell><Text>Spiderman</Text></Table.Cell>
+        <Table.Cell>
+          <Box width={200}><Text>May 29, 1970</Text></Box>
+        </Table.Cell>
+      </Table.Row>
+
+      <Table.Row>
+        <Table.Cell>
+          <Box width={50}>
+            <Mask rounding="circle">
+              <Image
+                alt="Peter"
+                src="https://i.ibb.co/64NxM43/spiderman.png"
+                naturalHeight={50}
+                naturalWidth={50}
+              />
+            </Mask>
+          </Box>
+        </Table.Cell>
+        <Table.Cell><Text>Peter Parker</Text></Table.Cell>
+        <Table.Cell><Text>Spiderman</Text></Table.Cell>
+        <Table.Cell><Text>Sandwiches</Text></Table.Cell>
+        <Table.Cell><Text>Iron Man</Text></Table.Cell>
+        <Table.Cell><Text>December 28, 1995</Text></Table.Cell>
+      </Table.Row>
+
+      <Table.Row>
+        <Table.Cell>
+          <Box width={50}>
+            <Mask rounding="circle">
+              <Image
+                alt="T'Challa"
+                src="https://i.ibb.co/GpNtW5N/black-Panther.png"
+                naturalHeight={50}
+                naturalWidth={50}
+              />
+            </Mask>
+          </Box>
+        </Table.Cell>
+        <Table.Cell><Text>T'Challa</Text></Table.Cell>
+        <Table.Cell><Text>Black Panther</Text></Table.Cell>
+        <Table.Cell><Text>Beef suya</Text></Table.Cell>
+        <Table.Cell><Text>Shuri</Text></Table.Cell>
+        <Table.Cell><Text>November 28, 1977</Text></Table.Cell>
+      </Table.Row>
+
+    </Table.Body>
+  </Table>
+</Box>
+
+`}
+  />,
+);
+
+card(
+  <Example
+    id="stickyColumn2"
+    name="Example: Multiple sticky columns"
+    description="Try scrolling horizontally to see the first 3 columns remain in place."
+    defaultCode={`
+<Box width="60%" overflow="auto">
+  <Table maxHeight={200} stickyColumns={3} borderStyle="none">
+
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell>
+          <Text weight="bold">Image</Text>
+        </Table.HeaderCell>
+        <Table.HeaderCell>
+          <Text weight="bold">Name</Text>
+        </Table.HeaderCell>
+        <Table.HeaderCell>
+          <Text weight="bold">Super Name</Text>
+        </Table.HeaderCell>
+        <Table.HeaderCell>
+          <Text weight="bold">Best Friend</Text>
+        </Table.HeaderCell>
+        <Table.HeaderCell>
+          <Text weight="bold">Favorite Food</Text>
+        </Table.HeaderCell>
+        <Table.HeaderCell>
+          <Text weight="bold">Super Powers</Text>
+        </Table.HeaderCell>
+        <Table.HeaderCell>
+          <Text weight="bold">Home</Text>
+        </Table.HeaderCell>
+        <Table.HeaderCell>
+          <Text weight="bold">Aliases</Text>
+        </Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
+
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell>
+          <Box width={50}>
+            <Mask rounding="circle">
+              <Image
+                alt="Tony"
+                src="https://i.ibb.co/r3R04Y9/ironman.jpg"
+                naturalHeight={50}
+                naturalWidth={50}
+              />
+            </Mask>
+          </Box>
+        </Table.Cell>
+        <Table.Cell><Text>Tony Stark</Text></Table.Cell>
+        <Table.Cell><Text>Iron Man</Text></Table.Cell>
+        <Table.Cell><Text>Spiderman</Text></Table.Cell>
+        <Table.Cell><Text>Shwarma</Text></Table.Cell>
+        <Table.Cell><Text>Flight, Super strength</Text></Table.Cell>
+        <Table.Cell><Text>New York</Text></Table.Cell>
+        <Table.Cell><Text>N/A</Text></Table.Cell>
+      </Table.Row>
+
+      <Table.Row>
+        <Table.Cell>
+          <Box width={50}>
+            <Mask rounding="circle">
+              <Image
+                alt="Peter"
+                src="https://i.ibb.co/64NxM43/spiderman.png"
+                naturalHeight={50}
+                naturalWidth={50}
+              />
+            </Mask>
+          </Box>
+        </Table.Cell>
+        <Table.Cell><Text>Peter Parker</Text></Table.Cell>
+        <Table.Cell><Text>Spiderman</Text></Table.Cell>
+        <Table.Cell><Text>Iron Man</Text></Table.Cell>
+        <Table.Cell><Text>Sandwiches</Text></Table.Cell>
+        <Table.Cell><Text>Spidey senses, super strength, web shooters</Text></Table.Cell>
+        <Table.Cell><Text>Brooklyn</Text></Table.Cell>
+        <Table.Cell><Text>Friendly Neighborhood Spiderman</Text></Table.Cell>
+      </Table.Row>
+
+      <Table.Row>
+        <Table.Cell>
+          <Box width={50}>
+            <Mask rounding="circle">
+              <Image
+                alt="Wanda"
+                src="https://i.ibb.co/hV6Vpbf/scarlet.png"
+                naturalHeight={50}
+                naturalWidth={50}
+              />
+            </Mask>
+          </Box>
+        </Table.Cell>
+        <Table.Cell><Text>Wanda Maximoff</Text></Table.Cell>
+        <Table.Cell><Text>Scarlet Witch</Text></Table.Cell>
+        <Table.Cell><Text>Vision</Text></Table.Cell>
+        <Table.Cell><Text>Chicken paprikash</Text></Table.Cell>
+        <Table.Cell><Text>Chaos magic, spells, reality warping</Text></Table.Cell>
+        <Table.Cell><Text>Sokovia</Text></Table.Cell>
+        <Table.Cell><Text>N/A</Text></Table.Cell>
+      </Table.Row>
+
+      <Table.Row>
+        <Table.Cell>
+          <Box width={50}>
+            <Mask rounding="circle">
+              <Image
+                alt="Black Panther"
+                src="https://i.ibb.co/GpNtW5N/black-Panther.png"
+                naturalHeight={50}
+                naturalWidth={50}
+              />
+            </Mask>
+          </Box>
+        </Table.Cell>
+        <Table.Cell><Text>T'Challa</Text></Table.Cell>
+        <Table.Cell><Text>Black Panther</Text></Table.Cell>
+        <Table.Cell><Text>Shuri</Text></Table.Cell>
+        <Table.Cell><Text>Beef suya</Text></Table.Cell>
+        <Table.Cell><Text>Enhanced strength, speed, reflexes + Vibranium suit</Text></Table.Cell>
+        <Table.Cell><Text>Wakanda</Text></Table.Cell>
+        <Table.Cell><Text>King of the Dead</Text></Table.Cell>
+      </Table.Row>
+
+    </Table.Body>
+  </Table>
+</Box>
+
+`}
+  />,
+);
+
+card(
+  <Example
+    id="stickyColumn3"
+    name="Example: Sticky header and sticky columns"
+    description="Try scrolling horizontally and vertically to see the columns and header remain in place."
+    defaultCode={`
+<Box width="60%" overflow="auto">
+  <Table maxHeight={200} stickyColumns={3} borderStyle="none">
+
+    <Table.Header sticky>
+      <Table.Row>
+        <Table.HeaderCell>
+          <Text weight="bold">Image</Text>
+        </Table.HeaderCell>
+        <Table.HeaderCell>
+          <Text weight="bold">Name</Text>
+        </Table.HeaderCell>
+        <Table.HeaderCell>
+          <Text weight="bold">Super Name</Text>
+        </Table.HeaderCell>
+        <Table.HeaderCell>
+          <Text weight="bold">Best Friend</Text>
+        </Table.HeaderCell>
+        <Table.HeaderCell>
+          <Text weight="bold">Favorite Food</Text>
+        </Table.HeaderCell>
+        <Table.HeaderCell>
+          <Text weight="bold">Super Powers</Text>
+        </Table.HeaderCell>
+        <Table.HeaderCell>
+          <Text weight="bold">Home</Text>
+        </Table.HeaderCell>
+        <Table.HeaderCell>
+          <Text weight="bold">Aliases</Text>
+        </Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
+
+    <Table.Body>
+
+      <Table.Row>
+        <Table.Cell>
+          <Box width={50}>
+            <Mask rounding="circle">
+              <Image
+                alt="Tony"
+                src="https://i.ibb.co/r3R04Y9/ironman.jpg"
+                naturalHeight={50}
+                naturalWidth={50}
+              />
+            </Mask>
+          </Box>
+        </Table.Cell>
+        <Table.Cell><Text>Tony Stark</Text></Table.Cell>
+        <Table.Cell><Text>Iron Man</Text></Table.Cell>
+        <Table.Cell><Text>Spiderman</Text></Table.Cell>
+        <Table.Cell><Text>Shwarma</Text></Table.Cell>
+        <Table.Cell><Text>Flight, Super strength</Text></Table.Cell>
+        <Table.Cell><Text>New York</Text></Table.Cell>
+        <Table.Cell><Text>N/A</Text></Table.Cell>
+      </Table.Row>
+
+      <Table.Row>
+        <Table.Cell>
+          <Box width={50}>
+            <Mask rounding="circle">
+              <Image
+                alt="Peter"
+                src="https://i.ibb.co/64NxM43/spiderman.png"
+                naturalHeight={50}
+                naturalWidth={50}
+              />
+            </Mask>
+          </Box>
+        </Table.Cell>
+        <Table.Cell><Text>Peter Parker</Text></Table.Cell>
+        <Table.Cell><Text>Spiderman</Text></Table.Cell>
+        <Table.Cell><Text>Iron Man</Text></Table.Cell>
+        <Table.Cell><Text>Sandwiches</Text></Table.Cell>
+        <Table.Cell><Text>Spidey senses, super strength, web shooters</Text></Table.Cell>
+        <Table.Cell><Text>Brooklyn</Text></Table.Cell>
+        <Table.Cell><Text>Friendly Neighborhood Spiderman</Text></Table.Cell>
+      </Table.Row>
+
+      <Table.Row>
+        <Table.Cell>
+          <Box width={50}>
+            <Mask rounding="circle">
+              <Image
+                alt="Wanda"
+                src="https://i.ibb.co/hV6Vpbf/scarlet.png"
+                naturalHeight={50}
+                naturalWidth={50}
+              />
+            </Mask>
+          </Box>
+        </Table.Cell>
+        <Table.Cell><Text>Wanda Maximoff</Text></Table.Cell>
+        <Table.Cell><Text>Scarlet Witch</Text></Table.Cell>
+        <Table.Cell><Text>Vision</Text></Table.Cell>
+        <Table.Cell><Text>Chicken paprikash</Text></Table.Cell>
+        <Table.Cell><Text>Chaos magic, spells, reality warping</Text></Table.Cell>
+        <Table.Cell><Text>Sokovia</Text></Table.Cell>
+        <Table.Cell><Text>N/A</Text></Table.Cell>
+      </Table.Row>
+
+      <Table.Row>
+        <Table.Cell>
+          <Box width={50}>
+            <Mask rounding="circle">
+              <Image
+                alt="Black Panther"
+                src="https://i.ibb.co/GpNtW5N/black-Panther.png"
+                naturalHeight={50}
+                naturalWidth={50}
+              />
+            </Mask>
+          </Box>
+        </Table.Cell>
+        <Table.Cell><Text>T'Challa</Text></Table.Cell>
+        <Table.Cell><Text>Black Panther</Text></Table.Cell>
+        <Table.Cell><Text>Shuri</Text></Table.Cell>
+        <Table.Cell><Text>Beef suya</Text></Table.Cell>
+        <Table.Cell><Text>Enhanced strength, speed, reflexes + Vibranium suit</Text></Table.Cell>
+        <Table.Cell><Text>Wakanda</Text></Table.Cell>
+        <Table.Cell><Text>King of the Dead</Text></Table.Cell>
+      </Table.Row>
+
+    </Table.Body>
+  </Table>
+</Box>
+
+`}
+  />,
+);
+
 card(
   <PropTable
     name="Table.HeaderCell"
@@ -322,7 +696,7 @@ card(
         defaultValue: null,
         description: [
           'Supply a short, descriptive label for screen-readers as a text alternative to the Collapse button.',
-          'Accessibility: It populates aria-label on the <button> element for the Collapse button.',
+          'Accessibility: It populates aria-label on the `<button>` element for the Collapse button.',
         ],
       },
       {
@@ -332,7 +706,7 @@ card(
         defaultValue: null,
         description: [
           'Supply a short, descriptive label for screen-readers as a text alternative to the Expand button.',
-          'Accessibility: It populates aria-label on the <button> element for the Expand button.',
+          'Accessibility: It populates aria-label on the `<button>` element for the Expand button.',
         ],
       },
       {
@@ -376,6 +750,7 @@ card(
 
       return(
         <Table>
+
           <Table.Header>
             <Table.Row>
               <Table.HeaderCell>
@@ -394,7 +769,9 @@ card(
               </Table.HeaderCell>
             </Table.Row>
           </Table.Header>
+
           <Table.Body>
+
             <Table.RowExpandable
               accessibilityExpandLabel="Expand"
               accessibilityCollapseLabel="Collapse"
@@ -432,6 +809,7 @@ card(
                 <Text>June 25, 1993</Text>
               </Table.Cell>
             </Table.RowExpandable>
+
             <Table.RowExpandable
               accessibilityExpandLabel="Expand"
               accessibilityCollapseLabel="Collapse"
@@ -466,7 +844,7 @@ card(
                         </Box>
                       </Table.Cell>
                       <Table.Cell>
-                        <Text>Lun Lovegood</Text>
+                        <Text>Luna Lovegood</Text>
                       </Table.Cell>
                       <Table.Cell>
                         <Text>Ravenclaw</Text>
@@ -526,6 +904,7 @@ card(
                 <Text>December 3, 1992</Text>
               </Table.Cell>
             </Table.RowExpandable>
+
             <Table.RowExpandable
               accessibilityExpandLabel="Expand"
               accessibilityCollapseLabel="Collapse"
@@ -561,9 +940,233 @@ card(
                 <Text>July 30, 1980</Text>
               </Table.Cell>
             </Table.RowExpandable>
+
+          </Table.Body>
+        </Table>);
+    }
+    `}
+  />,
+);
+
+card(
+  <Example
+    name="Example: Table Row Expandable with Sticky Columns"
+    description="When specifying `stickyColumns` with expandable rows, include the column of arrows in your count. This example sets `stickyColumns` to 3."
+    defaultCode={`
+    function RowExpandableExample() {
+      const [textShown, setTextShown] = React.useState(false);
+      const showTextOnExpand = () => {
+        return <Text>Row expanded</Text>;
+      };
+
+      return(
+      <Box width="60%" overflow="auto">
+        <Table stickyColumns={3}>
+
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell>
+                <Box display="visuallyHidden">
+                  <Text weight="bold">Open/Close row</Text>
+                </Box>
+              </Table.HeaderCell>
+              <Table.HeaderCell>
+                <Text weight="bold">Name</Text>
+              </Table.HeaderCell>
+              <Table.HeaderCell>
+                <Text weight="bold">Super Name</Text>
+              </Table.HeaderCell>
+              <Table.HeaderCell>
+                <Text weight="bold">Best Friend</Text>
+              </Table.HeaderCell>
+              <Table.HeaderCell>
+                <Text weight="bold">Favorite Food</Text>
+              </Table.HeaderCell>
+              <Table.HeaderCell>
+                <Text weight="bold">Home</Text>
+              </Table.HeaderCell>
+              <Table.HeaderCell>
+                <Text weight="bold">Alias</Text>
+              </Table.HeaderCell>
+              <Table.HeaderCell>
+                <Box width={200}>
+                  <Text weight="bold">Super Powers</Text>
+                </Box>
+              </Table.HeaderCell>
+            </Table.Row>
+          </Table.Header>
+
+          <Table.Body>
+
+            <Table.RowExpandable
+              accessibilityExpandLabel="Expand"
+              accessibilityCollapseLabel="Collapse"
+              id="row1"
+              onExpand={() => setTextShown(!textShown)}
+              expandedContents={
+                <Box maxWidth={236} padding={2} column={12}>
+                  <Card
+                    image={
+                      <Avatar
+                        name="tony avatar"
+                        src="https://i.ibb.co/8948ym5/avenge.png"
+                      />
+                    }
+                  >
+                    <Text align="center" weight="bold">
+                      <Link href="https://pinterest.com">
+                        <Box paddingX={3} paddingY={2}>
+                          Tony's Info
+                        </Box>
+                      </Link>
+                    </Text>
+                    {textShown && showTextOnExpand()}
+                  </Card>
+                </Box>
+              }
+            >
+              <Table.Cell>
+                <Text>Tony Stark</Text>
+              </Table.Cell>
+              <Table.Cell>
+                <Text>Iron Man</Text>
+              </Table.Cell>
+              <Table.Cell>
+                <Text>Spiderman</Text>
+              </Table.Cell>
+              <Table.Cell>
+                <Text>Shwarma</Text>
+              </Table.Cell>
+              <Table.Cell>
+                <Text>New York City</Text>
+              </Table.Cell>
+              <Table.Cell>
+                <Text>N/A</Text>
+              </Table.Cell>
+              <Table.Cell>
+                <Text>Flight, Super strength</Text>
+              </Table.Cell>
+            </Table.RowExpandable>
+
+            <Table.RowExpandable
+              accessibilityExpandLabel="Expand"
+              accessibilityCollapseLabel="Collapse"
+              id="row2"
+              expandedContents={
+                <Table maxWidth={800} maxHeight={500}>
+                  <Table.Header sticky>
+                    <Table.Row>
+                      <Table.HeaderCell>
+                        <Text weight="bold">Name</Text>
+                      </Table.HeaderCell>
+                      <Table.HeaderCell>
+                        <Text weight="bold">Relationship</Text>
+                      </Table.HeaderCell>
+                    </Table.Row>
+                  </Table.Header>
+                  <Table.Body>
+                    <Table.Row colSpan={10}>
+                      <Table.Cell>
+                        <Text>Vision</Text>
+                      </Table.Cell>
+                      <Table.Cell>
+                        <Text>Husband</Text>
+                      </Table.Cell>
+                    </Table.Row>
+                    <Table.Row>
+                      <Table.Cell>
+                        <Text>Wiccan</Text>
+                      </Table.Cell>
+                      <Table.Cell>
+                        <Text>Child</Text>
+                      </Table.Cell>
+                    </Table.Row>
+                    <Table.Row>
+                      <Table.Cell>
+                        <Text>Speed</Text>
+                      </Table.Cell>
+                      <Table.Cell>
+                        <Text>Child</Text>
+                      </Table.Cell>
+                    </Table.Row>
+                  </Table.Body>
+                </Table>
+              }
+            >
+              <Table.Cell>
+                <Text>Wanda Maximoff</Text>
+              </Table.Cell>
+              <Table.Cell>
+                <Text>Scarlet Witch</Text>
+              </Table.Cell>
+              <Table.Cell>
+                <Text>Vision</Text>
+              </Table.Cell>
+              <Table.Cell>
+                <Text>Chicken paprikash</Text>
+              </Table.Cell>
+              <Table.Cell>
+                <Text>Sokovia</Text>
+              </Table.Cell>
+              <Table.Cell>
+                <Text>Wanda Frank</Text>
+              </Table.Cell>
+              <Table.Cell>
+                <Text>Chaos magic, spells, reality warping</Text>
+              </Table.Cell>
+            </Table.RowExpandable>
+
+            <Table.RowExpandable
+              accessibilityExpandLabel="Expand"
+              accessibilityCollapseLabel="Collapse"
+              id="row3"
+              expandedContents={
+                <Box maxWidth={236} padding={2} column={12}>
+                  <Card
+                    image={
+                      <Avatar
+                        name="Black panther avatar"
+                        src="https://i.ibb.co/GpNtW5N/black-Panther.png"
+                      />
+                    }
+                  >
+                    <Text align="center" weight="bold">
+                      <Link href="https://pinterest.com">
+                        <Box paddingX={3} paddingY={2}>
+                          Black Panther's Info
+                        </Box>
+                      </Link>
+                    </Text>
+                  </Card>
+                </Box>
+              }
+            >
+              <Table.Cell>
+                <Text>T'Challa</Text>
+              </Table.Cell>
+              <Table.Cell>
+                <Text>Black Panther</Text>
+              </Table.Cell>
+              <Table.Cell>
+                <Text>Shuri</Text>
+              </Table.Cell>
+              <Table.Cell>
+                <Text>Beef suya</Text>
+              </Table.Cell>
+              <Table.Cell>
+                <Text>Wakana</Text>
+              </Table.Cell>
+              <Table.Cell>
+                <Text>King of the Dead</Text>
+              </Table.Cell>
+              <Table.Cell>
+                <Text>Enhanced strength, speed, reflexes + Vibranium suit</Text>
+              </Table.Cell>
+            </Table.RowExpandable>
+
           </Table.Body>
         </Table>
-      );
+      </Box> );
     }
     `}
   />,
diff --git a/packages/gestalt/src/Table.css b/packages/gestalt/src/Table.css
index 53e97ce8c9..d06ec1f646 100644
--- a/packages/gestalt/src/Table.css
+++ b/packages/gestalt/src/Table.css
@@ -1,6 +1,7 @@
 .table {
   border-collapse: separate;
   border-spacing: 0;
+  isolation: isolate;
   width: 100%;
 }
 
@@ -19,9 +20,28 @@
   background-color: var(--g-colorGray0);
   position: sticky;
   top: 0;
+  z-index: 2;
+}
+
+.columnSticky {
+  background-color: var(--g-colorGray0);
+  left: 0;
+  position: sticky;
   z-index: 1;
 }
 
+.sticky .columnSticky {
+  z-index: 3;
+}
+
+.horizontalScrollRight .columnStickyShadow {
+  box-shadow: 8px 0 8px -8px var(--g-colorGray150);
+}
+
+.horizontalScrollLeft .columnStickyShadow {
+  box-shadow: -8px 0 8px -8px var(--g-colorGray150);
+}
+
 .thead tr:last-child th {
   border-bottom: 1px solid var(--g-colorGray150);
 }
@@ -33,3 +53,7 @@
 .hoverShadeGray:hover {
   background-color: var(--g-colorGray100);
 }
+
+.hoverShadeGray:hover .columnSticky {
+  background-color: var(--g-colorGray100);
+}
diff --git a/packages/gestalt/src/Table.css.flow b/packages/gestalt/src/Table.css.flow
index 65ad472732..1ab31d963d 100644
--- a/packages/gestalt/src/Table.css.flow
+++ b/packages/gestalt/src/Table.css.flow
@@ -1,6 +1,10 @@
 // @flow strict
 /* This file is automatically generated by css-modules-flow-types */
 declare module.exports: {|
+  +'columnSticky': string,
+  +'columnStickyShadow': string,
+  +'horizontalScrollLeft': string,
+  +'horizontalScrollRight': string,
   +'hoverShadeGray': string,
   +'sticky': string,
   +'table': string,
diff --git a/packages/gestalt/src/Table.js b/packages/gestalt/src/Table.js
index ca0a234a2b..8115fdc090 100644
--- a/packages/gestalt/src/Table.js
+++ b/packages/gestalt/src/Table.js
@@ -1,5 +1,6 @@
 // @flow strict
-import React, { type Node } from 'react';
+import React, { type Node, useState, useCallback, useEffect, useRef } from 'react';
+import cx from 'classnames';
 import Box from './Box.js';
 import styles from './Table.css';
 import TableCell from './TableCell.js';
@@ -10,23 +11,58 @@ import TableHeaderCell from './TableHeaderCell.js';
 import TableRowExpandable from './TableRowExpandable.js';
 import TableRow from './TableRow.js';
 import TableSortableHeaderCell from './TableSortableHeaderCell.js';
+import { TableContextProvider } from './contexts/TableContext.js';
 
 type Props = {|
   children: Node,
   borderStyle?: 'sm' | 'none',
   maxHeight?: number | string,
+  stickyColumns?: ?number,
 |};
 
 export default function Table(props: Props): Node {
-  const { borderStyle, children, maxHeight } = props;
+  const { borderStyle, children, maxHeight, stickyColumns } = props;
+  const [showShadowScroll, setShowShadowScroll] = useState<'left' | 'right' | null>(null);
+  const tableRef = useRef<?HTMLElement>(null);
 
+  const updateShadows = useCallback(() => {
+    const target = tableRef.current;
+    if (!target) {
+      return;
+    }
+    if (target.scrollLeft > 0) {
+      setShowShadowScroll('right');
+    } else if (target.scrollLeft < 0) {
+      setShowShadowScroll('left');
+    } else {
+      setShowShadowScroll(null);
+    }
+  }, []);
+
+  useEffect(() => {
+    const target = tableRef.current;
+    target?.addEventListener('scroll', updateShadows);
+    updateShadows();
+    return () => {
+      target?.removeEventListener('scroll', updateShadows);
+    };
+  }, [updateShadows]);
+
+  const classNames = cx(
+    styles.table,
+    showShadowScroll === 'right' && styles.horizontalScrollRight,
+    showShadowScroll === 'left' && styles.horizontalScrollLeft,
+  );
   return (
     <Box
       overflow="auto"
       {...(borderStyle === 'sm' ? { borderStyle: 'sm', rounding: 1 } : {})}
       maxHeight={maxHeight}
+      ref={tableRef}
     >
-      <table className={styles.table}>{children}</table>
+      <table className={classNames}>
+        <TableContextProvider stickyColumns={stickyColumns}>{children}</TableContextProvider>
+      </table>
     </Box>
   );
 }
diff --git a/packages/gestalt/src/Table.test.js b/packages/gestalt/src/Table.test.js
index ffbb5bfb6a..338ff7466a 100644
--- a/packages/gestalt/src/Table.test.js
+++ b/packages/gestalt/src/Table.test.js
@@ -35,3 +35,14 @@ test('renders correctly with maxHeight', () => {
     .toJSON();
   expect(tree).toMatchSnapshot();
 });
+
+test('renders correctly with stickyColumns', () => {
+  const tree = renderer
+    .create(
+      <Table stickyColumns={2}>
+        <div>rest of table</div>
+      </Table>,
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/packages/gestalt/src/TableCell.js b/packages/gestalt/src/TableCell.js
index 692316a3fd..909ac216ec 100644
--- a/packages/gestalt/src/TableCell.js
+++ b/packages/gestalt/src/TableCell.js
@@ -1,18 +1,41 @@
 // @flow strict
 import React, { type Node } from 'react';
+import cx from 'classnames';
 import styles from './Table.css';
 
 type Props = {|
   children: Node,
   colSpan?: number,
   rowSpan?: number,
+  shouldBeSticky?: boolean,
+  shouldHaveShadow?: boolean,
+  previousTotalWidth?: number,
 |};
 
 export default function TableCell(props: Props): Node {
-  const { children, colSpan, rowSpan } = props;
-
+  const {
+    children,
+    colSpan,
+    rowSpan,
+    shouldBeSticky,
+    previousTotalWidth,
+    shouldHaveShadow,
+  } = props;
+  const cs = cx(
+    styles.td,
+    shouldBeSticky && styles.columnSticky,
+    shouldHaveShadow && styles.columnStickyShadow,
+  );
   return (
-    <td className={styles.td} colSpan={colSpan} rowSpan={rowSpan}>
+    <td
+      className={cs}
+      colSpan={colSpan}
+      rowSpan={rowSpan}
+      style={{
+        left: shouldBeSticky ? previousTotalWidth : undefined,
+        right: shouldBeSticky ? previousTotalWidth : undefined,
+      }}
+    >
       {children}
     </td>
   );
diff --git a/packages/gestalt/src/TableCell.test.js b/packages/gestalt/src/TableCell.test.js
index cbb367bdca..70f4eb445f 100644
--- a/packages/gestalt/src/TableCell.test.js
+++ b/packages/gestalt/src/TableCell.test.js
@@ -18,3 +18,14 @@ test('renders correctly with colSpan and rowSpan', () => {
     .toJSON();
   expect(tree).toMatchSnapshot();
 });
+
+test('renders correctly when sticky and with shadows', () => {
+  const tree = renderer
+    .create(
+      <TableCell shouldBeSticky shouldHaveShadow previousTotalWidth={120}>
+        cell content
+      </TableCell>,
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/packages/gestalt/src/TableHeaderCell.js b/packages/gestalt/src/TableHeaderCell.js
index 9fe998d23c..a871492af0 100644
--- a/packages/gestalt/src/TableHeaderCell.js
+++ b/packages/gestalt/src/TableHeaderCell.js
@@ -1,19 +1,45 @@
 // @flow strict
 import React, { type Node } from 'react';
+import cx from 'classnames';
 import styles from './Table.css';
 
 type Props = {|
   children: Node,
+  shouldBeSticky?: boolean,
+  shouldHaveShadow?: boolean,
   colSpan?: number,
   rowSpan?: number,
   scope?: 'col' | 'colgroup' | 'row' | 'rowgroup',
+  previousTotalWidth?: number,
 |};
 
 export default function TableHeaderCell(props: Props): Node {
-  const { children, colSpan, scope, rowSpan } = props;
+  const {
+    children,
+    colSpan,
+    scope,
+    rowSpan,
+    shouldBeSticky,
+    previousTotalWidth,
+    shouldHaveShadow,
+  } = props;
+  const cs = cx(
+    styles.th,
+    shouldBeSticky && styles.columnSticky,
+    shouldHaveShadow && styles.columnStickyShadow,
+  );
 
   return (
-    <th className={styles.th} scope={scope || 'col'} colSpan={colSpan} rowSpan={rowSpan}>
+    <th
+      className={cs}
+      scope={scope || 'col'}
+      colSpan={colSpan}
+      rowSpan={rowSpan}
+      style={{
+        left: shouldBeSticky ? previousTotalWidth : undefined,
+        right: shouldBeSticky ? previousTotalWidth : undefined,
+      }}
+    >
       {children}
     </th>
   );
diff --git a/packages/gestalt/src/TableRow.js b/packages/gestalt/src/TableRow.js
index 170fa717cd..c7f3ab7a4e 100644
--- a/packages/gestalt/src/TableRow.js
+++ b/packages/gestalt/src/TableRow.js
@@ -1,10 +1,37 @@
 // @flow strict
-import React, { type Node } from 'react';
+import React, { Children, cloneElement, type Node, useEffect, useRef, useState } from 'react';
+import { useTableContext } from './contexts/TableContext.js';
 
 type Props = {|
   children: Node,
 |};
 
 export default function TableRow(props: Props): Node {
-  return <tr>{props.children}</tr>;
+  const { stickyColumns } = useTableContext();
+  const rowRef = useRef();
+  const [columnWidths, setColumnWidths] = useState([]);
+
+  useEffect(() => {
+    if (rowRef?.current && stickyColumns) {
+      const colWidths = [...rowRef.current.children].map((item) => item.clientWidth);
+      setColumnWidths(colWidths);
+    }
+  }, [stickyColumns]);
+
+  const renderCellWithIndex = (child, index) => {
+    const shouldBeSticky = stickyColumns ? stickyColumns >= 0 && index < stickyColumns : false;
+    const shouldHaveShadow = stickyColumns ? stickyColumns - 1 === index : false;
+    const previousWidths = columnWidths.slice(0, index);
+    const previousTotalWidth =
+      previousWidths.length > 0 ? previousWidths.reduce((a, b) => a + b) : 0;
+    return cloneElement(child, { shouldBeSticky, previousTotalWidth, shouldHaveShadow });
+  };
+
+  return (
+    <tr ref={rowRef}>
+      {Number(stickyColumns) > 0
+        ? Children.map(props.children, renderCellWithIndex)
+        : props.children}
+    </tr>
+  );
 }
diff --git a/packages/gestalt/src/TableRowExpandable.js b/packages/gestalt/src/TableRowExpandable.js
index 615077d061..371d42aee3 100644
--- a/packages/gestalt/src/TableRowExpandable.js
+++ b/packages/gestalt/src/TableRowExpandable.js
@@ -1,11 +1,20 @@
 // @flow strict
-import React, { Children, Fragment, type Node, useState } from 'react';
+import React, {
+  Children,
+  cloneElement,
+  Fragment,
+  type Node,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import cx from 'classnames';
 import styles from './Table.css';
 import Box from './Box.js';
 import IconButton from './IconButton.js';
 import TableCell from './TableCell.js';
 import { type AbstractEventHandler } from './AbstractEventHandler.js';
+import { useTableContext } from './contexts/TableContext.js';
 
 type Props = {|
   accessibilityExpandLabel: string,
@@ -35,6 +44,9 @@ export default function TableRowExpandable(props: Props): Node {
   const [expanded, setExpanded] = useState(false);
   const hoverStyle = props.hoverStyle || 'gray';
   const cs = hoverStyle === 'gray' ? cx(styles.hoverShadeGray) : null;
+  const { stickyColumns } = useTableContext();
+  const rowRef = useRef();
+  const [columnWidths, setColumnWidths] = useState([]);
 
   const handleButtonClick = ({ event }) => {
     setExpanded(!expanded);
@@ -43,10 +55,33 @@ export default function TableRowExpandable(props: Props): Node {
     }
   };
 
+  useEffect(() => {
+    if (rowRef?.current && stickyColumns) {
+      const colWidths = [...rowRef.current.children].map((item) => item.clientWidth);
+      setColumnWidths(colWidths);
+    }
+  }, [stickyColumns]);
+
+  const renderCellWithAdjustedIndex = (child, index) => {
+    // Account for initial expandable column
+    const adjustedIndex = index + 1;
+    const shouldBeSticky = stickyColumns
+      ? stickyColumns >= 0 && adjustedIndex < stickyColumns
+      : false;
+    const shouldHaveShadow = stickyColumns ? stickyColumns - 1 === adjustedIndex : false;
+    const previousWidths = columnWidths.slice(0, adjustedIndex);
+    const previousTotalWidth =
+      previousWidths.length > 0 ? previousWidths.reduce((a, b) => a + b) : 0;
+    return cloneElement(child, { shouldBeSticky, previousTotalWidth, shouldHaveShadow });
+  };
+
   return (
     <Fragment>
-      <tr className={cs}>
-        <TableCell>
+      <tr className={cs} ref={rowRef}>
+        <TableCell
+          shouldBeSticky={stickyColumns ? stickyColumns > 0 : false}
+          previousTotalWidth={0}
+        >
           <IconButton
             accessibilityExpanded={expanded}
             accessibilityControls={id}
@@ -57,7 +92,9 @@ export default function TableRowExpandable(props: Props): Node {
             size="xs"
           />
         </TableCell>
-        {children}
+        {Number(stickyColumns) > 0
+          ? Children.map(props.children, renderCellWithAdjustedIndex)
+          : children}
       </tr>
       {expanded && (
         <tr id={id}>
diff --git a/packages/gestalt/src/__snapshots__/Table.test.js.snap b/packages/gestalt/src/__snapshots__/Table.test.js.snap
index 81c0a603d7..008bb1bc00 100644
--- a/packages/gestalt/src/__snapshots__/Table.test.js.snap
+++ b/packages/gestalt/src/__snapshots__/Table.test.js.snap
@@ -56,3 +56,22 @@ exports[`renders correctly with maxHeight 1`] = `
   </table>
 </div>
 `;
+
+exports[`renders correctly with stickyColumns 1`] = `
+<div
+  className="box overflowAuto"
+  style={
+    Object {
+      "maxHeight": undefined,
+    }
+  }
+>
+  <table
+    className="table"
+  >
+    <div>
+      rest of table
+    </div>
+  </table>
+</div>
+`;
diff --git a/packages/gestalt/src/__snapshots__/TableCell.test.js.snap b/packages/gestalt/src/__snapshots__/TableCell.test.js.snap
index 9b49c124d4..35c7599e87 100644
--- a/packages/gestalt/src/__snapshots__/TableCell.test.js.snap
+++ b/packages/gestalt/src/__snapshots__/TableCell.test.js.snap
@@ -3,6 +3,26 @@
 exports[`renders correctly 1`] = `
 <td
   className="td"
+  style={
+    Object {
+      "left": undefined,
+      "right": undefined,
+    }
+  }
+>
+  cell content
+</td>
+`;
+
+exports[`renders correctly when sticky and with shadows 1`] = `
+<td
+  className="td columnSticky columnStickyShadow"
+  style={
+    Object {
+      "left": 120,
+      "right": 120,
+    }
+  }
 >
   cell content
 </td>
@@ -13,6 +33,12 @@ exports[`renders correctly with colSpan and rowSpan 1`] = `
   className="td"
   colSpan={3}
   rowSpan={2}
+  style={
+    Object {
+      "left": undefined,
+      "right": undefined,
+    }
+  }
 >
   cell content
 </td>
diff --git a/packages/gestalt/src/__snapshots__/TableHeaderCell.test.js.snap b/packages/gestalt/src/__snapshots__/TableHeaderCell.test.js.snap
index ebfda9e22e..cd1e6d87c8 100644
--- a/packages/gestalt/src/__snapshots__/TableHeaderCell.test.js.snap
+++ b/packages/gestalt/src/__snapshots__/TableHeaderCell.test.js.snap
@@ -4,6 +4,12 @@ exports[`renders correctly 1`] = `
 <th
   className="th"
   scope="col"
+  style={
+    Object {
+      "left": undefined,
+      "right": undefined,
+    }
+  }
 >
   column name
 </th>
@@ -15,6 +21,12 @@ exports[`renders correctly with props 1`] = `
   colSpan={3}
   rowSpan={2}
   scope="row"
+  style={
+    Object {
+      "left": undefined,
+      "right": undefined,
+    }
+  }
 >
   row name
 </th>
diff --git a/packages/gestalt/src/__snapshots__/TableRowExpandable.test.js.snap b/packages/gestalt/src/__snapshots__/TableRowExpandable.test.js.snap
index e49a2896dc..cc783bfac3 100644
--- a/packages/gestalt/src/__snapshots__/TableRowExpandable.test.js.snap
+++ b/packages/gestalt/src/__snapshots__/TableRowExpandable.test.js.snap
@@ -6,6 +6,12 @@ exports[`renders correctly 1`] = `
 >
   <td
     className="td"
+    style={
+      Object {
+        "left": undefined,
+        "right": undefined,
+      }
+    }
   >
     <button
       aria-controls="expandableRow"
@@ -63,6 +69,12 @@ exports[`renders correctly with explicit hover 1`] = `
 >
   <td
     className="td"
+    style={
+      Object {
+        "left": undefined,
+        "right": undefined,
+      }
+    }
   >
     <button
       aria-controls="expandableRow"
@@ -120,6 +132,12 @@ exports[`renders correctly without hover 1`] = `
 >
   <td
     className="td"
+    style={
+      Object {
+        "left": undefined,
+        "right": undefined,
+      }
+    }
   >
     <button
       aria-controls="expandableRow"
diff --git a/packages/gestalt/src/__snapshots__/TableSortableHeaderCell.test.js.snap b/packages/gestalt/src/__snapshots__/TableSortableHeaderCell.test.js.snap
index 3285fa2753..7f5ca1d2e0 100644
--- a/packages/gestalt/src/__snapshots__/TableSortableHeaderCell.test.js.snap
+++ b/packages/gestalt/src/__snapshots__/TableSortableHeaderCell.test.js.snap
@@ -4,6 +4,12 @@ exports[`renders correctly when active 1`] = `
 <th
   className="th"
   scope="col"
+  style={
+    Object {
+      "left": undefined,
+      "right": undefined,
+    }
+  }
 >
   <div
     className="box xsDisplayInlineBlock"
@@ -63,6 +69,12 @@ exports[`renders correctly when inactive 1`] = `
 <th
   className="th"
   scope="col"
+  style={
+    Object {
+      "left": undefined,
+      "right": undefined,
+    }
+  }
 >
   <div
     className="box xsDisplayInlineBlock"
diff --git a/packages/gestalt/src/contexts/TableContext.js b/packages/gestalt/src/contexts/TableContext.js
new file mode 100644
index 0000000000..536a326b48
--- /dev/null
+++ b/packages/gestalt/src/contexts/TableContext.js
@@ -0,0 +1,27 @@
+// @flow strict
+import React, { createContext, useContext, type Context, type Element, type Node } from 'react';
+
+type TableContextType = {|
+  stickyColumns: ?number,
+|};
+
+type Props = {|
+  children: Node,
+  stickyColumns: ?number,
+|};
+
+const TableContext: Context<TableContextType> = createContext<TableContextType>({
+  stickyColumns: 0,
+});
+
+const { Provider } = TableContext;
+
+function TableContextProvider({ children, stickyColumns }: Props): Element<typeof Provider> {
+  return <Provider value={{ stickyColumns }}>{children}</Provider>;
+}
+
+function useTableContext(): TableContextType {
+  const { stickyColumns } = useContext(TableContext);
+  return { stickyColumns };
+}
+export { TableContextProvider, useTableContext };