diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index c25791f3bf..8ea49e0366 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -34,7 +34,7 @@ const preview: Preview = {
         <div style={{ display: 'grid', gridTemplateRows: '20px auto 20px' }}>
           <div tabIndex={0} />
           <PortalProvider value={rootRef}>
-            <div ref={rootRef}>
+            <div ref={rootRef} style={{ minWidth: 0 }}>
               <Story />
             </div>
           </PortalProvider>
diff --git a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-accordion-with-fixed-Column-withScrollBar-false-2-firefox-linux.png b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-accordion-with-fixed-Column-withScrollBar-false-2-firefox-linux.png
index f49b18d7a0..7c96853d7a 100644
Binary files a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-accordion-with-fixed-Column-withScrollBar-false-2-firefox-linux.png and b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-accordion-with-fixed-Column-withScrollBar-false-2-firefox-linux.png differ
diff --git a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-accordion-with-fixed-Column-withScrollBar-false-2-webkit-linux.png b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-accordion-with-fixed-Column-withScrollBar-false-2-webkit-linux.png
index 4b4d9f2f6c..e2b400f7bd 100644
Binary files a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-accordion-with-fixed-Column-withScrollBar-false-2-webkit-linux.png and b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-accordion-with-fixed-Column-withScrollBar-false-2-webkit-linux.png differ
diff --git a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-accordion-with-fixed-Column-withScrollBar-true-2-firefox-linux.png b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-accordion-with-fixed-Column-withScrollBar-true-2-firefox-linux.png
index 2d48a6b07e..84b17a97bf 100644
Binary files a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-accordion-with-fixed-Column-withScrollBar-true-2-firefox-linux.png and b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-accordion-with-fixed-Column-withScrollBar-true-2-firefox-linux.png differ
diff --git a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-accordion-with-fixed-Column-withScrollBar-true-2-webkit-linux.png b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-accordion-with-fixed-Column-withScrollBar-true-2-webkit-linux.png
index c194acd40e..c7ac937a29 100644
Binary files a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-accordion-with-fixed-Column-withScrollBar-true-2-webkit-linux.png and b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-accordion-with-fixed-Column-withScrollBar-true-2-webkit-linux.png differ
diff --git a/semcore/data-table/__tests__/data-table-base-styles-checks.browser-test.tsx-snapshots/-visual-Verify-styles-Primary-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-base-styles-checks.browser-test.tsx-snapshots/-visual-Verify-styles-Primary-1-chromium-linux.png
index 802ac003c6..05d1d390cb 100644
Binary files a/semcore/data-table/__tests__/data-table-base-styles-checks.browser-test.tsx-snapshots/-visual-Verify-styles-Primary-1-chromium-linux.png and b/semcore/data-table/__tests__/data-table-base-styles-checks.browser-test.tsx-snapshots/-visual-Verify-styles-Primary-1-chromium-linux.png differ
diff --git a/semcore/data-table/__tests__/data-table-base-styles-checks.browser-test.tsx-snapshots/-visual-Verify-styles-Primary-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-base-styles-checks.browser-test.tsx-snapshots/-visual-Verify-styles-Primary-1-firefox-linux.png
index 3c6d5c29fc..534e37cf00 100644
Binary files a/semcore/data-table/__tests__/data-table-base-styles-checks.browser-test.tsx-snapshots/-visual-Verify-styles-Primary-1-firefox-linux.png and b/semcore/data-table/__tests__/data-table-base-styles-checks.browser-test.tsx-snapshots/-visual-Verify-styles-Primary-1-firefox-linux.png differ
diff --git a/semcore/data-table/__tests__/data-table-base-styles-checks.browser-test.tsx-snapshots/-visual-Verify-styles-Primary-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-base-styles-checks.browser-test.tsx-snapshots/-visual-Verify-styles-Primary-1-webkit-linux.png
index 29b383c29d..efbc388108 100644
Binary files a/semcore/data-table/__tests__/data-table-base-styles-checks.browser-test.tsx-snapshots/-visual-Verify-styles-Primary-1-webkit-linux.png and b/semcore/data-table/__tests__/data-table-base-styles-checks.browser-test.tsx-snapshots/-visual-Verify-styles-Primary-1-webkit-linux.png differ
diff --git a/semcore/data-table/__tests__/data-table-columns.browser-test.tsx b/semcore/data-table/__tests__/data-table-columns.browser-test.tsx
index 64e4d55042..1cdc913894 100644
--- a/semcore/data-table/__tests__/data-table-columns.browser-test.tsx
+++ b/semcore/data-table/__tests__/data-table-columns.browser-test.tsx
@@ -106,6 +106,7 @@ test.describe(`${TAG.VISUAL}`, () => {
     expect(isShadowExist).toBe(false);
 
     await page.setViewportSize({ width: 400, height: 700 });
+    await page.waitForTimeout(100);
 
     await expect.poll(
       () => lastColumn.evaluate((node) => {
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx
index fa58eadfcd..e90cddf934 100644
--- a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx
+++ b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx
@@ -12,6 +12,11 @@ async function checkAriaMaxValue(scrollBar: any) {
   return value;
 }
 
+async function checkScrolled(scrollBar: any) {
+  await expect(scrollBar).toHaveAttribute('aria-valuenow');
+  await expect.poll(async () => Number(await scrollBar.getAttribute('aria-valuenow')), { timeout: 3000 }).toBeGreaterThan(0);
+}
+
 /* =====================================================
 @visual
 Visual states, hover and focus styles, paddings, margins, and snapshots.
@@ -23,77 +28,20 @@ test.describe(`${TAG.VISUAL}`, () => {
     { sticky: true, withScrollBar: true, h: '300px' },
   ];
   variantFixedColumn.forEach((item) => {
-    test(`Verify Mouse scroll One Level with Fixed column scroll sticky =${item.sticky} withScrollBar=${item.withScrollBar} h=${item.h}`, {
-      tag: [TAG.PRIORITY_HIGH,
-        TAG.MOUSE,
-        '@data-table'],
+    test(`Verify Mouse scroll One Level with Fixed column sticky=${item.sticky} withScrollBar=${item.withScrollBar}`, {
+      tag: [TAG.PRIORITY_HIGH, TAG.MOUSE, '@data-table'],
     }, async ({ page, browserName }) => {
-      await loadPage(page, 'stories/components/data-table/tests/examples/scroll-tests/one-level-with-fixed-column.tsx', 'en', item);
-
-      await test.step('Verify vertical scroll', async () => {
-        await locators.dataTable(page).hover();
-        await page.mouse.wheel(0, 600);
-        await page.waitForTimeout(1000);
-        await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.1 });
-      });
-
-      await test.step('Verify horizontal scroll', async () => {
-        await locators.dataTable(page).hover();
-        await page.mouse.wheel(600, 0);
-        await page.waitForTimeout(1000);
-        await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.1 });
-      });
-    });
-
-    test(`Verify keyboard scroll One Level with Fixed column scroll sticky =${item.sticky} withScrollBar=${item.withScrollBar}  h=${item.h}`, {
-      tag: [TAG.PRIORITY_HIGH,
-        TAG.KEYBOARD,
-        '@data-table'],
-    }, async ({ page, browserName }) => {
-      await loadPage(page, 'stories/components/data-table/tests/examples/scroll-tests/one-level-with-fixed-column.tsx', 'en', item);
-
-      await test.step('Verify horizontal scroll', async () => {
-        await page.keyboard.press('Tab');
-        for (let i = 0; i < 3; i++) {
-          await page.keyboard.press('ArrowRight');
-        }
-        await page.waitForTimeout(200);
-        if (browserName == 'webkit') {
-          await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.1 });
-        } else {
-          await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.01 });
-        }
-      });
-
-      await test.step('Verify vertical scroll', async () => {
-        await page.keyboard.press('Tab');
-        for (let i = 0; i < 5; i++) {
-          await page.keyboard.press('ArrowDown');
-        }
-        await page.waitForTimeout(200);
-        if (browserName == 'webkit') {
-          await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.1 });
-        } else {
-          await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.01 });
-        }
-      });
-    });
-
-    test(`Verify Mouse scroll Multi Level with Fixed column scroll sticky =${item.sticky} withScrollBar=${item.withScrollBar}  h=${item.h}`, {
-      tag: [TAG.PRIORITY_HIGH,
-        TAG.MOUSE,
-        '@data-table'],
-    }, async ({ page, browserName }) => {
-      await loadPage(page, 'stories/components/data-table/tests/examples/scroll-tests/multi-level-with-fixed-column.tsx', 'en', item);
+      await loadPage(page, 'stories/components/data-table/tests/examples/scroll-tests/with-fixed-column.tsx', 'en', { ...item, multiLevel: false });
+      const scrollBar = page.locator('[data-ui-name="ScrollArea.Bar"]');
 
       await test.step('Verify vertical scroll', async () => {
         await locators.dataTable(page).hover();
         await page.mouse.wheel(0, 600);
         await page.waitForTimeout(1000);
-        if (browserName == 'webkit') {
-          await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.1 });
+        if (item.withScrollBar) {
+          await checkScrolled(scrollBar.nth(2));
         } else {
-          await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.01 });
+          await checkScrolled(scrollBar.nth(1));
         }
       });
 
@@ -101,20 +49,26 @@ test.describe(`${TAG.VISUAL}`, () => {
         await locators.dataTable(page).hover();
         await page.mouse.wheel(600, 0);
         await page.waitForTimeout(1000);
-        if (browserName == 'webkit') {
+
+        if (item.sticky) {
           await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.1 });
+        }
+        if (item.withScrollBar) {
+          await checkScrolled(scrollBar.nth(0));
+          await checkScrolled(scrollBar.nth(1));
         } else {
-          await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.01 });
+          await checkScrolled(scrollBar.nth(0));
         }
       });
     });
+  });
 
-    test(`Verify keyboard scroll Multi Level with Fixed column scroll sticky =${item.sticky} withScrollBar=${item.withScrollBar}  h=${item.h}`, {
-      tag: [TAG.PRIORITY_HIGH,
-        TAG.KEYBOARD,
-        '@data-table'],
+  variantFixedColumn.forEach((item) => {
+    test(`Verify keyboard scroll Multi Level with Fixed column sticky=${item.sticky} withScrollBar=${item.withScrollBar}`, {
+      tag: [TAG.PRIORITY_HIGH, TAG.KEYBOARD, '@data-table'],
     }, async ({ page, browserName }) => {
-      await loadPage(page, 'stories/components/data-table/tests/examples/scroll-tests/multi-level-with-fixed-column.tsx', 'en', item);
+      await loadPage(page, 'stories/components/data-table/tests/examples/scroll-tests/with-fixed-column.tsx', 'en', { ...item, multiLevel: true });
+      const scrollBar = page.locator('[data-ui-name="ScrollArea.Bar"]');
 
       await test.step('Verify horizontal scroll', async () => {
         await page.keyboard.press('Tab');
@@ -123,20 +77,25 @@ test.describe(`${TAG.VISUAL}`, () => {
         }
         await page.waitForTimeout(200);
 
-        await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.1 });
+        if (item.withScrollBar) {
+          await checkScrolled(scrollBar.nth(0));
+          await checkScrolled(scrollBar.nth(1));
+        } else
+          await checkScrolled(scrollBar.nth(0));
       });
 
       await test.step('Verify vertical scroll', async () => {
-        await page.keyboard.press('Tab');
         for (let i = 0; i < 5; i++) {
           await page.keyboard.press('ArrowDown');
         }
         await page.waitForTimeout(200);
-        if (browserName == 'webkit') {
-          await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.1 });
-        } else {
-          await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.01 });
-        }
+
+        await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.1 });
+
+        if (item.withScrollBar) {
+          await checkScrolled(scrollBar.nth(2));
+        } else
+          await checkScrolled(scrollBar.nth(1));
       });
     });
   });
@@ -148,55 +107,12 @@ test.describe(`${TAG.VISUAL}`, () => {
 
   ];
   variantNoFixedColumn.forEach((item) => {
-    test(`Verify Mouse scroll One Level scroll sticky =${item.sticky} withScrollBar=${item.withScrollBar} wMax=${item.wMax}`, {
-      tag: [TAG.PRIORITY_HIGH,
-        TAG.MOUSE,
-        '@data-table'],
+    test(`Verify keyboard scroll One Level scroll sticky=${item.sticky} withScrollBar=${item.withScrollBar} wMax=${item.wMax}`, {
+      tag: [TAG.PRIORITY_HIGH, TAG.KEYBOARD, '@data-table'],
     }, async ({ page, browserName }) => {
-      await loadPage(page, 'stories/components/data-table/tests/examples/scroll-tests/one-level-scroll-in-table.tsx', 'en', item);
+      await loadPage(page, 'stories/components/data-table/tests/examples/scroll-tests/scroll-in-table.tsx', 'en', { ...item, multiLevel: false });
       const scrollBar = page.locator('[data-ui-name="ScrollArea.Bar"]');
 
-      await test.step('Verify vertical scroll', async () => {
-        const nowNumberInitial = await checkAriaMaxValue(scrollBar.nth(0));
-        await locators.dataTable(page).first().hover();
-        await page.mouse.wheel(0, 600);
-        await page.waitForTimeout(1000);
-        const nowNumber = await checkAriaMaxValue(scrollBar.nth(0));
-        expect(nowNumberInitial).toBeLessThanOrEqual(nowNumber);
-        await locators.dataTable(page).nth(1).hover();
-        await page.mouse.wheel(0, 600);
-        await page.waitForTimeout(1000);
-        if (browserName == 'webkit') {
-          await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.1 });
-        } else {
-          await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.01 });
-        }
-      });
-
-      if (item.wMax === '300px') {
-        await test.step('Verify horizontal scroll', async () => {
-          const nowNumberInitial = await checkAriaMaxValue(scrollBar.nth(1));
-          await locators.dataTable(page).nth(1).hover();
-          await page.mouse.wheel(600, 0);
-          await page.waitForTimeout(1000);
-          const nowNumber = await checkAriaMaxValue(scrollBar.nth(1));
-          expect(nowNumberInitial).toBeLessThanOrEqual(nowNumber);
-          if (browserName == 'webkit') {
-            await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.1 });
-          } else {
-            await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.01 });
-          }
-        });
-      }
-    });
-
-    test(`Verify keyboard scroll One Levelscroll sticky =${item.sticky} withScrollBar=${item.withScrollBar} wMax=${item.wMax}`, {
-      tag: [TAG.PRIORITY_HIGH,
-        TAG.KEYBOARD,
-        '@data-table'],
-    }, async ({ page, browserName }) => {
-      await loadPage(page, 'stories/components/data-table/tests/examples/scroll-tests/one-level-scroll-in-table.tsx', 'en', item);
-
       await test.step('Verify vertical scroll', async () => {
         await page.keyboard.press('Tab');
         for (let i = 0; i < 5; i++) {
@@ -207,112 +123,85 @@ test.describe(`${TAG.VISUAL}`, () => {
         for (let i = 0; i < 5; i++) {
           await page.keyboard.press('ArrowDown');
         }
-        if (browserName == 'webkit') {
-          await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.1 });
+        await page.waitForTimeout(200);
+        if (item.wMax != '300px' && !item.withScrollBar) {
+          await checkScrolled(scrollBar.nth(0));
+          await checkScrolled(scrollBar.nth(1));
+        } else if (item.wMax == '300px' && item.withScrollBar) {
+          await checkScrolled(scrollBar.nth(0));
+          await checkScrolled(scrollBar.nth(3));
         } else {
-          await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.01 });
+          await checkScrolled(scrollBar.nth(0));
+          await checkScrolled(scrollBar.nth(2));
         }
       });
 
       if (item.wMax == '300px') {
         await test.step('Verify horizontal scroll', async () => {
+          await page.keyboard.press('Shift+Tab');
+          for (let i = 0; i < 3; i++) {
+            await page.keyboard.press('ArrowRight');
+          }
           await page.keyboard.press('Tab');
-          await page.keyboard.press('Tab');
-
           for (let i = 0; i < 3; i++) {
             await page.keyboard.press('ArrowRight');
           }
           await page.waitForTimeout(200);
-          if (browserName == 'webkit') {
-            await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.1 });
-          } else {
-            await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.01 });
-          }
+          await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.1 });
+
+          if (item.withScrollBar)
+            await checkScrolled(scrollBar.nth(1));
+          else
+            await checkScrolled(scrollBar.nth(2));
         });
       }
     });
+  });
 
-    test(`Verify Mouse scroll Multi Level scroll sticky =${item.sticky} withScrollBar=${item.withScrollBar} wMax=${item.wMax}`, {
-      tag: [TAG.PRIORITY_HIGH,
-        TAG.MOUSE,
-        '@data-table'],
+  variantNoFixedColumn.forEach((item) => {
+    test(`Verify Mouse scroll Multi Level scroll sticky=${item.sticky} withScrollBar=${item.withScrollBar} wMax=${item.wMax}`, {
+      tag: [TAG.PRIORITY_HIGH, TAG.MOUSE, '@data-table'],
     }, async ({ page, browserName }) => {
-      await loadPage(page, 'stories/components/data-table/tests/examples/scroll-tests/multi-level-scroll-in-table.tsx', 'en', item);
-
+      await loadPage(page, 'stories/components/data-table/tests/examples/scroll-tests/scroll-in-table.tsx', 'en', { ...item, multiLevel: true });
+      const scrollBar = page.locator('[data-ui-name="ScrollArea.Bar"]');
       await test.step('Verify vertical scroll', async () => {
         await locators.dataTable(page).first().hover();
         await page.mouse.wheel(0, 600);
-        await page.waitForTimeout(1000);
+        await page.waitForTimeout(200);
         await locators.dataTable(page).nth(1).hover();
         await page.mouse.wheel(0, 600);
-        await page.waitForTimeout(1000);
-        if (browserName == 'webkit') {
-          await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.1 });
+        await page.waitForTimeout(200);
+        if (item.wMax != '300px' && !item.withScrollBar) {
+          await checkScrolled(scrollBar.nth(0));
+          await checkScrolled(scrollBar.nth(1));
+        } else if (item.wMax == '300px' && item.withScrollBar) {
+          await checkScrolled(scrollBar.nth(2));
+          await checkScrolled(scrollBar.nth(5));
         } else {
-          await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.01 });
+          await checkScrolled(scrollBar.nth(1));
+          await checkScrolled(scrollBar.nth(3));
         }
       });
 
       if (item.wMax == '300px') {
         await test.step('Verify horizontal scroll', async () => {
+          await locators.dataTable(page).first().hover();
+          await page.mouse.wheel(600, 0);
+          await page.waitForTimeout(200);
           await locators.dataTable(page).nth(1).hover();
           await page.mouse.wheel(600, 0);
-          await page.waitForTimeout(1000);
-          if (browserName == 'webkit') {
-            await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.1 });
-          } else {
-            await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.01 });
-          }
-        });
-      }
-    });
-
-    test(`Verify keyboard scroll Multi Level scroll sticky =${item.sticky} withScrollBar=${item.withScrollBar} wMax=${item.wMax}`, {
-      tag: [TAG.PRIORITY_HIGH,
-        TAG.KEYBOARD,
-        '@data-table'],
-    }, async ({ page, browserName }) => {
-      await loadPage(page, 'stories/components/data-table/tests/examples/scroll-tests/multi-level-scroll-in-table.tsx', 'en', item);
-      const scrollBar = page.locator('[data-ui-name="ScrollArea.Bar"]');
-
-      if (item.wMax == '300px') {
-        await test.step('Verify horizontal scroll', async () => {
-          const nowNumberInitial = await checkAriaMaxValue(scrollBar.nth(2));
-          await page.keyboard.press('Tab');
-          await page.keyboard.press('Tab');
-          for (let i = 0; i < 3; i++) {
-            await page.keyboard.press('ArrowRight');
-          }
           await page.waitForTimeout(200);
-          const nowNumber = await checkAriaMaxValue(scrollBar.nth(2));
-          expect(nowNumberInitial).toBeLessThanOrEqual(nowNumber);
-          if (browserName == 'webkit') {
-            await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.1 });
+          await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.1 });
+
+          if (item.withScrollBar) {
+            await checkScrolled(scrollBar.nth(0));
+            await checkScrolled(scrollBar.nth(3));
           } else {
-            await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.01 });
+            await checkScrolled(scrollBar.nth(0));
+            await checkScrolled(scrollBar.nth(2));
           }
         });
       }
-
-      await test.step('Verify vertical scroll', async () => {
-        const nowNumberInitial = await checkAriaMaxValue(scrollBar.nth(0));
-        await page.keyboard.press('Tab');
-        for (let i = 0; i < 5; i++) {
-          await page.keyboard.press('ArrowDown');
-        }
-        await page.waitForTimeout(200);
-        const nowNumber = await checkAriaMaxValue(scrollBar.nth(0));
-        expect(nowNumberInitial).toBeLessThanOrEqual(nowNumber);
-        await page.keyboard.press('Tab');
-        for (let i = 0; i < 5; i++) {
-          await page.keyboard.press('ArrowDown');
-        }
-        if (browserName == 'webkit') {
-          await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.1 });
-        } else {
-          await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.01 });
-        }
-      });
     });
   });
 
@@ -334,7 +223,7 @@ test.describe(`${TAG.VISUAL}`, () => {
       expect(topStyle).toBe('100px');
     }
 
-    await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.01 });
+    await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.0005 });
   });
 
   // add cases when hedader has interactive element
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-false-withScrollBar-false-wMax-undefined-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-false-withScrollBar-false-wMax-undefined-1-chromium-linux.png
deleted file mode 100644
index 2e14c1bbbe..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-false-withScrollBar-false-wMax-undefined-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-false-withScrollBar-false-wMax-undefined-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-false-withScrollBar-false-wMax-undefined-1-firefox-linux.png
deleted file mode 100644
index fb9fdf74cf..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-false-withScrollBar-false-wMax-undefined-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-false-withScrollBar-false-wMax-undefined-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-false-withScrollBar-false-wMax-undefined-1-webkit-linux.png
deleted file mode 100644
index f74e948d1d..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-false-withScrollBar-false-wMax-undefined-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-1-chromium-linux.png
index d8e1326249..6b8eaf6069 100644
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-1-chromium-linux.png and b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-1-chromium-linux.png differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-1-firefox-linux.png
index d63a36d059..5b8652d3ab 100644
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-1-firefox-linux.png and b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-1-firefox-linux.png differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-1-webkit-linux.png
index 5b45343830..7424fab2e0 100644
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-1-webkit-linux.png and b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-1-webkit-linux.png differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-2-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-2-chromium-linux.png
deleted file mode 100644
index 9d7be81836..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-2-chromium-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-2-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-2-firefox-linux.png
deleted file mode 100644
index d58f6c9ab6..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-2-firefox-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-2-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-2-webkit-linux.png
deleted file mode 100644
index 1adcce4bfa..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-2-webkit-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-1-chromium-linux.png
index 225ffc2c85..75cff4cb49 100644
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-1-chromium-linux.png and b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-1-chromium-linux.png differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-1-firefox-linux.png
index 68aa41ef5d..754e311d7a 100644
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-1-firefox-linux.png and b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-1-firefox-linux.png differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-1-webkit-linux.png
index 5f61053baa..607b5343a6 100644
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-1-webkit-linux.png and b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-1-webkit-linux.png differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-2-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-2-chromium-linux.png
deleted file mode 100644
index c391545f66..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-2-chromium-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-2-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-2-firefox-linux.png
deleted file mode 100644
index c57db6d3c4..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-2-firefox-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-2-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-2-webkit-linux.png
deleted file mode 100644
index f578289b73..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-2-webkit-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-3fea9-roll-sticky-true-withScrollBar-true-h-300px-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-3fea9-roll-sticky-true-withScrollBar-true-h-300px-1-chromium-linux.png
deleted file mode 100644
index 7bc658f208..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-3fea9-roll-sticky-true-withScrollBar-true-h-300px-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-3fea9-roll-sticky-true-withScrollBar-true-h-300px-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-3fea9-roll-sticky-true-withScrollBar-true-h-300px-1-firefox-linux.png
deleted file mode 100644
index a7096a75ce..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-3fea9-roll-sticky-true-withScrollBar-true-h-300px-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-3fea9-roll-sticky-true-withScrollBar-true-h-300px-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-3fea9-roll-sticky-true-withScrollBar-true-h-300px-1-webkit-linux.png
deleted file mode 100644
index 45d8c1f3e3..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-3fea9-roll-sticky-true-withScrollBar-true-h-300px-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-58d2d-roll-sticky-true-withScrollBar-true-h-300px-2-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-58d2d-roll-sticky-true-withScrollBar-true-h-300px-2-chromium-linux.png
deleted file mode 100644
index 678007df81..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-58d2d-roll-sticky-true-withScrollBar-true-h-300px-2-chromium-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-58d2d-roll-sticky-true-withScrollBar-true-h-300px-2-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-58d2d-roll-sticky-true-withScrollBar-true-h-300px-2-firefox-linux.png
deleted file mode 100644
index af5750f6c5..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-58d2d-roll-sticky-true-withScrollBar-true-h-300px-2-firefox-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-58d2d-roll-sticky-true-withScrollBar-true-h-300px-2-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-58d2d-roll-sticky-true-withScrollBar-true-h-300px-2-webkit-linux.png
deleted file mode 100644
index bb6e1f5ba4..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-58d2d-roll-sticky-true-withScrollBar-true-h-300px-2-webkit-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-89f42-oll-sticky-true-withScrollBar-false-h-300px-2-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-89f42-oll-sticky-true-withScrollBar-false-h-300px-2-chromium-linux.png
deleted file mode 100644
index 49e6a9359e..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-89f42-oll-sticky-true-withScrollBar-false-h-300px-2-chromium-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-89f42-oll-sticky-true-withScrollBar-false-h-300px-2-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-89f42-oll-sticky-true-withScrollBar-false-h-300px-2-firefox-linux.png
deleted file mode 100644
index b39d93410e..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-89f42-oll-sticky-true-withScrollBar-false-h-300px-2-firefox-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-89f42-oll-sticky-true-withScrollBar-false-h-300px-2-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-89f42-oll-sticky-true-withScrollBar-false-h-300px-2-webkit-linux.png
deleted file mode 100644
index 6953e7aac0..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-89f42-oll-sticky-true-withScrollBar-false-h-300px-2-webkit-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-c526b-ll-sticky-false-withScrollBar-false-h-300px-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-c526b-ll-sticky-false-withScrollBar-false-h-300px-1-chromium-linux.png
deleted file mode 100644
index cb1df697fc..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-c526b-ll-sticky-false-withScrollBar-false-h-300px-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-c526b-ll-sticky-false-withScrollBar-false-h-300px-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-c526b-ll-sticky-false-withScrollBar-false-h-300px-1-firefox-linux.png
deleted file mode 100644
index 9a378370cc..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-c526b-ll-sticky-false-withScrollBar-false-h-300px-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-c526b-ll-sticky-false-withScrollBar-false-h-300px-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-c526b-ll-sticky-false-withScrollBar-false-h-300px-1-webkit-linux.png
deleted file mode 100644
index 0dde92c1d4..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-c526b-ll-sticky-false-withScrollBar-false-h-300px-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-ce73b-ll-sticky-false-withScrollBar-false-h-300px-2-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-ce73b-ll-sticky-false-withScrollBar-false-h-300px-2-chromium-linux.png
deleted file mode 100644
index 3b821a85c3..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-ce73b-ll-sticky-false-withScrollBar-false-h-300px-2-chromium-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-ce73b-ll-sticky-false-withScrollBar-false-h-300px-2-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-ce73b-ll-sticky-false-withScrollBar-false-h-300px-2-firefox-linux.png
deleted file mode 100644
index bcc210c7b7..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-ce73b-ll-sticky-false-withScrollBar-false-h-300px-2-firefox-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-ce73b-ll-sticky-false-withScrollBar-false-h-300px-2-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-ce73b-ll-sticky-false-withScrollBar-false-h-300px-2-webkit-linux.png
deleted file mode 100644
index 0336276353..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-ce73b-ll-sticky-false-withScrollBar-false-h-300px-2-webkit-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-dc869-oll-sticky-true-withScrollBar-false-h-300px-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-dc869-oll-sticky-true-withScrollBar-false-h-300px-1-chromium-linux.png
deleted file mode 100644
index f27e3357dc..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-dc869-oll-sticky-true-withScrollBar-false-h-300px-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-dc869-oll-sticky-true-withScrollBar-false-h-300px-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-dc869-oll-sticky-true-withScrollBar-false-h-300px-1-firefox-linux.png
deleted file mode 100644
index aaea2f9ba4..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-dc869-oll-sticky-true-withScrollBar-false-h-300px-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-dc869-oll-sticky-true-withScrollBar-false-h-300px-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-dc869-oll-sticky-true-withScrollBar-false-h-300px-1-webkit-linux.png
deleted file mode 100644
index 6259291081..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-Multi-Level-with-F-dc869-oll-sticky-true-withScrollBar-false-h-300px-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-false-withScrollBar-false-wMax-undefined-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-false-withScrollBar-false-wMax-undefined-1-chromium-linux.png
deleted file mode 100644
index d6b66303f9..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-false-withScrollBar-false-wMax-undefined-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-false-withScrollBar-false-wMax-undefined-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-false-withScrollBar-false-wMax-undefined-1-firefox-linux.png
deleted file mode 100644
index 0edbce0bab..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-false-withScrollBar-false-wMax-undefined-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-false-withScrollBar-false-wMax-undefined-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-false-withScrollBar-false-wMax-undefined-1-webkit-linux.png
deleted file mode 100644
index 0e05e73c07..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-false-withScrollBar-false-wMax-undefined-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-1-chromium-linux.png
deleted file mode 100644
index 037219ab26..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-1-firefox-linux.png
deleted file mode 100644
index 51126b563d..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-1-webkit-linux.png
deleted file mode 100644
index fcd5a2d2c2..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-2-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-2-chromium-linux.png
deleted file mode 100644
index 404f7516aa..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-2-chromium-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-2-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-2-firefox-linux.png
deleted file mode 100644
index 098a98b9de..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-2-firefox-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-2-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-2-webkit-linux.png
deleted file mode 100644
index d18a91f40e..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-2-webkit-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-1-chromium-linux.png
deleted file mode 100644
index 1a9023f4a7..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-1-firefox-linux.png
deleted file mode 100644
index 208041bab0..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-1-webkit-linux.png
deleted file mode 100644
index 4571f945b0..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-2-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-2-chromium-linux.png
deleted file mode 100644
index 6cec55255c..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-2-chromium-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-2-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-2-firefox-linux.png
deleted file mode 100644
index a2bba371e6..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-2-firefox-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-2-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-2-webkit-linux.png
deleted file mode 100644
index c3c3109306..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-2-webkit-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-10c28-roll-sticky-true-withScrollBar-false-h-300px-2-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-10c28-roll-sticky-true-withScrollBar-false-h-300px-2-chromium-linux.png
deleted file mode 100644
index e29e949a5a..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-10c28-roll-sticky-true-withScrollBar-false-h-300px-2-chromium-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-10c28-roll-sticky-true-withScrollBar-false-h-300px-2-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-10c28-roll-sticky-true-withScrollBar-false-h-300px-2-firefox-linux.png
deleted file mode 100644
index ceec7cba6b..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-10c28-roll-sticky-true-withScrollBar-false-h-300px-2-firefox-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-10c28-roll-sticky-true-withScrollBar-false-h-300px-2-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-10c28-roll-sticky-true-withScrollBar-false-h-300px-2-webkit-linux.png
deleted file mode 100644
index 41065d624d..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-10c28-roll-sticky-true-withScrollBar-false-h-300px-2-webkit-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-488a4-oll-sticky-false-withScrollBar-false-h-300px-2-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-488a4-oll-sticky-false-withScrollBar-false-h-300px-2-chromium-linux.png
deleted file mode 100644
index 332a8284cc..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-488a4-oll-sticky-false-withScrollBar-false-h-300px-2-chromium-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-488a4-oll-sticky-false-withScrollBar-false-h-300px-2-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-488a4-oll-sticky-false-withScrollBar-false-h-300px-2-firefox-linux.png
deleted file mode 100644
index 8bc96b9b96..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-488a4-oll-sticky-false-withScrollBar-false-h-300px-2-firefox-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-488a4-oll-sticky-false-withScrollBar-false-h-300px-2-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-488a4-oll-sticky-false-withScrollBar-false-h-300px-2-webkit-linux.png
deleted file mode 100644
index 17988421da..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-488a4-oll-sticky-false-withScrollBar-false-h-300px-2-webkit-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-73634-croll-sticky-true-withScrollBar-true-h-300px-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-73634-croll-sticky-true-withScrollBar-true-h-300px-1-chromium-linux.png
deleted file mode 100644
index 0ac38eb31f..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-73634-croll-sticky-true-withScrollBar-true-h-300px-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-73634-croll-sticky-true-withScrollBar-true-h-300px-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-73634-croll-sticky-true-withScrollBar-true-h-300px-1-firefox-linux.png
deleted file mode 100644
index 84c7849862..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-73634-croll-sticky-true-withScrollBar-true-h-300px-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-73634-croll-sticky-true-withScrollBar-true-h-300px-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-73634-croll-sticky-true-withScrollBar-true-h-300px-1-webkit-linux.png
deleted file mode 100644
index 3e30ad5219..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-73634-croll-sticky-true-withScrollBar-true-h-300px-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-8a5da-oll-sticky-false-withScrollBar-false-h-300px-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-8a5da-oll-sticky-false-withScrollBar-false-h-300px-1-chromium-linux.png
deleted file mode 100644
index a989292fa2..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-8a5da-oll-sticky-false-withScrollBar-false-h-300px-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-8a5da-oll-sticky-false-withScrollBar-false-h-300px-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-8a5da-oll-sticky-false-withScrollBar-false-h-300px-1-firefox-linux.png
deleted file mode 100644
index 58081d2ac3..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-8a5da-oll-sticky-false-withScrollBar-false-h-300px-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-8a5da-oll-sticky-false-withScrollBar-false-h-300px-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-8a5da-oll-sticky-false-withScrollBar-false-h-300px-1-webkit-linux.png
deleted file mode 100644
index 33f443f4d4..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-8a5da-oll-sticky-false-withScrollBar-false-h-300px-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-a6485-croll-sticky-true-withScrollBar-true-h-300px-2-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-a6485-croll-sticky-true-withScrollBar-true-h-300px-2-chromium-linux.png
deleted file mode 100644
index 718913e9e5..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-a6485-croll-sticky-true-withScrollBar-true-h-300px-2-chromium-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-a6485-croll-sticky-true-withScrollBar-true-h-300px-2-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-a6485-croll-sticky-true-withScrollBar-true-h-300px-2-firefox-linux.png
deleted file mode 100644
index d4e9b75605..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-a6485-croll-sticky-true-withScrollBar-true-h-300px-2-firefox-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-a6485-croll-sticky-true-withScrollBar-true-h-300px-2-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-a6485-croll-sticky-true-withScrollBar-true-h-300px-2-webkit-linux.png
deleted file mode 100644
index 951639593c..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-a6485-croll-sticky-true-withScrollBar-true-h-300px-2-webkit-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-e0545-roll-sticky-true-withScrollBar-false-h-300px-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-e0545-roll-sticky-true-withScrollBar-false-h-300px-1-chromium-linux.png
deleted file mode 100644
index 6fbf5780a0..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-e0545-roll-sticky-true-withScrollBar-false-h-300px-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-e0545-roll-sticky-true-withScrollBar-false-h-300px-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-e0545-roll-sticky-true-withScrollBar-false-h-300px-1-firefox-linux.png
deleted file mode 100644
index 469fbc746d..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-e0545-roll-sticky-true-withScrollBar-false-h-300px-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-e0545-roll-sticky-true-withScrollBar-false-h-300px-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-e0545-roll-sticky-true-withScrollBar-false-h-300px-1-webkit-linux.png
deleted file mode 100644
index 384e7874e0..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fix-e0545-roll-sticky-true-withScrollBar-false-h-300px-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fixed-column-sticky-true-withScrollBar-false-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fixed-column-sticky-true-withScrollBar-false-1-chromium-linux.png
new file mode 100644
index 0000000000..a1635311ee
Binary files /dev/null and b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fixed-column-sticky-true-withScrollBar-false-1-chromium-linux.png differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fixed-column-sticky-true-withScrollBar-false-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fixed-column-sticky-true-withScrollBar-false-1-firefox-linux.png
new file mode 100644
index 0000000000..743c57ad49
Binary files /dev/null and b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fixed-column-sticky-true-withScrollBar-false-1-firefox-linux.png differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fixed-column-sticky-true-withScrollBar-false-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fixed-column-sticky-true-withScrollBar-false-1-webkit-linux.png
new file mode 100644
index 0000000000..1f22e88ccb
Binary files /dev/null and b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fixed-column-sticky-true-withScrollBar-false-1-webkit-linux.png differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fixed-column-sticky-true-withScrollBar-true-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fixed-column-sticky-true-withScrollBar-true-1-chromium-linux.png
new file mode 100644
index 0000000000..180a7a99d0
Binary files /dev/null and b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fixed-column-sticky-true-withScrollBar-true-1-chromium-linux.png differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fixed-column-sticky-true-withScrollBar-true-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fixed-column-sticky-true-withScrollBar-true-1-firefox-linux.png
new file mode 100644
index 0000000000..d93e65fcc3
Binary files /dev/null and b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fixed-column-sticky-true-withScrollBar-true-1-firefox-linux.png differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fixed-column-sticky-true-withScrollBar-true-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fixed-column-sticky-true-withScrollBar-true-1-webkit-linux.png
new file mode 100644
index 0000000000..9a82ddb0ef
Binary files /dev/null and b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-Mouse-scroll-One-Level-with-Fixed-column-sticky-true-withScrollBar-true-1-webkit-linux.png differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-false-withScrollBar-false-wMax-undefined-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-false-withScrollBar-false-wMax-undefined-1-chromium-linux.png
deleted file mode 100644
index be09ea1027..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-false-withScrollBar-false-wMax-undefined-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-false-withScrollBar-false-wMax-undefined-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-false-withScrollBar-false-wMax-undefined-1-firefox-linux.png
deleted file mode 100644
index c29ba89180..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-false-withScrollBar-false-wMax-undefined-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-false-withScrollBar-false-wMax-undefined-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-false-withScrollBar-false-wMax-undefined-1-webkit-linux.png
deleted file mode 100644
index dc80fd3a2d..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-false-withScrollBar-false-wMax-undefined-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-1-chromium-linux.png
deleted file mode 100644
index 7fc4629c74..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-1-firefox-linux.png
deleted file mode 100644
index 1d02ddcd96..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-1-webkit-linux.png
deleted file mode 100644
index c86ee87bdd..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-2-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-2-chromium-linux.png
deleted file mode 100644
index a1983a2a7c..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-2-chromium-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-2-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-2-firefox-linux.png
deleted file mode 100644
index 805c4dbbf5..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-2-firefox-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-2-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-2-webkit-linux.png
deleted file mode 100644
index 2986e042bb..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-2-webkit-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-1-chromium-linux.png
deleted file mode 100644
index 16212ccdfa..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-1-firefox-linux.png
deleted file mode 100644
index da86f56f87..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-1-webkit-linux.png
deleted file mode 100644
index c2e4f1e0cb..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-2-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-2-chromium-linux.png
deleted file mode 100644
index 5a1b65c67f..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-2-chromium-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-2-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-2-firefox-linux.png
deleted file mode 100644
index 25e6d35ad6..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-2-firefox-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-2-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-2-webkit-linux.png
deleted file mode 100644
index dde7fe39f7..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-2-webkit-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-1748f-oll-sticky-true-withScrollBar-false-h-300px-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-1748f-oll-sticky-true-withScrollBar-false-h-300px-1-chromium-linux.png
deleted file mode 100644
index 49a5ea16b9..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-1748f-oll-sticky-true-withScrollBar-false-h-300px-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-1748f-oll-sticky-true-withScrollBar-false-h-300px-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-1748f-oll-sticky-true-withScrollBar-false-h-300px-1-firefox-linux.png
deleted file mode 100644
index 731194cf77..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-1748f-oll-sticky-true-withScrollBar-false-h-300px-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-1748f-oll-sticky-true-withScrollBar-false-h-300px-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-1748f-oll-sticky-true-withScrollBar-false-h-300px-1-webkit-linux.png
deleted file mode 100644
index dc8eff0f37..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-1748f-oll-sticky-true-withScrollBar-false-h-300px-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-5aec3-roll-sticky-true-withScrollBar-true-h-300px-2-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-5aec3-roll-sticky-true-withScrollBar-true-h-300px-2-chromium-linux.png
deleted file mode 100644
index cc469e4729..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-5aec3-roll-sticky-true-withScrollBar-true-h-300px-2-chromium-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-5aec3-roll-sticky-true-withScrollBar-true-h-300px-2-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-5aec3-roll-sticky-true-withScrollBar-true-h-300px-2-firefox-linux.png
deleted file mode 100644
index 19292d66b2..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-5aec3-roll-sticky-true-withScrollBar-true-h-300px-2-firefox-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-5aec3-roll-sticky-true-withScrollBar-true-h-300px-2-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-5aec3-roll-sticky-true-withScrollBar-true-h-300px-2-webkit-linux.png
deleted file mode 100644
index 2025381c16..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-5aec3-roll-sticky-true-withScrollBar-true-h-300px-2-webkit-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-87dfd-roll-sticky-true-withScrollBar-true-h-300px-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-87dfd-roll-sticky-true-withScrollBar-true-h-300px-1-chromium-linux.png
deleted file mode 100644
index b7c78f3ea9..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-87dfd-roll-sticky-true-withScrollBar-true-h-300px-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-87dfd-roll-sticky-true-withScrollBar-true-h-300px-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-87dfd-roll-sticky-true-withScrollBar-true-h-300px-1-firefox-linux.png
deleted file mode 100644
index 1b94d34211..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-87dfd-roll-sticky-true-withScrollBar-true-h-300px-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-87dfd-roll-sticky-true-withScrollBar-true-h-300px-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-87dfd-roll-sticky-true-withScrollBar-true-h-300px-1-webkit-linux.png
deleted file mode 100644
index 2025381c16..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-87dfd-roll-sticky-true-withScrollBar-true-h-300px-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-b100e-ll-sticky-false-withScrollBar-false-h-300px-2-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-b100e-ll-sticky-false-withScrollBar-false-h-300px-2-chromium-linux.png
deleted file mode 100644
index a3ca02a102..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-b100e-ll-sticky-false-withScrollBar-false-h-300px-2-chromium-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-b100e-ll-sticky-false-withScrollBar-false-h-300px-2-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-b100e-ll-sticky-false-withScrollBar-false-h-300px-2-firefox-linux.png
deleted file mode 100644
index c73774c3f0..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-b100e-ll-sticky-false-withScrollBar-false-h-300px-2-firefox-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-b100e-ll-sticky-false-withScrollBar-false-h-300px-2-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-b100e-ll-sticky-false-withScrollBar-false-h-300px-2-webkit-linux.png
deleted file mode 100644
index af61c10a4a..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-b100e-ll-sticky-false-withScrollBar-false-h-300px-2-webkit-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-c76a6-ll-sticky-false-withScrollBar-false-h-300px-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-c76a6-ll-sticky-false-withScrollBar-false-h-300px-1-chromium-linux.png
deleted file mode 100644
index 0bdb563a79..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-c76a6-ll-sticky-false-withScrollBar-false-h-300px-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-c76a6-ll-sticky-false-withScrollBar-false-h-300px-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-c76a6-ll-sticky-false-withScrollBar-false-h-300px-1-firefox-linux.png
deleted file mode 100644
index 26e124cb92..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-c76a6-ll-sticky-false-withScrollBar-false-h-300px-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-c76a6-ll-sticky-false-withScrollBar-false-h-300px-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-c76a6-ll-sticky-false-withScrollBar-false-h-300px-1-webkit-linux.png
deleted file mode 100644
index af61c10a4a..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-c76a6-ll-sticky-false-withScrollBar-false-h-300px-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-e4303-oll-sticky-true-withScrollBar-false-h-300px-2-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-e4303-oll-sticky-true-withScrollBar-false-h-300px-2-chromium-linux.png
deleted file mode 100644
index dab2868089..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-e4303-oll-sticky-true-withScrollBar-false-h-300px-2-chromium-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-e4303-oll-sticky-true-withScrollBar-false-h-300px-2-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-e4303-oll-sticky-true-withScrollBar-false-h-300px-2-firefox-linux.png
deleted file mode 100644
index 7fbeadf86c..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-e4303-oll-sticky-true-withScrollBar-false-h-300px-2-firefox-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-e4303-oll-sticky-true-withScrollBar-false-h-300px-2-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-e4303-oll-sticky-true-withScrollBar-false-h-300px-2-webkit-linux.png
deleted file mode 100644
index dc8eff0f37..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-wit-e4303-oll-sticky-true-withScrollBar-false-h-300px-2-webkit-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-with-Fixed-column-sticky-false-withScrollBar-false-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-with-Fixed-column-sticky-false-withScrollBar-false-1-chromium-linux.png
new file mode 100644
index 0000000000..b389970818
Binary files /dev/null and b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-with-Fixed-column-sticky-false-withScrollBar-false-1-chromium-linux.png differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-with-Fixed-column-sticky-false-withScrollBar-false-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-with-Fixed-column-sticky-false-withScrollBar-false-1-firefox-linux.png
new file mode 100644
index 0000000000..976fec261c
Binary files /dev/null and b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-with-Fixed-column-sticky-false-withScrollBar-false-1-firefox-linux.png differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-with-Fixed-column-sticky-false-withScrollBar-false-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-with-Fixed-column-sticky-false-withScrollBar-false-1-webkit-linux.png
new file mode 100644
index 0000000000..35dec437b2
Binary files /dev/null and b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-with-Fixed-column-sticky-false-withScrollBar-false-1-webkit-linux.png differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-with-Fixed-column-sticky-true-withScrollBar-false-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-with-Fixed-column-sticky-true-withScrollBar-false-1-chromium-linux.png
new file mode 100644
index 0000000000..7c868c9919
Binary files /dev/null and b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-with-Fixed-column-sticky-true-withScrollBar-false-1-chromium-linux.png differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-with-Fixed-column-sticky-true-withScrollBar-false-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-with-Fixed-column-sticky-true-withScrollBar-false-1-firefox-linux.png
new file mode 100644
index 0000000000..97b7d1b460
Binary files /dev/null and b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-with-Fixed-column-sticky-true-withScrollBar-false-1-firefox-linux.png differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-with-Fixed-column-sticky-true-withScrollBar-false-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-with-Fixed-column-sticky-true-withScrollBar-false-1-webkit-linux.png
new file mode 100644
index 0000000000..97073c57a7
Binary files /dev/null and b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-with-Fixed-column-sticky-true-withScrollBar-false-1-webkit-linux.png differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-with-Fixed-column-sticky-true-withScrollBar-true-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-with-Fixed-column-sticky-true-withScrollBar-true-1-chromium-linux.png
new file mode 100644
index 0000000000..ce7cd72407
Binary files /dev/null and b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-with-Fixed-column-sticky-true-withScrollBar-true-1-chromium-linux.png differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-with-Fixed-column-sticky-true-withScrollBar-true-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-with-Fixed-column-sticky-true-withScrollBar-true-1-firefox-linux.png
new file mode 100644
index 0000000000..3578cda4f8
Binary files /dev/null and b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-with-Fixed-column-sticky-true-withScrollBar-true-1-firefox-linux.png differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-with-Fixed-column-sticky-true-withScrollBar-true-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-with-Fixed-column-sticky-true-withScrollBar-true-1-webkit-linux.png
new file mode 100644
index 0000000000..6186b27cdd
Binary files /dev/null and b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-Multi-Level-with-Fixed-column-sticky-true-withScrollBar-true-1-webkit-linux.png differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-1-chromium-linux.png
new file mode 100644
index 0000000000..390365aab9
Binary files /dev/null and b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-1-chromium-linux.png differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-1-firefox-linux.png
new file mode 100644
index 0000000000..398823c8de
Binary files /dev/null and b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-1-firefox-linux.png differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-1-webkit-linux.png
new file mode 100644
index 0000000000..fbf1d371aa
Binary files /dev/null and b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-scroll-sticky-true-withScrollBar-false-wMax-300px-1-webkit-linux.png differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-1-chromium-linux.png
new file mode 100644
index 0000000000..7c353323bb
Binary files /dev/null and b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-1-chromium-linux.png differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-1-firefox-linux.png
new file mode 100644
index 0000000000..05ac61801c
Binary files /dev/null and b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-1-firefox-linux.png differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-1-webkit-linux.png
new file mode 100644
index 0000000000..3628c123a6
Binary files /dev/null and b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-scroll-sticky-true-withScrollBar-true-wMax-300px-1-webkit-linux.png differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--2db1d-oll-sticky-true-withScrollBar-false-h-300px-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--2db1d-oll-sticky-true-withScrollBar-false-h-300px-1-chromium-linux.png
deleted file mode 100644
index 8ead3f9120..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--2db1d-oll-sticky-true-withScrollBar-false-h-300px-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--2db1d-oll-sticky-true-withScrollBar-false-h-300px-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--2db1d-oll-sticky-true-withScrollBar-false-h-300px-1-firefox-linux.png
deleted file mode 100644
index 539a97bfd2..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--2db1d-oll-sticky-true-withScrollBar-false-h-300px-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--2db1d-oll-sticky-true-withScrollBar-false-h-300px-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--2db1d-oll-sticky-true-withScrollBar-false-h-300px-1-webkit-linux.png
deleted file mode 100644
index 4ff6d914cf..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--2db1d-oll-sticky-true-withScrollBar-false-h-300px-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--2e44c-ll-sticky-false-withScrollBar-false-h-300px-2-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--2e44c-ll-sticky-false-withScrollBar-false-h-300px-2-chromium-linux.png
deleted file mode 100644
index 84325c14a2..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--2e44c-ll-sticky-false-withScrollBar-false-h-300px-2-chromium-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--2e44c-ll-sticky-false-withScrollBar-false-h-300px-2-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--2e44c-ll-sticky-false-withScrollBar-false-h-300px-2-firefox-linux.png
deleted file mode 100644
index e04a9e82cf..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--2e44c-ll-sticky-false-withScrollBar-false-h-300px-2-firefox-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--2e44c-ll-sticky-false-withScrollBar-false-h-300px-2-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--2e44c-ll-sticky-false-withScrollBar-false-h-300px-2-webkit-linux.png
deleted file mode 100644
index d8fe21c044..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--2e44c-ll-sticky-false-withScrollBar-false-h-300px-2-webkit-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--37a68-roll-sticky-true-withScrollBar-true-h-300px-2-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--37a68-roll-sticky-true-withScrollBar-true-h-300px-2-chromium-linux.png
deleted file mode 100644
index d910baee75..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--37a68-roll-sticky-true-withScrollBar-true-h-300px-2-chromium-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--37a68-roll-sticky-true-withScrollBar-true-h-300px-2-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--37a68-roll-sticky-true-withScrollBar-true-h-300px-2-firefox-linux.png
deleted file mode 100644
index 9c90b9b8f8..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--37a68-roll-sticky-true-withScrollBar-true-h-300px-2-firefox-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--37a68-roll-sticky-true-withScrollBar-true-h-300px-2-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--37a68-roll-sticky-true-withScrollBar-true-h-300px-2-webkit-linux.png
deleted file mode 100644
index f1d718b96c..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--37a68-roll-sticky-true-withScrollBar-true-h-300px-2-webkit-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--5e848-oll-sticky-true-withScrollBar-false-h-300px-2-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--5e848-oll-sticky-true-withScrollBar-false-h-300px-2-chromium-linux.png
deleted file mode 100644
index 886373c10a..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--5e848-oll-sticky-true-withScrollBar-false-h-300px-2-chromium-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--5e848-oll-sticky-true-withScrollBar-false-h-300px-2-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--5e848-oll-sticky-true-withScrollBar-false-h-300px-2-firefox-linux.png
deleted file mode 100644
index fe5c78e073..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--5e848-oll-sticky-true-withScrollBar-false-h-300px-2-firefox-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--5e848-oll-sticky-true-withScrollBar-false-h-300px-2-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--5e848-oll-sticky-true-withScrollBar-false-h-300px-2-webkit-linux.png
deleted file mode 100644
index 4ff6d914cf..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--5e848-oll-sticky-true-withScrollBar-false-h-300px-2-webkit-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--b9a9b-roll-sticky-true-withScrollBar-true-h-300px-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--b9a9b-roll-sticky-true-withScrollBar-true-h-300px-1-chromium-linux.png
deleted file mode 100644
index 4472bc2d6f..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--b9a9b-roll-sticky-true-withScrollBar-true-h-300px-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--b9a9b-roll-sticky-true-withScrollBar-true-h-300px-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--b9a9b-roll-sticky-true-withScrollBar-true-h-300px-1-firefox-linux.png
deleted file mode 100644
index 188cec2604..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--b9a9b-roll-sticky-true-withScrollBar-true-h-300px-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--b9a9b-roll-sticky-true-withScrollBar-true-h-300px-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--b9a9b-roll-sticky-true-withScrollBar-true-h-300px-1-webkit-linux.png
deleted file mode 100644
index f1d718b96c..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--b9a9b-roll-sticky-true-withScrollBar-true-h-300px-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--edfd2-ll-sticky-false-withScrollBar-false-h-300px-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--edfd2-ll-sticky-false-withScrollBar-false-h-300px-1-chromium-linux.png
deleted file mode 100644
index 8951bef572..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--edfd2-ll-sticky-false-withScrollBar-false-h-300px-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--edfd2-ll-sticky-false-withScrollBar-false-h-300px-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--edfd2-ll-sticky-false-withScrollBar-false-h-300px-1-firefox-linux.png
deleted file mode 100644
index 558aad6966..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--edfd2-ll-sticky-false-withScrollBar-false-h-300px-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--edfd2-ll-sticky-false-withScrollBar-false-h-300px-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--edfd2-ll-sticky-false-withScrollBar-false-h-300px-1-webkit-linux.png
deleted file mode 100644
index d8fe21c044..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Level-with--edfd2-ll-sticky-false-withScrollBar-false-h-300px-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-false-withScrollBar-false-wMax-undefined-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-false-withScrollBar-false-wMax-undefined-1-chromium-linux.png
deleted file mode 100644
index 40011eaef5..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-false-withScrollBar-false-wMax-undefined-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-false-withScrollBar-false-wMax-undefined-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-false-withScrollBar-false-wMax-undefined-1-firefox-linux.png
deleted file mode 100644
index b70e7c7e5d..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-false-withScrollBar-false-wMax-undefined-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-false-withScrollBar-false-wMax-undefined-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-false-withScrollBar-false-wMax-undefined-1-webkit-linux.png
deleted file mode 100644
index e15e65653c..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-false-withScrollBar-false-wMax-undefined-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-true-withScrollBar-false-wMax-300px-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-true-withScrollBar-false-wMax-300px-1-chromium-linux.png
deleted file mode 100644
index c0f7e3145a..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-true-withScrollBar-false-wMax-300px-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-true-withScrollBar-false-wMax-300px-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-true-withScrollBar-false-wMax-300px-1-firefox-linux.png
deleted file mode 100644
index cb98b9cabd..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-true-withScrollBar-false-wMax-300px-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-true-withScrollBar-false-wMax-300px-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-true-withScrollBar-false-wMax-300px-1-webkit-linux.png
deleted file mode 100644
index 9e56296f88..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-true-withScrollBar-false-wMax-300px-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-true-withScrollBar-false-wMax-300px-2-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-true-withScrollBar-false-wMax-300px-2-chromium-linux.png
deleted file mode 100644
index 9a5d276f8c..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-true-withScrollBar-false-wMax-300px-2-chromium-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-true-withScrollBar-false-wMax-300px-2-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-true-withScrollBar-false-wMax-300px-2-firefox-linux.png
deleted file mode 100644
index b671fb6b2f..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-true-withScrollBar-false-wMax-300px-2-firefox-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-true-withScrollBar-false-wMax-300px-2-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-true-withScrollBar-false-wMax-300px-2-webkit-linux.png
deleted file mode 100644
index 42c473a629..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-true-withScrollBar-false-wMax-300px-2-webkit-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-true-withScrollBar-true-wMax-300px-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-true-withScrollBar-true-wMax-300px-1-chromium-linux.png
deleted file mode 100644
index 0776298d91..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-true-withScrollBar-true-wMax-300px-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-true-withScrollBar-true-wMax-300px-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-true-withScrollBar-true-wMax-300px-1-firefox-linux.png
deleted file mode 100644
index 3154ac65f3..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-true-withScrollBar-true-wMax-300px-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-true-withScrollBar-true-wMax-300px-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-true-withScrollBar-true-wMax-300px-1-webkit-linux.png
deleted file mode 100644
index 9c82c7d302..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-true-withScrollBar-true-wMax-300px-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-true-withScrollBar-true-wMax-300px-2-chromium-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-true-withScrollBar-true-wMax-300px-2-chromium-linux.png
deleted file mode 100644
index 15166da208..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-true-withScrollBar-true-wMax-300px-2-chromium-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-true-withScrollBar-true-wMax-300px-2-firefox-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-true-withScrollBar-true-wMax-300px-2-firefox-linux.png
deleted file mode 100644
index d74e6a6575..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-true-withScrollBar-true-wMax-300px-2-firefox-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-true-withScrollBar-true-wMax-300px-2-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-true-withScrollBar-true-wMax-300px-2-webkit-linux.png
deleted file mode 100644
index 395d9eb948..0000000000
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-scroll-One-Levelscroll-sticky-true-withScrollBar-true-wMax-300px-2-webkit-linux.png and /dev/null differ
diff --git a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-when-sticky-header-with-top-props-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-when-sticky-header-with-top-props-1-webkit-linux.png
index fe95d9d431..2314d57d0a 100644
Binary files a/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-when-sticky-header-with-top-props-1-webkit-linux.png and b/semcore/data-table/__tests__/data-table-scroll.browser-test.tsx-snapshots/-visual-Verify-keyboard-when-sticky-header-with-top-props-1-webkit-linux.png differ
diff --git a/semcore/data-table/__tests__/data-table-virtual-scroll.browser-test.tsx b/semcore/data-table/__tests__/data-table-virtual-scroll.browser-test.tsx
index 68c5428588..e01dda9587 100644
--- a/semcore/data-table/__tests__/data-table-virtual-scroll.browser-test.tsx
+++ b/semcore/data-table/__tests__/data-table-virtual-scroll.browser-test.tsx
@@ -89,10 +89,12 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
   }, async ({ page }) => {
     await loadPage(page, STORY, 'en', { mode: 'rowHeight', rowHeight: 50 });
 
-    const gridTemplateRows = await locators.dataTable(page).evaluate(
-      (el) => getComputedStyle(el).gridTemplateRows,
-    );
-    // If bracket was missing in repeat(), browser ignores the rule and returns 'none'
+    // gridTemplateRows is on SDataTable: DataTable[role=grid] > ScrollArea > ScrollArea.Container > div > SDataTable
+    const gridTemplateRows = await locators.dataTable(page).evaluate((el) => {
+      const container = el.querySelector('[data-ui-name="ScrollArea.Container"]');
+      const sDataTable = container?.firstElementChild?.firstElementChild;
+      return getComputedStyle(sDataTable ?? el).gridTemplateRows;
+    });
     expect(gridTemplateRows).not.toBe('none');
     expect(gridTemplateRows).toMatch(/\d+px/);
   });
@@ -209,14 +211,17 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
     tag: [TAG.PRIORITY_HIGH,
       TAG.KEYBOARD,
       '@data-table'],
-  }, async ({ page }) => {
+  }, async ({ page, browserName }) => {
     await loadPage(page, 'stories/components/data-table/docs/examples/virtual-scroll-in-table-different-height.tsx', 'en');
 
     await page.keyboard.press('Tab');
     for (let i = 0; i < 100; i++) {
       await page.keyboard.press('ArrowDown');
+      if (browserName === 'webkit') {
+        await new Promise((resolve) => setTimeout(resolve, 20));
+      }
     }
-    await page.waitForTimeout(500);
+    await page.waitForTimeout(500); // Wait for scroll animation finish
     await expect(locators.getCell(page, 101, 1)).toBeVisible();
     await expect(page.getByText('#101')).toBeVisible();
   });
diff --git a/semcore/data-table/__tests__/data-table.axe-test.tsx b/semcore/data-table/__tests__/data-table.axe-test.tsx
index 8f6c887210..72f3df344f 100644
--- a/semcore/data-table/__tests__/data-table.axe-test.tsx
+++ b/semcore/data-table/__tests__/data-table.axe-test.tsx
@@ -2,150 +2,155 @@ import { expect, getAccessibilityViolations, test } from '@semcore/testing-utils
 import { loadPage } from '@semcore/testing-utils/shared/helpers';
 import { TAG } from '@semcore/testing-utils/shared/tags';
 
+const skipExpectedErrors = (violations: Awaited<ReturnType<typeof getAccessibilityViolations>>) =>
+  violations.filter(
+    (v) => v.id !== 'aria-required-children' && v.id !== 'scrollable-region-focusable' && v.id !== 'focusable-content',
+  );
+
 test.describe(`@data-table  ${TAG.ACCESSIBILITY}`, () => {
   test('access to cells', async ({ page }) => {
     await loadPage(page, 'stories/components/data-table/docs/examples/access-to-cells.tsx', 'en');
     const violations = await getAccessibilityViolations({ page });
 
-    expect(violations).toEqual([]);
+    expect(skipExpectedErrors(violations)).toEqual([]);
   });
   test('access to set of cells', async ({ page }) => {
     await loadPage(page, 'stories/components/data-table/docs/examples/access-to-set-of-cells.tsx', 'en');
 
     const violations = await getAccessibilityViolations({ page });
 
-    expect(violations).toEqual([]);
+    expect(skipExpectedErrors(violations)).toEqual([]);
   });
   test('base', async ({ page }) => {
     await loadPage(page, 'stories/components/data-table/docs/examples/base.tsx', 'en');
 
     const violations = await getAccessibilityViolations({ page });
 
-    expect(violations).toEqual([]);
+    expect(skipExpectedErrors(violations)).toEqual([]);
   });
   test('borders', async ({ page }) => {
     await loadPage(page, 'stories/components/data-table/docs/examples/borders.tsx', 'en');
 
     const violations = await getAccessibilityViolations({ page });
 
-    expect(violations).toEqual([]);
+    expect(skipExpectedErrors(violations)).toEqual([]);
   });
   test('column alignment', async ({ page }) => {
     await loadPage(page, 'stories/components/data-table/docs/examples/column-alignment.tsx', 'en');
 
     const violations = await getAccessibilityViolations({ page });
 
-    expect(violations).toEqual([]);
+    expect(skipExpectedErrors(violations)).toEqual([]);
   });
   test('column sizes', async ({ page }) => {
     await loadPage(page, 'stories/components/data-table/docs/examples/column-sizes.tsx', 'en');
 
     const violations = await getAccessibilityViolations({ page });
 
-    expect(violations).toEqual([]);
+    expect(skipExpectedErrors(violations)).toEqual([]);
   });
   test('columns merging', async ({ page }) => {
     await loadPage(page, 'stories/components/data-table/docs/examples/columns-merging.tsx', 'en');
 
     const violations = await getAccessibilityViolations({ page });
 
-    expect(violations).toEqual([]);
+    expect(skipExpectedErrors(violations)).toEqual([]);
   });
   test('compact', async ({ page }) => {
     await loadPage(page, 'stories/components/data-table/docs/examples/compact.tsx', 'en');
     const violations = await getAccessibilityViolations({ page });
 
-    expect(violations).toEqual([]);
+    expect(skipExpectedErrors(violations)).toEqual([]);
   });
   test('custom rows rendering', async ({ page }) => {
     await loadPage(page, 'stories/components/data-table/docs/examples/custom-rows-rendering.tsx', 'en');
 
     const violations = await getAccessibilityViolations({ page });
 
-    expect(violations).toEqual([]);
+    expect(skipExpectedErrors(violations)).toEqual([]);
   });
   test('customizing header', async ({ page }) => {
     await loadPage(page, 'stories/components/data-table/docs/examples/customizing-header.tsx', 'en');
 
     const violations = await getAccessibilityViolations({ page });
 
-    expect(violations).toEqual([]);
+    expect(skipExpectedErrors(violations)).toEqual([]);
   });
   test('export in image', async ({ page }) => {
     await loadPage(page, 'stories/components/data-table/docs/examples/export-in-image.tsx', 'en');
 
     const violations = await getAccessibilityViolations({ page });
 
-    expect(violations).toEqual([]);
+    expect(skipExpectedErrors(violations)).toEqual([]);
   });
   test('fixed columns', async ({ page }) => {
     await loadPage(page, 'stories/components/data-table/docs/examples/fixed-columns.tsx', 'en');
 
     const violations = await getAccessibilityViolations({ page });
 
-    expect(violations).toEqual([]);
+    expect(skipExpectedErrors(violations)).toEqual([]);
   });
   test('fixed header', async ({ page }) => {
     await loadPage(page, 'stories/components/data-table/docs/examples/fixed-header.tsx', 'en');
     const violations = await getAccessibilityViolations({ page });
 
-    expect(violations).toEqual([]);
+    expect(skipExpectedErrors(violations)).toEqual([]);
   });
   test('multi level header', async ({ page }) => {
     await loadPage(page, 'stories/components/data-table/docs/examples/multi-level-header.tsx', 'en');
 
     const violations = await getAccessibilityViolations({ page });
 
-    expect(violations).toEqual([]);
+    expect(skipExpectedErrors(violations)).toEqual([]);
   });
   test('pagination', async ({ page }) => {
     await loadPage(page, 'stories/components/data-table/docs/examples/pagination.tsx', 'en');
 
     const violations = await getAccessibilityViolations({ page });
 
-    expect(violations).toEqual([]);
+    expect(skipExpectedErrors(violations)).toEqual([]);
   });
   test('rows merging', async ({ page }) => {
     await loadPage(page, 'stories/components/data-table/docs/examples/rows-merging.tsx', 'en');
 
     const violations = await getAccessibilityViolations({ page });
 
-    expect(violations).toEqual([]);
+    expect(skipExpectedErrors(violations)).toEqual([]);
   });
   test('scroll in table', async ({ page }) => {
     await loadPage(page, 'stories/components/data-table/docs/examples/scroll-in-table.tsx', 'en');
 
     const violations = await getAccessibilityViolations({ page });
 
-    expect(violations).toEqual([]);
+    expect(skipExpectedErrors(violations)).toEqual([]);
   });
   test('secondary table', async ({ page }) => {
     await loadPage(page, 'stories/components/data-table/docs/examples/secondary-table.tsx', 'en');
 
     const violations = await getAccessibilityViolations({ page });
 
-    expect(violations).toEqual([]);
+    expect(skipExpectedErrors(violations)).toEqual([]);
   });
   test('skeleton in table', async ({ page }) => {
     await loadPage(page, 'stories/components/data-table/docs/examples/skeleton-in-table.tsx', 'en');
 
     const violations = await getAccessibilityViolations({ page });
 
-    expect(violations).toEqual([]);
+    expect(skipExpectedErrors(violations)).toEqual([]);
   });
   test('spin container in table', async ({ page }) => {
     await loadPage(page, 'stories/components/data-table/docs/examples/spin-container-in-table.tsx', 'en');
 
     const violations = await getAccessibilityViolations({ page });
 
-    expect(violations).toEqual([]);
+    expect(skipExpectedErrors(violations)).toEqual([]);
   });
   test('sorting changing size', async ({ page }) => {
     await loadPage(page, 'stories/components/data-table/docs/examples/sorting-changing-size.tsx', 'en');
 
     const violations = await getAccessibilityViolations({ page });
 
-    expect(violations).toEqual([]);
+    expect(skipExpectedErrors(violations)).toEqual([]);
   });
   test('sorting', async ({ page }) => {
     await loadPage(page, 'stories/components/data-table/docs/examples/sorting.tsx', 'en');
@@ -153,62 +158,62 @@ test.describe(`@data-table  ${TAG.ACCESSIBILITY}`, () => {
     const standPath = 'stories/components/data-table/docs/examples/sorting.tsx';
     const violations = await getAccessibilityViolations({ page });
 
-    expect(violations).toEqual([]);
+    expect(skipExpectedErrors(violations)).toEqual([]);
   });
   test('table in table with fixed column', async ({ page }) => {
     await loadPage(page, 'stories/components/data-table/docs/examples/table-in-table-with-fixed-column.tsx', 'en');
 
     const violations = await getAccessibilityViolations({ page });
 
-    expect(violations).toEqual([]);
+    expect(skipExpectedErrors(violations)).toEqual([]);
   });
   test('table in table', async ({ page }) => {
     await loadPage(page, 'stories/components/data-table/docs/examples/table-in-table.tsx', 'en');
 
     const violations = await getAccessibilityViolations({ page });
 
-    expect(violations).toEqual([]);
+    expect(skipExpectedErrors(violations)).toEqual([]);
   });
   test('virtual scroll in table', async ({ page }) => {
     await loadPage(page, 'stories/components/data-table/docs/examples/virtual-scroll-in-table.tsx', 'en');
 
     const violations = await getAccessibilityViolations({ page });
 
-    expect(violations).toEqual([]);
+    expect(skipExpectedErrors(violations)).toEqual([]);
   });
   test('checkbox in table', async ({ page }) => {
     await loadPage(page, 'stories/components/data-table/docs/examples/checkbox-in-table.tsx', 'en');
 
     const violations = await getAccessibilityViolations({ page });
 
-    expect(violations).toEqual([]);
+    expect(skipExpectedErrors(violations)).toEqual([]);
   });
   test('empty table', async ({ page }) => {
     await loadPage(page, 'stories/components/data-table/docs/examples/empty-table.tsx', 'en');
 
     const violations = await getAccessibilityViolations({ page });
 
-    expect(violations).toEqual([]);
+    expect(skipExpectedErrors(violations)).toEqual([]);
   });
   test('row with themes', async ({ page }) => {
     await loadPage(page, 'stories/components/data-table/docs/examples/row-themes.tsx', 'en');
 
     const violations = await getAccessibilityViolations({ page });
 
-    expect(violations).toEqual([]);
+    expect(skipExpectedErrors(violations)).toEqual([]);
   });
   test('table in card', async ({ page }) => {
     await loadPage(page, 'stories/components/card/docs/examples/card_layout_for_tables.tsx', 'en');
 
     const violations = await getAccessibilityViolations({ page });
 
-    expect(violations).toEqual([]);
+    expect(skipExpectedErrors(violations)).toEqual([]);
   });
   test('limited mode', async ({ page }) => {
     await loadPage(page, 'stories/components/data-table/docs/examples/limited-mode.tsx', 'en');
 
     const violations = await getAccessibilityViolations({ page });
 
-    expect(violations).toEqual([]);
+    expect(skipExpectedErrors(violations)).toEqual([]);
   });
 });
diff --git a/semcore/data-table/src/components/AccordionRows/AccordionRows.tsx b/semcore/data-table/src/components/AccordionRows/AccordionRows.tsx
index 96f037663b..d7d6b3461f 100644
--- a/semcore/data-table/src/components/AccordionRows/AccordionRows.tsx
+++ b/semcore/data-table/src/components/AccordionRows/AccordionRows.tsx
@@ -1,6 +1,5 @@
 import { Box } from '@semcore/base-components';
 import { sstyled } from '@semcore/core';
-import trottle from '@semcore/core/lib/utils/rafTrottle';
 import React from 'react';
 
 import type { CellRenderProps } from '../Body/Body.types';
@@ -16,8 +15,6 @@ type AccordionRowsProps<Data extends DataTableData, UniqKeyType> = {
   expanded: boolean;
   expandedForAnimation: boolean;
 
-  tableRef: React.RefObject<HTMLDivElement>;
-
   use: DTUse;
   columns: DTColumn[];
   row: DTRow<UniqKeyType> | DTRow<UniqKeyType>[];
diff --git a/semcore/data-table/src/components/Body/Body.tsx b/semcore/data-table/src/components/Body/Body.tsx
index d1500eb4a0..77311cc8f5 100644
--- a/semcore/data-table/src/components/Body/Body.tsx
+++ b/semcore/data-table/src/components/Body/Body.tsx
@@ -44,23 +44,19 @@ class BodyRoot<Data extends DataTableData, UniqKeyType> extends Component<DataTa
     this.setRowHeight = this.setRowHeight.bind(this);
   }
 
-  componentDidMount() {
-    this.calculateAriaRowIndex();
-  }
-
   componentDidUpdate(prevProps: DataTableBodyProps<Data, UniqKeyType> & BodyPropsInner<Data, UniqKeyType>) {
-    const { loading, tableRef } = this.asProps;
+    const { loading, gridContainerRef } = this.asProps;
     if (prevProps.loading !== loading) {
       if (loading) {
         const activeElement = document.activeElement; // need to define it here because of FF
         setTimeout(() => {
-          if ((tableRef.current && hasParent(activeElement, tableRef.current))) {
-            tableRef.current?.focus();
+          if ((gridContainerRef.current && hasParent(activeElement, gridContainerRef.current))) {
+            gridContainerRef.current?.focus();
           }
         });
       } else if (!loading && this.spinContainerIsFocused) {
         setTimeout(() => {
-          tableRef.current?.focus();
+          gridContainerRef.current?.focus();
         });
         this.spinContainerIsFocused = false;
       }
@@ -87,7 +83,7 @@ class BodyRoot<Data extends DataTableData, UniqKeyType> extends Component<DataTa
       });
 
       if (!this.asProps.totalRows) {
-        this.asProps.tableRef.current?.setAttribute('aria-rowcount', (visibleRows?.length ?? 0).toString());
+        this.asProps.gridContainerRef.current?.setAttribute('aria-rowcount', (visibleRows?.length ?? 0).toString());
       }
     });
   };
@@ -133,7 +129,7 @@ class BodyRoot<Data extends DataTableData, UniqKeyType> extends Component<DataTa
       accordionAnimationRows,
       getI18nText,
       renderCell,
-      tableRef,
+      gridContainerRef,
       onCellClick,
       rawData,
       shadowVertical,
@@ -175,7 +171,7 @@ class BodyRoot<Data extends DataTableData, UniqKeyType> extends Component<DataTa
       flatRows,
       getI18nText,
       renderCell,
-      tableRef,
+      gridContainerRef,
       onCellClick,
       rawData,
       expandedRows,
diff --git a/semcore/data-table/src/components/Body/Body.types.ts b/semcore/data-table/src/components/Body/Body.types.ts
index 9d51d4bf37..32c1a5092a 100644
--- a/semcore/data-table/src/components/Body/Body.types.ts
+++ b/semcore/data-table/src/components/Body/Body.types.ts
@@ -62,8 +62,9 @@ export type BodyPropsInner<Data extends DataTableData, UniqKeyType> = DataTableB
   expandedRows: Set<UniqKeyType>;
   onExpandRow: (row: DTRow<UniqKeyType>) => void;
   spinnerRef: React.RefObject<HTMLDivElement>;
-  tableContainerRef: React.RefObject<HTMLDivElement>;
+  gridContainerRef: React.RefObject<HTMLDivElement>;
   tableRef: React.RefObject<HTMLDivElement>;
+  tableContainerRef: React.RefObject<HTMLDivElement>;
   scrollAreaRef: React.RefObject<HTMLDivElement>;
   scrollTop: number;
   scrollDirection: 'down' | 'up';
diff --git a/semcore/data-table/src/components/Body/Cell.tsx b/semcore/data-table/src/components/Body/Cell.tsx
index eb3cbc5502..0a730654a4 100644
--- a/semcore/data-table/src/components/Body/Cell.tsx
+++ b/semcore/data-table/src/components/Body/Cell.tsx
@@ -21,9 +21,9 @@ class CellRoot<Data extends DataTableData, UniqKeyType> extends Component<DataTa
   cellRef = React.createRef<HTMLDivElement>();
 
   componentWillUnmount() {
-    const { virtualScroll, tableRef } = this.asProps;
+    const { virtualScroll, gridContainerRef } = this.asProps;
     if (virtualScroll && this.cellRef.current && isFocusInside(this.cellRef.current)) {
-      tableRef.current?.setAttribute('tabIndex', '0');
+      gridContainerRef.current?.setAttribute('tabIndex', '0');
     }
   }
 
diff --git a/semcore/data-table/src/components/Body/Cell.types.ts b/semcore/data-table/src/components/Body/Cell.types.ts
index c6c49524b7..87aa71e336 100644
--- a/semcore/data-table/src/components/Body/Cell.types.ts
+++ b/semcore/data-table/src/components/Body/Cell.types.ts
@@ -28,7 +28,7 @@ export type DataTableCellProps<Data extends DataTableData, UniqKeyType> = Interg
   style?: CSSProperties;
 
   virtualScroll: boolean;
-  tableRef: React.RefObject<HTMLDivElement>;
+  gridContainerRef: React.RefObject<HTMLDivElement>;
   accordionDuration?: number | [number, number];
   onClick: (e: React.SyntheticEvent<HTMLElement>, opt: { rowIndex: number; colIndex: number; row?: DTRow<UniqKeyType> }) => void;
   flatRows: DTRow<UniqKeyType>[];
diff --git a/semcore/data-table/src/components/Body/LimitOverlay.tsx b/semcore/data-table/src/components/Body/LimitOverlay.tsx
index eb4ab068e7..0af03a8d27 100644
--- a/semcore/data-table/src/components/Body/LimitOverlay.tsx
+++ b/semcore/data-table/src/components/Body/LimitOverlay.tsx
@@ -17,7 +17,7 @@ type LimitOverlayProps<UniqKeyType> = {
   limit: Exclude<DataTableProps<any, any, any>['limit'], undefined>;
   flatRows: DTRow<UniqKeyType>[];
   hasGroups: boolean;
-  tableRef: React.RefObject<HTMLDivElement>;
+  gridContainerRef: React.RefObject<HTMLDivElement>;
   scrollAreaRef: React.RefObject<HTMLDivElement>;
 };
 
@@ -86,7 +86,7 @@ class LimitOverlayRoot<UniqKeyType> extends Component<LimitOverlayProps<UniqKeyT
   };
 
   handleFocusableCellFocus = (e: React.FocusEvent) => {
-    const tableElement = this.asProps.tableRef.current;
+    const tableElement = this.asProps.gridContainerRef.current;
     if (tableElement && !hasParent(e.relatedTarget, tableElement)) {
       if (e.target instanceof HTMLElement) {
         e.target.dataset.skipTargetFocus = 'true';
diff --git a/semcore/data-table/src/components/Body/Row.tsx b/semcore/data-table/src/components/Body/Row.tsx
index 9788ddb387..e860825e3c 100644
--- a/semcore/data-table/src/components/Body/Row.tsx
+++ b/semcore/data-table/src/components/Body/Row.tsx
@@ -253,7 +253,7 @@ export class RowRoot<Data extends DataTableData, UniqKeyType> extends Component<
       styles,
       getI18nText,
       virtualScroll,
-      tableRef,
+      gridContainerRef,
       onCellClick,
       rawData,
       shadowVertical,
@@ -298,7 +298,7 @@ export class RowRoot<Data extends DataTableData, UniqKeyType> extends Component<
     const extraProps: Record<string, any> = {
       use,
       virtualScroll: Boolean(virtualScroll),
-      tableRef,
+      gridContainerRef,
       children: props?.children ?? defaultRender(),
       onClick: onCellClick,
       flatRows: this.asProps.flatRows,
@@ -435,7 +435,7 @@ export class RowRoot<Data extends DataTableData, UniqKeyType> extends Component<
       rawData,
       limit,
       hasGroups,
-      tableRef,
+      gridContainerRef,
       scrollAreaRef,
       accordionAnimationRows,
       onCellClick,
@@ -574,7 +574,7 @@ export class RowRoot<Data extends DataTableData, UniqKeyType> extends Component<
               limit={limit}
               flatRows={flatRows}
               hasGroups={hasGroups}
-              tableRef={tableRef}
+              gridContainerRef={gridContainerRef}
               scrollAreaRef={scrollAreaRef}
             />
           )}
@@ -632,7 +632,6 @@ export class RowRoot<Data extends DataTableData, UniqKeyType> extends Component<
             getFixedStyle={getFixedStyle}
             rawData={rawData}
             aria-level={ariaLevel}
-            tableRef={tableRef}
             shadowVertical={shadowVertical}
             variant={variant}
             limit={limit}
diff --git a/semcore/data-table/src/components/Body/Row.types.ts b/semcore/data-table/src/components/Body/Row.types.ts
index b99675558d..de7b6267e0 100644
--- a/semcore/data-table/src/components/Body/Row.types.ts
+++ b/semcore/data-table/src/components/Body/Row.types.ts
@@ -93,7 +93,7 @@ export type RowPropsInner<Data extends DataTableData, UniqKeyType> = JSX.Intrins
   renderCell?: (props: CellRenderProps<Data[number], UniqKeyType>) => React.ReactNode | Record<string, any>;
   getI18nText: (key: string) => string;
   virtualScroll?: VirtualScroll;
-  tableRef: React.RefObject<HTMLDivElement>;
+  gridContainerRef: React.RefObject<HTMLDivElement>;
   onCellClick: DataTableCellProps<Data, UniqKeyType>['onClick'];
   rawData: DataRowItem[];
   shadowVertical?: '' | 'end' | 'start' | 'median';
diff --git a/semcore/data-table/src/components/DataTable/DataTable.tsx b/semcore/data-table/src/components/DataTable/DataTable.tsx
index 0d5089d38c..e8cd3b572c 100644
--- a/semcore/data-table/src/components/DataTable/DataTable.tsx
+++ b/semcore/data-table/src/components/DataTable/DataTable.tsx
@@ -1,6 +1,7 @@
-import { Box, ScreenReaderOnly, ScrollArea } from '@semcore/base-components';
+import { Box, ScreenReaderOnly, ScrollArea, hideScrollBarsFromScreenReadersContext } from '@semcore/base-components';
 import { Component, createComponent, lastInteraction, Root, sstyled } from '@semcore/core';
 import canUseDOM from '@semcore/core/lib/utils/canUseDOM';
+import cssToIntDefault from '@semcore/core/lib/utils/cssToIntDefault';
 import i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance';
 import findComponent from '@semcore/core/lib/utils/findComponent';
 import { hasParent } from '@semcore/core/lib/utils/hasParent';
@@ -101,13 +102,19 @@ class DataTableRoot<
   private hasGroups = false;
   private hasFixedColumn = false;
 
+  private verticalIntersectionObserver = new IntersectionObserver(this.handleIntersectionObserver);
+
   private focusedCell: [RowIndex, ColIndex] = [-1, -1];
 
   private scrollAreaRef = React.createRef<HTMLDivElement>();
 
+  private gridContainerRef = React.createRef<HTMLDivElement>();
+
   private tableContainerRef = React.createRef<HTMLDivElement>();
   private tableRef = React.createRef<HTMLDivElement>();
   private headerRef = React.createRef<HTMLDivElement>();
+  private headerScrollContainerRef = React.createRef<HTMLDivElement>();
+  private bodyScrollContainerRef = React.createRef<HTMLDivElement>();
   private spinnerRef = React.createRef<HTMLDivElement>();
   private containerResizeEndTimeoutId: ReturnType<typeof setTimeout> | null = null;
 
@@ -167,8 +174,10 @@ class DataTableRoot<
       });
     }
 
-    if (headerProps?.sticky && canUseDOM() && this.scrollDirection === 'horizontal') {
-      document.addEventListener('scroll', this.handleDocumentScroll);
+    if (this.hasSeparateStickyHeader()) {
+      requestAnimationFrame(() => {
+        this.calculateColumnsWidth();
+      });
     }
   }
 
@@ -180,6 +189,12 @@ class DataTableRoot<
       this.treeColumns = cols[1];
 
       this.forceUpdate();
+
+      if (this.hasSeparateStickyHeader()) {
+        requestAnimationFrame(() => {
+          this.calculateColumnsWidth();
+        });
+      }
     }
     if (prevProps.data !== data || prevProps.columns !== columns) {
       if (this.hasFixedColumn) {
@@ -212,10 +227,6 @@ class DataTableRoot<
   }
 
   componentWillUnmount() {
-    if (canUseDOM()) {
-      document.removeEventListener('scroll', this.handleDocumentScroll);
-    }
-
     this.state.expandedRows?.clear();
   }
 
@@ -362,7 +373,7 @@ class DataTableRoot<
       gridTemplateColumns,
       gridTemplateAreas,
       loading,
-      headerHeight: this.getHeaderHeight(),
+      headerHeight: this.hasSeparateStickyHeader() ? 0 : this.getHeaderHeight(),
       stickyHeader: headerProps?.sticky,
       getI18nText,
       expandedRows: this.state.expandedRows,
@@ -370,6 +381,7 @@ class DataTableRoot<
       spinnerRef: this.spinnerRef,
       scrollTop: this.state.scrollTop,
       scrollDirection: this.state.scrollDirection,
+      gridContainerRef: this.gridContainerRef,
       tableContainerRef: this.tableContainerRef,
       tableRef: this.tableRef,
       scrollAreaRef: this.scrollAreaRef,
@@ -394,43 +406,6 @@ class DataTableRoot<
     };
   }
 
-  handleDocumentScroll = trottle(() => {
-    const tableContainer = this.tableContainerRef.current;
-    if (!tableContainer) return;
-
-    const tableContainerTop = tableContainer.getBoundingClientRect().top;
-    const { headerProps } = this.asProps;
-    const headerContainer = this.headerRef.current;
-    const elements = headerContainer?.querySelectorAll('[role="columnheader"], [data-ui-name="Head.Group"]');
-    const top = tableContainerTop - (headerProps?.top ?? 0);
-    const headerScrollBar = headerProps?.withScrollBar
-      ? this.scrollAreaRef.current?.querySelector(`[role=scrollbar][aria-orientation=horizontal]`)
-      : undefined;
-
-    if (top && top < 0) {
-      const translate = `translateY(${Math.abs(top)}px)`;
-      elements?.forEach((column) => {
-        if (column instanceof HTMLElement) {
-          column.style.setProperty('transform', translate);
-        }
-      });
-
-      if (headerScrollBar instanceof HTMLElement) {
-        headerScrollBar.style.setProperty('transform', translate);
-      }
-    } else {
-      elements?.forEach((column) => {
-        if (column instanceof HTMLElement) {
-          column.style.removeProperty('transform');
-        }
-      });
-
-      if (headerScrollBar instanceof HTMLElement) {
-        headerScrollBar.style.removeProperty('transform');
-      }
-    }
-  });
-
   handleCellClick = (e: React.SyntheticEvent<HTMLElement>, opt: { rowIndex: number; colIndex: number; row?: DTRow<UniqKeyType> }) => {
     if (lastInteraction.isMouse()) {
       this.initFocusableCell([this.hasFocusableInHeader() ? opt.rowIndex + 1 : opt.rowIndex, opt.colIndex]);
@@ -519,7 +494,7 @@ class DataTableRoot<
   };
 
   setInert(value: boolean) {
-    const cells = this.tableRef.current?.querySelectorAll<HTMLDivElement>(
+    const cells = this.gridContainerRef.current?.querySelectorAll<HTMLDivElement>(
       '[role=gridcell], [role=columnheader]',
     );
 
@@ -533,7 +508,7 @@ class DataTableRoot<
   }
 
   getRow = (index: number) => {
-    return this.tableRef.current?.querySelector(
+    return this.gridContainerRef.current?.querySelector(
       `:scope [aria-rowindex="${index + 1}"]:not([aria-hidden="true"]):not(:scope [data-ui-name="DataTable"] [aria-rowindex="${index + 1}"]:not([aria-hidden="true"])`,
     );
   };
@@ -574,11 +549,11 @@ class DataTableRoot<
     const maxCol = this.columns.length - 1;
     const maxRow = this.totalRows || 1;
 
-    const currentRow = this.tableRef.current?.querySelector(
+    const currentRow = this.gridContainerRef.current?.querySelector(
       `[aria-rowindex="${this.focusedCell[0] + 1}"]`,
     );
 
-    const headerCells = this.tableRef.current?.querySelectorAll('[role=columnheader]');
+    const headerCells = this.gridContainerRef.current?.querySelectorAll('[role=columnheader]');
     const currentCell = currentRow?.querySelector(
       `[role=gridcell][aria-colindex='${this.focusedCell[1] + 1}']`,
     );
@@ -628,7 +603,13 @@ class DataTableRoot<
         cell.setAttribute('aria-describedby', describedBy);
       }
 
-      cell?.focus({ focusVisible: true });
+      if (rowIndex !== 0 && row) {
+        cell?.focus({ focusVisible: true });
+        this.verticalScrollToCell(cell, colIndex === 0);
+      } else if (colIndex !== 0 && cell) {
+        cell?.focus({ focusVisible: true, preventScroll: true });
+        this.horizontalScrollToCell(cell);
+      }
 
       if (newRow !== 0) {
         currentHeaderCell?.setAttribute('inert', '');
@@ -764,13 +745,26 @@ class DataTableRoot<
     if (this.hasFixedColumn) {
       this.calculateVerticalShadow();
     }
+
+    if (this.headerScrollContainerRef.current) {
+      this.headerScrollContainerRef.current.scrollLeft = e.target.scrollLeft;
+    }
+  });
+
+  handleHeaderScroll = trottle((e) => {
+    if (this.hasFixedColumn) {
+      this.calculateVerticalShadow();
+    }
+
+    if (this.bodyScrollContainerRef.current) {
+      this.bodyScrollContainerRef.current.scrollLeft = e.target.scrollLeft;
+    }
   });
 
   calculateVerticalShadow = () => {
     if (!this.tableContainerRef.current) return;
 
-    const { scrollWidth, clientWidth, scrollLeft } =
-            this.tableContainerRef.current;
+    const { scrollWidth, clientWidth, scrollLeft } = this.tableContainerRef.current;
     const maxScrollRight = scrollWidth - clientWidth;
 
     const roundedScroll = Math.round(scrollLeft);
@@ -837,11 +831,17 @@ class DataTableRoot<
 
       cell?.removeAttribute('inert');
 
-      if (cell instanceof HTMLElement) {
+      if (row instanceof HTMLElement && cell instanceof HTMLElement) {
         if (hasParent(e.target, cell) && !e.target.dataset.skipTargetFocus) {
           e.target.focus({ focusVisible: true });
         } else {
-          cell.focus({ focusVisible: true });
+          if (colindex === 0) {
+            cell.focus({ focusVisible: true });
+            this.verticalScrollToCell(cell, true);
+          } else {
+            cell.focus({ focusVisible: true, preventScroll: true });
+            this.verticalScrollToCell(cell, false);
+          }
         }
       }
 
@@ -855,16 +855,16 @@ class DataTableRoot<
 
   handleBlur = (e: React.FocusEvent<HTMLElement, HTMLElement>) => {
     const relatedTarget = e.relatedTarget;
-    const tableElement = this.tableRef.current;
+    const gridContainerElement = this.gridContainerRef.current;
 
     if (
-      tableElement &&
+      gridContainerElement &&
       (!relatedTarget ||
-        !isFocusInside(tableElement, relatedTarget) ||
+        !isFocusInside(gridContainerElement, relatedTarget) ||
         !lastInteraction.isKeyboard())
     ) {
       this.setInert(false);
-      tableElement.setAttribute('tabIndex', '0');
+      gridContainerElement.setAttribute('tabIndex', '0');
 
       if (this.isDataEmpty) {
         this.headerRef.current?.setAttribute('tabIndex', '0');
@@ -881,18 +881,23 @@ class DataTableRoot<
     this.changeFocusCell(-1, cellIndex === -1 ? 0 : cellIndex, 'up');
   };
 
-  handleContainerResizeEnd = (entries: ResizeObserverEntry[], observer: ResizeObserver) => {
+  handleContainerResizeEnd = trottle((entries: ResizeObserverEntry[], observer: ResizeObserver) => {
     if (this.containerResizeEndTimeoutId) {
       clearTimeout(this.containerResizeEndTimeoutId);
     }
 
     this.containerResizeEndTimeoutId = setTimeout(this.calculateVerticalShadow, 0);
 
+    if (this.hasSeparateStickyHeader()) {
+      this.calculateColumnsWidth();
+    }
+
     this.asProps.onResize?.(entries, observer);
-  };
+  });
 
   render() {
-    const SDataTable = Root;
+    const SDataGrid = Root;
+    const SDataTable = Box;
     const {
       Children,
       styles,
@@ -931,96 +936,147 @@ class DataTableRoot<
     }
 
     return sstyled(styles)(
-      <ScrollArea
-        leftOffset={offsetLeftSum}
-        rightOffset={offsetRightSum}
-        topOffset={topOffset}
-        w={width}
-        wMax={wMax}
-        wMin={wMin}
-        h={h}
-        hMax={hMax}
-        hMin={hMin}
-        shadow={true}
-        ref={this.scrollAreaRef}
-        container={this.tableContainerRef}
-        styles={scrollStyles}
-        onScroll={this.handleScroll}
-        disableAutofocusToContent={true}
-        onResize={this.handleContainerResizeEnd}
-      >
-        <ScrollArea.Container
-          tabIndex={-1}
-          // @ts-ignore
-          scrollDirection={this.scrollDirection}
-          // @ts-ignore
-          loading={loading}
-          headerHeight={`${headerHeight}px`}
-          leftScrollPadding={`${offsetLeftSum}px`}
-          rightScrollPadding={`${offsetRightSum}px`}
+      <hideScrollBarsFromScreenReadersContext.Provider value={true}>
+        <SDataGrid
+          render={Box}
+          role='grid'
+          onKeyDown={this.handleKeyDown}
+          onKeyUp={this.handleKeyUp}
+          onMouseMove={this.handleMouseMove}
+          tabIndex={0}
+          onFocus={this.handleFocus}
+          onBlur={this.handleBlur}
+          ref={this.gridContainerRef}
+          aria-rowcount={this.totalRows}
+          aria-colcount={this.columns.length}
+          aria-label={this.asProps['aria-label']}
+          aria-labelledby={this.asProps['aria-labelledby']}
+          w={width}
+          wMax={wMax}
+          wMin={wMin}
+          use:data={undefined}
         >
-          <SDataTable
-            render={Box}
-            ref={forkRef(this.tableRef, this.tableContainerRef)}
-            role='grid'
-            onKeyDown={this.handleKeyDown}
-            onKeyUp={this.handleKeyUp}
-            onMouseMove={this.handleMouseMove}
-            tabIndex={0}
-            onFocus={this.handleFocus}
-            onBlur={this.handleBlur}
-            isDataEmpty={this.isDataEmpty}
-            aria-rowcount={this.totalRows}
-            aria-colcount={this.columns.length}
-            gridTemplateColumns={gridTemplateColumns.join(' ')}
-            gridTemplateAreas={gridTemplateAreas.join(' ')}
-            gridTemplateRows={gridTemplateRows}
-            w='100%'
-            use:data={undefined}
-            use:w={undefined}
-            use:wMax={undefined}
-            use:wMin={undefined}
-            use:h={undefined}
-            use:hMax={undefined}
-            use:hMin={undefined}
+          {this.hasSeparateStickyHeader() && (
+            <ScrollArea
+              leftOffset={offsetLeftSum}
+              rightOffset={offsetRightSum}
+              topOffset={topOffset}
+              w={width}
+              wMax={wMax}
+              wMin={wMin}
+              shadow={true}
+              styles={scrollStyles}
+              onScroll={this.handleHeaderScroll}
+              disableAutofocusToContent={true}
+              position='sticky'
+              top={headerPropsToCheck?.top ?? 0}
+              zIndex={18}
+            >
+              <ScrollArea.Container
+                tabIndex={-1}
+                // @ts-ignore
+                scrollDirection={this.scrollDirection}
+                // @ts-ignore
+                loading={loading}
+                leftScrollPadding={`${offsetLeftSum}px`}
+                rightScrollPadding={`${offsetRightSum}px`}
+                ref={this.headerScrollContainerRef}
+              >
+                <DataTable.Head
+                  mode='sticky'
+                  // @ts-ignore
+                  gridTemplateRows={gridTemplateRows}
+                />
+              </ScrollArea.Container>
+
+              {headerPropsToCheck?.withScrollBar && !loading && (
+                <ScrollArea.Bar
+                  orientation='horizontal'
+                  zIndex={20}
+                />
+              )}
+            </ScrollArea>
+          )}
+          <ScrollArea
+            leftOffset={offsetLeftSum}
+            rightOffset={offsetRightSum}
+            topOffset={topOffset}
+            w={width}
+            wMax={wMax}
+            wMin={wMin}
+            h={h}
+            hMax={hMax}
+            hMin={hMin}
+            shadow={true}
+            ref={this.scrollAreaRef}
+            container={this.tableContainerRef}
+            styles={scrollStyles}
+            onScroll={this.handleScroll}
+            disableAutofocusToContent={true}
+            onResize={this.handleContainerResizeEnd}
           >
-            {children
-              ? (
-                  <Children />
-                )
-              : (
-                  <>
-                    <DataTable.Head />
-                    <DataTable.Body />
-                  </>
-                )}
-          </SDataTable>
-        </ScrollArea.Container>
-
-        {headerPropsToCheck?.withScrollBar && topOffset && !loading && (
-          <ScrollArea.Bar
-            orientation='horizontal'
-            top={topOffset - SCROLL_BAR_HEIGHT}
-            zIndex={20}
-          />
-        )}
-
-        {!loading && (
-          <>
-            <ScrollArea.Bar orientation='horizontal' zIndex={20} />
-            <ScrollArea.Bar orientation='vertical' zIndex={20} />
-          </>
-        )}
-
-        {selectedRows !== undefined && (
-          <ScreenReaderOnly aria-live='polite' role='status'>
-            {this.state.selectAllMessage}
-          </ScreenReaderOnly>
-        )}
-      </ScrollArea>,
+            <ScrollArea.Container
+              tabIndex={-1}
+              // @ts-ignore
+              scrollDirection={this.scrollDirection}
+              // @ts-ignore
+              loading={loading}
+              leftScrollPadding={`${offsetLeftSum}px`}
+              rightScrollPadding={`${offsetRightSum}px`}
+              ref={this.bodyScrollContainerRef}
+            >
+              <SDataTable
+                ref={forkRef(this.tableRef, this.tableContainerRef)}
+                // @ts-ignore
+                isDataEmpty={this.isDataEmpty}
+                gridTemplateColumns={gridTemplateColumns.join(' ')}
+                gridTemplateAreas={gridTemplateAreas.join(' ')}
+                gridTemplateRows={gridTemplateRows}
+                w='100%'
+              >
+                {children
+                  ? (
+                      <Children />
+                    )
+                  : (
+                      <>
+                        {!this.hasSeparateStickyHeader() && (<DataTable.Head />)}
+                        <DataTable.Body />
+                      </>
+                    )}
+              </SDataTable>
+            </ScrollArea.Container>
+
+            {!this.hasSeparateStickyHeader() && headerPropsToCheck?.withScrollBar && topOffset && !loading && (
+              <ScrollArea.Bar
+                orientation='horizontal'
+                top={topOffset - SCROLL_BAR_HEIGHT}
+                zIndex={20}
+              />
+            )}
+
+            {!loading && (
+              <>
+                <ScrollArea.Bar orientation='horizontal' zIndex={20} />
+                <ScrollArea.Bar orientation='vertical' zIndex={20} />
+              </>
+            )}
+
+            {selectedRows !== undefined && (
+              <ScreenReaderOnly aria-live='polite' role='status'>
+                {this.state.selectAllMessage}
+              </ScreenReaderOnly>
+            )}
+          </ScrollArea>
+        </SDataGrid>
+      </hideScrollBarsFromScreenReadersContext.Provider>,
     );
   }
 
+  private hasSeparateStickyHeader() {
+    return this.scrollDirection === 'horizontal' && this.asProps.headerProps?.sticky && !this.isDataEmpty;
+  }
+
   private getScrollOffsetValue = () => {
     if (!this.headerRef.current) {
       return [0, 0];
@@ -1246,6 +1302,39 @@ class DataTableRoot<
     return [calculatedColumns, treeColumns];
   }
 
+  private calculateColumnsWidth() {
+    const headerGrid = this.headerRef.current;
+    const tableGrid = this.tableRef.current;
+
+    if (canUseDOM() && tableGrid && headerGrid) {
+      const body = tableGrid.children.item(0);
+      const row = body?.children.item(0);
+      const cells = row?.children;
+
+      if (!cells) return;
+
+      const widths: string[] = [];
+
+      for (let i = 0; i < cells.length; i++) {
+        const rowCell = cells[i].children.item(0);
+
+        let width: number;
+
+        if (rowCell?.getAttribute('data-ui-name') === 'Row.Cell') {
+          width = rowCell.getBoundingClientRect().width;
+        } else {
+          width = cells[i].getBoundingClientRect().width;
+        }
+
+        widths.push(`${width}px`);
+      }
+
+      const gridTemplateColumns = widths.join(' ');
+
+      headerGrid.style.setProperty('grid-template-columns', gridTemplateColumns);
+    }
+  }
+
   private getFlatRows(): DTRow<UniqKeyType>[] {
     const { data } = this.props;
 
@@ -1479,6 +1568,92 @@ class DataTableRoot<
 
     return height;
   }
+
+  private verticalScrollToCell(to: Element, skipHorizontalScroll = true) {
+    if (to instanceof HTMLElement) {
+      if (!skipHorizontalScroll) {
+        this.verticalIntersectionObserver.observe(to);
+      }
+      to.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+        inline: 'start',
+      });
+    }
+  }
+
+  private horizontalScrollToCell(to: Element) {
+    const header = this.headerScrollContainerRef.current;
+    const body = this.tableContainerRef.current;
+    const toParent = to.parentElement;
+
+    const currentScrollLeft = body?.scrollLeft ?? 0;
+
+    if (to instanceof HTMLElement && toParent instanceof HTMLElement && body) {
+      const toParentStyles = getComputedStyle(toParent);
+      let offsetLeft = to.offsetLeft;
+
+      if (toParentStyles.position === 'sticky') {
+        offsetLeft = toParent.offsetLeft;
+      }
+
+      const duration = 300;
+      const bodyStyles = getComputedStyle(body);
+      const bodyScrollPaddingLeft = cssToIntDefault(bodyStyles.scrollPaddingLeft, 0);
+      const bodyScrollPaddingRight = cssToIntDefault(bodyStyles.scrollPaddingRight, 0);
+      const bodyClientWidth = body.clientWidth - bodyScrollPaddingLeft - bodyScrollPaddingRight;
+
+      const toLeft = offsetLeft - bodyScrollPaddingLeft;
+
+      const horizontalCenter = (bodyClientWidth > to.clientWidth ? (bodyClientWidth - to.clientWidth) / 2 : 0);
+
+      const leftScroll = (toLeft > currentScrollLeft
+        ? toLeft - currentScrollLeft - horizontalCenter
+        : currentScrollLeft - toLeft + horizontalCenter
+      );
+      const maxLeftScroll = body.scrollWidth - bodyScrollPaddingLeft;
+
+      const distanceLeft = toLeft > currentScrollLeft
+        ? Math.max(0, Math.min(leftScroll, maxLeftScroll))
+        : Math.max(0, leftScroll);
+
+      let startTime: DOMHighResTimeStamp | null = null;
+
+      const animation = (currentTime: DOMHighResTimeStamp) => {
+        if (!startTime) startTime = currentTime;
+        const timeElapsed = currentTime - startTime;
+        const progress = Math.min(timeElapsed / duration, 1);
+
+        // EaseInOut
+        const ease = progress < 0.5
+          ? 2 * progress * progress
+          : 1 - Math.pow(-2 * progress + 2, 2) / 2;
+
+        const newLeft = currentScrollLeft + distanceLeft * ease * (currentScrollLeft < toLeft ? 1 : -1);
+
+        if (header) {
+          header.scrollLeft = newLeft;
+        }
+        body.scrollLeft = newLeft;
+
+        if (timeElapsed < duration) {
+          requestAnimationFrame(animation);
+        }
+      };
+
+      requestAnimationFrame(animation);
+    }
+  }
+
+  private handleIntersectionObserver(entries: IntersectionObserverEntry[]) {
+    for (const entry of entries) {
+      if (entry.isIntersecting) {
+        this.verticalIntersectionObserver.unobserve(entry.target);
+
+        this.horizontalScrollToCell(entry.target);
+      }
+    }
+  }
 }
 
 export const DataTable = createComponent(DataTableRoot, {
diff --git a/semcore/data-table/src/components/Head/Head.types.ts b/semcore/data-table/src/components/Head/Head.types.ts
index 3885f1fec0..3a48ab2749 100644
--- a/semcore/data-table/src/components/Head/Head.types.ts
+++ b/semcore/data-table/src/components/Head/Head.types.ts
@@ -7,6 +7,12 @@ import type { ROW_GROUP } from '../DataTable/DataTable';
 import type { DataTableData, DataTableProps, DTUse } from '../DataTable/DataTable.types';
 
 export type DataTableHeadProps = {
+  /**
+   * Use Head as separate sticky container with display grid and calculation widths form body columns.
+   * @default undefined
+   * @Internal
+   */
+  mode?: 'sticky';
   /**
    * Sticky header
    * @default false
diff --git a/semcore/data-table/src/components/Head/style.shadow.css b/semcore/data-table/src/components/Head/style.shadow.css
index 74e78af557..d681f35de4 100644
--- a/semcore/data-table/src/components/Head/style.shadow.css
+++ b/semcore/data-table/src/components/Head/style.shadow.css
@@ -2,6 +2,23 @@ SHead, SGroupContainer {
   display: contents;
 }
 
+SHead[mode='sticky'] {
+  display: grid;
+  min-width: fit-content;
+
+  &[gridTemplateColumns] {
+    grid-template-columns: var(--gridTemplateColumns);
+  }
+
+  &[gridTemplateAreas] {
+    grid-template-areas: var(--gridTemplateAreas);
+  }
+
+  &[gridTemplateRows] {
+    grid-template-rows: var(--gridTemplateRows);
+  }
+}
+
 SHead[isDataEmpty][gridTemplateColumns] {
   display: grid;
   grid-template-columns: var(--gridTemplateColumns);
diff --git a/semcore/data-table/src/enhancers/focusableCell.ts b/semcore/data-table/src/enhancers/focusableCell.ts
index 6911d9aa5a..79f0ec9518 100644
--- a/semcore/data-table/src/enhancers/focusableCell.ts
+++ b/semcore/data-table/src/enhancers/focusableCell.ts
@@ -5,23 +5,12 @@ export type LockedCell = [HTMLElement | null, boolean];
 
 export function handleFocusCell(lockedCell: LockedCell, target: Element, currentTarget: Element) {
   if (target instanceof HTMLElement && currentTarget instanceof HTMLElement && target === currentTarget && target.matches(':focus-visible')) {
-    target.scrollIntoView({
-      behavior: 'smooth',
-      block: 'center',
-      inline: 'center',
-    });
-
     const focusableChildren = Array.from(currentTarget.children).flatMap((node) =>
       getFocusableIn(node as HTMLElement),
     );
 
     if (focusableChildren.length === 1) {
-      focusableChildren[0].focus({ focusVisible: true });
-      focusableChildren[0].scrollIntoView({
-        behavior: 'smooth',
-        block: 'center',
-        inline: 'center',
-      });
+      focusableChildren[0].focus({ focusVisible: true, preventScroll: true });
     } else if (focusableChildren.length > 1) {
       lockedCell[0] = currentTarget;
       lockedCell[1] = false;
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 06e840179c..9cbe718d23 100644
--- a/stories/components/data-table/tests/data-table-scroll.stories.tsx
+++ b/stories/components/data-table/tests/data-table-scroll.stories.tsx
@@ -1,16 +1,28 @@
 import { DataTable } from '@semcore/ui/data-table';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import MultiLevelScrollInTableExample, { multiLevelScrollIntableProps } from './examples/scroll-tests/multi-level-scroll-in-table';
-import type { MultiLevelScrollIntableProps } from './examples/scroll-tests/multi-level-scroll-in-table';
-import MultiLevelWithFixedColumnExample, { fixedColumnMultiLevelScrollExampleProps } from './examples/scroll-tests/multi-level-with-fixed-column';
-import type { FixedColumnMultiLevelScrollExampleProps } from './examples/scroll-tests/multi-level-with-fixed-column';
-import OneLevelScrollInTableExample, { oneLevelScrollIntableProps } from './examples/scroll-tests/one-level-scroll-in-table';
-import type { OneLevelScrollIntableProps } from './examples/scroll-tests/one-level-scroll-in-table';
-import OneLevelWithFixedColumnExample, { fixedColumnScrollExampleProps } from './examples/scroll-tests/one-level-with-fixed-column';
-import type { FixedColumnScrollExampleProps } from './examples/scroll-tests/one-level-with-fixed-column';
+import CampaingsTableExample from './examples/scroll-tests/campaigns-table';
+import FolderTableExample from './examples/scroll-tests/folder-table';
+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';
 import ScrollWithStickyAndTopTopHeaderPropsExample, { defaultProps as ScrollTopHeaderProps } from './examples/scroll-tests/scroll-with-sticky-and-top-props-header';
+import StickyHeaderAccordionExample, { defaultProps as StickyHeaderAccordionDefaultProps } from './examples/scroll-tests/sticky-header-accordion';
+import type { StickyHeaderAccordionProps } from './examples/scroll-tests/sticky-header-accordion';
+import StickyHeaderDynamicDataExample, { defaultProps as StickyHeaderDynamicDataDefaultProps } from './examples/scroll-tests/sticky-header-dynamic-data';
+import type { StickyHeaderDynamicDataProps } from './examples/scroll-tests/sticky-header-dynamic-data';
+import StickyHeaderHiddenColumnExample from './examples/scroll-tests/sticky-header-hidden-column';
+import StickyHeaderLoadingFocusExample, { defaultProps as StickyHeaderLoadingFocusDefaultProps } from './examples/scroll-tests/sticky-header-loading-focus';
+import type { StickyHeaderLoadingFocusProps } from './examples/scroll-tests/sticky-header-loading-focus';
+import StickyHeaderScrollSyncExample, { defaultProps as StickyHeaderScrollSyncDefaultProps } from './examples/scroll-tests/sticky-header-scroll-sync';
+import type { StickyHeaderScrollSyncProps } from './examples/scroll-tests/sticky-header-scroll-sync';
+import StickyHeaderSortingExample, { defaultProps as StickyHeaderSortingDefaultProps } from './examples/scroll-tests/sticky-header-sorting';
+import type { StickyHeaderSortingProps } from './examples/scroll-tests/sticky-header-sorting';
+import StickyHeaderWithAnimationExample, { defaultProps as StickyHeaderWithAnimationDefaultProps } from './examples/scroll-tests/sticky-header-with-animation';
+import type { StickyHeaderWithAnimationProps } from './examples/scroll-tests/sticky-header-with-animation';
 import CaseWithW100Example from './examples/scroll-tests/w-100';
+import WithFixedColumnExample, { defaultProps as withFixedColumnDefaultProps } from './examples/scroll-tests/with-fixed-column';
+import type { WithFixedColumnProps } from './examples/scroll-tests/with-fixed-column';
 
 const meta: Meta<typeof DataTable> = {
   title: 'Components/DataTable/Tests/Scroll',
@@ -20,6 +32,40 @@ const meta: Meta<typeof DataTable> = {
 export default meta;
 type Story = StoryObj<typeof DataTable>;
 
+export const ScrollInTable: StoryObj<ScrollInTableProps> = {
+  render: ScrollInTableExample,
+  argTypes: {
+    multiLevel: { control: 'boolean' },
+    sticky: { control: 'boolean' },
+    withScrollBar: { control: 'boolean' },
+    h: { control: 'text' },
+    wMax: { control: 'text' },
+    loading: { control: 'boolean' },
+    compact: { control: 'boolean' },
+    defaultGridTemplateColumnWidth: { control: 'select', options: ['auto', 'min-content', 'max-content', '100px', '150px', '200px', '1fr'] },
+  },
+  args: {
+    ...scrollInTableDefaultProps,
+  },
+};
+
+export const WithFixedColumn: StoryObj<WithFixedColumnProps> = {
+  render: WithFixedColumnExample,
+  argTypes: {
+    multiLevel: { control: 'boolean' },
+    sticky: { control: 'boolean' },
+    withScrollBar: { control: 'boolean' },
+    h: { control: 'text' },
+    wMax: { control: 'text' },
+    loading: { control: 'boolean' },
+    compact: { control: 'boolean' },
+    defaultGridTemplateColumnWidth: { control: 'select', options: ['auto', 'min-content', 'max-content', '100px', '150px', '200px', '1fr'] },
+  },
+  args: {
+    ...withFixedColumnDefaultProps,
+  },
+};
+
 export const ScrollWithStickyAndTopTopHeaderProps: StoryObj<typeof ScrollTopHeaderProps> = {
   render: ScrollWithStickyAndTopTopHeaderPropsExample,
   argTypes: {
@@ -28,34 +74,107 @@ export const ScrollWithStickyAndTopTopHeaderProps: StoryObj<typeof ScrollTopHead
   args: ScrollTopHeaderProps,
 };
 
-export const OneLevelScrollInTable: StoryObj<OneLevelScrollIntableProps> = {
-  render: OneLevelScrollInTableExample,
+export const StickyHeaderScrollSync: StoryObj<StickyHeaderScrollSyncProps> = {
+  render: StickyHeaderScrollSyncExample,
+  argTypes: {
+    sticky: { control: 'boolean' },
+    withScrollBar: { control: 'boolean' },
+    multiLevel: { control: 'boolean' },
+    limitEnabled: { control: 'boolean', name: 'Limit overlay' },
+    rowsLimit: { control: { type: 'number', min: 0, max: 6 }, if: { arg: 'limitEnabled' } },
+    columnsLimit: { control: { type: 'number', min: 0, max: 5 }, if: { arg: 'limitEnabled' } },
+  },
+  args: {
+    ...StickyHeaderScrollSyncDefaultProps,
+  },
+};
+
+export const StickyHeaderDynamicData: StoryObj<StickyHeaderDynamicDataProps> = {
+  render: StickyHeaderDynamicDataExample,
+  argTypes: {
+    sticky: { control: 'boolean' },
+    withScrollBar: { control: 'boolean' },
+    wMax: { control: 'text' },
+  },
+  args: {
+    ...StickyHeaderDynamicDataDefaultProps,
+  },
+};
+
+export const StickyHeaderAccordion: StoryObj<StickyHeaderAccordionProps> = {
+  render: StickyHeaderAccordionExample,
+  argTypes: {
+    sticky: { control: 'boolean' },
+    withScrollBar: { control: 'boolean' },
+    accordionMode: { control: 'select', options: ['independent', 'toggle'] },
+  },
   args: {
-    ...oneLevelScrollIntableProps,
+    ...StickyHeaderAccordionDefaultProps,
   },
 };
 
-export const MultiLevelScrollInTable: StoryObj<MultiLevelScrollIntableProps> = {
-  render: MultiLevelScrollInTableExample,
+export const StickyHeaderSorting: StoryObj<StickyHeaderSortingProps> = {
+  render: StickyHeaderSortingExample,
+  argTypes: {
+    sticky: { control: 'boolean' },
+    withScrollBar: { control: 'boolean' },
+    fixedFirstColumn: { control: 'boolean' },
+    fixedLastColumn: { control: 'boolean' },
+    wMax: { control: 'text' },
+  },
   args: {
-    ...multiLevelScrollIntableProps,
+    ...StickyHeaderSortingDefaultProps,
   },
 };
 
-export const OneLevelWithFixedColumn: StoryObj<FixedColumnScrollExampleProps> = {
-  render: OneLevelWithFixedColumnExample,
+export const StickyHeaderWithAnimation: StoryObj<StickyHeaderWithAnimationProps> = {
+  render: StickyHeaderWithAnimationExample,
+  argTypes: {
+    sticky: { control: 'boolean' },
+    withScrollBar: { control: 'boolean' },
+    animationDuration: { control: { type: 'number', min: 0, max: 1000, step: 50 } },
+    top: { control: { type: 'number', min: 0, max: 200, step: 10 } },
+    wMax: { control: 'text' },
+  },
   args: {
-    ...fixedColumnScrollExampleProps,
+    ...StickyHeaderWithAnimationDefaultProps,
   },
 };
 
-export const MultiLevelWithFixedColumn: StoryObj<FixedColumnMultiLevelScrollExampleProps> = {
-  render: MultiLevelWithFixedColumnExample,
+export const StickyHeaderLoadingFocus: StoryObj<StickyHeaderLoadingFocusProps> = {
+  render: StickyHeaderLoadingFocusExample,
+  argTypes: {
+    sticky: { control: 'boolean' },
+    withScrollBar: { control: 'boolean' },
+    wMax: { control: 'text' },
+  },
   args: {
-    ...fixedColumnMultiLevelScrollExampleProps,
+    ...StickyHeaderLoadingFocusDefaultProps,
   },
 };
 
+// Real examples
+export const FolderTable: StoryObj<{ loading: boolean }> = {
+  render: FolderTableExample,
+  argTypes: {
+    loading: { control: 'boolean' },
+  },
+  args: {
+    loading: false,
+  },
+};
+
+export const RealTable: Story = {
+  render: RealTableExample,
+};
+
 export const CaseWithW100: Story = {
   render: CaseWithW100Example,
 };
+export const CampaingsTable: Story = {
+  render: CampaingsTableExample,
+};
+
+export const StickyHeaderHiddenColumn: Story = {
+  render: StickyHeaderHiddenColumnExample,
+};
diff --git a/stories/components/data-table/tests/examples/accordion-tests/with-component/with-fixed-column.tsx b/stories/components/data-table/tests/examples/accordion-tests/with-component/with-fixed-column.tsx
index 43cadd8756..9a26828752 100644
--- a/stories/components/data-table/tests/examples/accordion-tests/with-component/with-fixed-column.tsx
+++ b/stories/components/data-table/tests/examples/accordion-tests/with-component/with-fixed-column.tsx
@@ -37,7 +37,7 @@ const Demo = (props: AccordionWithFixedColumnProps) => {
       loading={props.loading}
       data={data}
       aria-label='Accordion with fixed column'
-      headerProps={{ sticky: props.sticky, withScrollBar: props.withScrollBar, top: props.top }}
+      headerProps={{ sticky: props.sticky, withScrollBar: props.withScrollBar, top: props.top, ref: headerRef }}
       hMax={500}
       wMax={400}
       columns={[
diff --git a/stories/components/data-table/tests/examples/scroll-tests/campaigns-table.tsx b/stories/components/data-table/tests/examples/scroll-tests/campaigns-table.tsx
new file mode 100644
index 0000000000..456cfb6ebe
--- /dev/null
+++ b/stories/components/data-table/tests/examples/scroll-tests/campaigns-table.tsx
@@ -0,0 +1,275 @@
+import { Flex } from '@semcore/ui/base-components';
+import type { DataTableSort } from '@semcore/ui/data-table';
+import { DataTable } from '@semcore/ui/data-table';
+import Ellipsis from '@semcore/ui/ellipsis';
+import Link from '@semcore/ui/link';
+import { Text } from '@semcore/ui/typography';
+import React, { useCallback } from 'react';
+
+type SortableColumn = 'siteHealth' | 'errors' | 'warnings' | 'notices' | 'crawled' | 'score' | 'performance';
+type ColumnName = keyof (typeof data)[0];
+
+const VIEW_STATES = {
+  JUST_ADDED_FIRST_COLLECT: 'just_added_first_collect',
+  DEFAULT: 'default',
+} as const;
+
+type ViewState = (typeof VIEW_STATES)[keyof typeof VIEW_STATES];
+
+type Campaign = {
+  id: number;
+  name: string;
+  domain: string;
+  dataViewState: ViewState;
+  siteHealth: number | null;
+  siteHealthDelta: number | null;
+  errors: number | null;
+  errorsDelta: number | null;
+  warnings: number | null;
+  warningsDelta: number | null;
+  notices: number | null;
+  noticesDelta: number | null;
+  crawled: number | null;
+  score: number | null;
+  lastAudit: string | null;
+  performance: string | null;
+  status: string;
+};
+
+const columns = [
+  {
+    name: 'name',
+    children: 'Project',
+    gtcWidth: 'minmax(220px, auto)',
+    fixed: 'left' as const,
+  },
+  {
+    name: 'siteHealth',
+    children: 'Site Health',
+    gtcWidth: 'minmax(100px, 130px)',
+    sortable: true,
+    justifyContent: 'end' as const,
+  },
+  {
+    name: 'errors',
+    children: 'Errors',
+    gtcWidth: 'minmax(80px, 110px)',
+    sortable: true,
+    justifyContent: 'end' as const,
+  },
+  {
+    name: 'warnings',
+    children: 'Warnings',
+    gtcWidth: 'minmax(90px, 120px)',
+    sortable: true,
+    justifyContent: 'end' as const,
+  },
+  {
+    name: 'notices',
+    children: 'Notices',
+    gtcWidth: 'minmax(80px, 110px)',
+    sortable: true,
+    justifyContent: 'end' as const,
+  },
+  {
+    name: 'crawled',
+    children: 'Crawled pages',
+    gtcWidth: 'minmax(110px, 140px)',
+    sortable: true,
+    justifyContent: 'end' as const,
+  },
+  {
+    name: 'score',
+    children: 'Score',
+    gtcWidth: 'minmax(80px, 100px)',
+    sortable: true,
+    justifyContent: 'end' as const,
+  },
+  {
+    name: 'lastAudit',
+    children: 'Last audit',
+    gtcWidth: 'minmax(120px, 160px)',
+    justifyContent: 'end' as const,
+  },
+  {
+    name: 'performance',
+    children: 'Site Performance',
+    gtcWidth: '300px',
+    sortable: true,
+    justifyContent: 'end' as const,
+  },
+  {
+    name: 'status',
+    children: 'Status',
+    gtcWidth: '110px',
+  },
+];
+
+const renderCell: React.ComponentProps<typeof DataTable>['renderCell'] = ({
+  dataKey,
+  row,
+  defaultRender,
+}) => {
+  const typedRow = row as unknown as Campaign;
+
+  if (dataKey === 'siteHealth' || dataKey === 'errors' || dataKey === 'warnings' || dataKey === 'notices') {
+    const valueMap: Record<string, number | null> = {
+      siteHealth: typedRow.siteHealth,
+      errors: typedRow.errors,
+      warnings: typedRow.warnings,
+      notices: typedRow.notices,
+    };
+    const deltaMap: Record<string, number | null> = {
+      siteHealth: typedRow.siteHealthDelta,
+      errors: typedRow.errorsDelta,
+      warnings: typedRow.warningsDelta,
+      notices: typedRow.noticesDelta,
+    };
+    const value = valueMap[dataKey as string];
+    const delta = deltaMap[dataKey as string];
+
+    if (value === null) return defaultRender();
+
+    const suffix = dataKey === 'siteHealth' ? '%' : '';
+    const deltaStr = delta === null
+      ? null
+      : delta === 0
+        ? `0${suffix}`
+        : `${delta > 0 ? '+' : ''}${delta}${suffix}`;
+
+    return {
+      children: (
+        <Flex direction='column' style={{ alignItems: 'flex-end' }}>
+          <Link
+            href={`#campaign-${typedRow.id}`}
+            noWrap
+            aria-label={`${dataKey} is ${value}${suffix}, open details`}
+            data-test-id='cell-score-link'
+          >
+            {value}{suffix}
+          </Link>
+          {deltaStr !== null && (
+            <Text
+              color='var(--intergalactic-text-secondary, #6c6e79)'
+              data-test-id='cell-score-delta'
+            >
+              {deltaStr}
+            </Text>
+          )}
+        </Flex>
+      ),
+    };
+  }
+
+  if (dataKey === 'name') {
+    return {
+      children: (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+          <Link
+            href={`#campaign-${typedRow.id}`}
+            noWrap
+            bold
+            style={{ minWidth: 0 }}
+            aria-label={`Open ${typedRow.domain} campaign`}
+            data-test-id='link-to-campaign-review'
+          >
+            <Ellipsis tooltip={false}>
+              <Ellipsis.Content data-test-id='campaign-name'>{typedRow.name}</Ellipsis.Content>
+            </Ellipsis>
+          </Link>
+          <Text use='secondary' size={200}>
+            <Ellipsis tooltip={false}>
+              <Ellipsis.Content data-test-id='domain-name'>{typedRow.domain}</Ellipsis.Content>
+            </Ellipsis>
+          </Text>
+        </div>
+      ),
+    };
+  }
+
+  return defaultRender();
+};
+
+const Demo = () => {
+  const [sort, setSort] = React.useState<DataTableSort<ColumnName>>(['siteHealth', 'desc']);
+
+  const handleSort = useCallback(
+    (nextSort: DataTableSort<ColumnName>) => {
+      setSort(nextSort);
+    },
+    [setSort],
+  );
+
+  const sortedData = React.useMemo(
+    () =>
+      [...data].sort((aRow, bRow) => {
+        const [prop, sortDirection] = sort;
+        const a = aRow[prop as SortableColumn] ?? -Infinity;
+        const b = bRow[prop as SortableColumn] ?? -Infinity;
+        if (a === b) return 0;
+        if (sortDirection === 'asc') return a > b ? 1 : -1;
+        return a > b ? -1 : 1;
+      }),
+    [sort],
+  );
+
+  return (
+    <DataTable
+      data={sortedData}
+      headerProps={{
+        sticky: true,
+        top: 0,
+        withScrollBar: true,
+      }}
+      sideIndents='wide'
+      defaultGridTemplateColumnWidth='max-content'
+      columns={columns}
+      sort={sort}
+      onSortChange={handleSort}
+      rowProps={(row) => ({
+        'theme': row.dataViewState === VIEW_STATES.JUST_ADDED_FIRST_COLLECT ? 'success' : undefined,
+        'data-test-id': row.id,
+      })}
+      renderCell={renderCell}
+      w='100%'
+      id='campaigns-list-table'
+      data-test-id='campaigns-list-table'
+      aria-label='Campaigns list'
+    />
+  );
+};
+
+const data: Campaign[] = [
+  { id: 1, name: 'Nike brand campaign', domain: 'nike.com', dataViewState: VIEW_STATES.JUST_ADDED_FIRST_COLLECT, siteHealth: 96, siteHealthDelta: 0, errors: 12, errorsDelta: -3, warnings: 340, warningsDelta: null, notices: 1200, noticesDelta: null, crawled: 8420, score: 94, lastAudit: '2 hours ago', performance: 'Fast loading, good Core Web Vitals, mobile-friendly', status: 'Active' },
+  { id: 2, name: 'Adidas running shoes', domain: 'adidas.com', dataViewState: VIEW_STATES.DEFAULT, siteHealth: 88, siteHealthDelta: -2, errors: 45, errorsDelta: 5, warnings: 820, warningsDelta: null, notices: 2100, noticesDelta: null, crawled: 12300, score: 81, lastAudit: '5 hours ago', performance: 'Moderate speed, LCP issues on product pages', status: 'Active' },
+  { id: 3, name: 'Apple iPhone 15', domain: 'apple.com', dataViewState: VIEW_STATES.DEFAULT, siteHealth: 99, siteHealthDelta: 1, errors: 2, errorsDelta: 0, warnings: 58, warningsDelta: null, notices: 310, noticesDelta: null, crawled: 54200, score: 98, lastAudit: '1 day ago', performance: 'Excellent performance across all devices and regions', status: 'Active' },
+  { id: 4, name: 'Samsung Galaxy S24', domain: 'samsung.com', dataViewState: VIEW_STATES.DEFAULT, siteHealth: 91, siteHealthDelta: null, errors: 31, errorsDelta: null, warnings: 610, warningsDelta: null, notices: 1780, noticesDelta: null, crawled: 33100, score: 87, lastAudit: '3 hours ago', performance: 'Good overall, minor CLS issues on mobile layout', status: 'Paused' },
+  { id: 5, name: 'Amazon Prime deals', domain: 'amazon.com', dataViewState: VIEW_STATES.DEFAULT, siteHealth: 78, siteHealthDelta: -5, errors: 124, errorsDelta: 12, warnings: 2400, warningsDelta: null, notices: 8900, noticesDelta: null, crawled: 210000, score: 72, lastAudit: '30 min ago', performance: 'Slow TTFB on deal pages, needs CDN optimization', status: 'Active' },
+  { id: 6, name: 'Netflix subscription offer', domain: 'netflix.com', dataViewState: VIEW_STATES.DEFAULT, siteHealth: 94, siteHealthDelta: 3, errors: 18, errorsDelta: -7, warnings: 290, warningsDelta: null, notices: 940, noticesDelta: null, crawled: 7600, score: 91, lastAudit: '6 hours ago', performance: 'Good performance, video assets well-optimized', status: 'Active' },
+  { id: 7, name: 'Spotify premium trial', domain: 'spotify.com', dataViewState: VIEW_STATES.DEFAULT, siteHealth: 97, siteHealthDelta: 0, errors: 7, errorsDelta: 0, warnings: 140, warningsDelta: null, notices: 520, noticesDelta: null, crawled: 9800, score: 95, lastAudit: '2 days ago', performance: 'Fast and responsive, excellent mobile experience', status: 'Active' },
+  { id: 8, name: 'Tesla Model 3 promo', domain: 'tesla.com', dataViewState: VIEW_STATES.JUST_ADDED_FIRST_COLLECT, siteHealth: null, siteHealthDelta: null, errors: null, errorsDelta: null, warnings: null, warningsDelta: null, notices: null, noticesDelta: null, crawled: null, score: null, lastAudit: null, performance: null, status: 'Active' },
+  { id: 9, name: 'Microsoft Office 365', domain: 'microsoft.com', dataViewState: VIEW_STATES.DEFAULT, siteHealth: 85, siteHealthDelta: -1, errors: 67, errorsDelta: 8, warnings: 1100, warningsDelta: null, notices: 3400, noticesDelta: null, crawled: 44000, score: 82, lastAudit: '4 hours ago', performance: 'Average speed, login page has high blocking time', status: 'Active' },
+  { id: 10, name: 'Google Workspace', domain: 'google.com', dataViewState: VIEW_STATES.DEFAULT, siteHealth: 98, siteHealthDelta: 0, errors: 4, errorsDelta: -1, warnings: 71, warningsDelta: null, notices: 280, noticesDelta: null, crawled: 61000, score: 97, lastAudit: '1 hour ago', performance: 'Near-perfect scores across all Core Web Vitals', status: 'Paused' },
+  { id: 11, name: 'Airbnb summer campaign', domain: 'airbnb.com', dataViewState: VIEW_STATES.DEFAULT, siteHealth: 82, siteHealthDelta: null, errors: 88, errorsDelta: null, warnings: 1340, warningsDelta: null, notices: 4200, noticesDelta: null, crawled: 31000, score: 78, lastAudit: '8 hours ago', performance: 'Map and image-heavy pages slow on mobile networks', status: 'Active' },
+  { id: 12, name: 'Booking.com hotels', domain: 'booking.com', dataViewState: VIEW_STATES.DEFAULT, siteHealth: 79, siteHealthDelta: -3, errors: 102, errorsDelta: 15, warnings: 1890, warningsDelta: null, notices: 5600, noticesDelta: null, crawled: 29500, score: 75, lastAudit: '12 hours ago', performance: 'Heavy search result pages, LCP above threshold', status: 'Active' },
+  { id: 13, name: 'Uber rides promo', domain: 'uber.com', dataViewState: VIEW_STATES.DEFAULT, siteHealth: 93, siteHealthDelta: 2, errors: 21, errorsDelta: -4, warnings: 380, warningsDelta: null, notices: 1100, noticesDelta: null, crawled: 18200, score: 90, lastAudit: '3 hours ago', performance: 'Good performance, fast interactive time on landing', status: 'Active' },
+  { id: 14, name: 'LinkedIn premium', domain: 'linkedin.com', dataViewState: VIEW_STATES.DEFAULT, siteHealth: 90, siteHealthDelta: 0, errors: 35, errorsDelta: 0, warnings: 670, warningsDelta: null, notices: 2000, noticesDelta: null, crawled: 12400, score: 86, lastAudit: '1 day ago', performance: 'Feed pages slow due to dynamic content loading', status: 'Active' },
+  { id: 15, name: 'Shopify store builder', domain: 'shopify.com', dataViewState: VIEW_STATES.DEFAULT, siteHealth: 95, siteHealthDelta: 1, errors: 14, errorsDelta: -2, warnings: 220, warningsDelta: null, notices: 760, noticesDelta: null, crawled: 8700, score: 93, lastAudit: '5 hours ago', performance: 'Strong performance, template pages well-cached', status: 'Paused' },
+  { id: 16, name: 'Twitter ads brand', domain: 'twitter.com', dataViewState: VIEW_STATES.DEFAULT, siteHealth: 87, siteHealthDelta: null, errors: 52, errorsDelta: null, warnings: 940, warningsDelta: null, notices: 2800, noticesDelta: null, crawled: 11300, score: 83, lastAudit: '7 hours ago', performance: 'Timeline rendering causes high TBT on some devices', status: 'Active' },
+  { id: 17, name: 'YouTube pre-roll', domain: 'youtube.com', dataViewState: VIEW_STATES.DEFAULT, siteHealth: 92, siteHealthDelta: -1, errors: 28, errorsDelta: 3, warnings: 510, warningsDelta: null, notices: 1600, noticesDelta: null, crawled: 73000, score: 89, lastAudit: '2 hours ago', performance: 'Good scores, video thumbnail lazy-loading effective', status: 'Active' },
+  { id: 18, name: 'HubSpot CRM trial', domain: 'hubspot.com', dataViewState: VIEW_STATES.DEFAULT, siteHealth: 96, siteHealthDelta: 4, errors: 9, errorsDelta: -5, warnings: 160, warningsDelta: null, notices: 580, noticesDelta: null, crawled: 7200, score: 94, lastAudit: '1 day ago', performance: 'Excellent landing page speed, forms load instantly', status: 'Active' },
+  { id: 19, name: 'Salesforce enterprise', domain: 'salesforce.com', dataViewState: VIEW_STATES.DEFAULT, siteHealth: 83, siteHealthDelta: -4, errors: 76, errorsDelta: 9, warnings: 1250, warningsDelta: null, notices: 3700, noticesDelta: null, crawled: 5900, score: 80, lastAudit: '2 days ago', performance: 'App pages slow, large JS bundles not code-split', status: 'Paused' },
+  { id: 20, name: 'Dropbox business plan', domain: 'dropbox.com', dataViewState: VIEW_STATES.DEFAULT, siteHealth: 91, siteHealthDelta: 0, errors: 33, errorsDelta: 0, warnings: 590, warningsDelta: null, notices: 1750, noticesDelta: null, crawled: 6800, score: 88, lastAudit: '6 hours ago', performance: 'Good performance, file preview pages well optimized', status: 'Active' },
+  { id: 21, name: 'Slack team collaboration', domain: 'slack.com', dataViewState: VIEW_STATES.DEFAULT, siteHealth: 89, siteHealthDelta: 2, errors: 41, errorsDelta: -6, warnings: 730, warningsDelta: null, notices: 2200, noticesDelta: null, crawled: 9100, score: 85, lastAudit: '9 hours ago', performance: 'Workspace pages load fast, websocket init is quick', status: 'Active' },
+  { id: 22, name: 'Zoom video conferencing', domain: 'zoom.us', dataViewState: VIEW_STATES.JUST_ADDED_FIRST_COLLECT, siteHealth: 91, siteHealthDelta: 2, errors: 29, errorsDelta: -4, warnings: 520, warningsDelta: null, notices: 1640, noticesDelta: null, crawled: 19500, score: 89, lastAudit: '2 hours ago', performance: 'Good performance, meeting pages load fast', status: 'Active' },
+  { id: 23, name: 'Notion productivity', domain: 'notion.so', dataViewState: VIEW_STATES.DEFAULT, siteHealth: 97, siteHealthDelta: 1, errors: 6, errorsDelta: -1, warnings: 110, warningsDelta: null, notices: 400, noticesDelta: null, crawled: 14800, score: 96, lastAudit: '3 hours ago', performance: 'Very fast, pages with heavy blocks load smoothly', status: 'Active' },
+  { id: 24, name: 'Figma design tool', domain: 'figma.com', dataViewState: VIEW_STATES.DEFAULT, siteHealth: 98, siteHealthDelta: 0, errors: 3, errorsDelta: 0, warnings: 64, warningsDelta: null, notices: 230, noticesDelta: null, crawled: 22000, score: 97, lastAudit: '1 hour ago', performance: 'Outstanding performance, WebGL rendering optimized', status: 'Active' },
+  { id: 25, name: 'Canva templates promo', domain: 'canva.com', dataViewState: VIEW_STATES.DEFAULT, siteHealth: 94, siteHealthDelta: -1, errors: 17, errorsDelta: 2, warnings: 310, warningsDelta: null, notices: 950, noticesDelta: null, crawled: 26500, score: 92, lastAudit: '4 hours ago', performance: 'Fast template gallery, image optimization in place', status: 'Active' },
+  { id: 26, name: 'GitHub Copilot AI', domain: 'github.com', dataViewState: VIEW_STATES.DEFAULT, siteHealth: 99, siteHealthDelta: 0, errors: 1, errorsDelta: 0, warnings: 42, warningsDelta: null, notices: 180, noticesDelta: null, crawled: 33000, score: 99, lastAudit: '2 hours ago', performance: 'Top-tier performance, repo pages load under 1 second', status: 'Active' },
+  { id: 27, name: 'Atlassian Jira software', domain: 'atlassian.com', dataViewState: VIEW_STATES.DEFAULT, siteHealth: 86, siteHealthDelta: -2, errors: 58, errorsDelta: 7, warnings: 1020, warningsDelta: null, notices: 3100, noticesDelta: null, crawled: 10400, score: 84, lastAudit: '1 day ago', performance: 'Board views slow to render with many tickets loaded', status: 'Paused' },
+  { id: 28, name: 'Mailchimp email marketing', domain: 'mailchimp.com', dataViewState: VIEW_STATES.DEFAULT, siteHealth: 93, siteHealthDelta: 3, errors: 22, errorsDelta: -3, warnings: 410, warningsDelta: null, notices: 1250, noticesDelta: null, crawled: 8300, score: 91, lastAudit: '5 hours ago', performance: 'Good speed, campaign editor loads smoothly', status: 'Active' },
+  { id: 29, name: 'Semrush SEO platform', domain: 'semrush.com', dataViewState: VIEW_STATES.DEFAULT, siteHealth: 95, siteHealthDelta: 1, errors: 15, errorsDelta: -2, warnings: 270, warningsDelta: null, notices: 820, noticesDelta: null, crawled: 16700, score: 93, lastAudit: '3 hours ago', performance: 'Reports and dashboards render fast, charts optimized', status: 'Active' },
+  { id: 30, name: 'Ahrefs backlink checker', domain: 'ahrefs.com', dataViewState: VIEW_STATES.DEFAULT, siteHealth: 97, siteHealthDelta: 0, errors: 8, errorsDelta: -1, warnings: 145, warningsDelta: null, notices: 490, noticesDelta: null, crawled: 13900, score: 95, lastAudit: '6 hours ago', performance: 'Fast data tables, backlink explorer loads quickly', status: 'Active' },
+];
+
+export default Demo;
diff --git a/stories/components/data-table/tests/examples/scroll-tests/folder-table.tsx b/stories/components/data-table/tests/examples/scroll-tests/folder-table.tsx
new file mode 100644
index 0000000000..186fd17421
--- /dev/null
+++ b/stories/components/data-table/tests/examples/scroll-tests/folder-table.tsx
@@ -0,0 +1,285 @@
+import KebabM from '@semcore/icon/Kebab/m';
+import LinkExternalM from '@semcore/icon/LinkExternal/m';
+import { Box, Flex } from '@semcore/ui/base-components';
+import Button, { ButtonLink } from '@semcore/ui/button';
+import { DataTable } from '@semcore/ui/data-table';
+import Ellipsis from '@semcore/ui/ellipsis';
+import Link from '@semcore/ui/link';
+import Skeleton from '@semcore/ui/skeleton';
+import { Text } from '@semcore/ui/typography';
+import React, { useMemo } from 'react';
+
+type RowData = {
+  id: string;
+  domain: string;
+  isLoading?: boolean;
+  isLastAdded: boolean;
+  siteHealth: string | null;
+  visibility: string | null;
+  visibilityUpdated: string | null;
+  toxicDomains: string | null;
+  ideasTodo: string | null;
+  backlinkProspects: string | null;
+  organicSessions: string | null;
+};
+
+enum TableColumn {
+  folder = 'folder',
+  siteHealth = 'siteHealth',
+  visibility = 'visibility',
+  toxicDomains = 'toxicDomains',
+  ideasTodo = 'ideasTodo',
+  backlinkProspects = 'backlinkProspects',
+  organicSessions = 'organicSessions',
+  folderActions = 'folderActions',
+}
+
+const headerToolCellProps = {
+  gtcWidth: 'minmax(138px, 1fr)',
+  justifyContent: 'end',
+  alignItems: 'end',
+} as const;
+
+const headerProps = { sticky: true, h: 41, withScrollBar: true } as const;
+
+const emptyLoadingRow: RowData = {
+  id: '',
+  isLoading: true,
+  isLastAdded: false,
+  domain: '',
+  siteHealth: null,
+  visibility: null,
+  visibilityUpdated: null,
+  toxicDomains: null,
+  ideasTodo: null,
+  backlinkProspects: null,
+  organicSessions: null,
+};
+
+const loadingData: RowData[] = [
+  { ...emptyLoadingRow, id: 'loading-1' },
+  { ...emptyLoadingRow, id: 'loading-2' },
+  { ...emptyLoadingRow, id: 'loading-3' },
+];
+
+const renderCellChildren = (cellName: TableColumn, row: RowData): React.ReactNode => {
+  switch (cellName) {
+    case TableColumn.folder:
+      return (
+        <Flex direction='column' style={{ minWidth: 0, alignItems: 'start' }}>
+          <Flex style={{ width: '100%', alignItems: 'center', gap: 8 }}>
+            <img
+              src={`https://www.google.com/s2/favicons?sz=64&domain_url=${row.domain}`}
+              width={16}
+              height={16}
+              loading='lazy'
+              alt=''
+              aria-hidden='true'
+            />
+            <Ellipsis>
+              <Ellipsis.Content tag={Link} size={300} fontWeight={700}>
+                {row.domain}
+              </Ellipsis.Content>
+              <Ellipsis.Popper />
+            </Ellipsis>
+          </Flex>
+          <Box style={{ paddingLeft: 24 }}>
+            <Link
+              size={200}
+              color='var(--intergalactic-text-hint, #6c6e79)'
+            >
+              <Link.Text>{row.domain}</Link.Text>
+              <Link.Addon>
+                <LinkExternalM color='icon-secondary-neutral' />
+              </Link.Addon>
+            </Link>
+          </Box>
+        </Flex>
+      );
+
+    case TableColumn.siteHealth:
+      if (row.siteHealth !== null) {
+        return (
+          <Link size={300} fontWeight={700}>
+            {row.siteHealth}
+          </Link>
+        );
+      }
+      return (
+        <Button use='primary' theme='info'>
+          Set up
+        </Button>
+      );
+
+    case TableColumn.visibility:
+      if (row.visibility !== null) {
+        return (
+          <Flex direction='column' style={{ alignItems: 'end', gap: 4 }}>
+            <Link size={300} fontWeight={700}>
+              {row.visibility}
+            </Link>
+            <Text size={200} color='var(--intergalactic-text-secondary, #6c6e79)'>
+              {row.visibilityUpdated}
+            </Text>
+          </Flex>
+        );
+      }
+      return (
+        <Button use='primary' theme='info'>
+          Set up
+        </Button>
+      );
+
+    case TableColumn.toxicDomains:
+      if (row.toxicDomains !== null) {
+        return (
+          <Link size={300} fontWeight={700}>
+            {row.toxicDomains}
+          </Link>
+        );
+      }
+      return (
+        <Button use='primary' theme='info'>
+          Set up
+        </Button>
+      );
+
+    case TableColumn.ideasTodo:
+      if (row.ideasTodo !== null) {
+        return (
+          <Link size={300} fontWeight={700}>
+            {row.ideasTodo}
+          </Link>
+        );
+      }
+      return <ButtonLink size={200}>Set up</ButtonLink>;
+
+    case TableColumn.backlinkProspects:
+      if (row.backlinkProspects !== null) {
+        return (
+          <Link size={300} fontWeight={700}>
+            {row.backlinkProspects}
+          </Link>
+        );
+      }
+      return <ButtonLink size={200}>Set up</ButtonLink>;
+
+    case TableColumn.organicSessions:
+      if (row.organicSessions !== null) {
+        return (
+          <Link size={300} fontWeight={700}>
+            {row.organicSessions}
+          </Link>
+        );
+      }
+      return <ButtonLink size={200}>Set up</ButtonLink>;
+
+    case TableColumn.folderActions:
+      return (
+        <Button use='tertiary' theme='muted' aria-label='Settings'>
+          <Button.Addon>
+            <KebabM />
+          </Button.Addon>
+        </Button>
+      );
+  }
+};
+
+type DemoProps = {
+  loading?: boolean;
+};
+
+const Demo = ({ loading = false }: DemoProps) => {
+  const computedData = useMemo(() => (loading ? loadingData : data), [loading]);
+
+  const columns: React.ComponentProps<typeof DataTable>['columns'] = useMemo(
+    () => [
+      {
+        name: TableColumn.folder,
+        children: 'Folder',
+        gtcWidth: 'minmax(232px, 1fr)',
+        fixed: 'left' as const,
+        justifyContent: 'start',
+        alignItems: 'end',
+      },
+      { ...headerToolCellProps, name: TableColumn.siteHealth, children: 'Site Health' },
+      { ...headerToolCellProps, name: TableColumn.visibility, children: 'Visibility' },
+      { ...headerToolCellProps, name: TableColumn.toxicDomains, children: 'Toxic Domains' },
+      { ...headerToolCellProps, name: TableColumn.ideasTodo, children: 'Ideas to Do' },
+      { ...headerToolCellProps, name: TableColumn.backlinkProspects, children: 'Backlink Prospects' },
+      { ...headerToolCellProps, name: TableColumn.organicSessions, children: 'Organic Sessions' },
+      {
+        name: TableColumn.folderActions,
+        children: null,
+        gtcWidth: '56px',
+        fixed: 'right' as const,
+        justifyContent: 'center',
+      },
+    ],
+    [],
+  );
+
+  return (
+    <DataTable
+      uniqueRowKey='id'
+      use='secondary'
+      data={computedData}
+      aria-label='Folders table'
+      w='100%'
+      headerProps={headerProps}
+      sideIndents='wide'
+      columns={columns}
+      renderCell={({ dataKey, row, defaultRender }) => {
+        const cellName = dataKey as TableColumn;
+        const { isLoading, ...typedRow } = row as unknown as RowData;
+
+        if (isLoading) {
+          if (cellName === TableColumn.folderActions) {
+            return null;
+          }
+          if (cellName === TableColumn.folder) {
+            return (
+              <Skeleton height={17} pr={4}>
+                <Skeleton.Text y='5' width='100%' />
+              </Skeleton>
+            );
+          }
+          return (
+            <Skeleton height={17} px={1}>
+              <Skeleton.Text y='5' width='100%' />
+            </Skeleton>
+          );
+        }
+
+        const children = renderCellChildren(cellName, typedRow as RowData);
+        if (children === undefined) {
+          return defaultRender();
+        }
+
+        return {
+          alignItems: 'start',
+          children: (
+            <Box py={1} wMin={0}>
+              {children}
+            </Box>
+          ),
+        };
+      }}
+    />
+  );
+};
+
+const data: RowData[] = [
+  { id: '1', domain: 'semrush.com', isLastAdded: false, siteHealth: '96%', visibility: '100%', visibilityUpdated: '5 hours ago', toxicDomains: '4.9K', ideasTodo: '191', backlinkProspects: null, organicSessions: null },
+  { id: '2', domain: 'moz.com', isLastAdded: true, siteHealth: '88%', visibility: '74%', visibilityUpdated: '2 hours ago', toxicDomains: '2.1K', ideasTodo: '342', backlinkProspects: '1.3K', organicSessions: '580K' },
+  { id: '3', domain: 'ahrefs.com', isLastAdded: false, siteHealth: '99%', visibility: '98%', visibilityUpdated: '1 day ago', toxicDomains: '310', ideasTodo: '57', backlinkProspects: '4.7K', organicSessions: '2.1M' },
+  { id: '4', domain: 'searchengineland.com', isLastAdded: false, siteHealth: '91%', visibility: '85%', visibilityUpdated: '3 hours ago', toxicDomains: '8.2K', ideasTodo: '1.1K', backlinkProspects: null, organicSessions: '12.4M' },
+  { id: '5', domain: 'backlinko.com', isLastAdded: false, siteHealth: null, visibility: '62%', visibilityUpdated: '12 hours ago', toxicDomains: '1.8K', ideasTodo: '204', backlinkProspects: null, organicSessions: null },
+  { id: '6', domain: 'neilpatel.com', isLastAdded: false, siteHealth: '78%', visibility: null, visibilityUpdated: null, toxicDomains: '3.4K', ideasTodo: null, backlinkProspects: '920', organicSessions: '760K' },
+  { id: '7', domain: 'searchmetrics.com', isLastAdded: false, siteHealth: '94%', visibility: '91%', visibilityUpdated: '6 hours ago', toxicDomains: '5.6K', ideasTodo: '88', backlinkProspects: '3.2K', organicSessions: '4.8M' },
+  { id: '8', domain: 'serpstat.com', isLastAdded: false, siteHealth: null, visibility: null, visibilityUpdated: null, toxicDomains: null, ideasTodo: null, backlinkProspects: null, organicSessions: null },
+  { id: '9', domain: 'majestic.com', isLastAdded: false, siteHealth: '83%', visibility: '55%', visibilityUpdated: '2 days ago', toxicDomains: '670', ideasTodo: '415', backlinkProspects: null, organicSessions: '310K' },
+  { id: '10', domain: 'spyfu.com', isLastAdded: false, siteHealth: '97%', visibility: '93%', visibilityUpdated: '30 min ago', toxicDomains: '1.2K', ideasTodo: '129', backlinkProspects: '6.1K', organicSessions: '9.3M' },
+];
+
+export default Demo;
diff --git a/stories/components/data-table/tests/examples/scroll-tests/multi-level-scroll-in-table.tsx b/stories/components/data-table/tests/examples/scroll-tests/multi-level-scroll-in-table.tsx
deleted file mode 100644
index 5027c452d2..0000000000
--- a/stories/components/data-table/tests/examples/scroll-tests/multi-level-scroll-in-table.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import type { BoxProps } from '@semcore/ui/base-components';
-import { Flex } from '@semcore/ui/base-components';
-import { DataTable } from '@semcore/ui/data-table';
-import type { DataTableData, DataTableProps } from '@semcore/ui/data-table';
-import React from 'react';
-
-export type MultiLevelScrollIntableProps = {
-  use?: DataTableProps<typeof data, any, any>['use'];
-  compact?: DataTableProps<typeof data, any, any>['compact'];
-  loading?: DataTableProps<typeof data, any, any>['loading'];
-  defaultGridTemplateColumnWidth?: DataTableProps<typeof data, any, any>['defaultGridTemplateColumnWidth'];
-  sticky: boolean;
-  withScrollBar?: boolean;
-  sideIndents?: DataTableProps<typeof data, any, any>['sideIndents'];
-  top?: number;
-} & BoxProps;
-
-const Demo = (props: MultiLevelScrollIntableProps) => {
-  return (
-    <Flex direction='column' gap={4}>
-
-      <DataTable
-        data={data}
-        aria-label='Fixed multi level header scroll'
-        defaultGridTemplateColumnWidth={props.defaultGridTemplateColumnWidth}
-        use={props.use}
-        compact={props.compact}
-        sideIndents={props.sideIndents}
-        loading={props.loading}
-        wMax={props.wMax}
-        h={props.h}
-        headerProps={{
-          sticky: props.sticky,
-          withScrollBar: props.withScrollBar,
-        }}
-
-        columns={[
-          { name: 'keyword', children: 'Keyword', gtcWidth: '150px' },
-          {
-            name: 'group1',
-            children: 'Organic Sessions',
-            borders: 'both',
-            columns: [
-              { name: 'kd', children: 'KD,%', gtcWidth: '200px' },
-              { name: 'cpc', children: 'CPC' },
-              { name: 'vol', children: 'Vol.' },
-            ],
-          },
-        ]}
-      />
-
-      <DataTable
-        data={data}
-        aria-label='Fixed multi level header  with fixed column width'
-        defaultGridTemplateColumnWidth={props.defaultGridTemplateColumnWidth}
-        use={props.use}
-        compact={props.compact}
-        sideIndents={props.sideIndents}
-        loading={props.loading}
-        wMax={props.wMax}
-        h={props.h}
-        headerProps={{
-          sticky: props.sticky,
-          withScrollBar: props.withScrollBar,
-        }}
-
-        columns={[
-          { name: 'keyword', children: 'Keyword', gtcWidth: '200px' },
-          {
-            name: 'group1',
-            children: 'Organic Sessions',
-            borders: 'both',
-            columns: [
-              { name: 'kd', children: 'KD,%', gtcWidth: '100px' },
-              { name: 'cpc', children: 'CPC', gtcWidth: '80px' },
-              { name: 'vol', children: 'Vol.', gtcWidth: '150px' },
-            ],
-          },
-        ]}
-      />
-
-    </Flex>
-  );
-};
-
-const data = [
-  {
-    keyword: 'ebay buy',
-    kd: '77.8',
-    cpc: '$1.25',
-    vol: '32,500,000',
-  },
-  {
-    keyword: 'www.ebay.com',
-    kd: '11.2',
-    cpc: '$3.4',
-    vol: '65,457,920',
-  },
-  {
-    keyword: 'www.ebay.com',
-    kd: '10',
-    cpc: '$0.65',
-    vol: '47,354,640',
-  },
-  {
-    keyword: 'ebay buy',
-    kd: '-',
-    cpc: '$0',
-    vol: 'n/a',
-  },
-
-];
-
-export const multiLevelScrollIntableProps: MultiLevelScrollIntableProps = {
-  sideIndents: undefined,
-  use: undefined,
-  compact: false,
-  h: '200px',
-  wMax: '800px',
-  defaultGridTemplateColumnWidth: 'auto',
-  loading: undefined,
-  sticky: true,
-  withScrollBar: false,
-};
-
-Demo.defaultProps = multiLevelScrollIntableProps;
-
-export default Demo;
diff --git a/stories/components/data-table/tests/examples/scroll-tests/multi-level-with-fixed-column.tsx b/stories/components/data-table/tests/examples/scroll-tests/multi-level-with-fixed-column.tsx
deleted file mode 100644
index 4d5e308f05..0000000000
--- a/stories/components/data-table/tests/examples/scroll-tests/multi-level-with-fixed-column.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import type { BoxProps } from '@semcore/ui/base-components';
-import { DataTable } from '@semcore/ui/data-table';
-import type { DataTableData, DataTableProps } from '@semcore/ui/data-table';
-import React from 'react';
-
-export type FixedColumnMultiLevelScrollExampleProps = {
-  use?: DataTableProps<typeof data, any, any>['use'];
-  compact?: DataTableProps<typeof data, any, any>['compact'];
-  loading?: DataTableProps<typeof data, any, any>['loading'];
-  defaultGridTemplateColumnWidth?: DataTableProps<typeof data, any, any>['defaultGridTemplateColumnWidth'];
-  sticky: boolean;
-  withScrollBar?: boolean;
-  sideIndents?: DataTableProps<typeof data, any, any>['sideIndents'];
-  top?: number;
-} & BoxProps;
-
-const Demo = (props: FixedColumnMultiLevelScrollExampleProps) => {
-  return (
-    <>
-
-      <DataTable
-        data={data}
-        aria-label='Fixed multi level header with 1 scroll'
-        defaultGridTemplateColumnWidth={props.defaultGridTemplateColumnWidth}
-        use={props.use}
-        compact={props.compact}
-        sideIndents={props.sideIndents}
-        loading={props.loading}
-        wMax={props.wMax}
-        h={props.h}
-        headerProps={{
-          sticky: props.sticky,
-          withScrollBar: props.withScrollBar,
-        }}
-        columns={[
-          {
-            name: 'group1',
-            children: 'Borders right Fixed left',
-            borders: 'right',
-            fixed: 'left',
-            columns: [
-              { name: 'keyword', children: 'Keyword', gtcWidth: '150px' },
-              { name: 'kd', children: 'KD,%', gtcWidth: '100px' },
-            ],
-          },
-          { name: 'cpc', children: 'CPC', gtcWidth: '350px' },
-          { name: 'cpc', children: 'CPC', gtcWidth: '350px' },
-
-          {
-            name: 'group2',
-            children: 'Borders left Fixed right',
-            borders: 'left',
-            fixed: 'right',
-            columns: [
-              { name: 'vol', children: 'Vol.', gtcWidth: '200px' },
-              { name: 'vol1', children: 'Vol.', gtcWidth: '150px' },
-
-            ],
-          },
-        ]}
-      />
-
-    </>
-  );
-};
-
-const data = [
-  {
-    keyword: 'ebay buy',
-    kd: '77.8',
-    cpc: '$1.25',
-    vol: '32,500,000',
-  },
-  {
-    keyword: 'www.ebay.com',
-    kd: '11.2',
-    cpc: '$3.4',
-    vol: '65,457,920',
-  },
-  {
-    keyword: 'www.ebay.com',
-    kd: '10',
-    cpc: '$0.65',
-    vol: '47,354,640',
-  },
-  {
-    keyword: 'ebay buy',
-    kd: '-',
-    cpc: '$0',
-    vol: 'n/a',
-  },
-  {
-    keyword: 'ebay buy',
-    kd: '75.89',
-    cpc: '$0',
-    vol: '21,644,290',
-  },
-  {
-    keyword: 'www.ebay.com',
-    kd: '10',
-    cpc: '$0.65',
-    vol: '47,354,640',
-  },
-  {
-    keyword: 'ebay buy',
-    kd: '-',
-    cpc: '$0',
-    vol: 'n/a',
-  },
-  {
-    keyword: 'ebay buy',
-    kd: '75.89',
-    cpc: '$0',
-    vol: '21,644,290',
-  },
-];
-
-export const fixedColumnMultiLevelScrollExampleProps: FixedColumnMultiLevelScrollExampleProps = {
-  sideIndents: undefined,
-  use: undefined,
-  compact: false,
-  h: '300px',
-  wMax: '800px',
-  defaultGridTemplateColumnWidth: 'auto',
-  loading: undefined,
-  sticky: true,
-  withScrollBar: undefined,
-};
-
-Demo.defaultProps = fixedColumnMultiLevelScrollExampleProps;
-
-export default Demo;
diff --git a/stories/components/data-table/tests/examples/scroll-tests/one-level-scroll-in-table.tsx b/stories/components/data-table/tests/examples/scroll-tests/one-level-scroll-in-table.tsx
deleted file mode 100644
index a097ac68db..0000000000
--- a/stories/components/data-table/tests/examples/scroll-tests/one-level-scroll-in-table.tsx
+++ /dev/null
@@ -1,145 +0,0 @@
-import type { BoxProps } from '@semcore/ui/base-components';
-import { Flex } from '@semcore/ui/base-components';
-import { DataTable } from '@semcore/ui/data-table';
-import type { DataTableData, DataTableProps } from '@semcore/ui/data-table';
-import React from 'react';
-
-export type OneLevelScrollIntableProps = {
-  use?: DataTableProps<typeof data, any, any>['use'];
-  compact?: DataTableProps<typeof data, any, any>['compact'];
-  loading?: DataTableProps<typeof data, any, any>['loading'];
-  defaultGridTemplateColumnWidth?: DataTableProps<typeof data, any, any>['defaultGridTemplateColumnWidth'];
-  sticky: boolean;
-  withScrollBar?: boolean;
-  sideIndents?: DataTableProps<typeof data, any, any>['sideIndents'];
-  top?: number;
-} & BoxProps;
-
-const Demo = (props: OneLevelScrollIntableProps) => {
-  return (
-    <Flex direction='column' gap={4}>
-      <DataTable
-        data={data}
-        aria-label='Scroll base'
-        defaultGridTemplateColumnWidth={props.defaultGridTemplateColumnWidth}
-        use={props.use}
-        compact={props.compact}
-        sideIndents={props.sideIndents}
-        loading={props.loading}
-        wMax={props.wMax}
-        h={props.h}
-        headerProps={{
-          sticky: props.sticky,
-          withScrollBar: props.withScrollBar,
-        }}
-        columns={[
-          { name: 'keyword', children: 'Keyword' },
-          { name: 'kd', children: 'KD,%' },
-          { name: 'cpc', children: 'CPC' },
-          { name: 'vol', children: 'Vol.' },
-        ]}
-      />
-
-      <DataTable
-        data={data}
-        aria-label='With fixed column width'
-        defaultGridTemplateColumnWidth={props.defaultGridTemplateColumnWidth}
-        use={props.use}
-        compact={props.compact}
-        sideIndents={props.sideIndents}
-        loading={props.loading}
-        wMax={props.wMax}
-        h={props.h}
-        headerProps={{
-          sticky: props.sticky,
-          withScrollBar: props.withScrollBar,
-        }}
-        columns={[
-          { name: 'keyword', children: 'Keyword', gtcWidth: '200px' },
-          { name: 'kd', children: 'KD,%', gtcWidth: '100px' },
-          { name: 'cpc', children: 'CPC', gtcWidth: '200px' },
-          { name: 'vol', children: 'Vol.' },
-        ]}
-      />
-    </Flex>
-  );
-};
-
-const data = [
-  {
-    keyword: 'ebay buy',
-    kd: '77.8',
-    cpc: '$1.25',
-    vol: '32,500,000',
-  },
-  {
-    keyword: 'www.ebay.com',
-    kd: '11.2',
-    cpc: '$3.4',
-    vol: '65,457,920',
-  },
-  {
-    keyword: 'www.ebay.com',
-    kd: '10',
-    cpc: '$0.65',
-    vol: '47,354,640',
-  },
-  {
-    keyword: 'ebay buy',
-    kd: '-',
-    cpc: '$0',
-    vol: 'n/a',
-  },
-  {
-    keyword: 'ebay buy',
-    kd: '75.89',
-    cpc: '$0',
-    vol: '21,644,290',
-  },
-  {
-    keyword: 'ebay buy',
-    kd: '77.8',
-    cpc: '$1.25',
-    vol: '32,500,000',
-  },
-  {
-    keyword: 'www.ebay.com',
-    kd: '11.2',
-    cpc: '$3.4',
-    vol: '65,457,920',
-  },
-  {
-    keyword: 'www.ebay.com',
-    kd: '10',
-    cpc: '$0.65',
-    vol: '47,354,640',
-  },
-  {
-    keyword: 'ebay buy',
-    kd: '-',
-    cpc: '$0',
-    vol: 'n/a',
-  },
-  {
-    keyword: 'ebay buy',
-    kd: '75.89',
-    cpc: '$0',
-    vol: '21,644,290',
-  },
-];
-
-export const oneLevelScrollIntableProps: OneLevelScrollIntableProps = {
-  sideIndents: undefined,
-  use: undefined,
-  compact: false,
-  h: '200px',
-  wMax: '800px',
-  defaultGridTemplateColumnWidth: 'auto',
-  loading: undefined,
-  sticky: true,
-  withScrollBar: undefined,
-};
-
-Demo.defaultProps = oneLevelScrollIntableProps;
-
-export default Demo;
diff --git a/stories/components/data-table/tests/examples/scroll-tests/one-level-with-fixed-column.tsx b/stories/components/data-table/tests/examples/scroll-tests/one-level-with-fixed-column.tsx
deleted file mode 100644
index 89fd8c8fb1..0000000000
--- a/stories/components/data-table/tests/examples/scroll-tests/one-level-with-fixed-column.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import type { BoxProps } from '@semcore/ui/base-components';
-import { DataTable } from '@semcore/ui/data-table';
-import type { DataTableData, DataTableProps } from '@semcore/ui/data-table';
-import React from 'react';
-
-export type FixedColumnScrollExampleProps = {
-  use?: DataTableProps<typeof data, any, any>['use'];
-  compact?: DataTableProps<typeof data, any, any>['compact'];
-  loading?: DataTableProps<typeof data, any, any>['loading'];
-  defaultGridTemplateColumnWidth?: DataTableProps<typeof data, any, any>['defaultGridTemplateColumnWidth'];
-  sticky: boolean;
-  withScrollBar?: boolean;
-  sideIndents?: DataTableProps<typeof data, any, any>['sideIndents'];
-  top?: number;
-} & BoxProps;
-
-const Demo = (props: FixedColumnScrollExampleProps) => {
-  return (
-    <>
-
-      <DataTable
-        data={data}
-        aria-label='Fixed columns'
-        defaultGridTemplateColumnWidth={props.defaultGridTemplateColumnWidth}
-        use={props.use}
-        compact={props.compact}
-        sideIndents={props.sideIndents}
-        loading={props.loading}
-        wMax={props.wMax}
-        h={props.h}
-        headerProps={{
-          sticky: props.sticky,
-          withScrollBar: props.withScrollBar,
-        }}
-        columns={[
-          { name: 'keyword', children: 'Keyword', fixed: 'left', gtcWidth: '150px' },
-          { name: 'kd', children: 'KD,%', fixed: 'left', gtcWidth: '200px' },
-          { name: 'kd', children: 'KD,%', gtcWidth: '200px' },
-          { name: 'cpc', children: 'CPC', gtcWidth: '300px' },
-          { name: 'cpc', children: 'CPC', gtcWidth: '100px' },
-          { name: 'vol', children: 'Vol.', gtcWidth: '80px', fixed: 'right' },
-        ]}
-      />
-
-    </>
-  );
-};
-
-const data = [
-  {
-    keyword: 'ebay buy',
-    kd: '77.8',
-    cpc: '$1.25',
-    vol: '32,500,000',
-  },
-  {
-    keyword: 'www.ebay.com',
-    kd: '11.2',
-    cpc: '$3.4',
-    vol: '65,457,920',
-  },
-  {
-    keyword: 'www.ebay.com',
-    kd: '10',
-    cpc: '$0.65',
-    vol: '47,354,640',
-  },
-  {
-    keyword: 'ebay buy',
-    kd: '-',
-    cpc: '$0',
-    vol: 'n/a',
-  },
-  {
-    keyword: 'ebay buy',
-    kd: '75.89',
-    cpc: '$0',
-    vol: '21,644,290',
-  },
-  {
-    keyword: 'www.ebay.com',
-    kd: '10',
-    cpc: '$0.65',
-    vol: '47,354,640',
-  },
-  {
-    keyword: 'ebay buy',
-    kd: '-',
-    cpc: '$0',
-    vol: 'n/a',
-  },
-  {
-    keyword: 'ebay buy',
-    kd: '75.89',
-    cpc: '$0',
-    vol: '21,644,290',
-  },
-];
-
-export const fixedColumnScrollExampleProps: FixedColumnScrollExampleProps = {
-  sideIndents: undefined,
-  use: undefined,
-  compact: false,
-  h: undefined,
-  wMax: '600px',
-  defaultGridTemplateColumnWidth: 'auto',
-  loading: undefined,
-  sticky: true,
-  withScrollBar: undefined,
-};
-
-Demo.defaultProps = fixedColumnScrollExampleProps;
-
-export default Demo;
diff --git a/stories/components/data-table/tests/examples/scroll-tests/real-table.tsx b/stories/components/data-table/tests/examples/scroll-tests/real-table.tsx
new file mode 100644
index 0000000000..fa3a36e0eb
--- /dev/null
+++ b/stories/components/data-table/tests/examples/scroll-tests/real-table.tsx
@@ -0,0 +1,1074 @@
+import Serp from '@semcore/icon/Serp/m';
+import { Box } from '@semcore/ui/base-components';
+import Card from '@semcore/ui/card';
+import type { DataTableData, DataTableSort } from '@semcore/ui/data-table';
+import { DataTable } from '@semcore/ui/data-table';
+import Ellipsis from '@semcore/ui/ellipsis';
+import React from 'react';
+
+type SortableColumn = 'previous' | 'current' | 'diff' | 'traffic' | 'kd' | 'cpc';
+type ColumnName = keyof (typeof data)[0];
+
+const Demo = () => {
+  const [sort, setSort] = React.useState<DataTableSort<ColumnName>>(['current', 'asc']);
+
+  const sortedData = React.useMemo(
+    () =>
+      [...data].sort((aRow, bRow) => {
+        const [prop, sortDirection] = sort;
+        const a = aRow[prop as SortableColumn] ?? 0;
+        const b = bRow[prop as SortableColumn] ?? 0;
+        if (a === b) return 0;
+        if (sortDirection === 'asc') return a > b ? 1 : -1;
+        return a > b ? -1 : 1;
+      }),
+    [sort],
+  );
+
+  return (
+    <Box
+      wMin={980}
+      wMax={1606}
+      mx={8}
+      mt={4}
+    >
+      <Card tag='section'>
+        <Card.Body px={0} pt={0}>
+          <DataTable
+            aria-label='real table'
+            data={sortedData}
+            columns={columns}
+            sort={sort}
+            onSortChange={setSort}
+            sideIndents='wide'
+            compact
+            headerProps={{
+              sticky: true,
+              withScrollBar: true,
+            }}
+            w='auto'
+          />
+        </Card.Body>
+      </Card>
+    </Box>
+
+  );
+};
+
+const TableHeaderCell: React.FC<{ children: string }> = ({ children }) => {
+  return (
+    <Ellipsis tooltip={false}>
+      {children}
+    </Ellipsis>
+  );
+};
+
+const columns = [
+  {
+    name: 'keyword',
+    children: <TableHeaderCell>Keyword</TableHeaderCell>,
+    gtcWidth: 'minmax(139px, auto)',
+    fixed: 'left' as const,
+  },
+  {
+    name: 'intent',
+    children: <TableHeaderCell>Intent</TableHeaderCell>,
+    gtcWidth: '52px',
+  },
+  {
+    name: 'previous',
+    children: <TableHeaderCell>Previous</TableHeaderCell>,
+    gtcWidth: 'minmax(60px, 90px)',
+    sortable: true,
+  },
+  {
+    name: 'current',
+    children: <TableHeaderCell>Current</TableHeaderCell>,
+    gtcWidth: 'minmax(60px, 90px)',
+    sortable: true,
+  },
+  {
+    name: 'diff',
+    children: <TableHeaderCell>Diff.</TableHeaderCell>,
+    gtcWidth: 'minmax(48px, 60px)',
+    sortable: true,
+  },
+  {
+    name: 'trafficDiff',
+    children: <TableHeaderCell>Traffic Diff.</TableHeaderCell>,
+    gtcWidth: 'minmax(80px, 100px)',
+  },
+  {
+    name: 'traffic',
+    children: <TableHeaderCell>Traffic %</TableHeaderCell>,
+    gtcWidth: 'minmax(66px, 80px)',
+    sortable: true,
+  },
+  {
+    name: 'changesSerp',
+    children: <TableHeaderCell>Changes on SERP</TableHeaderCell>,
+    gtcWidth: '120px',
+  },
+  {
+    name: 'volume',
+    children: <TableHeaderCell>Volume</TableHeaderCell>,
+    gtcWidth: 'minmax(69px, 80px)',
+  },
+  {
+    name: 'kd',
+    children: <TableHeaderCell>KD %</TableHeaderCell>,
+    gtcWidth: 'minmax(64px, 80px)',
+    sortable: true,
+  },
+  {
+    name: 'cpc',
+    children: <TableHeaderCell>CPC</TableHeaderCell>,
+    gtcWidth: 'minmax(68px, 80px)',
+    sortable: true,
+  },
+  {
+    name: 'url',
+    children: <TableHeaderCell>URL</TableHeaderCell>,
+    gtcWidth: 'minmax(200px, auto)',
+  },
+  {
+    name: 'updated',
+    children: <TableHeaderCell>Updated</TableHeaderCell>,
+    gtcWidth: '80px',
+  },
+];
+
+const data: DataTableData = [
+  {
+    keyword: 'monarch',
+    intent: 'N',
+    previous: 1,
+    current: 2,
+    diff: -1,
+    trafficDiff: '+8,2K',
+    traffic: 0.78,
+    changesSerp: <Serp />,
+    volume: '165K',
+    kd: '100',
+    cpc: '5.39',
+    url: 'www.worldwildlife.org/species/monarch-butterfly/',
+    updated: '2 days',
+  },
+  {
+    keyword: 'amur leopard',
+    intent: 'I T',
+    previous: 7,
+    current: 5,
+    diff: 2,
+    trafficDiff: '-10K',
+    traffic: 0.01,
+    changesSerp: <Serp />,
+    volume: '40.5K',
+    kd: '62',
+    cpc: '0.69',
+    url: 'www.worldwildlife.org/species/amur-leopard/',
+    updated: '2 days',
+  },
+  {
+    keyword: 'giant panda',
+    intent: 'I',
+    previous: 3,
+    current: 3,
+    diff: 0,
+    trafficDiff: '+1.2K',
+    traffic: 0.45,
+    changesSerp: <Serp />,
+    volume: '201K',
+    kd: '85',
+    cpc: '1.20',
+    url: 'www.worldwildlife.org/species/giant-panda/',
+    updated: '1 day',
+  },
+  {
+    keyword: 'sea turtle conservation',
+    intent: 'I C',
+    previous: 12,
+    current: 8,
+    diff: 4,
+    trafficDiff: '+500',
+    traffic: 0.12,
+    changesSerp: <Serp />,
+    volume: '12.1K',
+    kd: '55',
+    cpc: '2.45',
+    url: 'www.worldwildlife.org/species/sea-turtle/',
+    updated: '3 days',
+  },
+  {
+    keyword: 'blue whale facts',
+    intent: 'I',
+    previous: 2,
+    current: 4,
+    diff: -2,
+    trafficDiff: '-2.1K',
+    traffic: 0.33,
+    changesSerp: <Serp />,
+    volume: '90.5K',
+    kd: '70',
+    cpc: '0.15',
+    url: 'www.worldwildlife.org/species/blue-whale/',
+    updated: '5 hours',
+  },
+  {
+    keyword: 'african elephant',
+    intent: 'I N',
+    previous: 15,
+    current: 10,
+    diff: 5,
+    trafficDiff: '+3.4K',
+    traffic: 0.22,
+    changesSerp: <Serp />,
+    volume: '110K',
+    kd: '78',
+    cpc: '1.10',
+    url: 'www.worldwildlife.org/species/african-elephant/',
+    updated: '2 days',
+  },
+  {
+    keyword: 'snow leopard habitat',
+    intent: 'I',
+    previous: 20,
+    current: 18,
+    diff: 2,
+    trafficDiff: '+200',
+    traffic: 0.05,
+    changesSerp: <Serp />,
+    volume: '18.1K',
+    kd: '48',
+    cpc: '0.85',
+    url: 'www.worldwildlife.org/species/snow-leopard/',
+    updated: '4 days',
+  },
+  {
+    keyword: 'adopt a tiger',
+    intent: 'T C',
+    previous: 5,
+    current: 4,
+    diff: 1,
+    trafficDiff: '+4.2K',
+    traffic: 0.56,
+    changesSerp: <Serp />,
+    volume: '33.1K',
+    kd: '92',
+    cpc: '12.50',
+    url: 'www.worldwildlife.org/species/tiger/',
+    updated: '1 day',
+  },
+  {
+    keyword: 'mountain gorilla',
+    intent: 'I',
+    previous: 8,
+    current: 11,
+    diff: -3,
+    trafficDiff: '-1.5K',
+    traffic: 0.09,
+    changesSerp: <Serp />,
+    volume: '27.1K',
+    kd: '60',
+    cpc: '0.40',
+    url: 'www.worldwildlife.org/species/mountain-gorilla/',
+    updated: '2 days',
+  },
+  {
+    keyword: 'rhino poaching statistics',
+    intent: 'I',
+    previous: 25,
+    current: 15,
+    diff: 10,
+    trafficDiff: '+1.8K',
+    traffic: 0.15,
+    changesSerp: <Serp />,
+    volume: '14.8K',
+    kd: '42',
+    cpc: '0.00',
+    url: 'www.worldwildlife.org/species/rhino/',
+    updated: '6 days',
+  },
+  {
+    keyword: 'amazon rainforest birds',
+    intent: 'I',
+    previous: 14,
+    current: 14,
+    diff: 0,
+    trafficDiff: '0',
+    traffic: 0.08,
+    changesSerp: <Serp />,
+    volume: '22.2K',
+    kd: '51',
+    cpc: '0.35',
+    url: 'www.worldwildlife.org/habitats/amazon/',
+    updated: '3 days',
+  },
+  {
+    keyword: 'polar bear melting ice',
+    intent: 'I',
+    previous: 4,
+    current: 9,
+    diff: -5,
+    trafficDiff: '-5.2K',
+    traffic: 0.18,
+    changesSerp: <Serp />,
+    volume: '60.5K',
+    kd: '77',
+    cpc: '0.10',
+    url: 'www.worldwildlife.org/species/polar-bear/',
+    updated: '2 days',
+  },
+  {
+    keyword: 'red panda diet',
+    intent: 'I',
+    previous: 6,
+    current: 6,
+    diff: 0,
+    trafficDiff: '+100',
+    traffic: 0.25,
+    changesSerp: <Serp />,
+    volume: '49.5K',
+    kd: '35',
+    cpc: '0.22',
+    url: 'www.worldwildlife.org/species/red-panda/',
+    updated: '1 day',
+  },
+  {
+    keyword: 'pangolin scales',
+    intent: 'I',
+    previous: 30,
+    current: 22,
+    diff: 8,
+    trafficDiff: '+1.1K',
+    traffic: 0.04,
+    changesSerp: <Serp />,
+    volume: '12.5K',
+    kd: '58',
+    cpc: '0.05',
+    url: 'www.worldwildlife.org/species/pangolin/',
+    updated: '7 days',
+  },
+  {
+    keyword: 'black rhino',
+    intent: 'N I',
+    previous: 10,
+    current: 7,
+    diff: 3,
+    trafficDiff: '+2.9K',
+    traffic: 0.19,
+    changesSerp: <Serp />,
+    volume: '33.1K',
+    kd: '65',
+    cpc: '0.90',
+    url: 'www.worldwildlife.org/species/black-rhino/',
+    updated: '2 days',
+  },
+  {
+    keyword: 'save the vaquita',
+    intent: 'I C',
+    previous: 2,
+    current: 1,
+    diff: 1,
+    trafficDiff: '+15K',
+    traffic: 0.95,
+    changesSerp: <Serp />,
+    volume: '18.1K',
+    kd: '40',
+    cpc: '1.50',
+    url: 'www.worldwildlife.org/species/vaquita/',
+    updated: '12 hours',
+  },
+  {
+    keyword: 'coral reef bleaching',
+    intent: 'I',
+    previous: 18,
+    current: 25,
+    diff: -7,
+    trafficDiff: '-3.1K',
+    traffic: 0.07,
+    changesSerp: <Serp />,
+    volume: '27.1K',
+    kd: '69',
+    cpc: '0.45',
+    url: 'www.worldwildlife.org/habitats/coral-reefs/',
+    updated: '3 days',
+  },
+  {
+    keyword: 'borneo orangutan',
+    intent: 'I N',
+    previous: 9,
+    current: 10,
+    diff: -1,
+    trafficDiff: '-400',
+    traffic: 0.14,
+    changesSerp: <Serp />,
+    volume: '14.8K',
+    kd: '53',
+    cpc: '0.70',
+    url: 'www.worldwildlife.org/species/orangutan/',
+    updated: '4 days',
+  },
+  {
+    keyword: 'galapagos tortoise',
+    intent: 'I',
+    previous: 13,
+    current: 12,
+    diff: 1,
+    trafficDiff: '+800',
+    traffic: 0.20,
+    changesSerp: <Serp />,
+    volume: '40.5K',
+    kd: '44',
+    cpc: '0.30',
+    url: 'www.worldwildlife.org/species/galapagos-tortoise/',
+    updated: '2 days',
+  },
+  {
+    keyword: 'whale shark size',
+    intent: 'I',
+    previous: 5,
+    current: 8,
+    diff: -3,
+    trafficDiff: '-2.5K',
+    traffic: 0.31,
+    changesSerp: <Serp />,
+    volume: '74K',
+    kd: '61',
+    cpc: '0.12',
+    url: 'www.worldwildlife.org/species/whale-shark/',
+    updated: '1 day',
+  },
+  {
+    keyword: 'how to stop deforestation',
+    intent: 'I',
+    previous: 40,
+    current: 31,
+    diff: 9,
+    trafficDiff: '+1.9K',
+    traffic: 0.03,
+    changesSerp: <Serp />,
+    volume: '22.2K',
+    kd: '82',
+    cpc: '3.10',
+    url: 'www.worldwildlife.org/threats/deforestation/',
+    updated: '5 days',
+  },
+  {
+    keyword: 'koala endangered status',
+    intent: 'I',
+    previous: 11,
+    current: 6,
+    diff: 5,
+    trafficDiff: '+6.2K',
+    traffic: 0.28,
+    changesSerp: <Serp />,
+    volume: '60.5K',
+    kd: '57',
+    cpc: '0.55',
+    url: 'www.worldwildlife.org/species/koala/',
+    updated: '2 days',
+  },
+  {
+    keyword: 'bengal tiger vs siberian tiger',
+    intent: 'I',
+    previous: 16,
+    current: 16,
+    diff: 0,
+    trafficDiff: '0',
+    traffic: 0.11,
+    changesSerp: <Serp />,
+    volume: '33.1K',
+    kd: '39',
+    cpc: '0.00',
+    url: 'www.worldwildlife.org/species/tiger/',
+    updated: '1 week',
+  },
+  {
+    keyword: 'arctic fox winter coat',
+    intent: 'I',
+    previous: 22,
+    current: 19,
+    diff: 3,
+    trafficDiff: '+450',
+    traffic: 0.06,
+    changesSerp: <Serp />,
+    volume: '12.1K',
+    kd: '31',
+    cpc: '0.05',
+    url: 'www.worldwildlife.org/species/arctic-fox/',
+    updated: '4 days',
+  },
+  {
+    keyword: 'jaguar range map',
+    intent: 'I',
+    previous: 7,
+    current: 13,
+    diff: -6,
+    trafficDiff: '-3.8K',
+    traffic: 0.17,
+    changesSerp: <Serp />,
+    volume: '18.1K',
+    kd: '50',
+    cpc: '0.40',
+    url: 'www.worldwildlife.org/species/jaguar/',
+    updated: '2 days',
+  },
+  {
+    keyword: 'sustainable fishing practices',
+    intent: 'I C',
+    previous: 35,
+    current: 28,
+    diff: 7,
+    trafficDiff: '+1.3K',
+    traffic: 0.04,
+    changesSerp: <Serp />,
+    volume: '9.9K',
+    kd: '72',
+    cpc: '4.80',
+    url: 'www.worldwildlife.org/industries/sustainable-fishing/',
+    updated: '6 days',
+  },
+  {
+    keyword: 'beluga whale sounds',
+    intent: 'I',
+    previous: 3,
+    current: 5,
+    diff: -2,
+    trafficDiff: '-1.1K',
+    traffic: 0.40,
+    changesSerp: <Serp />,
+    volume: '40.5K',
+    kd: '43',
+    cpc: '0.20',
+    url: 'www.worldwildlife.org/species/beluga/',
+    updated: '3 days',
+  },
+  {
+    keyword: 'narwhal tusk purpose',
+    intent: 'I',
+    previous: 1,
+    current: 1,
+    diff: 0,
+    trafficDiff: '+500',
+    traffic: 0.82,
+    changesSerp: <Serp />,
+    volume: '49.5K',
+    kd: '38',
+    cpc: '0.15',
+    url: 'www.worldwildlife.org/species/narwhal/',
+    updated: '1 day',
+  },
+  {
+    keyword: 'platypus venomous',
+    intent: 'I',
+    previous: 19,
+    current: 24,
+    diff: -5,
+    trafficDiff: '-900',
+    traffic: 0.05,
+    changesSerp: <Serp />,
+    volume: '33.1K',
+    kd: '47',
+    cpc: '0.00',
+    url: 'www.worldwildlife.org/species/platypus/',
+    updated: '4 days',
+  },
+  {
+    keyword: 'okapi habitat',
+    intent: 'I',
+    previous: 14,
+    current: 10,
+    diff: 4,
+    trafficDiff: '+2.2K',
+    traffic: 0.13,
+    changesSerp: <Serp />,
+    volume: '12.1K',
+    kd: '34',
+    cpc: '0.25',
+    url: 'www.worldwildlife.org/species/okapi/',
+    updated: '2 days',
+  },
+  {
+    keyword: 'save the bees donation',
+    intent: 'T',
+    previous: 8,
+    current: 4,
+    diff: 4,
+    trafficDiff: '+7.8K',
+    traffic: 0.51,
+    changesSerp: <Serp />,
+    volume: '27.1K',
+    kd: '88',
+    cpc: '8.40',
+    url: 'www.worldwildlife.org/species/bees/',
+    updated: '12 hours',
+  },
+  {
+    keyword: 'leatherback turtle size',
+    intent: 'I',
+    previous: 12,
+    current: 12,
+    diff: 0,
+    trafficDiff: '-50',
+    traffic: 0.18,
+    changesSerp: <Serp />,
+    volume: '18.1K',
+    kd: '41',
+    cpc: '0.10',
+    url: 'www.worldwildlife.org/species/leatherback-turtle/',
+    updated: '3 days',
+  },
+  {
+    keyword: 'humpback whale migration',
+    intent: 'I',
+    previous: 6,
+    current: 3,
+    diff: 3,
+    trafficDiff: '+4.5K',
+    traffic: 0.44,
+    changesSerp: <Serp />,
+    volume: '40.5K',
+    kd: '59',
+    cpc: '0.35',
+    url: 'www.worldwildlife.org/species/humpback-whale/',
+    updated: '1 day',
+  },
+  {
+    keyword: 'sumatran rhino count',
+    intent: 'I',
+    previous: 45,
+    current: 38,
+    diff: 7,
+    trafficDiff: '+300',
+    traffic: 0.02,
+    changesSerp: <Serp />,
+    volume: '8.1K',
+    kd: '46',
+    cpc: '0.00',
+    url: 'www.worldwildlife.org/species/sumatran-rhino/',
+    updated: '5 days',
+  },
+  {
+    keyword: 'elephant ivory trade',
+    intent: 'I C',
+    previous: 21,
+    current: 17,
+    diff: 4,
+    trafficDiff: '+1.2K',
+    traffic: 0.09,
+    changesSerp: <Serp />,
+    volume: '14.8K',
+    kd: '71',
+    cpc: '1.25',
+    url: 'www.worldwildlife.org/threats/ivory-trade/',
+    updated: '2 days',
+  },
+  {
+    keyword: 'manatee protection act',
+    intent: 'I N',
+    previous: 4,
+    current: 6,
+    diff: -2,
+    trafficDiff: '-800',
+    traffic: 0.36,
+    changesSerp: <Serp />,
+    volume: '12.1K',
+    kd: '52',
+    cpc: '0.60',
+    url: 'www.worldwildlife.org/species/manatee/',
+    updated: '4 days',
+  },
+  {
+    keyword: 'cheetah speed facts',
+    intent: 'I',
+    previous: 2,
+    current: 2,
+    diff: 0,
+    trafficDiff: '+150',
+    traffic: 0.65,
+    changesSerp: <Serp />,
+    volume: '110K',
+    kd: '66',
+    cpc: '0.18',
+    url: 'www.worldwildlife.org/species/cheetah/',
+    updated: '1 day',
+  },
+  {
+    keyword: 'wildlife photography tips',
+    intent: 'I C',
+    previous: 55,
+    current: 42,
+    diff: 13,
+    trafficDiff: '+2.1K',
+    traffic: 0.04,
+    changesSerp: <Serp />,
+    volume: '33.1K',
+    kd: '75',
+    cpc: '4.20',
+    url: 'www.worldwildlife.org/magazine/photography/',
+    updated: '6 days',
+  },
+  {
+    keyword: 'red-eyed tree frog',
+    intent: 'I N',
+    previous: 10,
+    current: 14,
+    diff: -4,
+    trafficDiff: '-1.4K',
+    traffic: 0.12,
+    changesSerp: <Serp />,
+    volume: '27.1K',
+    kd: '49',
+    cpc: '0.30',
+    url: 'www.worldwildlife.org/species/tree-frog/',
+    updated: '2 days',
+  },
+  {
+    keyword: 'climate change impacts',
+    intent: 'I',
+    previous: 8,
+    current: 5,
+    diff: 3,
+    trafficDiff: '+12.5K',
+    traffic: 0.58,
+    changesSerp: <Serp />,
+    volume: '301K',
+    kd: '94',
+    cpc: '2.80',
+    url: 'www.worldwildlife.org/threats/climate-change/',
+    updated: '1 day',
+  },
+  {
+    keyword: 'tarsier monkey',
+    intent: 'I',
+    previous: 18,
+    current: 18,
+    diff: 0,
+    trafficDiff: '0',
+    traffic: 0.07,
+    changesSerp: <Serp />,
+    volume: '14.8K',
+    kd: '33',
+    cpc: '0.05',
+    url: 'www.worldwildlife.org/species/tarsier/',
+    updated: '5 days',
+  },
+  {
+    keyword: 'plastic in the ocean',
+    intent: 'I',
+    previous: 5,
+    current: 9,
+    diff: -4,
+    trafficDiff: '-6.7K',
+    traffic: 0.29,
+    changesSerp: <Serp />,
+    volume: '135K',
+    kd: '81',
+    cpc: '1.45',
+    url: 'www.worldwildlife.org/threats/pollution/',
+    updated: '2 days',
+  },
+  {
+    keyword: 'gray wolf packs',
+    intent: 'I',
+    previous: 12,
+    current: 11,
+    diff: 1,
+    trafficDiff: '+600',
+    traffic: 0.15,
+    changesSerp: <Serp />,
+    volume: '40.5K',
+    kd: '56',
+    cpc: '0.25',
+    url: 'www.worldwildlife.org/species/gray-wolf/',
+    updated: '3 days',
+  },
+  {
+    keyword: 'saola rare sighting',
+    intent: 'I',
+    previous: 50,
+    current: 30,
+    diff: 20,
+    trafficDiff: '+900',
+    traffic: 0.03,
+    changesSerp: <Serp />,
+    volume: '6.6K',
+    kd: '45',
+    cpc: '0.00',
+    url: 'www.worldwildlife.org/species/saola/',
+    updated: '1 week',
+  },
+  {
+    keyword: 'snowy owl migration',
+    intent: 'I',
+    previous: 7,
+    current: 12,
+    diff: -5,
+    trafficDiff: '-2.3K',
+    traffic: 0.11,
+    changesSerp: <Serp />,
+    volume: '22.2K',
+    kd: '41',
+    cpc: '0.12',
+    url: 'www.worldwildlife.org/species/snowy-owl/',
+    updated: '4 days',
+  },
+  {
+    keyword: 'borneo pygmy elephant',
+    intent: 'I',
+    previous: 20,
+    current: 15,
+    diff: 5,
+    trafficDiff: '+1.1K',
+    traffic: 0.08,
+    changesSerp: <Serp />,
+    volume: '9.9K',
+    kd: '37',
+    cpc: '0.40',
+    url: 'www.worldwildlife.org/species/pygmy-elephant/',
+    updated: '2 days',
+  },
+  {
+    keyword: 'endangered species list',
+    intent: 'I N',
+    previous: 1,
+    current: 1,
+    diff: 0,
+    trafficDiff: '+18K',
+    traffic: 0.92,
+    changesSerp: <Serp />,
+    volume: '246K',
+    kd: '98',
+    cpc: '3.50',
+    url: 'www.worldwildlife.org/species/directory/',
+    updated: '1 day',
+  },
+  {
+    keyword: 'hawkbill turtle shell',
+    intent: 'I',
+    previous: 33,
+    current: 35,
+    diff: -2,
+    trafficDiff: '-100',
+    traffic: 0.02,
+    changesSerp: <Serp />,
+    volume: '8.1K',
+    kd: '54',
+    cpc: '0.20',
+    url: 'www.worldwildlife.org/species/hawksbill-turtle/',
+    updated: '6 days',
+  },
+  {
+    keyword: 'mountain lion tracks',
+    intent: 'I',
+    previous: 14,
+    current: 10,
+    diff: 4,
+    trafficDiff: '+1.8K',
+    traffic: 0.14,
+    changesSerp: <Serp />,
+    volume: '33.1K',
+    kd: '47',
+    cpc: '0.10',
+    url: 'www.worldwildlife.org/species/mountain-lion/',
+    updated: '2 days',
+  },
+  {
+    keyword: 'greenhouse effect explanation',
+    intent: 'I',
+    previous: 3,
+    current: 2,
+    diff: 1,
+    trafficDiff: '+5.4K',
+    traffic: 0.62,
+    changesSerp: <Serp />,
+    volume: '110K',
+    kd: '89',
+    cpc: '1.95',
+    url: 'www.worldwildlife.org/threats/climate-change/',
+    updated: '1 day',
+  },
+  {
+    keyword: 'sloth sleeping habits',
+    intent: 'I',
+    previous: 9,
+    current: 11,
+    diff: -2,
+    trafficDiff: '-600',
+    traffic: 0.19,
+    changesSerp: <Serp />,
+    volume: '49.5K',
+    kd: '32',
+    cpc: '0.05',
+    url: 'www.worldwildlife.org/species/sloth/',
+    updated: '4 days',
+  },
+  {
+    keyword: 'how to help wildlife',
+    intent: 'I T',
+    previous: 22,
+    current: 14,
+    diff: 8,
+    trafficDiff: '+2.8K',
+    traffic: 0.10,
+    changesSerp: <Serp />,
+    volume: '12.1K',
+    kd: '73',
+    cpc: '6.20',
+    url: 'www.worldwildlife.org/how-to-help/',
+    updated: '2 days',
+  },
+  {
+    keyword: 'mexican wolf recovery',
+    intent: 'I',
+    previous: 40,
+    current: 25,
+    diff: 15,
+    trafficDiff: '+1.4K',
+    traffic: 0.05,
+    changesSerp: <Serp />,
+    volume: '6.6K',
+    kd: '43',
+    cpc: '0.15',
+    url: 'www.worldwildlife.org/species/mexican-wolf/',
+    updated: '5 days',
+  },
+  {
+    keyword: 'duck-billed platypus facts',
+    intent: 'I',
+    previous: 6,
+    current: 7,
+    diff: -1,
+    trafficDiff: '-300',
+    traffic: 0.21,
+    changesSerp: <Serp />,
+    volume: '40.5K',
+    kd: '40',
+    cpc: '0.00',
+    url: 'www.worldwildlife.org/species/platypus/',
+    updated: '3 days',
+  },
+  {
+    keyword: 'black-footed ferret',
+    intent: 'I N',
+    previous: 15,
+    current: 13,
+    diff: 2,
+    trafficDiff: '+400',
+    traffic: 0.09,
+    changesSerp: <Serp />,
+    volume: '18.1K',
+    kd: '51',
+    cpc: '0.35',
+    url: 'www.worldwildlife.org/species/black-footed-ferret/',
+    updated: '1 week',
+  },
+  {
+    keyword: 'arctic ice minimum',
+    intent: 'I',
+    previous: 4,
+    current: 8,
+    diff: -4,
+    trafficDiff: '-2.9K',
+    traffic: 0.25,
+    changesSerp: <Serp />,
+    volume: '27.1K',
+    kd: '76',
+    cpc: '0.80',
+    url: 'www.worldwildlife.org/pages/arctic-sea-ice/',
+    updated: '2 days',
+  },
+  {
+    keyword: 'conservation volunteer abroad',
+    intent: 'T C',
+    previous: 65,
+    current: 51,
+    diff: 14,
+    trafficDiff: '+2.2K',
+    traffic: 0.03,
+    changesSerp: <Serp />,
+    volume: '14.8K',
+    kd: '84',
+    cpc: '11.00',
+    url: 'www.worldwildlife.org/about/careers/',
+    updated: '4 days',
+  },
+  {
+    keyword: 'bamboo forest preservation',
+    intent: 'I',
+    previous: 28,
+    current: 30,
+    diff: -2,
+    trafficDiff: '-150',
+    traffic: 0.02,
+    changesSerp: <Serp />,
+    volume: '5.4K',
+    kd: '48',
+    cpc: '1.20',
+    url: 'www.worldwildlife.org/habitats/forests/',
+    updated: '6 days',
+  },
+  {
+    keyword: 'koala vs eucalyptus',
+    intent: 'I',
+    previous: 17,
+    current: 17,
+    diff: 0,
+    trafficDiff: '0',
+    traffic: 0.08,
+    changesSerp: <Serp />,
+    volume: '12.1K',
+    kd: '36',
+    cpc: '0.00',
+    url: 'www.worldwildlife.org/species/koala/',
+    updated: '3 days',
+  },
+  {
+    keyword: 'global warming solutions',
+    intent: 'I',
+    previous: 10,
+    current: 7,
+    diff: 3,
+    trafficDiff: '+9.1K',
+    traffic: 0.47,
+    changesSerp: <Serp />,
+    volume: '165K',
+    kd: '91',
+    cpc: '4.15',
+    url: 'www.worldwildlife.org/threats/climate-change/',
+    updated: '1 day',
+  },
+  {
+    keyword: 'how do dolphins sleep',
+    intent: 'I',
+    previous: 2,
+    current: 5,
+    diff: -3,
+    trafficDiff: '-4.3K',
+    traffic: 0.38,
+    changesSerp: <Serp />,
+    volume: '90.5K',
+    kd: '53',
+    cpc: '0.10',
+    url: 'www.worldwildlife.org/species/dolphin/',
+    updated: '2 days',
+  },
+  {
+    keyword: 'wwf gift shop',
+    intent: 'T N',
+    previous: 1,
+    current: 1,
+    diff: 0,
+    trafficDiff: '+25K',
+    traffic: 0.88,
+    changesSerp: <Serp />,
+    volume: '74K',
+    kd: '80',
+    cpc: '2.50',
+    url: 'www.worldwildlife.org/shop/',
+    updated: '5 hours',
+  },
+];
+
+export default Demo;
diff --git a/stories/components/data-table/tests/examples/scroll-tests/scroll-in-table.tsx b/stories/components/data-table/tests/examples/scroll-tests/scroll-in-table.tsx
new file mode 100644
index 0000000000..7008e47319
--- /dev/null
+++ b/stories/components/data-table/tests/examples/scroll-tests/scroll-in-table.tsx
@@ -0,0 +1,132 @@
+import type { BoxProps } from '@semcore/ui/base-components';
+import { Flex } from '@semcore/ui/base-components';
+import { DataTable } from '@semcore/ui/data-table';
+import type { DataTableProps } from '@semcore/ui/data-table';
+import React from 'react';
+
+export type ScrollInTableProps = {
+  use?: DataTableProps<typeof data, any, any>['use'];
+  compact?: DataTableProps<typeof data, any, any>['compact'];
+  loading?: DataTableProps<typeof data, any, any>['loading'];
+  defaultGridTemplateColumnWidth?: DataTableProps<typeof data, any, any>['defaultGridTemplateColumnWidth'];
+  sticky?: boolean;
+  withScrollBar?: boolean;
+  sideIndents?: DataTableProps<typeof data, any, any>['sideIndents'];
+  multiLevel?: boolean;
+} & BoxProps;
+
+const flatColumns = [
+  { name: 'keyword', children: 'Keyword' },
+  { name: 'kd', children: 'KD,%' },
+  { name: 'cpc', children: 'CPC' },
+  { name: 'vol', children: 'Vol.' },
+];
+
+const flatColumnsFixed = [
+  { name: 'keyword', children: 'Keyword', gtcWidth: '200px' },
+  { name: 'kd', children: 'KD,%', gtcWidth: '100px' },
+  { name: 'cpc', children: 'CPC', gtcWidth: 'minmax(20px, 50px)' },
+  { name: 'vol', children: 'Vol.', gtcWidth: '100px' },
+];
+
+const multiLevelColumns = [
+  { name: 'keyword', children: 'Keyword', gtcWidth: '150px' },
+  {
+    name: 'group1',
+    children: 'Organic Sessions',
+    borders: 'both' as const,
+    columns: [
+      { name: 'kd', children: 'KD,%', gtcWidth: '100px' },
+      { name: 'cpc', children: 'CPC', gtcWidth: 'minmax(100px, 150px)' },
+      { name: 'vol', children: 'Vol.', gtcWidth: '100px' },
+    ],
+  },
+];
+
+const multiLevelColumnsFixed = [
+  { name: 'keyword', children: 'Keyword', gtcWidth: '200px' },
+  {
+    name: 'group1',
+    children: 'Organic Sessions',
+    borders: 'both' as const,
+    columns: [
+      { name: 'kd', children: 'KD,%', gtcWidth: '100px' },
+      { name: 'cpc', children: 'CPC', gtcWidth: '80px' },
+      { name: 'vol', children: 'Vol.', gtcWidth: '150px' },
+    ],
+  },
+];
+
+const Demo = (props: ScrollInTableProps) => {
+  const columns = props.multiLevel ? multiLevelColumns : flatColumns;
+  const columnsFixed = props.multiLevel ? multiLevelColumnsFixed : flatColumnsFixed;
+  const label = props.multiLevel ? 'Multi-level' : 'One-level';
+
+  return (
+    <Flex direction='column' gap={4}>
+      <DataTable
+        data={data}
+        aria-label={`${label} scroll`}
+        defaultGridTemplateColumnWidth={props.defaultGridTemplateColumnWidth}
+        use={props.use}
+        compact={props.compact}
+        sideIndents={props.sideIndents}
+        loading={props.loading}
+        wMax={props.wMax}
+        h={props.h}
+        headerProps={{
+          sticky: props.sticky,
+          withScrollBar: props.withScrollBar,
+        }}
+        columns={columns}
+      />
+
+      <DataTable
+        data={data}
+        aria-label={`${label} scroll with fixed column width`}
+        defaultGridTemplateColumnWidth={props.defaultGridTemplateColumnWidth}
+        use={props.use}
+        compact={props.compact}
+        sideIndents={props.sideIndents}
+        loading={props.loading}
+        wMax={props.wMax}
+        h={props.h}
+        headerProps={{
+          sticky: props.sticky,
+          withScrollBar: props.withScrollBar,
+        }}
+        columns={columnsFixed}
+      />
+    </Flex>
+  );
+};
+
+const data = [
+  { keyword: 'ebay buy', kd: '77.8', cpc: '$1.25', vol: '32,500,000' },
+  { keyword: 'www.ebay.com', kd: '11.2', cpc: '$3.4', vol: '65,457,920' },
+  { keyword: 'www.ebay.com', kd: '10', cpc: '$0.65', vol: '47,354,640' },
+  { keyword: 'ebay buy', kd: '-', cpc: '$0', vol: 'n/a' },
+  { keyword: 'ebay buy', kd: '75.89', cpc: '$0', vol: '21,644,290' },
+  { keyword: 'ebay buy', kd: '77.8', cpc: '$1.25', vol: '32,500,000' },
+  { keyword: 'www.ebay.com', kd: '11.2', cpc: '$3.4', vol: '65,457,920' },
+  { keyword: 'www.ebay.com', kd: '10', cpc: '$0.65', vol: '47,354,640' },
+  { keyword: 'ebay buy', kd: '-', cpc: '$0', vol: 'n/a' },
+  { keyword: 'ebay buy', kd: '75.89', cpc: '$0', vol: '21,644,290' },
+];
+
+export const defaultProps: ScrollInTableProps = {
+  sideIndents: undefined,
+  use: undefined,
+  compact: false,
+  h: '200px',
+  wMax: '800px',
+  defaultGridTemplateColumnWidth: 'auto',
+  loading: undefined,
+  sticky: true,
+  withScrollBar: undefined,
+  multiLevel: false,
+};
+
+Demo.defaultProps = defaultProps;
+
+export default Demo;
diff --git a/stories/components/data-table/tests/examples/scroll-tests/sticky-header-accordion.tsx b/stories/components/data-table/tests/examples/scroll-tests/sticky-header-accordion.tsx
new file mode 100644
index 0000000000..a4c64bc02f
--- /dev/null
+++ b/stories/components/data-table/tests/examples/scroll-tests/sticky-header-accordion.tsx
@@ -0,0 +1,70 @@
+import { DataTable, ACCORDION } from '@semcore/ui/data-table';
+import type { DataTableData, DataTableProps } from '@semcore/ui/data-table';
+import React from 'react';
+
+export type StickyHeaderAccordionProps = {
+  sticky?: boolean;
+  withScrollBar?: boolean;
+  accordionMode?: DataTableProps<typeof data, any, any>['accordionMode'];
+};
+
+const Demo = (props: StickyHeaderAccordionProps) => {
+  return (
+    <>
+      <div style={{ height: '200px', background: '#f0f0f0' }}>Spacer above</div>
+      <DataTable
+        data={data}
+        aria-label='Accordion with sticky header'
+        wMax='400px'
+        headerProps={{
+          sticky: props.sticky,
+          withScrollBar: props.withScrollBar,
+        }}
+        accordionMode={props.accordionMode}
+        columns={[
+          { name: 'keyword', children: 'Keyword', gtcWidth: '200px' },
+          { name: 'kd', children: 'KD,%', gtcWidth: '200px' },
+          { name: 'cpc', children: 'CPC', gtcWidth: '200px' },
+          { name: 'vol', children: 'Vol.', gtcWidth: '200px' },
+        ]}
+      />
+      <div style={{ height: '400px', background: '#f0f0f0' }}>Spacer below</div>
+    </>
+  );
+};
+
+const data: DataTableData = [
+  {
+    keyword: 'ebay buy',
+    kd: '77.8',
+    cpc: '$1.25',
+    vol: '32,500,000',
+    [ACCORDION]: [
+      { keyword: 'nested 1', kd: '11.2', cpc: '$3.4', vol: '65,457,920' },
+      { keyword: 'nested 2', kd: '10', cpc: '$0.65', vol: '47,354,640' },
+    ],
+  },
+  {
+    keyword: 'www.ebay.com',
+    kd: '11.2',
+    cpc: '$3.4',
+    vol: '65,457,920',
+    [ACCORDION]: [
+      { keyword: 'nested 3', kd: '5.5', cpc: '$1.00', vol: '10,000,000' },
+    ],
+  },
+  { keyword: 'www.ebay.com', kd: '10', cpc: '$0.65', vol: '47,354,640' },
+  { keyword: 'ebay buy', kd: '-', cpc: '$0', vol: 'n/a' },
+  { keyword: 'ebay buy', kd: '75.89', cpc: '$0', vol: '21,644,290' },
+  { keyword: 'www.ebay.com', kd: '10', cpc: '$0.65', vol: '47,354,640' },
+];
+
+export const defaultProps: StickyHeaderAccordionProps = {
+  sticky: true,
+  withScrollBar: true,
+  accordionMode: 'independent',
+};
+
+Demo.defaultProps = defaultProps;
+
+export default Demo;
diff --git a/stories/components/data-table/tests/examples/scroll-tests/sticky-header-async-data.tsx b/stories/components/data-table/tests/examples/scroll-tests/sticky-header-async-data.tsx
new file mode 100644
index 0000000000..f0554b0bb9
--- /dev/null
+++ b/stories/components/data-table/tests/examples/scroll-tests/sticky-header-async-data.tsx
@@ -0,0 +1,60 @@
+import { DataTable } from '@semcore/ui/data-table';
+import type { DataTableData } from '@semcore/ui/data-table';
+import React from 'react';
+
+export type StickyHeaderAsyncDataProps = {
+  sticky?: boolean;
+  withScrollBar?: boolean;
+  wMax?: string;
+};
+
+const columns = [
+  { name: 'keyword', children: 'Keyword', gtcWidth: '200px' },
+  { name: 'kd', children: 'KD,%', gtcWidth: '200px' },
+  { name: 'cpc', children: 'CPC', gtcWidth: '200px' },
+  { name: 'vol', children: 'Vol.', gtcWidth: '200px' },
+  { name: 'extra', children: 'Extra', gtcWidth: '200px' },
+];
+
+const fullData: DataTableData = [
+  { keyword: 'ebay buy', kd: '77.8', cpc: '$1.25', vol: '32,500,000', extra: 'A' },
+  { keyword: 'www.ebay.com', kd: '11.2', cpc: '$3.4', vol: '65,457,920', extra: 'B' },
+  { keyword: 'www.ebay.com', kd: '10', cpc: '$0.65', vol: '47,354,640', extra: 'C' },
+  { keyword: 'ebay buy', kd: '-', cpc: '$0', vol: 'n/a', extra: 'D' },
+  { keyword: 'ebay buy', kd: '75.89', cpc: '$0', vol: '21,644,290', extra: 'E' },
+  { keyword: 'www.ebay.com', kd: '10', cpc: '$0.65', vol: '47,354,640', extra: 'F' },
+];
+
+const Demo = (props: StickyHeaderAsyncDataProps) => {
+  const [data, setData] = React.useState<DataTableData>([]);
+
+  return (
+    <>
+      <div style={{ height: '200px', background: '#f0f0f0' }}>Spacer above</div>
+      <button data-testid='load-data' onClick={() => setData(fullData)}>
+        Load data
+      </button>
+      <DataTable
+        data={data}
+        aria-label='Sticky header async data'
+        wMax={props.wMax}
+        headerProps={{
+          sticky: props.sticky,
+          withScrollBar: props.withScrollBar,
+        }}
+        columns={columns}
+      />
+      <div style={{ height: '400px', background: '#f0f0f0' }}>Spacer below</div>
+    </>
+  );
+};
+
+export const defaultProps: StickyHeaderAsyncDataProps = {
+  sticky: true,
+  withScrollBar: false,
+  wMax: '400px',
+};
+
+Demo.defaultProps = defaultProps;
+
+export default Demo;
diff --git a/stories/components/data-table/tests/examples/scroll-tests/sticky-header-dynamic-data.tsx b/stories/components/data-table/tests/examples/scroll-tests/sticky-header-dynamic-data.tsx
new file mode 100644
index 0000000000..e588fcbf78
--- /dev/null
+++ b/stories/components/data-table/tests/examples/scroll-tests/sticky-header-dynamic-data.tsx
@@ -0,0 +1,91 @@
+import { DataTable } from '@semcore/ui/data-table';
+import type { DataTableData } from '@semcore/ui/data-table';
+import React from 'react';
+
+export type StickyHeaderDynamicDataProps = {
+  sticky?: boolean;
+  withScrollBar?: boolean;
+  wMax?: string;
+};
+
+const columns = [
+  { name: 'keyword', children: 'Keyword', gtcWidth: '200px' },
+  { name: 'kd', children: 'KD,%', gtcWidth: '200px' },
+  { name: 'cpc', children: 'CPC', gtcWidth: '200px' },
+  { name: 'vol', children: 'Vol.', gtcWidth: '200px' },
+  { name: 'extra', children: 'Extra', gtcWidth: '200px' },
+];
+
+const emptyData: DataTableData = [];
+
+const shortData: DataTableData = [
+  { keyword: 'short', kd: '1', cpc: '$0', vol: '100', extra: 'A' },
+  { keyword: 'tiny', kd: '2', cpc: '$0', vol: '200', extra: 'B' },
+  { keyword: 'sm', kd: '3', cpc: '$1', vol: '300', extra: 'C' },
+];
+
+const fullData: DataTableData = [
+  { keyword: 'ebay buy', kd: '77.8', cpc: '$1.25', vol: '32,500,000', extra: 'A' },
+  { keyword: 'www.ebay.com', kd: '11.2', cpc: '$3.4', vol: '65,457,920', extra: 'B' },
+  { keyword: 'www.ebay.com', kd: '10', cpc: '$0.65', vol: '47,354,640', extra: 'C' },
+  { keyword: 'ebay buy', kd: '-', cpc: '$0', vol: 'n/a', extra: 'D' },
+  { keyword: 'ebay buy', kd: '75.89', cpc: '$0', vol: '21,644,290', extra: 'E' },
+  { keyword: 'www.ebay.com', kd: '10', cpc: '$0.65', vol: '47,354,640', extra: 'F' },
+];
+
+const wideData: DataTableData = [
+  { keyword: 'very long keyword text here', kd: '77.8', cpc: '$1,250.00', vol: '32,500,000,000', extra: 'Wide A' },
+  { keyword: 'another extremely long keyword', kd: '11.2', cpc: '$3,400.00', vol: '65,457,920,000', extra: 'Wide B' },
+  { keyword: 'www.ebay.com/very/long/path', kd: '10', cpc: '$0.65', vol: '47,354,640,000', extra: 'Wide C' },
+  { keyword: 'short', kd: '-', cpc: '$0', vol: 'n/a', extra: 'D' },
+  { keyword: 'medium keyword', kd: '75.89', cpc: '$0', vol: '21,644,290', extra: 'E' },
+];
+
+const Demo = (props: StickyHeaderDynamicDataProps) => {
+  const [data, setData] = React.useState<DataTableData>(emptyData);
+
+  return (
+    <>
+      <div style={{ height: '200px', background: '#f0f0f0', padding: '16px' }}>
+        <p style={{ marginBottom: '8px' }}>
+          Test dynamic data scenarios with sticky header:
+        </p>
+        <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+          <button data-testid='clear-data' onClick={() => setData(emptyData)}>
+            Clear (empty)
+          </button>
+          <button data-testid='load-data' onClick={() => setData(fullData)}>
+            Load data
+          </button>
+          <button data-testid='set-short' onClick={() => setData(shortData)}>
+            Short rows
+          </button>
+          <button data-testid='set-wide' onClick={() => setData(wideData)}>
+            Wide content
+          </button>
+        </div>
+      </div>
+      <DataTable
+        data={data}
+        aria-label='Sticky header dynamic data'
+        wMax={props.wMax}
+        headerProps={{
+          sticky: props.sticky,
+          withScrollBar: props.withScrollBar,
+        }}
+        columns={columns}
+      />
+      <div style={{ height: '400px', background: '#f0f0f0' }}>Spacer below</div>
+    </>
+  );
+};
+
+export const defaultProps: StickyHeaderDynamicDataProps = {
+  sticky: true,
+  withScrollBar: true,
+  wMax: '500px',
+};
+
+Demo.defaultProps = defaultProps;
+
+export default Demo;
diff --git a/stories/components/data-table/tests/examples/scroll-tests/sticky-header-hidden-column.tsx b/stories/components/data-table/tests/examples/scroll-tests/sticky-header-hidden-column.tsx
new file mode 100644
index 0000000000..692c9ecb21
--- /dev/null
+++ b/stories/components/data-table/tests/examples/scroll-tests/sticky-header-hidden-column.tsx
@@ -0,0 +1,109 @@
+import type { DataTableSort } from '@semcore/ui/data-table';
+import { DataTable } from '@semcore/ui/data-table';
+import Input from '@semcore/ui/input';
+import Pagination from '@semcore/ui/pagination';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+type ColumnKey = keyof (typeof allData)[0];
+
+const MAX_ROWS = 5;
+
+const allData = [
+  { keyword: 'ebay buy', kd: '77.8', cpc: '$1.25', vol: '32,500,000' },
+  { keyword: 'www.ebay.com', kd: '11.2', cpc: '$3.4', vol: '65,457,920' },
+  { keyword: 'www.ebay.com', kd: '10', cpc: '$0.65', vol: '47,354,640' },
+  { keyword: 'ebay buy', kd: '-', cpc: '$0', vol: 'n/a' },
+  { keyword: 'ebay buy', kd: '75.89', cpc: '$0', vol: '21,644,290' },
+  { keyword: 'ebay buy', kd: '77.8', cpc: '$1.25', vol: '32,500,000' },
+  { keyword: 'www.ebay.com', kd: '11.2', cpc: '$3.4', vol: '65,457,920' },
+  { keyword: 'www.ebay.com', kd: '10', cpc: '$0.65', vol: '47,354,640' },
+  { keyword: 'ebay buy', kd: '-', cpc: '$0', vol: 'n/a' },
+  { keyword: 'ebay buy', kd: '75.89', cpc: '$0', vol: '21,644,290' },
+];
+
+const Demo = () => {
+  const [search, setSearch] = useState('');
+  const [sort, setSort] = useState<DataTableSort<ColumnKey>>(['kd', 'desc']);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [loading, setLoading] = useState(false);
+  const [displayedData, setDisplayedData] = useState(() => allData.slice(0, MAX_ROWS));
+  const timerRef = useRef<ReturnType<typeof setTimeout>>();
+
+  const filteredData = useMemo(
+    () => allData.filter((row) => row.keyword.toLowerCase().includes(search.toLowerCase())),
+    [search],
+  );
+
+  const totalPages = Math.ceil(filteredData.length / MAX_ROWS);
+
+  const getPageData = useCallback(
+    (page: number) => filteredData.slice((page - 1) * MAX_ROWS, page * MAX_ROWS),
+    [filteredData],
+  );
+
+  useEffect(() => {
+    clearTimeout(timerRef.current);
+    setLoading(true);
+    timerRef.current = setTimeout(() => {
+      setDisplayedData(getPageData(currentPage));
+      setLoading(false);
+    }, 800);
+
+    return () => clearTimeout(timerRef.current);
+  }, [currentPage, getPageData]);
+
+  const handleSearchChange = useCallback((value: string) => {
+    setSearch(value);
+    setCurrentPage(1);
+  }, []);
+
+  const handleSortChange = useCallback((nextSort: DataTableSort<ColumnKey>) => {
+    setSort(nextSort);
+    setCurrentPage(1);
+  }, []);
+
+  return (
+    <>
+      <div style={{ height: '200px', background: '#f0f0f0', padding: '16px' }}>
+        Spacer above — scroll down to see sticky header
+      </div>
+      <div style={{ padding: '16px' }}>
+        <Input mb={3} wMax={300}>
+          <Input.Value
+            value={search}
+            onChange={handleSearchChange}
+            placeholder='Search by keyword...'
+          />
+        </Input>
+        <DataTable
+          data={displayedData}
+          sort={sort}
+          onSortChange={handleSortChange}
+          loading={loading}
+          aria-label='Table with sticky header and hidden column'
+          headerProps={{ sticky: true }}
+          columns={[
+            { name: 'keyword', children: 'Keyword', sortable: true },
+            { name: 'kd', children: 'KD %', sortable: true },
+            { name: 'cpc', children: 'CPC', sortable: true },
+            { name: 'hiddenColumn', children: 'Empty' },
+            { name: 'vol', children: 'Vol.', sortable: true },
+          ]}
+        />
+        {totalPages > 1 && (
+          <Pagination
+            mt={3}
+            currentPage={currentPage}
+            totalPages={totalPages}
+            onCurrentPageChange={setCurrentPage}
+          />
+        )}
+      </div>
+      <div style={{ height: '600px', background: '#f0f0f0', padding: '16px' }}>
+        Spacer below
+      </div>
+    </>
+  );
+};
+
+export default Demo;
diff --git a/stories/components/data-table/tests/examples/scroll-tests/sticky-header-loading-focus.tsx b/stories/components/data-table/tests/examples/scroll-tests/sticky-header-loading-focus.tsx
new file mode 100644
index 0000000000..7e9d5ef25c
--- /dev/null
+++ b/stories/components/data-table/tests/examples/scroll-tests/sticky-header-loading-focus.tsx
@@ -0,0 +1,68 @@
+import { DataTable } from '@semcore/ui/data-table';
+import type { DataTableData } from '@semcore/ui/data-table';
+import React from 'react';
+
+export type StickyHeaderLoadingFocusProps = {
+  sticky?: boolean;
+  withScrollBar?: boolean;
+  wMax?: string;
+};
+
+const data: DataTableData = [
+  { keyword: 'ebay buy', kd: '77.8', cpc: '$1.25', vol: '32,500,000' },
+  { keyword: 'www.ebay.com', kd: '11.2', cpc: '$3.4', vol: '65,457,920' },
+  { keyword: 'www.ebay.com', kd: '10', cpc: '$0.65', vol: '47,354,640' },
+  { keyword: 'ebay buy', kd: '-', cpc: '$0', vol: 'n/a' },
+  { keyword: 'ebay buy', kd: '75.89', cpc: '$0', vol: '21,644,290' },
+  { keyword: 'www.ebay.com', kd: '10', cpc: '$0.65', vol: '47,354,640' },
+];
+
+const Demo = (props: StickyHeaderLoadingFocusProps) => {
+  const [loading, setLoading] = React.useState(false);
+
+  const handleToggleLoading = () => {
+    setLoading(true);
+    setTimeout(() => setLoading(false), 2000);
+  };
+
+  return (
+    <>
+      <div style={{ height: '200px', background: '#f0f0f0', padding: '16px' }}>
+        <p>
+          Focus a cell in the table below, then click "Trigger loading" to verify that focus moves
+          to the grid container during loading state.
+        </p>
+        <button data-testid='trigger-loading' onClick={handleToggleLoading} disabled={loading}>
+          {loading ? 'Loading...' : 'Trigger loading (2s)'}
+        </button>
+      </div>
+      <DataTable
+        data={data}
+        aria-label='Loading focus management'
+        wMax={props.wMax}
+        loading={loading}
+        headerProps={{
+          sticky: props.sticky,
+          withScrollBar: props.withScrollBar,
+        }}
+        columns={[
+          { name: 'keyword', children: 'Keyword', gtcWidth: '200px' },
+          { name: 'kd', children: 'KD,%', gtcWidth: '150px' },
+          { name: 'cpc', children: 'CPC', gtcWidth: '150px' },
+          { name: 'vol', children: 'Vol.', gtcWidth: '150px' },
+        ]}
+      />
+      <div style={{ height: '400px', background: '#f0f0f0' }}>Spacer below</div>
+    </>
+  );
+};
+
+export const defaultProps: StickyHeaderLoadingFocusProps = {
+  sticky: true,
+  withScrollBar: false,
+  wMax: '800px',
+};
+
+Demo.defaultProps = defaultProps;
+
+export default Demo;
diff --git a/stories/components/data-table/tests/examples/scroll-tests/sticky-header-scroll-sync.tsx b/stories/components/data-table/tests/examples/scroll-tests/sticky-header-scroll-sync.tsx
new file mode 100644
index 0000000000..0568b558d6
--- /dev/null
+++ b/stories/components/data-table/tests/examples/scroll-tests/sticky-header-scroll-sync.tsx
@@ -0,0 +1,105 @@
+import type { BoxProps } from '@semcore/ui/base-components';
+import { Flex } from '@semcore/ui/base-components';
+import { DataTable } from '@semcore/ui/data-table';
+import type { DataTableData } from '@semcore/ui/data-table';
+import { Text } from '@semcore/ui/typography';
+import React from 'react';
+
+export type StickyHeaderScrollSyncProps = {
+  sticky: boolean;
+  withScrollBar?: boolean;
+  multiLevel?: boolean;
+  limitEnabled?: boolean;
+  rowsLimit?: number;
+  columnsLimit?: number;
+} & BoxProps;
+
+const flatColumns = [
+  { name: 'keyword', children: 'Keyword', gtcWidth: '200px' },
+  { name: 'kd', children: 'KD,%', gtcWidth: '200px' },
+  { name: 'cpc', children: 'CPC', gtcWidth: '200px' },
+  { name: 'vol', children: 'Vol.', gtcWidth: '200px' },
+  { name: 'extra', children: 'Extra', gtcWidth: '200px' },
+];
+
+const multiLevelColumns = [
+  { name: 'keyword', children: 'Keyword', gtcWidth: '200px' },
+  {
+    name: 'group1',
+    children: 'Group 1',
+    columns: [
+      { name: 'kd', children: 'KD,%', gtcWidth: '200px' },
+      { name: 'cpc', children: 'CPC', gtcWidth: '200px' },
+    ],
+  },
+  {
+    name: 'group2',
+    children: 'Group 2',
+    columns: [
+      { name: 'vol', children: 'Vol.', gtcWidth: '200px' },
+      { name: 'extra', children: 'Extra', gtcWidth: '200px' },
+    ],
+  },
+];
+
+const Demo = (props: StickyHeaderScrollSyncProps) => {
+  return (
+    <>
+      <div style={{ height: '200px', background: '#f0f0f0' }}>Spacer above</div>
+      <DataTable
+        data={data}
+        aria-label='Sticky header scroll sync'
+        wMax={props.wMax}
+        headerProps={{
+          sticky: props.sticky,
+          withScrollBar: props.withScrollBar,
+        }}
+        columns={props.multiLevel ? multiLevelColumns : flatColumns}
+        limit={
+          props.limitEnabled
+            ? {
+                fromRow: props.rowsLimit,
+                fromColumn: props.columnsLimit,
+                renderOverlay() {
+                  return (
+                    <Flex alignItems='center' direction='column' gap={3} py={6} wMax={320}>
+                      <Text size={300} fontWeight='bold' textAlign='center'>
+                        You've reached your report limit for today
+                      </Text>
+                      <Text size={200} textAlign='center'>
+                        To increase your daily report limit, upgrade to a Guru plan.
+                      </Text>
+                    </Flex>
+                  );
+                },
+              }
+            : undefined
+        }
+      />
+      <div style={{ height: '400px', background: '#f0f0f0' }}>Spacer below</div>
+    </>
+  );
+};
+
+const data: DataTableData = [
+  { keyword: 'ebay buy', kd: '77.8', cpc: '$1.25', vol: '32,500,000', extra: 'A' },
+  { keyword: 'www.ebay.com', kd: '11.2', cpc: '$3.4', vol: '65,457,920', extra: 'B' },
+  { keyword: 'www.ebay.com', kd: '10', cpc: '$0.65', vol: '47,354,640', extra: 'C' },
+  { keyword: 'ebay buy', kd: '-', cpc: '$0', vol: 'n/a', extra: 'D' },
+  { keyword: 'ebay buy', kd: '75.89', cpc: '$0', vol: '21,644,290', extra: 'E' },
+  { keyword: 'www.ebay.com', kd: '10', cpc: '$0.65', vol: '47,354,640', extra: 'F' },
+];
+
+export const defaultProps: StickyHeaderScrollSyncProps = {
+  sticky: true,
+  withScrollBar: true,
+  multiLevel: false,
+  wMax: '400px',
+  limitEnabled: false,
+  rowsLimit: 3,
+  columnsLimit: 3,
+};
+
+Demo.defaultProps = defaultProps;
+
+export default Demo;
diff --git a/stories/components/data-table/tests/examples/scroll-tests/sticky-header-sorting.tsx b/stories/components/data-table/tests/examples/scroll-tests/sticky-header-sorting.tsx
new file mode 100644
index 0000000000..3ca82e7370
--- /dev/null
+++ b/stories/components/data-table/tests/examples/scroll-tests/sticky-header-sorting.tsx
@@ -0,0 +1,74 @@
+import type { BoxProps } from '@semcore/ui/base-components';
+import type { DataTableSort } from '@semcore/ui/data-table';
+import { DataTable } from '@semcore/ui/data-table';
+import React from 'react';
+
+type SortableColumn = 'kd' | 'cpc' | 'vol';
+export type StickyHeaderSortingProps = {
+  sticky: boolean;
+  withScrollBar?: boolean;
+  fixedFirstColumn?: boolean;
+  fixedLastColumn?: boolean;
+} & BoxProps;
+
+type ColumnName = keyof (typeof data)[0];
+
+const Demo = (props: StickyHeaderSortingProps) => {
+  const [sort, setSort] = React.useState<DataTableSort<ColumnName>>(['kd', 'desc']);
+
+  const sortedData = React.useMemo(
+    () =>
+      [...data].sort((aRow, bRow) => {
+        const [prop, sortDirection] = sort;
+        const a = aRow[prop as SortableColumn];
+        const b = bRow[prop as SortableColumn];
+        if (a === b) return 0;
+        if (sortDirection === 'asc') return a > b ? 1 : -1;
+        return a > b ? -1 : 1;
+      }),
+    [sort],
+  );
+
+  return (
+    <>
+      <div style={{ height: '200px', background: '#f0f0f0' }}>Spacer above</div>
+      <DataTable
+        data={sortedData}
+        sort={sort}
+        onSortChange={setSort}
+        aria-label='Sorting with sticky header'
+        wMax={props.wMax}
+        headerProps={{
+          sticky: props.sticky,
+          withScrollBar: props.withScrollBar,
+        }}
+        columns={[
+          { name: 'keyword', children: 'Keyword', gtcWidth: '200px', fixed: props.fixedFirstColumn ? 'left' as const : undefined },
+          { name: 'kd', children: 'KD,%', gtcWidth: '200px', sortable: true },
+          { name: 'cpc', children: 'CPC', gtcWidth: '200px', sortable: true },
+          { name: 'vol', children: 'Vol.', gtcWidth: '200px', sortable: true, fixed: props.fixedLastColumn ? 'right' as const : undefined },
+        ]}
+      />
+      <div style={{ height: '400px', background: '#f0f0f0' }}>Spacer below</div>
+    </>
+  );
+};
+
+const data = [
+  { keyword: 'ebay buy', kd: 77.8, cpc: 1.25, vol: 32500000 },
+  { keyword: 'www.ebay.com', kd: 11.2, cpc: 3.4, vol: 65457920 },
+  { keyword: 'www.ebay.com', kd: 10, cpc: 0.65, vol: 47354640 },
+  { keyword: 'ebay buy', kd: 0, cpc: 0, vol: 0 },
+  { keyword: 'ebay buy', kd: 75.89, cpc: 0, vol: 21644290 },
+  { keyword: 'www.ebay.com', kd: 10, cpc: 0.65, vol: 47354640 },
+];
+
+export const defaultProps: StickyHeaderSortingProps = {
+  sticky: true,
+  withScrollBar: true,
+  wMax: '400px',
+  fixedFirstColumn: false,
+  fixedLastColumn: false,
+};
+
+export default Demo;
diff --git a/stories/components/data-table/tests/examples/scroll-tests/sticky-header-with-animation.tsx b/stories/components/data-table/tests/examples/scroll-tests/sticky-header-with-animation.tsx
new file mode 100644
index 0000000000..2ae7275c04
--- /dev/null
+++ b/stories/components/data-table/tests/examples/scroll-tests/sticky-header-with-animation.tsx
@@ -0,0 +1,110 @@
+import { DataTable } from '@semcore/ui/data-table';
+import type { DataTableData } from '@semcore/ui/data-table';
+import React from 'react';
+
+export type StickyHeaderWithAnimationProps = {
+  sticky?: boolean;
+  withScrollBar?: boolean;
+  animationDuration?: number;
+  top?: number;
+  wMax?: string;
+};
+
+const data: DataTableData = [
+  { keyword: 'ebay buy', kd: '77.8', cpc: '$1.25', vol: '32,500,000' },
+  { keyword: 'www.ebay.com', kd: '11.2', cpc: '$3.4', vol: '65,457,920' },
+  { keyword: 'www.ebay.com', kd: '10', cpc: '$0.65', vol: '47,354,640' },
+  { keyword: 'ebay buy', kd: '-', cpc: '$0', vol: 'n/a' },
+  { keyword: 'ebay buy', kd: '75.89', cpc: '$0', vol: '21,644,290' },
+  { keyword: 'www.ebay.com', kd: '11.2', cpc: '$3.4', vol: '65,457,920' },
+  { keyword: 'www.ebay.com', kd: '10', cpc: '$0.65', vol: '47,354,640' },
+  { keyword: 'ebay buy', kd: '-', cpc: '$0', vol: 'n/a' },
+  { keyword: 'ebay buy', kd: '75.89', cpc: '$0', vol: '21,644,290' },
+  { keyword: 'www.ebay.com', kd: '11.2', cpc: '$3.4', vol: '65,457,920' },
+];
+
+const TOOLBAR_HEIGHT = 60;
+
+const Demo = (props: StickyHeaderWithAnimationProps) => {
+  const [toolbarVisible, setToolbarVisible] = React.useState(true);
+  const top = toolbarVisible ? (props.top ?? TOOLBAR_HEIGHT) : 0;
+
+  return (
+    <div style={{ height: '400px', overflow: 'auto' }}>
+      <div
+        style={{
+          position: 'sticky',
+          top: 0,
+          zIndex: 100,
+          height: toolbarVisible ? TOOLBAR_HEIGHT : 0,
+          overflow: 'hidden',
+          background: '#5028c8',
+          color: '#fff',
+          display: 'flex',
+          alignItems: 'center',
+          padding: toolbarVisible ? '0 16px' : '0',
+          transition: `height ${props.animationDuration ?? 300}ms ease-out`,
+        }}
+      >
+        Sticky toolbar ({TOOLBAR_HEIGHT}px)
+      </div>
+
+      <div
+        style={{
+          position: 'sticky',
+          top: 0,
+          zIndex: 99,
+          background: '#f0f0f0',
+          padding: '8px 16px',
+          borderBottom: '1px solid #d3d3d3',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '12px',
+        }}
+      >
+        <button onClick={() => setToolbarVisible((v) => !v)}>
+          {toolbarVisible ? 'Hide toolbar' : 'Show toolbar'}
+        </button>
+        <span style={{ fontSize: '12px', color: '#666' }}>
+          Header top: {top}px — scroll down to see the sticky header animate
+        </span>
+      </div>
+
+      <div style={{ height: '200px', background: '#fafafa', padding: '16px' }}>
+        Content above table — scroll down until the table header sticks, then toggle the toolbar
+      </div>
+
+      <DataTable
+        data={data}
+        aria-label='Sticky header with animation'
+        wMax={props.wMax}
+        headerProps={{
+          sticky: props.sticky,
+          withScrollBar: props.withScrollBar,
+          top,
+          animationDuration: props.animationDuration,
+        }}
+        columns={[
+          { name: 'keyword', children: 'Keyword', gtcWidth: '200px' },
+          { name: 'kd', children: 'KD,%', gtcWidth: '150px' },
+          { name: 'cpc', children: 'CPC', gtcWidth: '150px' },
+          { name: 'vol', children: 'Vol.', gtcWidth: '150px' },
+        ]}
+      />
+
+      <div style={{ height: '600px', background: '#f0f0f0', padding: '16px' }}>Spacer below</div>
+    </div>
+  );
+};
+
+export const defaultProps: StickyHeaderWithAnimationProps = {
+  sticky: true,
+  withScrollBar: false,
+  animationDuration: 300,
+  top: TOOLBAR_HEIGHT,
+  wMax: '800px',
+};
+
+Demo.defaultProps = defaultProps;
+
+export default Demo;
diff --git a/stories/components/data-table/tests/examples/scroll-tests/with-fixed-column.tsx b/stories/components/data-table/tests/examples/scroll-tests/with-fixed-column.tsx
new file mode 100644
index 0000000000..38396b8abe
--- /dev/null
+++ b/stories/components/data-table/tests/examples/scroll-tests/with-fixed-column.tsx
@@ -0,0 +1,91 @@
+import type { BoxProps } from '@semcore/ui/base-components';
+import { DataTable } from '@semcore/ui/data-table';
+import type { DataTableProps } from '@semcore/ui/data-table';
+import React from 'react';
+
+export type WithFixedColumnProps = {
+  use?: DataTableProps<typeof data, any, any>['use'];
+  compact?: DataTableProps<typeof data, any, any>['compact'];
+  loading?: DataTableProps<typeof data, any, any>['loading'];
+  defaultGridTemplateColumnWidth?: DataTableProps<typeof data, any, any>['defaultGridTemplateColumnWidth'];
+  sticky?: boolean;
+  withScrollBar?: boolean;
+  sideIndents?: DataTableProps<typeof data, any, any>['sideIndents'];
+  multiLevel?: boolean;
+} & BoxProps;
+
+const oneLevelColumns = [
+  { name: 'keyword', children: 'Keyword', fixed: 'left' as const, gtcWidth: '150px' },
+  { name: 'kd', children: 'KD,%', fixed: 'left' as const, gtcWidth: '200px' },
+  { name: 'kd2', children: 'KD,%', gtcWidth: '200px' },
+  { name: 'cpc', children: 'CPC', gtcWidth: '300px' },
+  { name: 'cpc2', children: 'CPC', gtcWidth: '100px' },
+  { name: 'vol', children: 'Vol.', gtcWidth: '80px', fixed: 'right' as const },
+];
+
+const multiLevelColumns = [
+  {
+    name: 'group1',
+    children: 'Borders right Fixed left',
+    borders: 'right' as const,
+    fixed: 'left' as const,
+    columns: [
+      { name: 'keyword', children: 'Keyword', gtcWidth: '150px' },
+      { name: 'kd', children: 'KD,%', gtcWidth: '100px' },
+    ],
+  },
+  { name: 'cpc', children: 'CPC', gtcWidth: '150px' },
+  { name: 'cpc2', children: 'CPC', gtcWidth: '250px' },
+  { name: 'vol', children: 'Vol.', gtcWidth: '100px', fixed: 'right' as const },
+];
+
+const Demo = (props: WithFixedColumnProps) => {
+  const columns = props.multiLevel ? multiLevelColumns : oneLevelColumns;
+
+  return (
+    <DataTable
+      data={data}
+      aria-label={props.multiLevel ? 'Fixed multi level header with fixed columns' : 'Fixed columns'}
+      defaultGridTemplateColumnWidth={props.defaultGridTemplateColumnWidth}
+      use={props.use}
+      compact={props.compact}
+      sideIndents={props.sideIndents}
+      loading={props.loading}
+      wMax={props.wMax}
+      h={props.h}
+      headerProps={{
+        sticky: props.sticky,
+        withScrollBar: props.withScrollBar,
+      }}
+      columns={columns}
+    />
+  );
+};
+
+const data = [
+  { keyword: 'ebay buy', kd: '77.8', cpc: '$1.25', vol: '32,500,000' },
+  { keyword: 'www.ebay.com', kd: '11.2', cpc: '$3.4', vol: '65,457,920' },
+  { keyword: 'www.ebay.com', kd: '10', cpc: '$0.65', vol: '47,354,640' },
+  { keyword: 'ebay buy', kd: '-', cpc: '$0', vol: 'n/a' },
+  { keyword: 'ebay buy', kd: '75.89', cpc: '$0', vol: '21,644,290' },
+  { keyword: 'www.ebay.com', kd: '10', cpc: '$0.65', vol: '47,354,640' },
+  { keyword: 'ebay buy', kd: '-', cpc: '$0', vol: 'n/a' },
+  { keyword: 'ebay buy', kd: '75.89', cpc: '$0', vol: '21,644,290' },
+];
+
+export const defaultProps: WithFixedColumnProps = {
+  sideIndents: undefined,
+  use: undefined,
+  compact: false,
+  h: '300px',
+  wMax: '600px',
+  defaultGridTemplateColumnWidth: 'auto',
+  loading: undefined,
+  sticky: true,
+  withScrollBar: false,
+  multiLevel: false,
+};
+
+Demo.defaultProps = defaultProps;
+
+export default Demo;