Merge pull request #331 from icflorescu/next

Add scrollAreaProps
icflorescu · Jun 12, 2023 · 5e7b385 · 5e7b385
2 parents 06f44e9 + d94ae68
commit 5e7b385
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 2.6.0 (2023-06-12)
+
+- Accept `scrollAreaProps` (issue [#327](https://github.com/icflorescu/mantine-datatable/issues/327)/ PR [#328](https://github.com/icflorescu/mantine-datatable/issues/327))
+
 ## 2.5.6 (2023-06-06)
 
 - Allow `idAccessor` to be a string **or** a function, in order to support composite keys (issue #315)

diff --git a/docs/examples/ScrollableVsAutoHeightExamples.tsx b/docs/examples/ScrollableVsAutoHeightExamples.tsx
@@ -35,3 +35,21 @@ export function AutoHeightExample() {
   );
   // example-end
 }
+
+export function ScrollAreaPropsExample() {
+  return (
+    // example-start scroll-area-props
+    <DataTable
+      height={300}
+      // example-skip other props
+      withBorder
+      withColumnBorders
+      striped
+      records={records}
+      columns={[{ accessor: 'firstName' }, { accessor: 'lastName' }, { accessor: 'email' }]}
+      // example-resume
+      scrollAreaProps={{ type: 'never' }}
+    />
+    // example-end
+  );
+}
diff --git a/docs/pages/examples/scrollable-vs-auto-height.tsx b/docs/pages/examples/scrollable-vs-auto-height.tsx
@@ -1,17 +1,22 @@
-import { Code, Container, createStyles, Paper, Switch } from '@mantine/core';
+import { Code, Container, Paper, Switch, createStyles } from '@mantine/core';
 import { GetStaticProps, InferGetStaticPropsType } from 'next';
 import { useState } from 'react';
 import CodeBlock from '~/components/CodeBlock';
 import ExternalLink from '~/components/ExternalLink';
 import PageNavigation from '~/components/PageNavigation';
+import PageSubtitle from '~/components/PageSubtitle';
 import PageText from '~/components/PageText';
 import PageTitle from '~/components/PageTitle';
-import { AutoHeightExample, ScrollableExample } from '~/examples/ScrollableVsAutoHeightExamples';
+import {
+  AutoHeightExample,
+  ScrollAreaPropsExample,
+  ScrollableExample,
+} from '~/examples/ScrollableVsAutoHeightExamples';
 import readCodeExample from '~/lib/readCodeExample';
 
 const PATH = 'examples/scrollable-vs-auto-height';
 
-type ExampleName = 'scrollable' | 'auto-height';
+type ExampleName = 'scrollable' | 'auto-height' | 'scroll-area-props';
 
 export const getStaticProps: GetStaticProps<{
   code: Record<ExampleName, string>;
@@ -56,6 +61,16 @@ export default function Page({ code }: InferGetStaticPropsType<typeof getStaticP
         container width.
       </PageText>
       <CodeBlock language="typescript" content={code[scrollable ? 'scrollable' : 'auto-height']} />
+      <PageSubtitle value="Customize the underlying ScrollArea" />
+      <PageText>
+        You can customize the underlying scroll area by passing <Code>scrollAreaProps</Code> to the{' '}
+        <Code>DataTable</Code> component. The <Code>scrollAreaProps</Code> accepts a subset of{' '}
+        <ExternalLink to="https://mantine.dev/core/scroll-area/?t=props">Mantine ScrollArea props</ExternalLink>:{' '}
+        <Code>type</Code>, <Code>scrollbarSize</Code> and <Code>scrollHideDelay</Code>. For instance, here’s how you
+        could make the scrollbars invisible:
+      </PageText>
+      <CodeBlock language="typescript" content={code['scroll-area-props']} />
+      <ScrollAreaPropsExample />
       <PageNavigation of={PATH} />
     </Container>
   );

diff --git a/package/DataTable.tsx b/package/DataTable.tsx
@@ -164,6 +164,7 @@ export default function DataTable<T>({
   rowSx,
   customRowAttributes,
   scrollViewportRef: scrollViewportRefProp,
+  scrollAreaProps,
   bodyRef,
   m,
   my,
@@ -318,6 +319,7 @@ export default function DataTable<T>({
         headerHeight={headerHeight}
         footerHeight={footerHeight}
         onScrollPositionChange={handleScrollPositionChange}
+        scrollAreaProps={scrollAreaProps}
       >
         <Table
           ref={tableRef}

diff --git a/package/DataTableScrollArea.tsx b/package/DataTableScrollArea.tsx
@@ -1,4 +1,4 @@
-import { Box, createStyles, ScrollArea } from '@mantine/core';
+import { Box, createStyles, ScrollArea, ScrollAreaProps } from '@mantine/core';
 import { Ref, type ReactNode } from 'react';
 
 const useStyles = createStyles((theme) => {
@@ -84,6 +84,7 @@ type DataTableScrollAreaProps = {
   footerHeight: number;
   onScrollPositionChange: () => void;
   viewportRef: Ref<HTMLDivElement>;
+  scrollAreaProps?: Omit<ScrollAreaProps, 'classNames' | 'styles' | 'onScrollPositionChange'>;
   children: ReactNode;
 };
 
@@ -97,11 +98,13 @@ export default function DataTableScrollArea({
   onScrollPositionChange,
   children,
   viewportRef,
+  scrollAreaProps,
 }: DataTableScrollAreaProps) {
   const bottom = footerHeight ? footerHeight - 1 : 0;
   const { cx, classes } = useStyles();
   return (
     <ScrollArea
+      {...scrollAreaProps}
       viewportRef={viewportRef}
       classNames={{ root: classes.root, scrollbar: classes.scrollbar, thumb: classes.thumb, corner: classes.corner }}
       styles={{ scrollbar: { marginTop: headerHeight, marginBottom: bottom } }}

diff --git a/package/types/DataTableProps.ts b/package/types/DataTableProps.ts
@@ -1,4 +1,4 @@
-import type { DefaultProps, MantineShadow, MantineTheme, Sx, TableProps } from '@mantine/core';
+import type { DefaultProps, MantineShadow, MantineTheme, ScrollAreaProps, Sx, TableProps } from '@mantine/core';
 import type { CSSProperties, Key, MouseEvent, ReactNode, RefObject } from 'react';
 import type { DataTableCellClickHandler } from './DataTableCellClickHandler';
 import type { DataTableColumn } from './DataTableColumn';
@@ -163,6 +163,10 @@ export type DataTableProps<T> = {
    */
   scrollViewportRef?: RefObject<HTMLDivElement>;
 
+  /**
+   * Additional props passed to the underlying `ScrollArea` element
+   */
+  scrollAreaProps?: Omit<ScrollAreaProps, 'classNames' | 'styles' | 'onScrollPositionChange'>;
   /**
    * Ref pointing to the table body element
    */