Merge pull request #571 from icflorescu/next

Update deps, optimize scroll-triggered re-rendering, make gentler scroll shadows, bump package version
icflorescu · Apr 12, 2024 · 532d226 · 532d226
2 parents 81b7b40 + 28e8249
commit 532d226
Show file tree

Hide file tree

Showing 10 changed files with 314 additions and 282 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,14 @@
 The following is a list of notable changes to the Mantine DataTable component.  
 Minor versions that are not listed in the changelog are bug fixes and small improvements.
 
+## 7.8.0 (2024-04-12)
+
+- 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)
 
 - Allow passing getInitialValueInEffect to useLocalStorage hook in useDataTableColumns (see [#560](https://github.com/icflorescu/mantine-datatable/pull/560) by [@Sajarin-M](https://github.com/Sajarin-M))

diff --git 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 (
     <DataTable
-      height={400}
+      height="70dvh"
+      minHeight={400}
+      maxHeight={1000}
       withTableBorder
       highlightOnHover
       borderRadius="sm"

diff --git a/app/examples/empty-state/page.tsx b/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:

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mantine-datatable",
-  "version": "7.7.0",
+  "version": "7.8.0",
   "description": "The lightweight, dependency-free, dark-theme aware table component for your Mantine UI data-rich applications, featuring asynchronous data loading support, pagination, intuitive Gmail-style additive batch rows selection, column sorting, custom cell data rendering, row expansion, nesting, context menus, and much more",
   "keywords": [
     "mantine",
@@ -74,47 +74,47 @@
     "@docsearch/react": "^3.6.0",
     "@ducanh2912/next-pwa": "^10.2.6",
     "@faker-js/faker": "^8.4.1",
-    "@formkit/auto-animate": "^0.8.1",
-    "@mantine/code-highlight": "7.7.0",
-    "@mantine/core": "7.7.0",
-    "@mantine/dates": "7.7.0",
-    "@mantine/hooks": "7.7.0",
-    "@mantine/modals": "7.7.0",
-    "@mantine/notifications": "7.7.0",
-    "@tabler/icons-react": "^3.1.0",
-    "@tanstack/react-query": "^5.24.14",
+    "@formkit/auto-animate": "^0.8.2",
+    "@mantine/code-highlight": "^7.8.0",
+    "@mantine/core": "^7.8.0",
+    "@mantine/dates": "^7.8.0",
+    "@mantine/hooks": "^7.8.0",
+    "@mantine/modals": "^7.8.0",
+    "@mantine/notifications": "^7.8.0",
+    "@tabler/icons-react": "^3.2.0",
+    "@tanstack/react-query": "^5.29.2",
     "@types/lodash": "^4.17.0",
-    "@types/node": "^20.12.4",
-    "@types/react": "^18.2.74",
-    "@types/react-dom": "^18.2.24",
-    "@typescript-eslint/eslint-plugin": "^7.5.0",
-    "@typescript-eslint/parser": "^7.5.0",
+    "@types/node": "^20.12.7",
+    "@types/react": "^18.2.77",
+    "@types/react-dom": "^18.2.25",
+    "@typescript-eslint/eslint-plugin": "^7.6.0",
+    "@typescript-eslint/parser": "^7.6.0",
     "clsx": "^2.1.0",
     "cssnano": "^6.1.2",
     "dayjs": "^1.11.10",
-    "eslint": "^8.57.0",
-    "eslint-config-next": "^14.1.4",
+    "eslint": "^9.0.0",
+    "eslint-config-next": "^14.2.0",
     "eslint-config-prettier": "^9.1.0",
     "lodash": "^4.17.21",
-    "mantine-contextmenu": "^7.7.0",
-    "next": "^14.1.4",
+    "mantine-contextmenu": "^7.8.0",
+    "next": "^14.2.0",
     "postcss": "^8.4.38",
     "postcss-cli": "^11.0.0",
     "postcss-import": "^16.1.0",
-    "postcss-preset-mantine": "^1.13.0",
+    "postcss-preset-mantine": "^1.14.4",
     "postcss-simple-vars": "^7.0.1",
     "prettier": "^3.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sharp": "^0.33.3",
     "swr": "^2.2.5",
     "tsup": "^8.0.2",
-    "typescript": "^5.4.3",
+    "typescript": "^5.4.5",
     "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.css b/package/DataTable.css
@@ -23,22 +23,22 @@
     light-dark(--mantine-datatable-highlight-on-hover-color-light, --mantine-datatable-highlight-on-hover-color-dark),
     light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5))
   );
-  --mantine-datatable-shadow-background-top: linear-gradient(rgba(0, 0, 0, light-dark(0.05, 0.5)), rgba(0, 0, 0, 0)),
-    linear-gradient(rgba(0, 0, 0, light-dark(0.05, 0.5)) 30%, rgba(0, 0, 0, 0));
+  --mantine-datatable-shadow-background-top: linear-gradient(rgba(0, 0, 0, light-dark(0.05, 0.25)), rgba(0, 0, 0, 0)),
+    linear-gradient(rgba(0, 0, 0, light-dark(0.05, 0.25)) 30%, rgba(0, 0, 0, 0));
   --mantine-datatable-shadow-background-right: linear-gradient(
       to left,
-      rgba(0, 0, 0, light-dark(0.05, 0.5)),
+      rgba(0, 0, 0, light-dark(0.05, 0.25)),
       rgba(0, 0, 0, 0)
     ),
-    linear-gradient(to left, rgba(0, 0, 0, light-dark(0.05, 0.5)), rgba(0, 0, 0, 0) 30%);
-  --mantine-datatable-shadow-background-bottom: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, light-dark(0.05, 0.5))),
-    linear-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, light-dark(0.05, 0.5)));
+    linear-gradient(to left, rgba(0, 0, 0, light-dark(0.05, 0.25)), rgba(0, 0, 0, 0) 30%);
+  --mantine-datatable-shadow-background-bottom: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, light-dark(0.05, 0.25))),
+    linear-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, light-dark(0.05, 0.25)));
   --mantine-datatable-shadow-background-left: linear-gradient(
       to right,
-      rgba(0, 0, 0, light-dark(0.05, 0.5)),
+      rgba(0, 0, 0, light-dark(0.05, 0.25)),
       rgba(0, 0, 0, 0)
     ),
