Feature: Use Mantine ScrollArea

apps/mantine-react-table-docs/components/navigation/routes.ts

@@ -296,6 +296,10 @@ export const routes: Array<RouteItem> = [
             href: '/docs/examples/virtualized',
             label: 'Fully Virtualized Example',
           },
+          {
+            href: '/docs/examples/virtualized-with-scroll-area',
+            label: 'Fully Virtualized With ScrollArea Example',
+          },
           {
             href: '/docs/examples/row-virtualization',
             label: 'Row Virtualization Example',
@@ -308,6 +312,10 @@ export const routes: Array<RouteItem> = [
             href: '/docs/examples/infinite-scrolling',
             label: 'Infinite Scrolling Example',
           },
+          {
+            href: '/docs/examples/infinite-scrolling-with-scroll-area',
+            label: 'Infinite Scrolling With ScrollArea Example',
+          },
         ],
       },
       {

apps/mantine-react-table-docs/components/prop-tables/tableOptions.ts

@@ -1451,6 +1451,16 @@ export const tableOptions: TableOption[] = [
     source: 'Mantine',
     type: 'BoxProps | ({ table }) => BoxProps',
   },
+  {
+    tableOption: 'mantineScrollAreaProps',
+    defaultValue: '',
+    description: '',
+    link: 'https://mantine.dev/core/scroll-area/?t=props',
+    linkText: 'Mantine ScrollArea Docs',
+    required: false,
+    source: 'Mantine',
+    type: 'ScrollAreaProps | ({ table }) => ScrollAreaProps',
+  },
   {
     tableOption: 'mantineTopToolbarProps',
     defaultValue: '',
@@ -2120,4 +2130,14 @@ export const tableOptions: TableOption[] = [
     source: 'MRT',
     type: 'MutableRefObject<Virtualizer | null>',
   },
+  {
+    tableOption: 'withScrollArea',
+    defaultValue: '',
+    description: 'When true, the table will be wrapped in a mantine ScrollArea component. Props can be provided via the mantineScrollAreaProps option.',
+    link: 'https://mantine.dev/core/scroll-area/?t=props',
+    linkText: 'Mantine ScrollArea Docs',
+    required: false,
+    source: 'Mantine',
+    type: 'boolean'
+  }
 ];

apps/mantine-react-table-docs/example-groups/VirtualizedExamples.tsx

@@ -0,0 +1,56 @@
+import { useRouter } from 'next/router';
+import { Box, Tabs } from '@mantine/core';
+import Virtualized from '../examples/virtualized';
+import VirtualizedWithScrollArea from '../examples/virtualized-with-scroll-area';
+import InfiniteScrollingNativeScroll from '../examples/infinite-scrolling';
+import InfiniteScrollingWithScrollArea from '../examples/infinite-scrolling-with-scroll-area';
+import { useState } from 'react';
+import Link from 'next/link';
+import { IconExternalLink } from '@tabler/icons-react';
+
+const InfiniteScrollingExamples = ({ isPage = false }) => {
+  const { pathname, push } = useRouter();
+  const [activeTab, setActiveTab] = useState('infinite-scrolling');
+
+  return (
+    <>
+      <Box style={{ width: '100%', marginTop: '1rem' }}>
+        <Tabs
+          value={isPage ? pathname.split('/').pop() : activeTab}
+          onChange={(newPath) =>
+            isPage && newPath !== 'more'
+              ? push(newPath as string)
+              : setActiveTab(newPath as string)
+          }
+          keepMounted={false}
+        >
+          <Tabs.List>
+            <Tabs.Tab value="virtualized">Virtualization</Tabs.Tab>
+            <Tabs.Tab value="virtualized-with-scroll-area">Virtualization with ScrollArea</Tabs.Tab>
+            <Tabs.Tab value="infinite-scrolling">Infinite Scrolling with Native Scroll</Tabs.Tab>
+            <Tabs.Tab value="infinite-scrolling-with-scroll-area">Infinite Scrolling with ScrollArea</Tabs.Tab>
+            <Link href="/docs/examples">
+              <Tabs.Tab value="more">
+                More Examples <IconExternalLink size="1rem" />
+              </Tabs.Tab>
+            </Link>
+          </Tabs.List>
+          <Tabs.Panel value="virtualized">
+            <Virtualized />
+          </Tabs.Panel>
+          <Tabs.Panel value="virtualized-with-scroll-area">
+            <VirtualizedWithScrollArea />
+          </Tabs.Panel>
+          <Tabs.Panel value="infinite-scrolling">
+            <InfiniteScrollingNativeScroll />
+          </Tabs.Panel>
+          <Tabs.Panel value="infinite-scrolling-with-scroll-area">
+            <InfiniteScrollingWithScrollArea />
+          </Tabs.Panel>
+        </Tabs>
+      </Box>
+    </>
+  );
+};
+
+export default InfiniteScrollingExamples;

apps/mantine-react-table-docs/examples/infinite-scrolling-with-scroll-area/index.tsx

@@ -0,0 +1,20 @@
+import { SourceCodeSnippet } from '../../components/mdx/SourceCodeSnippet';
+import Example from './sandbox/src/TS';
+
+const TS = require('!!raw-loader!./sandbox/src/TS.tsx').default;
+const API = require('!!raw-loader!./../../pages/api/data').default;
+
+const ExampleTable = () => {
+  return (
+    <>
+      <SourceCodeSnippet
+        Component={Example}
+        apiCode={API}
+        typeScriptCode={TS}
+        tableId="infinite-scrolling"
+      />
+    </>
+  );
+};
+
+export default ExampleTable;

apps/mantine-react-table-docs/examples/infinite-scrolling-with-scroll-area/sandbox/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local

apps/mantine-react-table-docs/examples/infinite-scrolling-with-scroll-area/sandbox/README.md

@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm run start` or `yarn start`

apps/mantine-react-table-docs/examples/infinite-scrolling-with-scroll-area/sandbox/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Mantine React Table Example</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>