feat(table): Support sticky-header display

packages/components/src/components/table-header/resources.ts

@@ -14,6 +14,7 @@ export const CSS = {
   selectedCell: "selected-cell",
   lastCell: "last-cell",
   staticCell: "static-cell",
+  stickyHeader: "sticky-header",
 };
 
 export const ICONS: Record<string, IconName> = {

packages/components/src/components/table-header/table-header.scss

@@ -49,6 +49,39 @@ th {
   }
 }
 
+th.sticky-header {
+  position: sticky;
+  inset-block-start: 0;
+  background-clip: padding-box;
+}
+
+th.sticky-header::after,
+th.sticky-header:not(.last-cell)::before {
+  position: absolute;
+  content: "";
+  pointer-events: none;
+}
+th.sticky-header::after {
+  inset-inline: 0;
+  inset-block-end: -1px;
+  block-size: 1px;
+  background-color: var(
+    --calcite-table-cell-border-color,
+    var(--calcite-table-border-color, var(--calcite-color-border-3))
+  );
+}
+
+th.sticky-header:not(.last-cell)::before {
+  inset-inline-end: -1px;
+  inset-block-start: 0;
+  block-size: 100%;
+  inline-size: 1px;
+  background-color: var(
+    --calcite-table-cell-border-color,
+    var(--calcite-table-border-color, var(--calcite-color-border-3))
+  );
+}
+
 th:not(.center):not(.end).content-cell {
   @apply align-top;
 }

packages/components/src/components/table-header/table-header.tsx

