Merge pull request #601 from icflorescu/next

Update deps, changelog, fix #593, release next version

Author: icflorescu

CHANGELOG.md

@@ -3,6 +3,12 @@
 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.10.1 (2024-06-03)
+
+- Update dev dependencies to ensure compatibility with Mantine 7.10.1
+- Add support for sorting by nested property in columns (see PR [#600](https://github.com/icflorescu/mantine-datatable/pull/600))
+- Fix issue [#593](https://github.com/icflorescu/mantine-datatable/issues/593) (`cursor: pointer` not showing when using `onRowClick`)
+
 ## 7.9.1 (2024-05-10)
 
 - Update dev dependencies to ensure compatibility with Mantine 7.9.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mantine-datatable",
-  "version": "7.9.1",
+  "version": "7.10.1",
   "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,40 +75,40 @@
     "@ducanh2912/next-pwa": "^10.2.7",
     "@faker-js/faker": "^8.4.1",
     "@formkit/auto-animate": "^0.8.2",
-    "@mantine/code-highlight": "^7.9.1",
-    "@mantine/core": "^7.9.1",
-    "@mantine/dates": "^7.9.1",
-    "@mantine/hooks": "^7.9.1",
-    "@mantine/modals": "^7.9.1",
-    "@mantine/notifications": "^7.9.1",
-    "@tabler/icons-react": "^3.3.0",
-    "@tanstack/react-query": "^5.35.1",
-    "@types/lodash": "^4.17.1",
-    "@types/node": "^20.12.11",
-    "@types/react": "^18.3.1",
+    "@mantine/code-highlight": "^7.10.1",
+    "@mantine/core": "^7.10.1",
+    "@mantine/dates": "^7.10.1",
+    "@mantine/hooks": "^7.10.1",
+    "@mantine/modals": "^7.10.1",
+    "@mantine/notifications": "^7.10.1",
+    "@tabler/icons-react": "^3.5.0",
+    "@tanstack/react-query": "^5.40.0",
+    "@types/lodash": "^4.17.4",
+    "@types/node": "^20.14.0",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.8.0",
-    "@typescript-eslint/parser": "^7.8.0",
+    "@typescript-eslint/eslint-plugin": "^7.12.0",
+    "@typescript-eslint/parser": "^7.12.0",
     "clsx": "^2.1.1",
     "cssnano": "^7.0.1",
     "dayjs": "^1.11.11",
     "eslint": "^8",
     "eslint-config-next": "^14.2.3",
     "eslint-config-prettier": "^9.1.0",
     "lodash": "^4.17.21",
-    "mantine-contextmenu": "^7.9.1",
+    "mantine-contextmenu": "^7.10.1",
     "next": "^14.2.3",
     "postcss": "^8.4.38",
     "postcss-cli": "^11.0.0",
     "postcss-import": "^16.1.0",
     "postcss-preset-mantine": "^1.15.0",
     "postcss-simple-vars": "^7.0.1",
-    "prettier": "^3.2.5",
+    "prettier": "^3.3.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "sharp": "^0.33.3",
+    "sharp": "^0.33.4",
     "swr": "^2.2.5",
-    "tsup": "^8.0.2",
+    "tsup": "^8.1.0",
     "typescript": "^5.4.5",
     "webpack": "^5.91.0"
   },

package/DataTableHeader.tsx

@@ -128,6 +128,7 @@ export const DataTableHeader = forwardRef(function DataTableHeader<T>(
             titleStyle,
             filter,
             filtering,
+            sortKey,
           } = { ...defaultColumnProps, ...columnProps };
 
           return (
@@ -148,6 +149,7 @@ export const DataTableHeader = forwardRef(function DataTableHeader<T>(
               resizable={resizable && index < columns.length - 1}
               sortStatus={sortStatus}
               sortIcons={sortIcons}
+              sortKey={sortKey}
               onSortStatusChange={onSortStatusChange}
               filter={filter}
               filtering={filtering}

package/DataTableHeaderCell.tsx

@@ -23,7 +23,16 @@ type DataTableHeaderCellProps<T> = {
   onSortStatusChange: DataTableSortProps<T>['onSortStatusChange'];
 } & Pick<
   DataTableColumn<T>,
-  'accessor' | 'sortable' | 'draggable' | 'toggleable' | 'resizable' | 'textAlign' | 'width' | 'filter' | 'filtering'
+  | 'accessor'
+  | 'sortable'
+  | 'draggable'
+  | 'toggleable'
+  | 'resizable'
+  | 'textAlign'
+  | 'width'
+  | 'filter'
+  | 'filtering'
+  | 'sortKey'
 >;
 
 export function DataTableHeaderCell<T>({
@@ -43,6 +52,7 @@ export function DataTableHeaderCell<T>({
   onSortStatusChange,
   filter,
   filtering,
+  sortKey,
 }: DataTableHeaderCellProps<T>) {
   const { setSourceColumn, setTargetColumn, swapColumns, setColumnsToggle } = useDataTableColumnsContext();
   const [dragOver, setDragOver] = useState<boolean>(false);
@@ -58,6 +68,7 @@ export function DataTableHeaderCell<T>({
           if (e?.defaultPrevented) return;
 
           onSortStatusChange({
+            sortKey,
             columnAccessor: accessor,
             direction:
               sortStatus?.columnAccessor === accessor

package/DataTableRow.tsx

@@ -84,7 +84,10 @@ export function DataTableRow<T>({
       <TableTr
         className={clsx(
           'mantine-datatable-row',
-          { [POINTER_CURSOR]: expansion?.isExpandable({ record, index }) && (onClick || onDoubleClick || expansion?.expandOnClick) },
+          {
+            [POINTER_CURSOR]:
+              onClick || onDoubleClick || (expansion?.isExpandable({ record, index }) && expansion?.expandOnClick),
+          },
           { [CONTEXT_MENU_CURSOR]: onContextMenu },
           typeof className === 'function' ? className(record, index) : className
         )}

package/types/DataTableColumn.ts

@@ -33,6 +33,7 @@ export type DataTableColumn<T = Record<string, unknown>> = {
    * If true, column will be sortable.
    */
   sortable?: boolean;
+  sortKey?: string;
 
   /**
    * If set to true, the column can be dragged.

package/types/DataTableSortStatus.ts

@@ -1,4 +1,9 @@
 export type DataTableSortStatus<T = Record<string, unknown>> = {
+  /**
+   * Sort column key for nested values.
+   * @type {string}
+   */
+  sortKey?: string;
   /**
    * Sort column accessor.
    * You can use dot-notation for nested objects property drilling