Merge pull request #734 from icflorescu/next

Release 8.2 🎉

Author: icflorescu

CHANGELOG.md

@@ -3,9 +3,15 @@
 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.2.0 (2025-07-23)
+
+- **Significant performance improvement by reducing re-renders**, many thanks to [yergom](https://github.com/yergom) for PR [#732](https://github.com/icflorescu/mantine-datatable/pull/732)
+- Update deps to ensure compatibility with Mantine 8.2.0
+
 ## 8.1.3 (2025-07-21)
 
 - Enhance column resizing behavior for closed columns - many thanks to [Giovambattista Fazioli](https://github.com/gfazioli) for PR [#711](https://github.com/icflorescu/mantine-datatable/pull/711)
+- Update deps to ensure compatibility with Mantine 8.1.3 and Next.js 15.4.x
 
 ## 8.1.2 (2025-03-24)
 

app/examples/column-properties-and-styling/ColumnFooterExample.tsx

@@ -8,14 +8,16 @@ import { employees } from '~/data';
 
 const records = employees.slice(0, 10);
 
-export function ColumnFooterExample() {
+export function ColumnFooterExample({ height }: { height?: number }) {
   return (
     // example-start
     <DataTable
       withTableBorder
       withColumnBorders
       striped
       records={records}
+      height={height}
+      withRowBorders
       columns={[
         {
           accessor: 'name',

app/examples/column-properties-and-styling/page.tsx

@@ -134,6 +134,10 @@ export default async function ColumnPropertiesAndStylingExamplePage() {
       <ColumnFooterExample />
       <Txt>Here’s the code for the example above:</Txt>
       <CodeBlock tabs={{ code, keys: ['ColumnFooterExample.tsx', 'data/index.ts'] }} />
+      <Txt>The footer is always visible and sticks at the bottom. For example, if the table is scrollable:</Txt>
+      <ColumnFooterExample height={200} />
+      <Txt>Or if the table is higher than the amount of data:</Txt>
+      <ColumnFooterExample height={550} />
       <PageSubtitle value="Styling column titles, cells and footers" />
       <Txt>In addition, each column can be further customized by specifying the following styling properties:</Txt>
       <UnorderedList>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mantine-datatable",
-  "version": "8.1.3",
+  "version": "8.2.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,43 +74,43 @@
     "@docsearch/css": "^3.9.0",
     "@docsearch/react": "^3.9.0",
     "@eslint/eslintrc": "^3.3.1",
-    "@faker-js/faker": "^9.8.0",
+    "@faker-js/faker": "^9.9.0",
     "@formkit/auto-animate": "^0.8.2",
     "@hello-pangea/dnd": "^18.0.1",
-    "@mantine/code-highlight": "^8.1.1",
-    "@mantine/core": "^8.1.1",
-    "@mantine/dates": "^8.1.1",
-    "@mantine/hooks": "^8.1.1",
-    "@mantine/modals": "^8.1.1",
-    "@mantine/notifications": "^8.1.1",
-    "@tabler/icons-react": "^3.34.0",
-    "@tanstack/react-query": "^5.81.2",
-    "@types/lodash": "^4.17.18",
-    "@types/node": "^24.0.3",
+    "@mantine/code-highlight": "^8.2.1",
+    "@mantine/core": "^8.2.1",
+    "@mantine/dates": "^8.2.1",
+    "@mantine/hooks": "^8.2.1",
+    "@mantine/modals": "^8.2.1",
+    "@mantine/notifications": "^8.2.1",
+    "@tabler/icons-react": "^3.34.1",
+    "@tanstack/react-query": "^5.83.0",
+    "@types/lodash": "^4.17.20",
+    "@types/node": "^24.1.0",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
-    "@typescript-eslint/eslint-plugin": "^8.35.0",
-    "@typescript-eslint/parser": "^8.35.0",
+    "@typescript-eslint/eslint-plugin": "^8.38.0",
+    "@typescript-eslint/parser": "^8.38.0",
     "clsx": "^2.1.1",
-    "cssnano": "^7.0.7",
+    "cssnano": "^7.1.0",
     "dayjs": "^1.11.13",
-    "eslint": "^9.29.0",
-    "eslint-config-next": "^15.3.4",
-    "eslint-config-prettier": "^10.1.5",
+    "eslint": "^9.31.0",
+    "eslint-config-next": "^15.4.3",
+    "eslint-config-prettier": "^10.1.8",
     "lodash": "^4.17.21",
-    "mantine-contextmenu": "^8.1.2",
-    "next": "^15.3.4",
+    "mantine-contextmenu": "^8.2.0",
+    "next": "^15.4.3",
     "postcss": "^8.5.6",
     "postcss-cli": "^11.0.1",
     "postcss-import": "^16.1.1",
-    "postcss-preset-mantine": "^1.17.0",
+    "postcss-preset-mantine": "^1.18.0",
     "postcss-simple-vars": "^7.0.1",
-    "prettier": "^3.6.0",
+    "prettier": "^3.6.2",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "sharp": "^0.34.2",
-    "shiki": "^3.7.0",
-    "swr": "^2.3.3",
+    "sharp": "^0.34.3",
+    "shiki": "^3.8.1",
+    "swr": "^2.3.4",
     "tsup": "^8.5.0",
     "typescript": "^5.8.3"
   },

package/DataTable.css

@@ -23,6 +23,7 @@
     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-selection-color: var(--mantine-primary-color-light);
   --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));
@@ -36,6 +37,17 @@
     linear-gradient(to right, 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.25)), rgba(0, 0, 0, 0) 30%);
 
+  --mantine-datatable-header-height: 0;
+  --mantine-datatable-footer-height: 0;
+  --mantine-datatable-selection-column-width: 0;
+  --mantine-datatable-top-shadow-opacity: 0;
+  --mantine-datatable-left-shadow-opacity: 0;
+  --mantine-datatable-bottom-shadow-opacity: 0;
+  --mantine-datatable-right-shadow-opacity: 0;
+  --mantine-datatable-footer-position: sticky;
+  --mantine-datatable-footer-bottom: 0;
+  --mantine-datatable-last-row-border-bottom: unset;
+
   position: relative;
   display: flex;
   flex-direction: column;
@@ -90,6 +102,10 @@
   tbody tr:last-of-type {
     border-bottom: 0;
   }
+
+  tr:last-of-type:not(.mantine-datatable-empty-row) td {
+    border-bottom: var(--mantine-datatable-last-row-border-bottom);
+  }
 }
 
 .mantine-datatable-vertical-align-top td {
@@ -126,7 +142,7 @@
       width: var(--mantine-spacing-xs);
       background: var(--mantine-datatable-shadow-background-right);
       pointer-events: none;
-      opacity: 0;
+      opacity: var(--mantine-datatable-right-shadow-opacity);
       transition: opacity 0.2s;
     }
   }
@@ -152,16 +168,7 @@
       bottom: 0;
       left: 0;
       right: 0;
-      background: var(--mantine-primary-color-light);
-    }
-  }
-
-  &-scrolled {
-    th:last-of-type,
-    td:not(.mantine-datatable-row-expansion-cell):last-of-type {
-      &::after {
-        opacity: 1;
-      }
+      background: var(--mantine-datatable-selection-color);
     }
   }
 }
