From 600a42c6f7d9f5d1146aa27e61b1c8d17481c2bb Mon Sep 17 00:00:00 2001
From: "ilia.brauer" <ilia.brauer@semrush.com>
Date: Tue, 20 Oct 2026 10:43:28 +0200
Subject: [PATCH] [data-table] fixed css support checks for ssr-mode

---
 .../src/components/DataTable/DataTable.tsx    |  3 +-
 .../src/components/DataTable/ScrollBars.tsx   |  5 +--
 .../components/DataTable/dataTable.shadow.css | 28 ++++++++--------
 .../src/components/Head/style.shadow.css      | 32 ++++++++++---------
 4 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/semcore/data-table/src/components/DataTable/DataTable.tsx b/semcore/data-table/src/components/DataTable/DataTable.tsx
index 949fdab708..9eab396f34 100644
--- a/semcore/data-table/src/components/DataTable/DataTable.tsx
+++ b/semcore/data-table/src/components/DataTable/DataTable.tsx
@@ -371,7 +371,7 @@ class DataTableRoot<
       shadowVertical,
       scrollDirection: this.scrollDirection,
       isDataEmpty: this.isDataEmpty,
-      withAnimation: this.withAnimation && this.scrollDirection === 'horizontal' && !this.isDataEmpty,
+      withAnimation: this.scrollDirection === 'horizontal' && !this.isDataEmpty,
       headerNodesMap: this.headerNodesMap,
     };
   }
@@ -1044,7 +1044,6 @@ class DataTableRoot<
           loading={loading}
           topOffset={topOffset}
           withHeaderScrollBar={headerProps?.withScrollBar}
-          withAnimation={this.withAnimation}
           scrollBarInstanceRef={this.scrollBarInstanceRef}
         />
 
diff --git a/semcore/data-table/src/components/DataTable/ScrollBars.tsx b/semcore/data-table/src/components/DataTable/ScrollBars.tsx
index 6943916f6f..3f9404d5c4 100644
--- a/semcore/data-table/src/components/DataTable/ScrollBars.tsx
+++ b/semcore/data-table/src/components/DataTable/ScrollBars.tsx
@@ -9,7 +9,6 @@ type Props = {
   loading?: boolean;
   withHeaderScrollBar?: boolean;
   topOffset?: number;
-  withAnimation: boolean;
   scrollBarInstanceRef: React.RefObject<NSScrollArea.Bar.Instance>;
 };
 
@@ -18,7 +17,7 @@ const SCROLL_BAR_HEIGHT = 12;
 export class ScrollBars extends React.PureComponent<Props> {
   render() {
     const SScrollAreaBarInHeader = ScrollArea.Bar;
-    const { loading, topOffset, withHeaderScrollBar, withAnimation, scrollBarInstanceRef } = this.props;
+    const { loading, topOffset, withHeaderScrollBar, scrollBarInstanceRef } = this.props;
 
     return sstyled(styles)(
       <>
@@ -27,8 +26,6 @@ export class ScrollBars extends React.PureComponent<Props> {
             orientation='horizontal'
             top={topOffset - SCROLL_BAR_HEIGHT}
             zIndex={20}
-            // @ts-ignore
-            withAnimation={withAnimation}
           />
         )}
 
diff --git a/semcore/data-table/src/components/DataTable/dataTable.shadow.css b/semcore/data-table/src/components/DataTable/dataTable.shadow.css
index 2d7aba35ad..53dc8fe88c 100644
--- a/semcore/data-table/src/components/DataTable/dataTable.shadow.css
+++ b/semcore/data-table/src/components/DataTable/dataTable.shadow.css
@@ -26,19 +26,21 @@ 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);
+@supports ((animation-timeline: view()) and (animation-range: normal)) {
+  SScrollAreaBarInHeader {
+    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;
   }
-  to {
-    transform: translateY(calc(var(--global-scroll-to) - var(--global-header-height)));
+  @keyframes moveBarWithScroll {
+    from {
+      transform: translateY(0);
+    }
+    to {
+      transform: translateY(calc(var(--global-scroll-to) - var(--global-header-height)));
+    }
   }
 }
diff --git a/semcore/data-table/src/components/Head/style.shadow.css b/semcore/data-table/src/components/Head/style.shadow.css
index 7ed12f8786..5f01f69a3f 100644
--- a/semcore/data-table/src/components/Head/style.shadow.css
+++ b/semcore/data-table/src/components/Head/style.shadow.css
@@ -13,24 +13,26 @@ SHead[animationDuration] > SColumn {
   transition: top var(--animationDuration) ease-out;
 }
 
-@keyframes moveWithScroll {
-  from {
-    transform: translateY(0);
-  }
-  to {
-    transform: translateY(var(--global-scroll-to));
+@supports ((animation-timeline: view()) and (animation-range: normal)) {
+  @keyframes moveWithScroll {
+    from {
+      transform: translateY(0);
+    }
+    to {
+      transform: translateY(var(--global-scroll-to));
+    }
   }
-}
 
-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;
+  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;
+    transform: none;
+  }
 }
 
 SHead[sticky] SColumn, SHead[sticky] SGroup {