From e2fb169a6586e0089127966097e82ff0e9758e2c Mon Sep 17 00:00:00 2001
From: "ilia.brauer" <ilia.brauer@semrush.com>
Date: Mon, 27 Jul 2026 11:48:29 +0200
Subject: [PATCH 1/2] [data-table] fixed loading position in tables

---
 semcore/data-table/src/components/Body/Body.tsx  |  1 +
 .../src/components/Body/style.shadow.css         | 10 ++++------
 .../tests/data-table-states.stories.tsx          |  5 ++++-
 .../loading-with-button-and-scroll.tsx           | 16 ++++++++++------
 4 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/semcore/data-table/src/components/Body/Body.tsx b/semcore/data-table/src/components/Body/Body.tsx
index 89c8f92c43..f3a30d0314 100644
--- a/semcore/data-table/src/components/Body/Body.tsx
+++ b/semcore/data-table/src/components/Body/Body.tsx
@@ -395,6 +395,7 @@ class BodyRoot<Data extends DataTableData, UniqKeyType> extends Component<DataTa
             innerOutline
             // @ts-ignore
             headerHeight={`${this.getSpinnerTopOffset()}px`}
+            containerHeight={`${tableContainerRef.current?.clientHeight ?? 0}px`}
             tabIndex={-1}
             ref={spinnerRef}
             role='row'
diff --git a/semcore/data-table/src/components/Body/style.shadow.css b/semcore/data-table/src/components/Body/style.shadow.css
index 2ab50dd985..2f64637a50 100644
--- a/semcore/data-table/src/components/Body/style.shadow.css
+++ b/semcore/data-table/src/components/Body/style.shadow.css
@@ -270,11 +270,9 @@ SCellWrapper[fixed] {
 }
 
 SSpinContainer {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  position: sticky;
   top: 0;
+  grid-area: 2 / 1 / 20 / 5;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -285,8 +283,8 @@ SSpinContainer {
     z-index: 15;
   }
 
-  &[headerHeight] {
-    top: var(--headerHeight);
+  &[headerHeight][containerHeight] {
+    min-height: min(100vh, calc(var(--containerHeight) - var(--headerHeight)));
   }
 }
 
diff --git a/stories/components/data-table/tests/data-table-states.stories.tsx b/stories/components/data-table/tests/data-table-states.stories.tsx
index bc4f7a23ca..6c30242ba1 100644
--- a/stories/components/data-table/tests/data-table-states.stories.tsx
+++ b/stories/components/data-table/tests/data-table-states.stories.tsx
@@ -28,8 +28,11 @@ export const EmptyStateSortable: Story = {
   render: EmptyStateSortableExample,
 };
 
-export const LoadingWithScrollAndButton: Story = {
+export const LoadingWithScrollAndButton: StoryObj<{ h: number }> = {
   render: LoadingWithScrollAndButtonExample,
+  argTypes: {
+    h: { type: 'number' },
+  },
 };
 
 export const LoadingPagination: Story = {
diff --git a/stories/components/data-table/tests/examples/table-states-tests/loading-with-button-and-scroll.tsx b/stories/components/data-table/tests/examples/table-states-tests/loading-with-button-and-scroll.tsx
index 55928dce31..ee3b1e6398 100644
--- a/stories/components/data-table/tests/examples/table-states-tests/loading-with-button-and-scroll.tsx
+++ b/stories/components/data-table/tests/examples/table-states-tests/loading-with-button-and-scroll.tsx
@@ -3,7 +3,7 @@ import Button from '@semcore/ui/button';
 import { DataTable } from '@semcore/ui/data-table';
 import React from 'react';
 
-const Demo = (): any => {
+const Demo = (props: { h?: number }): any => {
   const [loading, setLoading] = React.useState(true);
   const [message, setMessage] = React.useState('');
 
@@ -23,6 +23,9 @@ const Demo = (): any => {
 
   return (
     <>
+      <Button onClick={toggleLoading} mt={3}>
+        {loading ? 'Stop loading' : 'Start loading'}
+      </Button>
       <ScreenReaderOnly role='status' aria-live='polite'>
         {message}
       </ScreenReaderOnly>
@@ -30,7 +33,7 @@ const Demo = (): any => {
         data={data}
         aria-label='Loading using SpinContainer'
         loading={loading}
-        h={150}
+        h={props.h === 0 ? undefined : props.h}
         columns={[
           { name: 'keyword', children: 'Keyword' },
           { name: 'kd', children: 'KD,%' },
@@ -38,14 +41,11 @@ const Demo = (): any => {
           { name: 'vol', children: 'Vol.' },
         ]}
       />
-      <Button onClick={toggleLoading} mt={3}>
-        {loading ? 'Stop loading' : 'Start loading'}
-      </Button>
     </>
   );
 };
 
-const data = [
+const dataTest = [
   {
     keyword: 'ebay buy',
     kd: '77.8',
@@ -78,4 +78,8 @@ const data = [
   },
 ];
 
+const data = new Array(200).fill(null).map((_, index) => {
+  return dataTest[index % 4];
+});
+
 export default Demo;

From f26cabef0be35eede61119078b08d731abb78a2f Mon Sep 17 00:00:00 2001
From: "ilia.brauer" <ilia.brauer@semrush.com>
Date: Mon, 3 Aug 2026 15:24:43 +0200
Subject: [PATCH 2/2] [data-table] fixed min-height for loading spinner for the
 initial render

---
 semcore/data-table/src/components/Body/Body.tsx         | 2 +-
 semcore/data-table/src/components/Body/style.shadow.css | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/semcore/data-table/src/components/Body/Body.tsx b/semcore/data-table/src/components/Body/Body.tsx
index f3a30d0314..8723b5e04b 100644
--- a/semcore/data-table/src/components/Body/Body.tsx
+++ b/semcore/data-table/src/components/Body/Body.tsx
@@ -395,7 +395,7 @@ class BodyRoot<Data extends DataTableData, UniqKeyType> extends Component<DataTa
             innerOutline
             // @ts-ignore
             headerHeight={`${this.getSpinnerTopOffset()}px`}
-            containerHeight={`${tableContainerRef.current?.clientHeight ?? 0}px`}
+            containerHeight={tableContainerRef.current ? `${tableContainerRef.current.clientHeight}px` : undefined}
             tabIndex={-1}
             ref={spinnerRef}
             role='row'
diff --git a/semcore/data-table/src/components/Body/style.shadow.css b/semcore/data-table/src/components/Body/style.shadow.css
index 2f64637a50..b76b447586 100644
--- a/semcore/data-table/src/components/Body/style.shadow.css
+++ b/semcore/data-table/src/components/Body/style.shadow.css
@@ -278,6 +278,7 @@ SSpinContainer {
   justify-content: center;
   background-color: var(--intergalactic-overlay-limitation-secondary, oklch(1 0 0 / 0.85));
   z-index: 15;
+  min-height: 100vh;
 
   &:focus-visible {
     z-index: 15;