Merge pull request #566 from icflorescu/next

Ensure mantine 7.7.0 compatibility, skip 7.7.1, allow passing getInitialValueInEffect to useLocalStorage hook

CHANGELOG.md

@@ -3,6 +3,13 @@
 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.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))
+- Update dev dependencies to ensure compatibility with Mantine 7.7.0
+- Update peer deps to exclude Mantine `7.7.1` due to [this bug](https://github.com/mantinedev/mantine/issues/6017) that causes "maximum update depth exceeded"
+- Add a default value of `'mantine-datatable'` to `storeColumnsKey` (used as a prefix in the `useDataTableColumns` hook)
+
 ## 7.6.1 (2024-03-05)
 
 - Update dev dependencies to ensure compatibility with Mantine 7.6.1 & Next.js 14.1.2

app/config.ts

@@ -1,16 +1,18 @@
 import type { MantineColor } from '@mantine/core';
 import {
+  Icon,
   IconAdjustments,
   IconBrandCss3,
   IconHeartHandshake,
   IconHome,
   IconList,
+  IconProps,
   IconQuestionMark,
   IconRocket,
   IconThumbUp,
-  TablerIconsProps,
 } from '@tabler/icons-react';
 import type { Route } from 'next';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 
 export const PRODUCT_NAME = 'Mantine DataTable';
 export const PRODUCT_DESCRIPTION =
@@ -46,7 +48,10 @@ export type RouteInfo = {
   href: Route;
   title: string;
   description: string;
-} & ({ icon?: never; color?: never } | { icon: React.FC<TablerIconsProps>; color: MantineColor });
+} & (
+  | { icon?: never; color?: never }
+  | { icon: ForwardRefExoticComponent<Omit<IconProps, 'ref'> & RefAttributes<Icon>>; color: MantineColor }
+);
 
 export const EXAMPLES_ROUTE_COLOR: MantineColor = 'green';
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mantine-datatable",
-  "version": "7.6.1",
+  "version": "7.7.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",
@@ -71,50 +71,50 @@
     "format": "prettier --write ."
   },
   "devDependencies": {
-    "@docsearch/react": "^3.5.2",
-    "@ducanh2912/next-pwa": "^10.2.5",
+    "@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.6.1",
-    "@mantine/core": "^7.6.1",
-    "@mantine/dates": "^7.6.1",
-    "@mantine/hooks": "^7.6.1",
-    "@mantine/modals": "^7.6.1",
-    "@mantine/notifications": "^7.6.1",
-    "@tabler/icons-react": "^2.47.0",
-    "@tanstack/react-query": "^5.24.8",
-    "@types/lodash": "^4.14.202",
-    "@types/node": "^20.11.24",
-    "@types/react": "^18.2.63",
-    "@types/react-dom": "^18.2.19",
-    "@typescript-eslint/eslint-plugin": "^7.1.1",
-    "@typescript-eslint/parser": "^7.1.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",
+    "@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",
     "clsx": "^2.1.0",
-    "cssnano": "^6.0.5",
+    "cssnano": "^6.1.2",
     "dayjs": "^1.11.10",
     "eslint": "^8.57.0",
-    "eslint-config-next": "^14.1.1",
+    "eslint-config-next": "^14.1.4",
     "eslint-config-prettier": "^9.1.0",
     "lodash": "^4.17.21",
-    "mantine-contextmenu": "^7.6.2",
-    "next": "14.1.2",
-    "postcss": "^8.4.35",
+    "mantine-contextmenu": "^7.7.0",
+    "next": "^14.1.4",
+    "postcss": "^8.4.38",
     "postcss-cli": "^11.0.0",
-    "postcss-import": "^16.0.1",
+    "postcss-import": "^16.1.0",
     "postcss-preset-mantine": "^1.13.0",
     "postcss-simple-vars": "^7.0.1",
     "prettier": "^3.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sharp": "^0.33.2",
+    "sharp": "^0.33.3",
     "swr": "^2.2.5",
     "tsup": "^8.0.2",
-    "typescript": "^5.3.3",
-    "webpack": "^5.90.3"
+    "typescript": "^5.4.3",
+    "webpack": "^5.91.0"
   },
   "peerDependencies": {
-    "@mantine/core": ">=7",
-    "@mantine/hooks": ">=7",
+    "@mantine/core": "7 <= 7.7.0 || >= 7.7.2",
+    "@mantine/hooks": "7 <= 7.7.0 || >= 7.7.2",
     "clsx": ">=2",
     "react": ">=18.2"
   }

package/DataTable.tsx