-    linear-gradient(to right, rgba(0, 0, 0, light-dark(0.05, 0.5)), rgba(0, 0, 0, 0) 30%);
+    linear-gradient(to right, rgba(0, 0, 0, light-dark(0.05, 0.25)), rgba(0, 0, 0, 0) 30%);
 
   position: relative;
   display: flex;

diff --git 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<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,

diff --git a/package/DataTableScrollArea.css b/package/DataTableScrollArea.css
@@ -30,7 +30,7 @@
   z-index: 2;
   left: 0;
   right: 0;
-  height: var(--mantine-spacing-xs);
+  height: calc(var(--mantine-spacing-xs) / 2);
   background: var(--mantine-datatable-shadow-background-top);
 }
 
@@ -48,7 +48,7 @@
   top: 0;
   bottom: 0;
   right: 0;
-  width: var(--mantine-spacing-xs);
+  width: calc(var(--mantine-spacing-xs) / 2);
   background: var(--mantine-datatable-shadow-background-right);
 }
 
@@ -61,7 +61,7 @@
   z-index: 2;
   left: 0;
   right: 0;
-  height: var(--mantine-spacing-xs);
+  height: calc(var(--mantine-spacing-xs) / 2);
   background: var(--mantine-datatable-shadow-background-bottom);
 }
 

diff --git a/package/hooks/useDataTableColumns.ts b/package/hooks/useDataTableColumns.ts
@@ -146,9 +146,3 @@ export const useDataTableColumns = <T>({
     resetColumnsWidth,
   } as const;
 };
-
-/**
- * @deprecated This hook is deprecated and will be removed in a future version. Please use the `useDataTableColumns` hook instead.
- */
-export const useDragToggleColumns = useDataTableColumns;
-// todo remove the above in a future version (maybe 7.4?)
diff --git a/package/types/DataTableProps.ts b/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.
    */