[UIK-4060][data-table] pretty sticky header

.stylelintrc.json

@@ -6,7 +6,7 @@
     "property-no-unknown": [
       true,
       {
-        "ignoreProperties": ["vertical-anchor"]
+        "ignoreProperties": ["vertical-anchor", "animation-timeline"]
       }
     ],
     "selector-pseudo-class-no-unknown": [

semcore/data-table/__tests__/data-table-columns.browser-test.tsx

@@ -106,6 +106,7 @@ test.describe(`${TAG.VISUAL}`, () => {
     expect(isShadowExist).toBe(false);
 
     await page.setViewportSize({ width: 400, height: 700 });
+    await page.waitForTimeout(100);
 
     await expect.poll(
       () => lastColumn.evaluate((node) => {

semcore/data-table/src/components/Body/Body.tsx

@@ -312,7 +312,9 @@ class BodyRoot<Data extends DataTableData, UniqKeyType> extends Component<DataTa
         }
 
         if (lastIndex === -1) {
-          lastIndex = scrollTop === 0 ? aproxRowsOnPage : rows.length;
+          lastIndex = scrollTop === 0
+            ? aproxRowsOnPage
+            : Math.min(startIndex + aproxRowsOnPage * 2, rows.length);
         }
 
         this.indexForDownIterate = startIndex;

semcore/data-table/src/components/DataTable/DataTable.tsx

@@ -2,7 +2,6 @@ import { Box, ScrollArea } from '@semcore/base-components';
 import { Component, createComponent, lastInteraction, Root, sstyled } from '@semcore/core';
 import canUseDOM from '@semcore/core/lib/utils/canUseDOM';
 import i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance';
-import findComponent from '@semcore/core/lib/utils/findComponent';
 import { hasParent } from '@semcore/core/lib/utils/hasParent';
 import trottle from '@semcore/core/lib/utils/rafTrottle';
 import { forkRef } from '@semcore/core/lib/utils/ref';
@@ -23,6 +22,7 @@ import type {
   ColumnItemConfig,
   DataRowItem,
 } from './DataTable.types';
+import { ScrollBars } from './ScrollBars';
 import type { ISelectedRows } from '../../store/SelectableRows';
 import { SelectableRows } from '../../store/SelectableRows';
 import scrollStyles from '../../style/scroll-shadows.shadow.css';
@@ -33,7 +33,7 @@ import { MergedColumnsCell, MergedRowsCell } from '../Body/MergedCells';
 import type { DTRow } from '../Body/Row.types';
 import type { DataTableColumnProps, DTColumn } from '../Head/Column.types';
 import { Head } from '../Head/Head';
-import type { DataTableHeadProps, HeadPropsInner } from '../Head/Head.types';
+import type { HeadPropsInner } from '../Head/Head.types';
 import { SRAnnouncer } from '../RowSelector/SRAnnouncer';
 import { SRReactiveAnnouncer } from '../RowSelector/SRReactiveAnnouncer';
 
@@ -45,8 +45,6 @@ export const SELECT_ALL = Symbol('SELECT_ALL');
 export const ROW_INDEX = Symbol('ROW_INDEX');
 export const GRID_ROW_INDEX = Symbol('GRID_ROW_INDEX');
 
-const SCROLL_BAR_HEIGHT = 12;
-
 type State<
   Data extends DataTableData,
   UniqKey extends (Data[number] extends { [ROW_GROUP]: DataTableData } ? keyof Data[number][typeof ROW_GROUP][number] : keyof Data[number]),
@@ -168,7 +166,11 @@ class DataTableRoot<
     }
 
     if (headerProps?.sticky && canUseDOM() && this.scrollDirection === 'horizontal') {
-      document.addEventListener('scroll', this.handleDocumentScroll);
+      if (!this.withAnimation) {
+        document.addEventListener('scroll', this.handleDocumentScroll, { passive: true });
+      } else {
+        this.calculateStickyHeaderAnimation();
+      }
     }
   }
 
@@ -199,6 +201,31 @@ class DataTableRoot<
     this.state.expandedRows?.clear();
   }
 
+  calculateStickyHeaderAnimation() {
+    const { headerProps } = this.asProps;
+    const scrollArea = this.scrollAreaRef.current;
+    const table = this.tableContainerRef.current;
+    if (scrollArea && table) {
+      const currentHeaderHeight = scrollArea.style.getPropertyValue('--global-header-height');
+      const newHeaderHeight = `${this.getHeaderHeight()}px`;
+
+      scrollArea.style.setProperty('--global-scroll-to', `${table.offsetHeight}px`);
+      scrollArea.style.setProperty('--global-header-top', `${headerProps?.top ?? 0}px`);
+      scrollArea.style.setProperty('--global-header-height', newHeaderHeight);
+
+      if (currentHeaderHeight && currentHeaderHeight !== newHeaderHeight) {
+        this.forceUpdate();
+      }
+    }
+  }
+
+  get withAnimation() {
+    if (canUseDOM()) {
+      return CSS.supports('(animation-timeline: view()) and (animation-range: normal)');
+    }
+    return false;
+  }
+
   get totalRows() {
     const { totalRows } = this.asProps;
     const flatRows = this.getFlatRows();
@@ -301,6 +328,7 @@ class DataTableRoot<
       shadowVertical,
       scrollDirection: this.scrollDirection,
       isDataEmpty: this.isDataEmpty,
+      withAnimation: this.withAnimation,
     };
   }
 
@@ -381,29 +409,25 @@ class DataTableRoot<
     const tableContainerTop = tableContainer.getBoundingClientRect().top;
     const { headerProps } = this.asProps;
     const headerContainer = this.headerRef.current;
-    const elements = headerContainer?.querySelectorAll('[role="columnheader"], [data-ui-name="Head.Group"]');
     const top = tableContainerTop - (headerProps?.top ?? 0);
     const headerScrollBar = headerProps?.withScrollBar
       ? this.scrollAreaRef.current?.querySelector(`[role=scrollbar][aria-orientation=horizontal]`)
       : undefined;
 
     if (top && top < 0) {
       const translate = `translateY(${Math.abs(top)}px)`;
-      elements?.forEach((column) => {
-        if (column instanceof HTMLElement) {
-          column.style.setProperty('transform', translate);
-        }
-      });
+
+      if (headerContainer instanceof HTMLElement) {
+        headerContainer.style.setProperty('--global-scroll-translate', `${Math.abs(top)}px`);
+      }
 
       if (headerScrollBar instanceof HTMLElement) {
         headerScrollBar.style.setProperty('transform', translate);
       }
     } else {
-      elements?.forEach((column) => {
-        if (column instanceof HTMLElement) {
-          column.style.removeProperty('transform');
-        }
-      });
+      if (headerContainer instanceof HTMLElement) {
+        headerContainer.style.removeProperty('--global-scroll-translate');
+      }
 
       if (headerScrollBar instanceof HTMLElement) {
         headerScrollBar.style.removeProperty('transform');
@@ -848,7 +872,10 @@ class DataTableRoot<
       clearTimeout(this.containerResizeEndTimeoutId);
     }
 
-    this.containerResizeEndTimeoutId = setTimeout(this.calculateVerticalShadow, 0);
+    this.containerResizeEndTimeoutId = setTimeout(() => {
+      this.calculateVerticalShadow();
+      this.calculateStickyHeaderAnimation();
+    }, 0);
 
     this.asProps.onResize?.(entries, observer);
   };
@@ -876,11 +903,9 @@ class DataTableRoot<
     const [offsetLeftSum, offsetRightSum] = this.getScrollOffsetValue();
     const { gridTemplateColumns, gridTemplateAreas } = this.gridSettings;
 
-    const Head = findComponent<DataTableHeadProps>(Children, ['DataTable.Head']);
-    const headerPropsToCheck = headerProps ?? Head?.props;
     const headerHeight = headerProps?.h || this.getHeaderHeight();
     const topOffset =
-      headerPropsToCheck?.sticky || headerPropsToCheck?.withScrollBar ? headerHeight : undefined;
+      headerProps?.sticky || headerProps?.withScrollBar ? headerHeight : undefined;
 
     const width =
       w ??
@@ -961,20 +986,12 @@ class DataTableRoot<
           </SDataTable>
         </ScrollArea.Container>
 
-        {headerPropsToCheck?.withScrollBar && topOffset && !loading && (
-          <ScrollArea.Bar
-            orientation='horizontal'
-            top={topOffset - SCROLL_BAR_HEIGHT}
-            zIndex={20}
-          />
-        )}
-
-        {!loading && (
-          <>
-            <ScrollArea.Bar orientation='horizontal' zIndex={20} />
-            <ScrollArea.Bar orientation='vertical' zIndex={20} />
-          </>
-        )}
+        <ScrollBars
+          loading={loading}
+          topOffset={topOffset}
+          withHeaderScrollBar={headerProps?.withScrollBar}
+          withAnimation={this.withAnimation}
+        />
 
         {selectedRows !== undefined && !Array.isArray(selectedRows) && (
           <SRReactiveAnnouncer selectedRows={selectedRows} getI18nText={getI18nText} />

semcore/data-table/src/components/DataTable/ScrollBars.tsx

@@ -0,0 +1,42 @@
+import { ScrollArea } from '@semcore/base-components';
+import { sstyled } from '@semcore/core';
+import React from 'react';
+
+import styles from './dataTable.shadow.css';
+
+type Props = {
+  loading?: boolean;
+  withHeaderScrollBar?: boolean;
+  topOffset?: number;
+  withAnimation: boolean;
+};
+
+const SCROLL_BAR_HEIGHT = 12;
+
+export class ScrollBars extends React.PureComponent<Props> {
+  render() {
+    const SScrollAreaBarInHeader = ScrollArea.Bar;
+    const { loading, topOffset, withHeaderScrollBar, withAnimation } = this.props;
+
+    return sstyled(styles)(
+      <>
+        {withHeaderScrollBar && topOffset && !loading && (
+          <SScrollAreaBarInHeader
+            orientation='horizontal'
+            top={topOffset - SCROLL_BAR_HEIGHT}
+            zIndex={20}
+            // @ts-ignore
+            withAnimation={withAnimation}
+          />
+        )}
+
+        {!loading && (
+          <>
+            <ScrollArea.Bar orientation='horizontal' zIndex={20} />
+            <ScrollArea.Bar orientation='vertical' zIndex={20} />
+          </>
+        )}
+      </>,
+    );
+  }
+}

semcore/data-table/src/components/DataTable/dataTable.shadow.css

@@ -22,3 +22,20 @@ SDataTable[gridTemplateAreas] {
 SDataTable[gridTemplateRows] {
   grid-template-rows: var(--gridTemplateRows);
 }
+
+SScrollAreaBarInHeader[withAnimation] {
+  animation-name: moveBarWithScroll;
+  animation-timeline: --table-sticky-timeline;
+  animation-range-start: exit-crossing calc(-1 * var(--global-header-top));
+  animation-range-end: exit-crossing calc(100% - var(--global-header-top) - var(--global-header-height));
+  animation-timing-function: linear;
+  animation-fill-mode: both;
+}
+@keyframes moveBarWithScroll {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(calc(var(--global-scroll-to) - var(--global-header-height)));
+  }
+}

semcore/data-table/src/components/Head/Head.types.ts

@@ -66,4 +66,6 @@ export type HeadPropsInner<
   shadowVertical?: BodyPropsInner<Data, UniqKeyType>['shadowVertical'];
   scrollDirection?: ColumnPropsInner<Data, UniqKey, UniqKeyType>['scrollDirection'];
   isDataEmpty: boolean;
+
+  withAnimation: boolean;
 };

semcore/data-table/src/components/Head/style.shadow.css

@@ -13,15 +13,32 @@ SHead[animationDuration] > SColumn {
   transition: top var(--animationDuration) ease-out;
 }
 
-SHead[sticky] SColumn, SHead[sticky] SGroup {
-  position: sticky;
-  top: 0;
-  z-index: 18;
+@keyframes moveWithScroll {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(var(--global-scroll-to));
+  }
 }
 
-SHead[sticky] SGroupContainer > SColumn {
+SHead[withAnimation][sticky] SColumn, SHead[withAnimation][sticky] SGroup {
+  animation-name: moveWithScroll;
+  animation-timeline: --table-sticky-timeline;
+  animation-range-start: exit-crossing calc(-1 * var(--global-header-top));
+  animation-range-end: exit-crossing calc(100% - var(--global-header-top));
+  animation-timing-function: linear;
+  animation-fill-mode: both;
+
+  transform: none;
+}
+
+SHead[sticky] SColumn, SHead[sticky] SGroup {
   position: sticky;
+  top: 0;
   z-index: 18;
+  transform: translateY(var(--global-scroll-translate));
+  will-change: transform;
 }
 
 SHead[compact] SColumn {

semcore/data-table/src/style/scroll-shadows.shadow.css

@@ -1,6 +1,8 @@
 SScrollArea {
   width: fit-content;
 
+  view-timeline: --table-sticky-timeline block;
+
   SContainer {
     overflow: unset;