Optimize scroll-triggered rerendering

CHANGELOG.md

@@ -5,9 +5,11 @@ Minor versions that are not listed in the changelog are bug fixes and small impr
 
 ## 7.8.0 (2024-04-12)
 
-- Update dev dependencies to ensure compatibility with Mantine 7.8 and Next.js 14.2.0
+- Update peer dependencies to Mantine 7.8
 - Remove `useDragToggleColumns` hook, previously deprecated in favor of `useDataTableColumns`
 - Make the scroll shadows gentler, especially in dark mode
+- Optimize scroll-triggered re-renders by using a `debouncedProcessScrolling` method
+- Implement `maxHeight` property
 
 ## 7.7.0 (2024-04-04)
 

app/examples/complex-usage-scenario/ComplexUsageExample.tsx

@@ -13,7 +13,7 @@ import { Employee } from '~/data';
 import { getEmployeesAsync } from '~/data/async';
 import classes from './ComplexUsageExample.module.css';
 
-const PAGE_SIZE = 20;
+const PAGE_SIZE = 100;
 
 export function ComplexUsageExample() {
   const { showContextMenu, hideContextMenu } = useContextMenu();
@@ -227,7 +227,9 @@ export function ComplexUsageExample() {
 
   return (
     <DataTable
-      height={400}
+      height="70dvh"
+      minHeight={400}
+      maxHeight={1000}
       withTableBorder
       highlightOnHover
       borderRadius="sm"

app/examples/empty-state/page.tsx

@@ -36,6 +36,7 @@ export default async function EmptyStateExamplePage() {
   return (
     <>
       <PageTitle of={PATH} />
+      <Code hidden>minHeight</Code>
       <Txt>
         If <Code>records</Code> property points to an empty array, the <Code>DataTable</Code> component will indicate
         its empty state by displaying a customizable icon and text, like so:

package.json

@@ -113,8 +113,8 @@
     "webpack": "^5.91.0"
   },
   "peerDependencies": {
-    "@mantine/core": "7 <= 7.7.0 || >= 7.7.2",
-    "@mantine/hooks": "7 <= 7.7.0 || >= 7.7.2",
+    "@mantine/core": ">=7.8",
+    "@mantine/hooks": ">=7.8",
     "clsx": ">=2",
     "react": ">=18.2"
   }

package/DataTable.tsx

@@ -1,5 +1,5 @@
 import { Box, Table, type MantineSize } from '@mantine/core';
-import { useMergedRef } from '@mantine/hooks';
+import { useDebounceCallback, useMergedRef } from '@mantine/hooks';
 import clsx from 'clsx';
 import { useCallback, useMemo, useState } from 'react';
 import { DataTableColumnsProvider } from './DataTableDragToggleProvider';
@@ -29,6 +29,7 @@ export function DataTable<T>({
   textSelectionDisabled,
   height = '100%',
   minHeight,
+  maxHeight,
   shadow,
   verticalAlign = 'center',
   fetching,
@@ -204,12 +205,14 @@ export function DataTable<T>({
 
   useIsomorphicLayoutEffect(processScrolling, [processScrolling]);
 
+  const debouncedProcessScrolling = useDebounceCallback(processScrolling, 50);
+
   const handleScrollPositionChange = useCallback(
     (e: { x: number; y: number }) => {
       onScroll?.(e);
-      processScrolling();
+      debouncedProcessScrolling();
     },
-    [processScrolling, onScroll]
+    [debouncedProcessScrolling, onScroll]
   );
 
   const handlePageChange = useCallback(
@@ -282,6 +285,7 @@ export function DataTable<T>({
             boxShadow: theme.shadows[shadow as MantineSize] || shadow,
             height,
             minHeight,
+            maxHeight,
           }),
           style,
           styles?.root,

package/types/DataTableProps.ts

@@ -51,6 +51,11 @@ export type DataTableProps<T = Record<string, unknown>> = {
    */
   minHeight?: string | number;
 
+  /**
+   * Maximum table height.
+   */
+  maxHeight?: string | number;
+
   /**
    * DataTable component shadow.
    */