Merge pull request #515 from icflorescu/next

Fix unhandled error, update deps, bump version

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.4 (2024-01-17)
+
+- Fix unhandled Runtime Error with column dragging/toggling (PR [#514](https://github.com/icflorescu/mantine-datatable/pull/514))
+- Update dev dependencies
+
 ## 7.4.3 (2024-01-10)
 
 - Implement the `selectionCheckboxProps` property to allow customizing all selection checkboxes at once

app/examples/column-dragging-and-toggling/TogglingExample.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Button, Group, Stack } from '@mantine/core';
+import { IconMap } from '@tabler/icons-react';
 import { DataTable, useDataTableColumns } from '__PACKAGE__';
 import { companies } from '~/data';
 
@@ -13,7 +14,7 @@ export default function TogglingExample() {
       { accessor: 'name', width: '40%', toggleable: true, defaultToggle: false },
       { accessor: 'streetAddress', width: '60%', toggleable: true },
       { accessor: 'city', width: 160, toggleable: true },
-      { accessor: 'state', textAlign: 'right' },
+      { accessor: 'state', textAlign: 'right', title: <IconMap /> },
     ],
   });
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mantine-datatable",
-  "version": "7.4.3",
+  "version": "7.4.4",
   "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",
@@ -72,7 +72,7 @@
   },
   "devDependencies": {
     "@docsearch/react": "^3.5.2",
-    "@ducanh2912/next-pwa": "^10.1.0",
+    "@ducanh2912/next-pwa": "^10.2.2",
     "@faker-js/faker": "^8.3.1",
     "@formkit/auto-animate": "^0.8.1",
     "@mantine/code-highlight": "^7.4.1",
@@ -81,14 +81,14 @@
     "@mantine/hooks": "^7.4.1",
     "@mantine/modals": "^7.4.1",
     "@mantine/notifications": "^7.4.1",
-    "@tabler/icons-react": "^2.45.0",
-    "@tanstack/react-query": "^5.17.9",
+    "@tabler/icons-react": "^2.46.0",
+    "@tanstack/react-query": "^5.17.15",
     "@types/lodash": "^4.14.202",
-    "@types/node": "^20.10.8",
-    "@types/react": "^18.2.47",
+    "@types/node": "^20.11.5",
+    "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
-    "@typescript-eslint/eslint-plugin": "^6.18.1",
-    "@typescript-eslint/parser": "^6.18.1",
+    "@typescript-eslint/eslint-plugin": "^6.19.0",
+    "@typescript-eslint/parser": "^6.19.0",
     "clsx": "^2.1.0",
     "cssnano": "^6.0.3",
     "dayjs": "^1.11.10",
@@ -103,10 +103,10 @@
     "postcss-import": "^16.0.0",
     "postcss-preset-mantine": "^1.12.3",
     "postcss-simple-vars": "^7.0.1",
-    "prettier": "^3.1.1",
+    "prettier": "^3.2.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sharp": "^0.33.1",
+    "sharp": "^0.33.2",
     "swr": "^2.2.4",
     "tsup": "^8.0.1",
     "typescript": "^5.3.3",

package/hooks/useDataTableColumns.ts

@@ -4,7 +4,6 @@ import type { DataTableColumn } from '../types/DataTableColumn';
 
 export type DataTableColumnToggle = {
   accessor: string;
-  title: string | undefined;
   defaultToggle: boolean;
   toggleable: boolean;
   toggled: boolean;
@@ -41,7 +40,6 @@ export const useDataTableColumns = <T>({
     columns &&
     columns.map((column) => ({
       accessor: column.accessor,
-      title: column.title,
       defaultToggle: column.defaultToggle || true,
       toggleable: column.toggleable,
       toggled: column.defaultToggle === undefined ? true : column.defaultToggle,