diff --git a/CHANGELOG.md b/CHANGELOG.md index 8cb3feb10..8a474d855 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/app/examples/complex-usage-scenario/ComplexUsageExample.tsx b/app/examples/complex-usage-scenario/ComplexUsageExample.tsx index 84706172e..bcec76ecb 100644 --- a/app/examples/complex-usage-scenario/ComplexUsageExample.tsx +++ b/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 ( + If records property points to an empty array, the DataTable component will indicate its empty state by displaying a customizable icon and text, like so: diff --git a/package.json b/package.json index 7f1c64d1a..d5d748e24 100644 --- a/package.json +++ b/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" } diff --git a/package/DataTable.tsx b/package/DataTable.tsx index f81e5c712..0dd8f696b 100644 --- a/package/DataTable.tsx +++ b/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({ textSelectionDisabled, height = '100%', minHeight, + maxHeight, shadow, verticalAlign = 'center', fetching, @@ -204,12 +205,14 @@ export function DataTable({ 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({ boxShadow: theme.shadows[shadow as MantineSize] || shadow, height, minHeight, + maxHeight, }), style, styles?.root, diff --git a/package/types/DataTableProps.ts b/package/types/DataTableProps.ts index 12cd06aaa..eed115daf 100644 --- a/package/types/DataTableProps.ts +++ b/package/types/DataTableProps.ts @@ -51,6 +51,11 @@ export type DataTableProps> = { */ minHeight?: string | number; + /** + * Maximum table height. + */ + maxHeight?: string | number; + /** * DataTable component shadow. */