@@ -187,7 +194,7 @@
       width: var(--mantine-spacing-xs);
       background: var(--mantine-datatable-shadow-background-left);
       pointer-events: none;
-      opacity: 0;
+      opacity: var(--mantine-datatable-left-shadow-opacity);
       transition: opacity 0.2s;
     }
   }
@@ -231,19 +238,7 @@
       bottom: 0;
       left: 0;
       right: 0;
-      background: var(--mantine-primary-color-light);
-    }
-  }
-
-  &-scrolled:not(.mantine-datatable-selection-column-visible) th:first-of-type,
-  &-scrolled:not(.mantine-datatable-selection-column-visible)
-    td:not(.mantine-datatable-row-expansion-cell):first-of-type,
-  &-scrolled.mantine-datatable-selection-column-visible th:first-of-type,
-  &-scrolled.mantine-datatable-selection-column-visible tr:not(:nth-of-type(2)) th:nth-of-type(2),
-  &-scrolled.mantine-datatable-selection-column-visible th.mantine-datatable-column-group-header-cell:nth-of-type(2),
-  &-scrolled.mantine-datatable-selection-column-visible td:not(.mantine-datatable-row-expansion-cell):nth-of-type(2) {
-    &::after {
-      opacity: 1;
+      background: var(--mantine-datatable-selection-color);
     }
   }
 }