diff --git a/semcore/base-components/src/components/scroll-area/ScrollArea.type.ts b/semcore/base-components/src/components/scroll-area/ScrollArea.type.ts
index 123d89b026..dce3a2bc52 100644
--- a/semcore/base-components/src/components/scroll-area/ScrollArea.type.ts
+++ b/semcore/base-components/src/components/scroll-area/ScrollArea.type.ts
@@ -97,7 +97,11 @@ declare namespace NSScrollArea {
       type Component = NSBox.Component;
     }
 
-    type Component = Intergalactic.Component<'div', Props, Ctx> & {
+    interface Instance {
+      get isScrollVisible(): boolean;
+    }
+
+    type Component = Intergalactic.Component<'div', Props, Ctx, [], Instance> & {
       Slider: Slider.Component;
     };
   }
diff --git a/semcore/base-components/src/components/scroll-area/ScrollBar.tsx b/semcore/base-components/src/components/scroll-area/ScrollBar.tsx
index e447a4aed3..9c8806d7a3 100644
--- a/semcore/base-components/src/components/scroll-area/ScrollBar.tsx
+++ b/semcore/base-components/src/components/scroll-area/ScrollBar.tsx
@@ -40,7 +40,7 @@ class ScrollBarRoot extends Component<
   { container: React.RefObject<HTMLElement | null> },
   NSScrollArea.Bar.State,
   NSScrollArea.Bar.DefaultProps
-> {
+> implements NSScrollArea.Bar.Instance {
   static displayName = 'Bar';
 
   static style = style;
@@ -70,6 +70,10 @@ class ScrollBarRoot extends Component<
     visibleScroll: false,
   };
 
+  public get isScrollVisible(): boolean {
+    return this.state.visibleScroll;
+  }
+
   get $container(): Element | null {
     return this.asProps.container.current;
   }
diff --git a/semcore/data-table/src/components/Body/Body.tsx b/semcore/data-table/src/components/Body/Body.tsx
index 89c8f92c43..af67dbce99 100644
--- a/semcore/data-table/src/components/Body/Body.tsx
+++ b/semcore/data-table/src/components/Body/Body.tsx
@@ -237,6 +237,8 @@ class BodyRoot<Data extends DataTableData, UniqKeyType> extends Component<DataTa
       rows,
       renderCellOverlay,
       selectedRows,
+      hasGroups,
+      scrollBarInstanceRef,
     } = this.asProps;
 
     let rowsToRender = rows;
@@ -394,7 +396,9 @@ class BodyRoot<Data extends DataTableData, UniqKeyType> extends Component<DataTa
           <SSpinContainer
             innerOutline
             // @ts-ignore
+            hasGroups={hasGroups}
             headerHeight={`${this.getSpinnerTopOffset()}px`}
+            tableInnerVerticalScroll={scrollBarInstanceRef.current?.isScrollVisible}
             tabIndex={-1}
             ref={spinnerRef}
             role='row'
diff --git a/semcore/data-table/src/components/Body/Body.types.ts b/semcore/data-table/src/components/Body/Body.types.ts
index 9d51d4bf37..e13ca282a0 100644
--- a/semcore/data-table/src/components/Body/Body.types.ts
+++ b/semcore/data-table/src/components/Body/Body.types.ts
@@ -1,3 +1,4 @@
+import type { NSScrollArea } from '@semcore/base-components';
 import type { Intergalactic } from '@semcore/core';
 import type * as React from 'react';
 
@@ -96,6 +97,7 @@ export type BodyPropsInner<Data extends DataTableData, UniqKeyType> = DataTableB
   variant?: DataTableProps<any, any, any>['variant'];
   totalRows?: number;
   accordionAnimationRows: RowPropsInner<Data, UniqKeyType>['accordionAnimationRows'];
