[UIK-5635][data-table] fixed loading position in tables

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 ? `${tableContainerRef.current.clientHeight}px` : undefined}
             tabIndex={-1}
             ref={spinnerRef}
             role='row'

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

@@ -270,23 +270,22 @@ 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;
   background-color: var(--intergalactic-overlay-limitation-secondary, oklch(1 0 0 / 0.85));
   z-index: 15;
+  min-height: 100vh;
 
   &:focus-visible {
     z-index: 15;
   }
 
-  &[headerHeight] {
-    top: var(--headerHeight);
+  &[headerHeight][containerHeight] {
+    min-height: min(100vh, calc(var(--containerHeight) - var(--headerHeight)));
   }
 }
 

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

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,29 +23,29 @@ const Demo = (): any => {
 
   return (
     <>
+      <Button onClick={toggleLoading} mt={3}>
+        {loading ? 'Stop loading' : 'Start loading'}
+      </Button>
       <ScreenReaderOnly role='status' aria-live='polite'>
         {message}
       </ScreenReaderOnly>
       <DataTable
         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,%' },
           { name: 'cpc', children: 'CPC' },
           { 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;