From 055377f1089e0a0636f7b015274da7bbadc1a1b3 Mon Sep 17 00:00:00 2001
From: Giovambattista Fazioli <giovambattista.fazioli@gmail.com>
Date: Wed, 17 Jan 2024 14:43:45 +0100
Subject: [PATCH] fix: Unhandled Runtime Error

Unhandled Runtime Error
Error: @mantine/hooks use-local-storage: Failed to serialize the value
---
 app/examples/column-dragging-and-toggling/TogglingExample.tsx | 3 ++-
 package/hooks/useDataTableColumns.ts                          | 2 --
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/examples/column-dragging-and-toggling/TogglingExample.tsx b/app/examples/column-dragging-and-toggling/TogglingExample.tsx
index 8230b41bb..3ae90c480 100644
--- a/app/examples/column-dragging-and-toggling/TogglingExample.tsx
+++ b/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 /> },
     ],
   });
 
diff --git a/package/hooks/useDataTableColumns.ts b/package/hooks/useDataTableColumns.ts
index 91868c2e9..c3a2db707 100644
--- a/package/hooks/useDataTableColumns.ts
+++ b/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,