+  scrollBarInstanceRef: React.RefObject<NSScrollArea.Bar.Instance>;
 };
 
 export type DataTableBodyType = (<
diff --git a/semcore/data-table/src/components/Body/style.shadow.css b/semcore/data-table/src/components/Body/style.shadow.css
index 5c38958394..1c47afc6dd 100644
--- a/semcore/data-table/src/components/Body/style.shadow.css
+++ b/semcore/data-table/src/components/Body/style.shadow.css
@@ -270,7 +270,7 @@ SCellWrapper[fixed] {
 }
 
 SSpinContainer {
-  grid-area: 2 / 1 / 20 / 5;
+  grid-area: 2 / 1 / 20 / -1;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -287,6 +287,16 @@ SSpinContainer {
     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;
+  }
+
+  &[tableInnerVerticalScroll][headerHeight] {
+    top: var(--headerHeight);
+  }
+
+  &[hasGroups] {
+    grid-area: 3 / 1 / 20 / -1;
   }
 }
 
diff --git a/semcore/data-table/src/components/DataTable/DataTable.tsx b/semcore/data-table/src/components/DataTable/DataTable.tsx
index 1a7a429ade..123a65f49d 100644
--- a/semcore/data-table/src/components/DataTable/DataTable.tsx
+++ b/semcore/data-table/src/components/DataTable/DataTable.tsx
@@ -1,3 +1,4 @@
+import type { NSScrollArea } from '@semcore/base-components';
 import { Box, ScrollArea } from '@semcore/base-components';
 import { Component, createComponent, lastInteraction, Root, sstyled } from '@semcore/core';
 import canUseDOM from '@semcore/core/lib/utils/canUseDOM';
@@ -116,6 +117,7 @@ class DataTableRoot<
   private focusedCell: [RowIndex, ColIndex] = [-1, -1];
 
   private scrollAreaRef = React.createRef<HTMLDivElement>();
+  private scrollBarInstanceRef = React.createRef<React.RefObject<NSScrollArea.Bar.Instance>>();
 
   private tableContainerRef = React.createRef<HTMLDivElement>();
   private tableRef = React.createRef<HTMLDivElement>();
@@ -420,6 +422,7 @@ class DataTableRoot<
       limit,
       variant,
       totalRows,
+      scrollBarInstanceRef: this.scrollBarInstanceRef,
     };
   }
 
@@ -1018,6 +1021,7 @@ class DataTableRoot<
           topOffset={topOffset}
           withHeaderScrollBar={headerProps?.withScrollBar}
           withAnimation={this.withAnimation}
+          scrollBarInstanceRef={this.scrollBarInstanceRef}
         />
 
         {selectedRows !== undefined && !Array.isArray(selectedRows) && (
diff --git a/semcore/data-table/src/components/DataTable/ScrollBars.tsx b/semcore/data-table/src/components/DataTable/ScrollBars.tsx
index 341d5a8e04..6943916f6f 100644
--- a/semcore/data-table/src/components/DataTable/ScrollBars.tsx
+++ b/semcore/data-table/src/components/DataTable/ScrollBars.tsx
@@ -1,3 +1,4 @@
+import type { NSScrollArea } from '@semcore/base-components';
 import { ScrollArea } from '@semcore/base-components';
 import { sstyled } from '@semcore/core';
 import React from 'react';
@@ -9,6 +10,7 @@ type Props = {
   withHeaderScrollBar?: boolean;
   topOffset?: number;
   withAnimation: boolean;
+  scrollBarInstanceRef: React.RefObject<NSScrollArea.Bar.Instance>;
 };
 
 const SCROLL_BAR_HEIGHT = 12;
@@ -16,7 +18,7 @@ const SCROLL_BAR_HEIGHT = 12;
 export class ScrollBars extends React.PureComponent<Props> {
   render() {
     const SScrollAreaBarInHeader = ScrollArea.Bar;
-    const { loading, topOffset, withHeaderScrollBar, withAnimation } = this.props;
+    const { loading, topOffset, withHeaderScrollBar, withAnimation, scrollBarInstanceRef } = this.props;
 
     return sstyled(styles)(
       <>
@@ -33,7 +35,7 @@ export class ScrollBars extends React.PureComponent<Props> {
         {!loading && (
           <>
             <ScrollArea.Bar orientation='horizontal' zIndex={20} />
-            <ScrollArea.Bar orientation='vertical' zIndex={20} />
+            <ScrollArea.Bar orientation='vertical' zIndex={20} instanceRef={scrollBarInstanceRef} />
           </>
         )}
       </>,
diff --git a/stories/components/data-table/advanced/examples/table_perf/table_perf.tsx b/stories/components/data-table/advanced/examples/table_perf/table_perf.tsx
index 200ac733bd..ab0d8097be 100644
--- a/stories/components/data-table/advanced/examples/table_perf/table_perf.tsx
+++ b/stories/components/data-table/advanced/examples/table_perf/table_perf.tsx
@@ -218,7 +218,6 @@ const Demo = (demoProps: AccordionInTableProps) => {
         loading={demoProps.loading}
         data={data}
         aria-label='Accordion inside table'
-        h='100%'
         defaultGridTemplateColumnWidth='1fr'
         columns={cols}
         renderCell={(props) => {