[UIK-5943][data-table] fixed loading overlay position in table with width limitation

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] {

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,
+};

stories/components/data-table/tests/examples/scroll-tests/loading-and-scroll.tsx

@@ -0,0 +1,40 @@
+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
+          aria-label='Loading and scroll'
+          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;