@@ -33,7 +33,7 @@ export function DataTable<T>({
   verticalAlign = 'center',
   fetching,
   columns,
-  storeColumnsKey,
+  storeColumnsKey = 'mantine-datatable',
   groups,
   pinFirstColumn,
   pinLastColumn,
@@ -110,7 +110,7 @@ export function DataTable<T>({
   rowClassName,
   rowStyle,
   customRowAttributes,
-  scrollViewportRef: scrollViewportRefProp,
+  scrollViewportRef,
   scrollAreaProps,
   tableRef,
   bodyRef,
@@ -128,7 +128,7 @@ export function DataTable<T>({
   ...otherProps
 }: DataTableProps<T>) {
   const {
-    ref: scrollViewportRef,
+    ref: localScrollViewportRef,
     width: scrollViewportWidth,
     height: scrollViewportHeight,
   } = useElementOuterSize<HTMLDivElement>();
@@ -147,7 +147,9 @@ export function DataTable<T>({
   const { ref: footerRef, height: footerHeight } = useElementOuterSize<HTMLTableSectionElement>();
   const { ref: paginationRef, height: paginationHeight } = useElementOuterSize<HTMLDivElement>();
   const { ref: selectionColumnHeaderRef, width: selectionColumnWidth } = useElementOuterSize<HTMLTableCellElement>();
+
   const mergedTableRef = useMergedRef(localTableRef, tableRef);
+  const mergedViewportRef = useMergedRef(localScrollViewportRef, scrollViewportRef);
 
   const [scrolledToTop, setScrolledToTop] = useState(true);
   const [scrolledToBottom, setScrolledToBottom] = useState(true);
@@ -157,8 +159,8 @@ export function DataTable<T>({
   const rowExpansionInfo = useRowExpansion<T>({ rowExpansion, records, idAccessor });
 
   const processScrolling = useCallback(() => {
-    const scrollTop = scrollViewportRef.current?.scrollTop || 0;
-    const scrollLeft = scrollViewportRef.current?.scrollLeft || 0;
+    const scrollTop = localScrollViewportRef.current?.scrollTop || 0;
+    const scrollLeft = localScrollViewportRef.current?.scrollLeft || 0;
 
     if (fetching || tableHeight <= scrollViewportHeight) {
       setScrolledToTop(true);
@@ -190,7 +192,7 @@ export function DataTable<T>({
     onScrollToRight,
     onScrollToTop,
     scrollViewportHeight,
-    scrollViewportRef,
+    localScrollViewportRef,
     scrollViewportWidth,
     scrolledToBottom,
     scrolledToLeft,
@@ -212,10 +214,10 @@ export function DataTable<T>({
 
   const handlePageChange = useCallback(
     (page: number) => {
-      scrollViewportRef.current?.scrollTo({ top: 0, left: 0 });
+      localScrollViewportRef.current?.scrollTo({ top: 0, left: 0 });
       onPageChange!(page);
     },
-    [onPageChange, scrollViewportRef]
+    [onPageChange, localScrollViewportRef]
   );
 
   const recordsLength = records?.length;
@@ -286,7 +288,7 @@ export function DataTable<T>({
         ]}
       >
         <DataTableScrollArea
-          viewportRef={useMergedRef(scrollViewportRef, scrollViewportRefProp)}
+          viewportRef={mergedViewportRef}
           topShadowVisible={!scrolledToTop}
           leftShadowVisible={!scrolledToLeft}
           leftShadowBehind={selectionColumnVisible || !!pinFirstColumn}

package/hooks/useDataTableColumns.ts

@@ -18,6 +18,7 @@ type DataTableColumnWidth = Record<string, string | number>;
 export const useDataTableColumns = <T>({
   key,
   columns = [],
+  getInitialValueInEffect = true,
 }: {
   /**
    * The key to use in localStorage to store the columns order and toggle state.
@@ -27,6 +28,14 @@ export const useDataTableColumns = <T>({
    * Columns definitions.
    */
   columns: DataTableColumn<T>[];
+  /**
+   * Columns definitions.
+   */
+  /**
+   * If set to true, value will be update is useEffect after mount.
+   * @default true
+   */
+  getInitialValueInEffect?: boolean;
 }) => {
   // Default columns id ordered is the order of the columns in the array
   const defaultColumnsOrder = (columns && columns.map((column) => column.accessor)) || [];
@@ -49,21 +58,21 @@ export const useDataTableColumns = <T>({
   const [columnsOrder, setColumnsOrder] = useLocalStorage<string[]>({
     key: `${key}-columns-order`,
     defaultValue: defaultColumnsOrder as string[],
-    getInitialValueInEffect: true,
+    getInitialValueInEffect,
   });
 
   // Store the columns toggle in localStorage
   const [columnsToggle, setColumnsToggle] = useLocalStorage<DataTableColumnToggle[]>({
     key: `${key}-columns-toggle`,
     defaultValue: defaultColumnsToggle as DataTableColumnToggle[],
-    getInitialValueInEffect: true,
+    getInitialValueInEffect,
   });
 
   // Store the columns widths in localStorage
   const [columnsWidth, setColumnsWidth] = useLocalStorage<DataTableColumnWidth[]>({
     key: `${key}-columns-width`,
     defaultValue: defaultColumnsWidth as DataTableColumnWidth[],
-    getInitialValueInEffect: true,
+    getInitialValueInEffect,
   });
 
   // we won't use the "remove" function from useLocalStorage() because