@@ -79,6 +79,9 @@ export class TableHeader extends LitElement {
   /** @private */
   @property() parentRowAlignment: Alignment = "start";
 
+  /** @private */
+  @property() parentRowPositionInSection: number;
+
   /** @private */
   @property() parentRowIsSelected: boolean;
 
@@ -106,6 +109,12 @@ export class TableHeader extends LitElement {
   /** @private */
   @property() selectionMode: SelectionMode;
 
+  /** @private */
+  @property() stickyHeader: boolean;
+
+  /** @private */
+  @property() stickyHeaderDistance: number | string;
+
   //#endregion
 
   //#region Public Methods
@@ -200,6 +209,7 @@ export class TableHeader extends LitElement {
           [CSS.lastCell]: this.lastCell && (!this.rowSpan || (this.colSpan && !!this.rowSpan)),
           [this.parentRowAlignment]:
             this.parentRowAlignment === "center" || this.parentRowAlignment === "end",
+          [CSS.stickyHeader]: this.stickyHeader,
         }}
         colSpan={this.colSpan}
         onBlur={this.onContainerBlur}
@@ -208,6 +218,12 @@ export class TableHeader extends LitElement {
         role={this.parentRowType === "head" ? "columnheader" : "rowheader"}
         rowSpan={this.rowSpan}
         scope={scope}
+        style={{
+          top: this.stickyHeader
+            ? `${Number(this.stickyHeaderDistance) - this.parentRowPositionInSection}px`
+            : undefined,
+          zIndex: this.stickyHeader ? Math.max(0, 9 - this.parentRowPositionInSection) : undefined,
+        }}
         tabIndex={this.selectionCell ? 0 : staticCell ? -1 : 0}
       >
         {this.heading && <div class={CSS.heading}>{this.heading}</div>}

packages/components/src/components/table-row/resources.ts

@@ -2,6 +2,7 @@ import { IconName } from "../icon/interfaces";
 
 export const CSS = {
   lastVisibleRow: "last-visible-row",
+  stickyHeader: "sticky-header",
 };
 
 export const ICONS: Record<string, IconName> = {

packages/components/src/components/table-row/table-row.tsx

@@ -129,6 +129,12 @@ export class TableRow extends LitElement {
   /** @private */
   @property() selectionMode: Extract<"multiple" | "single" | "none", SelectionMode> = "none";
 
+  /** @private */
+  @property() stickyHeader: boolean;
+
+  /** @private */
+  @property() stickyHeaderDistance: number;
+
   //#endregion
 
   //#region Events
@@ -167,6 +173,7 @@ export class TableRow extends LitElement {
     if (
       changes.has("bodyRowCount") ||
       changes.has("scale") ||
+      changes.has("stickyHeaderDistance") ||
       changes.has("selectedRowCount") ||
       (changes.has("interactionMode") &&
         (this.hasUpdated || this.interactionMode !== "interactive"))
@@ -339,11 +346,15 @@ export class TableRow extends LitElement {
         cell.parentRowType = this.rowType;
         cell.positionInRow = index + 1;
         cell.scale = this.scale;
-
         if (cell.nodeName === "CALCITE-TABLE-CELL") {
           (cell as TableCell["el"]).readCellContentsToAT = this.readCellContentsToAT;
           (cell as TableCell["el"]).disabled = this.disabled;
         }
+        if (cell.nodeName === "CALCITE-TABLE-HEADER") {
+          (cell as TableHeader["el"]).stickyHeaderDistance = this.stickyHeaderDistance;
+          (cell as TableHeader["el"]).stickyHeader = this.stickyHeader;
+          (cell as TableHeader["el"]).parentRowPositionInSection = this.positionSection;
+        }
       });
     }
 
@@ -390,6 +401,7 @@ export class TableRow extends LitElement {
         selectedRowCountLocalized={this.selectedRowCountLocalized}
         selectionCell={true}
         selectionMode={this.selectionMode}
+        stickyHeaderDistance={this.stickyHeaderDistance}
       />
     ) : this.rowType === "body" ? (
       <calcite-table-cell
@@ -421,6 +433,7 @@ export class TableRow extends LitElement {
         key="numbered-head"
         numberCell={true}
         parentRowAlignment={this.alignment}
+        stickyHeaderDistance={this.stickyHeaderDistance}
       />
     ) : this.rowType === "body" ? (
       <calcite-table-cell
@@ -447,7 +460,10 @@ export class TableRow extends LitElement {
         <tr
           ariaRowIndex={this.positionAll + 1}
           ariaSelected={this.selected}
-          class={{ [CSS.lastVisibleRow]: this.lastVisibleRow }}
+          class={{
+            [CSS.lastVisibleRow]: this.lastVisibleRow,
+            [CSS.stickyHeader]: this.stickyHeader,
+          }}
           onKeyDown={this.keyDownHandler}
           ref={(el) => {
             if (!el) {

packages/components/src/components/table/table.e2e.ts

@@ -3303,4 +3303,118 @@ describe("keyboard navigation", () => {
       expect(await table.getProperty("currentPage")).toBe(1);
     });
   });
+
+  describe("sticky header", () => {
+    it("pins to top successfully", async () => {
+      const page = await newE2EPage();
+      await page.setContent(
+        html` <calcite-panel
+          heading="Table"
+          style="display: block; width: 300px; margin: 0 auto; border: 1px solid var(--calcite-ui-border-3);height: 400px;"
+        >
+          <calcite-table
+            sticky-header
+            selection-mode="multiple"
+            caption="Simple"
+            style="width: calc(100% - 1rem); margin: 0.5rem; height: 400px"
+          >
+            <calcite-table-row slot="table-header">
+              <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+              <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+              <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+              <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+            </calcite-table-row>
+            <calcite-table-row id="top-row">
+              <calcite-table-cell>cell content 1</calcite-table-cell>
+              <calcite-table-cell>cell content</calcite-table-cell>
+              <calcite-table-cell>cell content</calcite-table-cell>
+              <calcite-table-cell>cell content</calcite-table-cell>
+            </calcite-table-row>
+            <calcite-table-row>
+              <calcite-table-cell>cell content 2</calcite-table-cell>
+              <calcite-table-cell>cell content</calcite-table-cell>
+              <calcite-table-cell>cell content</calcite-table-cell>
+              <calcite-table-cell>cell content</calcite-table-cell>
+            </calcite-table-row>
+            <calcite-table-row>
+              <calcite-table-cell>cell content 3</calcite-table-cell>
+              <calcite-table-cell>cell content</calcite-table-cell>
+              <calcite-table-cell>cell content</calcite-table-cell>
+              <calcite-table-cell>cell content</calcite-table-cell>
+            </calcite-table-row>
+            <calcite-table-row>
+              <calcite-table-cell>cell content 4</calcite-table-cell>
+              <calcite-table-cell>cell content</calcite-table-cell>
+              <calcite-table-cell>cell content</calcite-table-cell>
+              <calcite-table-cell>cell content</calcite-table-cell>
+            </calcite-table-row>
+            <calcite-table-row>
+              <calcite-table-cell>cell content 5</calcite-table-cell>
+              <calcite-table-cell>cell content</calcite-table-cell>
+              <calcite-table-cell>cell content</calcite-table-cell>
+              <calcite-table-cell>cell content</calcite-table-cell>
+            </calcite-table-row>
+            <calcite-table-row selected>
+              <calcite-table-cell>cell content 6</calcite-table-cell>
+              <calcite-table-cell>cell content</calcite-table-cell>
+              <calcite-table-cell>cell content</calcite-table-cell>
+              <calcite-table-cell>cell content</calcite-table-cell>
+            </calcite-table-row>
+            <calcite-table-row selected>
+              <calcite-table-cell>cell content 7</calcite-table-cell>
+              <calcite-table-cell>cell content</calcite-table-cell>
+              <calcite-table-cell>cell content</calcite-table-cell>
+              <calcite-table-cell>cell content</calcite-table-cell>
+            </calcite-table-row>
+            <calcite-table-row>
+              <calcite-table-cell>cell content 8</calcite-table-cell>
+              <calcite-table-cell>cell content</calcite-table-cell>
+              <calcite-table-cell>cell content</calcite-table-cell>
+              <calcite-table-cell>cell content</calcite-table-cell>
+            </calcite-table-row>
+            <calcite-table-row>
+              <calcite-table-cell>cell content 9 </calcite-table-cell>
+              <calcite-table-cell>cell content</calcite-table-cell>
+              <calcite-table-cell>cell content</calcite-table-cell>
+              <calcite-table-cell>cell content</calcite-table-cell>
+            </calcite-table-row>
+            <calcite-table-row>
+              <calcite-table-cell>cell content 10</calcite-table-cell>
+              <calcite-table-cell>cell content</calcite-table-cell>
+              <calcite-table-cell>cell content</calcite-table-cell>
+              <calcite-table-cell>cell content</calcite-table-cell>
+            </calcite-table-row>
+            <calcite-table-row>
+              <calcite-table-cell>cell content 11</calcite-table-cell>
+              <calcite-table-cell>cell content</calcite-table-cell>
+              <calcite-table-cell>cell content</calcite-table-cell>
+              <calcite-table-cell>cell content</calcite-table-cell>
+            </calcite-table-row>
+            <calcite-table-row id="bottom-row">
+              <calcite-table-cell>cell content 12</calcite-table-cell>
+              <calcite-table-cell>cell content</calcite-table-cell>
+              <calcite-table-cell>cell content</calcite-table-cell>
+              <calcite-table-cell>cell content</calcite-table-cell>
+            </calcite-table-row>
+            <calcite-table-row>
+              <calcite-table-cell id="bottom-row-cell">cell content 13</calcite-table-cell>
+              <calcite-table-cell>cell content</calcite-table-cell>
+              <calcite-table-cell>cell content</calcite-table-cell>
+              <calcite-table-cell>cell content</calcite-table-cell>
+            </calcite-table-row>
+          </calcite-table>
+        </calcite-panel>`,
+      );
+
+      const topRow = await page.find("#top-row");
+      const bottomRow = await page.find("#bottom-row");
+      const bottomRowCell = await page.find("#bottom-row-cell");
+
+      await bottomRowCell.callMethod("setFocus");
+      await page.waitForChanges();
+
+      expect(await topRow.isIntersectingViewport()).toBe(false);
+      expect(await bottomRow.isIntersectingViewport()).toBe(true);
+    });
+  });
 });

packages/components/src/components/table/table.stories.ts

@@ -17,6 +17,7 @@ type TableStoryArgs = Pick<
   | "numbered"
   | "bordered"
   | "striped"
+  | "stickyHeader"
 >;
 
 export default {
@@ -32,6 +33,7 @@ export default {
     numbered: false,
     bordered: false,
     striped: false,
+    stickyHeader: false,
   },
   argTypes: {
     interactionMode: {
@@ -79,6 +81,7 @@ export const simple = (args: TableStoryArgs): string => html`
     layout="${args.layout}"
     caption="${args.caption}"
     ${boolean("numbered", args.numbered)}
+    ${boolean("sticky-header", args.stickyHeader)}
     ${boolean("bordered", args.bordered)}
     ${boolean("striped", args.striped)}
   >