Merge pull request #765 from icflorescu/next

icflorescu · web-flow · commit 4a8e7225a1e9 · 2025-11-10T12:40:04.000+02:00
Release 8.3.7
diff --git a/.github/workflows/publish-and-deploy.yml b/.github/workflows/publish-and-deploy.yml
@@ -22,7 +22,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
@@ -31,9 +31,9 @@ jobs:
           run_install: false
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
-          node-version: 24.2
+          node-version: 24.11
           cache: pnpm
 
       - name: Restore pnpm store
@@ -53,12 +53,12 @@ jobs:
         run: pnpm build
 
       - name: Upload pages artifact
-        uses: actions/upload-pages-artifact@v3
+        uses: actions/upload-pages-artifact@v4
         with:
           path: ./out
 
       - name: Upload package artifact
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v5
         with:
           name: package
           path: |
@@ -73,10 +73,10 @@ jobs:
     runs-on: ubuntu-latest
     needs: build
     steps:
-      - uses: actions/download-artifact@v4
+      - uses: actions/download-artifact@v6
         with:
           name: package
-      - uses: JS-DevTools/npm-publish@v3
+      - uses: JS-DevTools/npm-publish@v4
         with:
           token: ${{ secrets.NPM_TOKEN }}
 
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.
 
+## 8.3.7 (2025-11-10)
+
+- Fix [#763](https://github.com/icflorescu/mantine-datatable/issues/763) regression introduced in [#749](https://github.com/icflorescu/mantine-datatable/pull/749)
+- Fix [#764](https://github.com/icflorescu/mantine-datatable/issues/764) docs website bug introduced in [#749](https://github.com/icflorescu/mantine-datatable/pull/749)
+- Update deps to ensure compatibility with Mantine 8.3.7
+- Update other dev deps (docsearch, faker, etc.)
+- Fix linting & linting errors
+
 ## 8.3.6 (2025-11-07)
 
 - Merge [#740](https://github.com/icflorescu/mantine-datatable/pull/740) to fix [#739](https://github.com/icflorescu/mantine-datatable/issues/739)
diff --git a/app/contribute-and-support/ContributorsImage.tsx b/app/contribute-and-support/ContributorsImage.tsx
@@ -12,6 +12,7 @@ export function ContributorsImage() {
   };
 
   useWindowEvent('resize', adjustCols);
+  // eslint-disable-next-line react-hooks/set-state-in-effect
   useEffect(adjustCols, []);
 
   return (
diff --git a/app/examples/column-dragging-and-toggling/DraggingTogglingComplexExample.tsx b/app/examples/column-dragging-and-toggling/DraggingTogglingComplexExample.tsx
@@ -19,6 +19,7 @@ export default function DraggingTogglingComplexExample() {
 
   useEffect(() => {
     const data = sortBy(companies, sortStatus.columnAccessor) as Company[];
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setRecords(sortStatus.direction === 'desc' ? data.reverse() : data);
   }, [sortStatus]);
 
diff --git a/app/examples/column-resizing/ResizingComplexExample.tsx b/app/examples/column-resizing/ResizingComplexExample.tsx
@@ -18,6 +18,7 @@ export default function ResizingComplexExample() {
 
   useEffect(() => {
     const data = sortBy(companies, sortStatus.columnAccessor);
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setRecords(sortStatus.direction === 'desc' ? data.reverse() : data);
   }, [sortStatus]);
 
diff --git a/app/examples/infinite-scrolling/InfiniteScrollingExample.tsx b/app/examples/infinite-scrolling/InfiniteScrollingExample.tsx
@@ -12,12 +12,12 @@ export function InfiniteScrollingExample() {
   const [records, setRecords] = useState(employees.slice(0, batchSize));
   const scrollViewportRef = useRef<HTMLDivElement>(null);
 
-  let timeout: ReturnType<typeof setTimeout> | undefined;
+  const timeoutRef = useRef<ReturnType<typeof setTimeout>>(null);
 
   const loadMoreRecords = () => {
     if (records.length < employees.length) {
       setLoading(true);
-      timeout = setTimeout(() => {
+      timeoutRef.current = setTimeout(() => {
         setRecords(employees.slice(0, records.length + batchSize));
         setLoading(false);
       }, 1000);
@@ -38,9 +38,9 @@ export function InfiniteScrollingExample() {
   // Clear timeout on unmount
   useEffect(() => {
     return () => {
-      if (timeout) clearTimeout(timeout);
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
     };
-  }, [timeout]);
+  }, []);
 
   return (
     <>
diff --git a/app/examples/overriding-the-default-styles/ColorsExample.tsx b/app/examples/overriding-the-default-styles/ColorsExample.tsx
@@ -16,6 +16,7 @@ export function ColorsExample() {
   useEffect(() => {
     const from = (page - 1) * PAGE_SIZE;
     const to = from + PAGE_SIZE;
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setRecords(allCompanies.slice(from, to));
   }, [page]);
 
diff --git a/app/examples/overriding-the-default-styles/StylingWithClassNamesExample.tsx b/app/examples/overriding-the-default-styles/StylingWithClassNamesExample.tsx
@@ -14,6 +14,7 @@ export function StylingWithClassNamesExample() {
   useEffect(() => {
     const from = (page - 1) * PAGE_SIZE;
     const to = from + PAGE_SIZE;
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setRecords(companies.slice(from, to));
   }, [page]);
 
diff --git a/app/examples/pagination/PaginationCustomRenderExample.tsx b/app/examples/pagination/PaginationCustomRenderExample.tsx
@@ -11,16 +11,18 @@ const PAGE_SIZES = [10, 15, 20];
 export default function PaginationCustomRenderExample() {
   const [pageSize, setPageSize] = useState(PAGE_SIZES[1]);
 
+  const [page, setPage] = useState(1);
+  const [records, setRecords] = useState(employees.slice(0, pageSize));
+
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setPage(1);
   }, [pageSize]);
 
-  const [page, setPage] = useState(1);
-  const [records, setRecords] = useState(employees.slice(0, pageSize));
-
   useEffect(() => {
     const from = (page - 1) * pageSize;
     const to = from + pageSize;
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setRecords(employees.slice(from, to));
   }, [page, pageSize]);
 
diff --git a/app/examples/pagination/PaginationExample.tsx b/app/examples/pagination/PaginationExample.tsx
@@ -14,6 +14,7 @@ export default function PaginationExample() {
   useEffect(() => {
     const from = (page - 1) * PAGE_SIZE;
     const to = from + PAGE_SIZE;
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setRecords(employees.slice(from, to));
   }, [page]);
 
diff --git a/app/examples/pagination/PaginationExampleWithControlProps.tsx b/app/examples/pagination/PaginationExampleWithControlProps.tsx
@@ -14,6 +14,7 @@ export default function PaginationExampleWithControlProps() {
   useEffect(() => {
     const from = (page - 1) * PAGE_SIZE;
     const to = from + PAGE_SIZE;
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setRecords(employees.slice(from, to));
   }, [page]);
 
diff --git a/app/examples/pagination/PaginationExampleWithPageSizeSelector.tsx b/app/examples/pagination/PaginationExampleWithPageSizeSelector.tsx
@@ -9,17 +9,18 @@ const PAGE_SIZES = [10, 15, 20];
 
 export default function PaginationExampleWithPageSizeSelector() {
   const [pageSize, setPageSize] = useState(PAGE_SIZES[1]);
+  const [page, setPage] = useState(1);
+  const [records, setRecords] = useState(employees.slice(0, pageSize));
 
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setPage(1);
   }, [pageSize]);
 
-  const [page, setPage] = useState(1);
-  const [records, setRecords] = useState(employees.slice(0, pageSize));
-
   useEffect(() => {
     const from = (page - 1) * pageSize;
     const to = from + pageSize;
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setRecords(employees.slice(from, to));
   }, [page, pageSize]);
 
diff --git a/app/examples/pagination/page.tsx b/app/examples/pagination/page.tsx
@@ -157,17 +157,19 @@ export default async function PaginationExamplePage() {
       <Txt>
         You can fully customize pagination by providing the <Code>renderPagination</Code> prop. The callback receives a
         context with default controls as factories:
-        <UnorderedList>
-          <li>
-            <Code>Controls.Text</Code>: the pagination text.
-          </li>
-          <li>
-            <Code>Controls.PageSizeSelector</Code>: the page size selector (if enabled).
-          </li>
-          <li>
-            <Code>Controls.Pagination</Code>: the pagination component.
-          </li>
-        </UnorderedList>
+      </Txt>
+      <UnorderedList>
+        <li>
+          <Code>Controls.Text</Code>: the pagination text.
+        </li>
+        <li>
+          <Code>Controls.PageSizeSelector</Code>: the page size selector (if enabled).
+        </li>
+        <li>
+          <Code>Controls.Pagination</Code>: the pagination component.
+        </li>
+      </UnorderedList>
+      <Txt>
         This allows you to render them in any order, inject your own elements, or override their props. The example
         below shows how to add a &quot;jump to page&quot; control between page size selector and pagination controls.
       </Txt>
diff --git a/app/examples/records-selection/RecordsSelectionExamples.tsx b/app/examples/records-selection/RecordsSelectionExamples.tsx
@@ -151,6 +151,7 @@ export function SelectAllRecordsOnAllPagesExample() {
     const from = (page - 1) * PAGE_SIZE;
     const to = from + PAGE_SIZE;
     const currentRecords = employees.slice(from, to);
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setRecords(currentRecords);
     if (allRecordsSelected) {
       setSelectedRecords(
diff --git a/app/examples/searching-and-filtering/SearchingAndFilteringExample.tsx b/app/examples/searching-and-filtering/SearchingAndFilteringExample.tsx
@@ -26,6 +26,7 @@ export function SearchingAndFilteringExample() {
   const [debouncedQuery] = useDebouncedValue(query, 200);
 
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setRecords(
       initialRecords.filter(({ firstName, lastName, department, birthDate }) => {
         if (
diff --git a/app/examples/sorting/SortingExample.tsx b/app/examples/sorting/SortingExample.tsx
@@ -14,6 +14,7 @@ export default function SortingExample() {
 
   useEffect(() => {
     const data = sortBy(companies, sortStatus.columnAccessor) as Company[];
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setRecords(sortStatus.direction === 'desc' ? data.reverse() : data);
   }, [sortStatus]);
 
diff --git a/app/examples/sorting/SortingExampleCustomIcons.tsx b/app/examples/sorting/SortingExampleCustomIcons.tsx
@@ -16,6 +16,7 @@ export default function SortingExampleCustomIcons() {
 
   useEffect(() => {
     const data = sortBy(companies, sortStatus.columnAccessor) as Company[];
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setRecords(sortStatus.direction === 'desc' ? data.reverse() : data);
   }, [sortStatus]);
 
diff --git a/app/examples/using-with-auto-animate/UsingWithAutoAnimateExample.tsx b/app/examples/using-with-auto-animate/UsingWithAutoAnimateExample.tsx
@@ -24,6 +24,7 @@ export function UsingWithAutoAnimateExample() {
   const [records, setRecords] = useState<User[]>([]);
 
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setRecords(Array.from({ length: 6 }, createUser));
   }, []);
 
diff --git a/components/AppWrapper.tsx b/components/AppWrapper.tsx
@@ -19,6 +19,7 @@ export function AppWrapper({ children }: React.PropsWithChildren) {
 
   return (
     <AppShell
+      // eslint-disable-next-line react-hooks/refs
       style={{ '--app-wrapper-footer-height': `${ref.current?.getBoundingClientRect().height || 154}px` }}
       header={{ height: 60 }}
       navbar={{ width: 260, breakpoint: 'sm', collapsed: { mobile: !navbarExpanded } }}
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -26,6 +26,7 @@ export function Navbar({ onClick }: NavbarProps) {
   };
 
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setScrolledToBottom(Math.ceil(viewportHeight) === (viewportRef.current?.scrollHeight || 0));
   }, [viewportHeight, viewportRef]);
 
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -12,7 +12,7 @@ const compat = new FlatCompat({
 const eslintConfig = [
   ...compat.extends('next/core-web-vitals', 'next/typescript'),
   {
-    ignores: ['.next/', 'out/', 'dist/', 'public/'],
+    ignores: ['.next/', 'next-env.d.ts', 'out/', 'dist/', 'public/'],
   },
   {
     rules: {
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mantine-datatable",
-  "version": "8.3.6",
+  "version": "8.3.7",
   "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,18 +71,19 @@
     "format": "prettier --write ."
   },
   "devDependencies": {
-    "@docsearch/css": "^3.9.0",
-    "@docsearch/react": "^3.9.0",
+    "@docsearch/css": "^4.3.1",
+    "@docsearch/react": "^4.3.1",
     "@eslint/eslintrc": "^3.3.1",
-    "@faker-js/faker": "^9.9.0",
+    "@faker-js/faker": "^10.1.0",
     "@formkit/auto-animate": "^0.9.0",
     "@hello-pangea/dnd": "^18.0.1",
-    "@mantine/code-highlight": "^8.3.6",
-    "@mantine/core": "^8.3.6",
-    "@mantine/dates": "^8.3.6",
-    "@mantine/hooks": "^8.3.6",
-    "@mantine/modals": "^8.3.6",
-    "@mantine/notifications": "^8.3.6",
+    "@mantine/code-highlight": "^8.3.7",
+    "@mantine/core": "^8.3.7",
+    "@mantine/dates": "^8.3.7",
+    "@mantine/hooks": "^8.3.7",
+    "@mantine/modals": "^8.3.7",
+    "@mantine/notifications": "^8.3.7",
+    "@next/eslint-plugin-next": "^15.5.6",
     "@tabler/icons-react": "^3.35.0",
     "@tanstack/react-query": "^5.90.7",
     "@types/lodash": "^4.17.20",
@@ -97,8 +98,9 @@
     "eslint": "^9.39.1",
     "eslint-config-next": "^15.5.6",
     "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-react-hooks": "^7.0.1",
     "lodash": "^4.17.21",
-    "mantine-contextmenu": "^8.3.6",
+    "mantine-contextmenu": "^8.3.7",
     "next": "^15.5.6",
     "postcss": "^8.5.6",
     "postcss-cli": "^11.0.1",
diff --git a/package/DataTable.css b/package/DataTable.css
@@ -39,7 +39,7 @@
 
   --mantine-datatable-header-height: 0;
   --mantine-datatable-footer-height: 0;
-  --mantine-datatable-selection-column-width: 44px;
+  --mantine-datatable-selection-column-width: 0;
   --mantine-datatable-top-shadow-opacity: 0;
   --mantine-datatable-left-shadow-opacity: 0;
   --mantine-datatable-bottom-shadow-opacity: 0;
diff --git a/package/DataTable.tsx b/package/DataTable.tsx
@@ -1,6 +1,7 @@
 import { Box, Table, type MantineSize } from '@mantine/core';
 import { useMergedRef } from '@mantine/hooks';
 import clsx from 'clsx';
+import type { RefObject } from 'react';
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { DataTableColumnsProvider } from './DataTableDragToggleProvider';
 import { DataTableEmptyRow } from './DataTableEmptyRow';
@@ -153,8 +154,8 @@ export function DataTable<T>({
   const dragToggle = useDataTableColumns({
     key: storeColumnsKey,
     columns: effectiveColumns,
-    headerRef: refs.header as any,
-    scrollViewportRef: refs.scrollViewport as any,
+    headerRef: refs.header as RefObject<HTMLTableSectionElement | null>,
+    scrollViewportRef: refs.scrollViewport as RefObject<HTMLElement | null>,
     onFixedLayoutChange: setFixedLayoutEnabled,
   });
 
diff --git a/package/DataTableColumnGroupHeaderCell.tsx b/package/DataTableColumnGroupHeaderCell.tsx
@@ -33,7 +33,7 @@ export function DataTableColumnGroupHeaderCell<T>({
       return flattenColumns([{ id, columns, groups }]);
     }
     return [];
-  }, [columns, groups]);
+  }, [columns, groups, id]);
 
   const queries = useMemo(() => allColumns.map(({ visibleMediaQuery }) => visibleMediaQuery), [allColumns]);
   const visibles = useMediaQueriesStringOrFunction(queries);
diff --git a/package/hooks/useDataTableColumnResize.ts b/package/hooks/useDataTableColumnResize.ts
@@ -13,7 +13,6 @@ export function useDataTableColumnResize<T>({
   columns = [],
   getInitialValueInEffect = true,
   headerRef,
-  scrollViewportRef,
   onFixedLayoutChange,
 }: {
   /**
@@ -84,6 +83,7 @@ export function useDataTableColumnResize<T>({
 
   // Handle SSR
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setIsSSR(false);
   }, []);
 
@@ -241,6 +241,7 @@ export function useDataTableColumnResize<T>({
 
     // Apply stored widths if available
     if (storedColumnsWidth && storedColumnsWidth.length > 0) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setEffectiveColumnsWidth(storedColumnsWidth);
     }
   }, [isSSR, key, getInitialValueInEffect, storedColumnsWidth]);
diff --git a/package/hooks/useDataTableInjectCssVariables.ts b/package/hooks/useDataTableInjectCssVariables.ts
diff --git a/package/hooks/useLastSelectionChangeIndex.ts b/package/hooks/useLastSelectionChangeIndex.ts
diff --git a/package/hooks/useRowExpansionStatus.ts b/package/hooks/useRowExpansionStatus.ts
diff --git a/package/hooks/useStableValue.ts b/package/hooks/useStableValue.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
