feat(data-table): parity - make data-table header sticky (#20780)

* feat(data-table): make data-table header sticky

* fix: add overflow to batch-actions

---------

Co-authored-by: Gururaj J <89023023+Gururajj77@users.noreply.github.com>

Author: annawen1

packages/web-components/src/components/data-table/_table-action.scss

@@ -149,6 +149,7 @@
   @extend .#{$prefix}--batch-actions;
 
   box-sizing: border-box;
+  overflow-x: auto;
 }
 
 :host(#{$prefix}-table-batch-actions[active]) {

packages/web-components/src/components/data-table/_table-core.scss

@@ -12,8 +12,6 @@
 :host(#{$prefix}-table) {
   @extend .#{$prefix}--data-table;
 
-  display: table;
-
   ::slotted(#{$prefix}-table-head) {
     @include type-style('heading-01');
 
@@ -36,6 +34,11 @@
   inline-size: auto;
 }
 
+.#{$prefix}--data-table-content {
+  display: table;
+  inline-size: 100%;
+}
+
 :host(#{$prefix}-table[sticky-header]) {
   ::slotted(#{$prefix}-table-head),
   ::slotted(#{$prefix}-table-body) {
@@ -50,14 +53,12 @@
   }
 }
 
-:host(#{$prefix}-table[with-header]) {
-  .#{$prefix}--data-table-header-container {
-    display: table-caption;
-  }
-}
-.#{$prefix}--data-table-header-container {
-  display: table-caption;
+.#{$prefix}--data-table_inner-container {
+  display: block;
+  inline-size: 100%;
+  overflow-x: auto;
 }
+
 :host(#{$prefix}-table-head[sticky-header]) {
   position: sticky;
   z-index: 1;

packages/web-components/src/components/data-table/table.ts

@@ -893,10 +893,8 @@ class CDSTable extends HostListenerMixin(LitElement) {
     });
   }
 
-  /* eslint-disable no-constant-condition */
   render() {
-    return html`
-      <div class="${prefix}--data-table-header-container">
+    return html` <div class="${prefix}--data-table-header-container">
         <div ?hidden="${!this.withHeader}" class="${prefix}--data-table-header">
           <slot @slotchange="${this._handleSlotChange}" name="title"></slot>
           <slot
@@ -906,18 +904,13 @@ class CDSTable extends HostListenerMixin(LitElement) {
         <slot name="toolbar"></slot>
       </div>
 
-      ${false // TODO: replace with this.stickyHeader when feature is fully implemented
-        ? html` <div class="${prefix}--data-table_inner-container">
-            <div class="${prefix}--data-table-content">
-              <slot
-                @cds-table-body-content-change="${this
-                  ._handleTableBodyChange}"></slot>
-            </div>
-          </div>`
-        : html`<slot
+      <div class="${prefix}--data-table_inner-container">
+        <div class="${prefix}--data-table-content">
+          <slot
             @cds-table-body-content-change="${this
-              ._handleTableBodyChange}"></slot>`}
-    `;
+              ._handleTableBodyChange}"></slot>
+        </div>
+      </div>`;
   }
 
   /**
@@ -955,8 +948,6 @@ class CDSTable extends HostListenerMixin(LitElement) {
     this._handleSortAction(columnIndex, sortDirection);
   }
 
-  /* eslint-enable no-constant-condition */
-
   /**
    * The name of the custom event fired before a new sort direction is set upon a user gesture.
    * Cancellation of this event stops the user-initiated change in sort direction.