From 367d308a9584dba99f72ef09282e407b67f90755 Mon Sep 17 00:00:00 2001
From: Slizhevsky Vladislav <uladzislau.slizheuski@semrush.com>
Date: Thu, 17 Sep 2026 16:00:18 +0200
Subject: [PATCH 1/2] [UIK-5943][data-table] fixed loading overlay position in
 table with width limitation

---
 .../src/components/Body/style.shadow.css      | 19 +++++++--
 .../tests/data-table-scroll.stories.tsx       |  5 +++
 .../scroll-tests/loading-and-scroll.tsx       | 39 +++++++++++++++++++
 3 files changed, 60 insertions(+), 3 deletions(-)
 create mode 100644 stories/components/data-table/tests/examples/scroll-tests/loading-and-scroll.tsx

diff --git a/semcore/data-table/src/components/Body/style.shadow.css b/semcore/data-table/src/components/Body/style.shadow.css
index a0cc758ed2..eb6ce64da8 100644
--- a/semcore/data-table/src/components/Body/style.shadow.css
+++ b/semcore/data-table/src/components/Body/style.shadow.css
@@ -273,6 +273,15 @@ SCellWrapper[fixed] {
   z-index: 2;
 }
 
+@keyframes align-spin-container {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(max(0px, calc(var(--global-table-height) - 100vh)));
+  }
+}
+
 SSpinContainer {
   display: flex;
   align-items: center;
@@ -290,12 +299,16 @@ SSpinContainer {
   }
 
   &[headerHeight] {
-    position: sticky;
-    top: 0;
     height: min(100vh, calc(var(--global-table-height) - var(--headerHeight)));
     min-height: min(100vh, calc(var(--global-table-height) - var(--headerHeight)));
     max-width: 100vw;
-    left: 0;
+
+    animation-name: align-spin-container;
+    animation-timeline: --table-sticky-timeline;
+    animation-range-start: exit-crossing 0px;
+    animation-range-end: exit-crossing max(0px, calc(100% - 100vh));
+    animation-timing-function: linear;
+    animation-fill-mode: both;
   }
 
   &[tableInnerVerticalScroll][headerHeight] {
diff --git a/stories/components/data-table/tests/data-table-scroll.stories.tsx b/stories/components/data-table/tests/data-table-scroll.stories.tsx
index 016e4dadc1..de83b3374d 100644
--- a/stories/components/data-table/tests/data-table-scroll.stories.tsx
+++ b/stories/components/data-table/tests/data-table-scroll.stories.tsx
@@ -4,6 +4,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import CampaingsTableExample from './examples/scroll-tests/campaigns-table';
 import FixedOffsetStaleOnContentChangeExample from './examples/scroll-tests/fixed-offset-stale-on-content-change';
 import FolderTableExample from './examples/scroll-tests/folder-table';
+import LoadingAndScrollExample from './examples/scroll-tests/loading-and-scroll';
 import RealTableExample from './examples/scroll-tests/real-table';
 import ScrollInTableExample, { defaultProps as scrollInTableDefaultProps } from './examples/scroll-tests/scroll-in-table';
 import type { ScrollInTableProps } from './examples/scroll-tests/scroll-in-table';
@@ -168,3 +169,7 @@ export const StickyHeaderHiddenColumn: Story = {
 export const FixedOffsetStaleOnContentChange: Story = {
   render: FixedOffsetStaleOnContentChangeExample,
 };
+
+export const LoadingAndScroll: Story = {
+  render: LoadingAndScrollExample,
+};
diff --git a/stories/components/data-table/tests/examples/scroll-tests/loading-and-scroll.tsx b/stories/components/data-table/tests/examples/scroll-tests/loading-and-scroll.tsx
new file mode 100644
index 0000000000..dd22238f6f
--- /dev/null
+++ b/stories/components/data-table/tests/examples/scroll-tests/loading-and-scroll.tsx
@@ -0,0 +1,39 @@
+import Card from '@semcore/ui/card';
+import { DataTable } from '@semcore/ui/data-table';
+import React from 'react';
+
+const Demo = () => {
+  return (
+    <Card w='700px'>
+      <Card.Body pt={0} px={0} pb={1}>
+        <DataTable
+          variant='card'
+          data={data}
+          w='100%'
+          headerProps={{ sticky: true, withScrollBar: true }}
+          columns={[
+            {
+              name: 'keyword',
+              children: 'Keyword',
+              gtcWidth: 'minmax(246px, 1fr)',
+            },
+            { name: 'kd', children: 'KD %', gtcWidth: '70px' },
+            { name: 'cpc', children: 'CPC', gtcWidth: '80px' },
+          ]}
+          uniqueRowKey='id'
+          loading
+          compact
+        />
+      </Card.Body>
+    </Card>
+  );
+};
+
+const data = Array.from({ length: 100 }, (_, index) => ({
+  id: `${index + 1}`,
+  keyword: `ebay buy ${index + 1}`,
+  kd: '31.2',
+  cpc: '$1.15',
+}));
+
+export default Demo;

From 04f7769c632a61a0afe689ea2d935df799061ed9 Mon Sep 17 00:00:00 2001
From: Valeryia Zimnitskaya <valeryia.zimnitskaya@semrush.com>
Date: Thu, 17 Sep 2026 17:15:36 +0200
Subject: [PATCH 2/2] [data-table] update story

---
 .../tests/examples/scroll-tests/loading-and-scroll.tsx           | 1 +
 1 file changed, 1 insertion(+)

diff --git a/stories/components/data-table/tests/examples/scroll-tests/loading-and-scroll.tsx b/stories/components/data-table/tests/examples/scroll-tests/loading-and-scroll.tsx
index dd22238f6f..5b92b12dae 100644
--- a/stories/components/data-table/tests/examples/scroll-tests/loading-and-scroll.tsx
+++ b/stories/components/data-table/tests/examples/scroll-tests/loading-and-scroll.tsx
@@ -7,6 +7,7 @@ const Demo = () => {
     <Card w='700px'>
       <Card.Body pt={0} px={0} pb={1}>
         <DataTable
+          aria-label='Loading and scroll'
           variant='card'
           data={data}
           w='100%'