Merge pull request #502 from icflorescu/next

Ensure Mantine 7.4 compatibility

CHANGELOG.md

@@ -3,6 +3,11 @@
 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.4.0 (2024-01-04)
+
+- Ensure compatibility with Mantine 7.4
+- Minor docs improvements
+
 ## 7.3.5 (2023-12-29)
 
 - Minor README updates

README.md

@@ -12,7 +12,7 @@
 
 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](https://icflorescu.github.io/mantine-datatable/).
 
-[![Mantine DataTable](https://user-images.githubusercontent.com/581999/279479387-525bb797-cb15-4739-85c6-94ceded94bc1.png)](https://icflorescu.github.io/mantine-datatable/)
+[![Mantine DataTable](https://user-images.githubusercontent.com/581999/294180790-93289cec-4d73-47b5-988f-8c93dd3443fe.png)](https://icflorescu.github.io/mantine-datatable/)
 
 **⚠️ Mantine DataTable V7 is compatible with Mantine V7.**  
 **💡 If you're looking for the old version that works with [Mantine V6](https://v6.mantine.dev), head over to [Mantine DataTable V6](https://icflorescu.github.io/mantine-datatable-v6).**

app/mantine-v6-support/page.tsx

@@ -13,21 +13,21 @@ export default function MantineV6SupportPage() {
   return (
     <>
       <PageTitle of={PATH} />
+      <Txt title="TLDR" idea>
+        If you are still using <ExternalLink to="https://v6.mantine.dev">Mantine V6</ExternalLink>, you’ll need to use{' '}
+        <ExternalLink to={V6_WEBSITE_LINK}>{PRODUCT_NAME} V6</ExternalLink>.
+      </Txt>
       <Txt>
         {PRODUCT_NAME} V7 is a major release with{' '}
         <ExternalLink to={`${REPO_LINK}/blob/main/CHANGELOG.md`}>breaking changes</ExternalLink> and is compatible with{' '}
         <ExternalLink to={MANTINE_LINK}>Mantine V7</ExternalLink>.
       </Txt>
+      <Txt>One of the breaking changes in Mantine V7 was the migration to native CSS.</Txt>
       <Txt>
-        One of the breaking changes in Mantine V7 was the migration to native CSS.
-        <br />
         In Mantine V6, the styling was done with CSS-in-JS (<ExternalLink to="https://emotion.sh">Emotion</ExternalLink>
-        ); in Mantine V7, it is done with native CSS.
-      </Txt>
-      <Txt>Hence, you won’t be able to use {PRODUCT_NAME} V7 with Mantine V6.</Txt>
-      <Txt>
-        If you are still using <ExternalLink to="https://v6.mantine.dev">Mantine V6</ExternalLink>, you’ll need to use{' '}
-        <ExternalLink to={V6_WEBSITE_LINK}>{PRODUCT_NAME} V6</ExternalLink>.
+        ), while in Mantine V7 it is done with native CSS.
+        <br />
+        Hence, you won’t be able to use {PRODUCT_NAME} V7 with Mantine V6.
       </Txt>
       <PageNavigation of={PATH} />
     </>

components/AppWrapper.module.css

@@ -1,7 +1,3 @@
-.root {
-  background: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-6));
-}
-
 .main {
   display: flow-root;
   position: relative;

components/AppWrapper.tsx

@@ -20,7 +20,6 @@ export function AppWrapper({ children }: React.PropsWithChildren) {
   return (
     <AppShell
       style={{ '--app-wrapper-footer-height': `${ref.current?.getBoundingClientRect().height || 154}px` }}
-      className={classes.root}
       header={{ height: 60 }}
       navbar={{ width: 260, breakpoint: 'sm', collapsed: { mobile: !navbarExpanded } }}
     >

components/Footer.module.css

@@ -9,6 +9,7 @@
   flex-direction: column;
   align-items: center;
   gap: var(--mantine-spacing-xs);
+  background: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-6));
   @media (min-width: $mantine-breakpoint-sm) {
     left: var(--app-shell-navbar-width);
   }

components/Header.module.css

@@ -1,13 +1,18 @@
-.root::after {
-  position: absolute;
-  content: '';
-  left: 0;
-  right: 0;
-  height: rem(6px);
-  bottom: rem(-7px);
-  background: linear-gradient(light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.45)), rgba(0, 0, 0, 0));
-  transition: opacity 0.2s;
-  opacity: 0;
+.root {
+  background: linear-gradient(var(--mantine-color-body), alpha(var(--mantine-color-body), 0.75));
+  backdrop-filter: blur(3px);
+
+  &::after {
+    position: absolute;
+    content: '';
+    left: 0;
+    right: 0;
+    height: rem(6px);
+    bottom: rem(-7px);
+    background: linear-gradient(light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.45)), rgba(0, 0, 0, 0));
+    transition: opacity 0.2s;
+    opacity: 0;
+  }
 }
 
 .scrolled::after {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mantine-datatable",
-  "version": "7.3.5",
+  "version": "7.4.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",
@@ -75,22 +75,22 @@
     "@ducanh2912/next-pwa": "^10.0.2",
     "@faker-js/faker": "^8.3.1",
     "@formkit/auto-animate": "^0.8.1",
-    "@mantine/code-highlight": "^7.3.2",
-    "@mantine/core": "^7.3.2",
-    "@mantine/dates": "^7.3.2",
-    "@mantine/hooks": "^7.3.2",
-    "@mantine/modals": "^7.3.2",
-    "@mantine/notifications": "^7.3.2",
-    "@tabler/icons-react": "^2.44.0",
-    "@tanstack/react-query": "^5.15.3",
+    "@mantine/code-highlight": "^7.4.0",
+    "@mantine/core": "^7.4.0",
+    "@mantine/dates": "^7.4.0",
+    "@mantine/hooks": "^7.4.0",
+    "@mantine/modals": "^7.4.0",
+    "@mantine/notifications": "^7.4.0",
+    "@tabler/icons-react": "^2.45.0",
+    "@tanstack/react-query": "^5.17.1",
     "@types/lodash": "^4.14.202",
-    "@types/node": "^20.10.5",
+    "@types/node": "^20.10.6",
     "@types/react": "^18.2.46",
     "@types/react-dom": "^18.2.18",
-    "@typescript-eslint/eslint-plugin": "^6.16.0",
-    "@typescript-eslint/parser": "^6.16.0",
-    "clsx": "^2.0.0",
-    "cssnano": "^6.0.2",
+    "@typescript-eslint/eslint-plugin": "^6.17.0",
+    "@typescript-eslint/parser": "^6.17.0",
+    "clsx": "^2.1.0",
+    "cssnano": "^6.0.3",
     "dayjs": "^1.11.10",
     "eslint": "^8.56.0",
     "eslint-config-next": "^14.0.4",
@@ -100,8 +100,8 @@
     "next": "14.0.4",
     "postcss": "^8.4.32",
     "postcss-cli": "^11.0.0",
-    "postcss-import": "^15.1.0",
-    "postcss-preset-mantine": "^1.12.2",
+    "postcss-import": "^16.0.0",
+    "postcss-preset-mantine": "^1.12.3",
     "postcss-simple-vars": "^7.0.1",
     "prettier": "^3.1.1",
     "react": "^18.2.0",

package/types/DataTableSortProps.ts

@@ -1,10 +1,9 @@
 import type { DataTableSortStatus } from './DataTableSortStatus';
 
-export type DataTableSortProps<T = Record<string, unknown>> =
+export type DataTableSortProps<T = Record<string, unknown>> = (
   | {
       sortStatus?: never;
       onSortStatusChange?: never;
-      sortIcons?: never;
     }
   | {
       /**
@@ -17,19 +16,20 @@ export type DataTableSortProps<T = Record<string, unknown>> =
        * Receives the new sort status as argument.
        */
       onSortStatusChange?: (sortStatus: DataTableSortStatus<T>) => void;
-
-      /**
-       * Custom sort icons.
-       */
-      sortIcons?: {
-        /**
-         * Icon to display when column is sorted ascending.
-         * Will be rotated 180deg for descending sort
-         */
-        sorted: React.ReactNode;
-        /**
-         * Icon to display when column is not sorted.
-         */
-        unsorted: React.ReactNode;
-      };
-    };
+    }
+) & {
+  /**
+   * Custom sort icons.
+   */
+  sortIcons?: {
+    /**
+     * Icon to display when column is sorted ascending.
+     * Will be rotated 180deg for descending sort
+     */
+    sorted: React.ReactNode;
+    /**
+     * Icon to display when column is not sorted.
+     */
+    unsorted: React.ReactNode;
+  };
+};