diff --git a/docs/components/CodeDemo.tsx b/docs/components/CodeDemo.tsx
index b706ade..1ffc38f 100644
--- a/docs/components/CodeDemo.tsx
+++ b/docs/components/CodeDemo.tsx
@@ -1,14 +1,14 @@
 import { Tabs } from '@mantine/core';
 import { Prism } from '@mantine/prism';
+import { IconCode, IconComponents } from '@tabler/icons-react';
 import { ReactNode } from 'react';
-import { Code, Components } from 'tabler-icons-react';
 
 export default function CodeDemo({ code, children }: { code: string; children: ReactNode }) {
   return (
     <Tabs variant="pills" defaultValue="comp">
       <Tabs.List position="right">
-        <Tabs.Tab value="comp" icon={<Components />} children="Component" />
-        <Tabs.Tab value="code" children="Code" icon={<Code />} />
+        <Tabs.Tab value="comp" icon={<IconComponents />} children="Component" />
+        <Tabs.Tab value="code" children="Code" icon={<IconCode />} />
       </Tabs.List>
       <Tabs.Panel value="comp" pt="sm">
         {children}
diff --git a/docs/components/Header.tsx b/docs/components/Header.tsx
index eb9488b..493db82 100644
--- a/docs/components/Header.tsx
+++ b/docs/components/Header.tsx
@@ -1,6 +1,6 @@
-import { Title, Group, Header as HeaderMantine, Avatar, useMantineColorScheme, ActionIcon } from '@mantine/core';
+import { ActionIcon, Avatar, Group, Header as HeaderMantine, Title, useMantineColorScheme } from '@mantine/core';
 
-import { BrandGithub, MoonStars, Sun, Table } from 'tabler-icons-react';
+import { IconBrandGithub, IconMoonStars, IconSun, IconTable } from '@tabler/icons-react';
 
 export default function Header() {
   const { colorScheme, toggleColorScheme } = useMantineColorScheme();
@@ -9,7 +9,7 @@ export default function Header() {
     <HeaderMantine height={68}>
       <Group position="apart" align="center" p="xs">
         <Group align="center">
-          <Avatar children={<Table size={32} />} color="blue" radius="xl" size={48} />
+          <Avatar children={<IconTable size={32} />} color="blue" radius="xl" size={48} />
           <Title>Mantine Data Grid</Title>
         </Group>
         <Group align="center">
@@ -25,11 +25,11 @@ export default function Header() {
             target="_blank"
             rel="noopener noreferrer"
           >
-            <BrandGithub size={16} />
+            <IconBrandGithub size={16} />
           </ActionIcon>
 
           <ActionIcon variant="default" onClick={() => toggleColorScheme()} size="lg">
-            {colorScheme === 'dark' ? <Sun size={16} /> : <MoonStars size={16} />}
+            {colorScheme === 'dark' ? <IconSun size={16} /> : <IconMoonStars size={16} />}
           </ActionIcon>
         </Group>
       </Group>
diff --git a/docs/pages/examples/AsyncExample.tsx b/docs/pages/examples/AsyncExample.tsx
index 0f0311c..95b4905 100644
--- a/docs/pages/examples/AsyncExample.tsx
+++ b/docs/pages/examples/AsyncExample.tsx
@@ -1,13 +1,13 @@
+import { Badge } from '@mantine/core';
 import { useEffect, useState } from 'react';
-import { Badge } from 'tabler-icons-react';
 import {
-  booleanFilterFn,
   DataGrid,
   DataGridPaginationState,
+  OnChangeCallback,
+  booleanFilterFn,
   dateFilterFn,
   highlightFilterValue,
   numberFilterFn,
-  OnChangeCallback,
   stringFilterFn,
 } from '../../../src';
 import { Data, demoData } from '../../demoData';
diff --git a/docs/pages/examples/ColumnDragDropExample.tsx b/docs/pages/examples/ColumnDragDropExample.tsx
index e36aea1..05feb1e 100644
--- a/docs/pages/examples/ColumnDragDropExample.tsx
+++ b/docs/pages/examples/ColumnDragDropExample.tsx
@@ -16,7 +16,7 @@ import {
 import { restrictToHorizontalAxis } from '@dnd-kit/modifiers';
 import { arrayMove, horizontalListSortingStrategy, SortableContext, useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { GridDots } from 'tabler-icons-react';
+import { IconGridDots } from '@tabler/icons-react';
 import { DataGrid, DataGridHeaderCellProps } from '../../../src';
 import { Data, demoData } from '../../demoData';
 
@@ -63,7 +63,7 @@ export default function ColumnDragDropExample() {
             <Group position="apart">
               {activeId}
               <ActionIcon ml="auto">
-                <GridDots />
+                <IconGridDots />
               </ActionIcon>
             </Group>
           </Card>
@@ -110,7 +110,7 @@ const DraggableColumnHeader = ({ children, header, ...props }: DataGridHeaderCel
       <Box sx={{ display: 'flex' }}>
         {children}
         <ActionIcon ml="auto">
-          <GridDots {...attributes} {...listeners} />
+          <IconGridDots {...attributes} {...listeners} />
         </ActionIcon>
       </Box>
     </th>
diff --git a/docs/pages/examples/NestedExample.tsx b/docs/pages/examples/NestedExample.tsx
new file mode 100644
index 0000000..34abe7c
--- /dev/null
+++ b/docs/pages/examples/NestedExample.tsx
@@ -0,0 +1,57 @@
+import { Badge, Group } from '@mantine/core';
+import { DataGrid, stringFilterFn } from '../../../src';
+
+const data = [
+  {
+    name: 'First',
+    items: [
+      { name: '2001', role: 'test' },
+      { name: '2002', role: 'testing' },
+    ],
+  },
+  {
+    name: 'Second',
+    items: [
+      { name: '2001', role: 'test' },
+      { name: '2003', role: 'other' },
+    ],
+  },
+];
+
+export default function NestedExample() {
+  return (
+    <DataGrid<(typeof data)[0]>
+      data={data}
+      striped
+      highlightOnHover
+      withGlobalFilter
+      withPagination
+      withColumnFilters
+      withSorting
+      withColumnResizing
+      columns={[
+        {
+          accessorKey: 'name',
+          header: 'name',
+          filterFn: stringFilterFn,
+          size: 100,
+        },
+        {
+          header: 'Years',
+          accessorFn: (v) => JSON.stringify(v.items),
+          cell: ({ row }) => (
+            <Group>
+              {row.original.items.map((role, i) => {
+                return (
+                  <Badge key={i} size="sm" radius="sm">
+                    {role.name}
+                  </Badge>
+                );
+              })}
+            </Group>
+          ),
+        },
+      ]}
+    />
+  );
+}
diff --git a/docs/pages/examples/OnRowExample.tsx b/docs/pages/examples/OnRowExample.tsx
index eeea95d..77d669b 100644
--- a/docs/pages/examples/OnRowExample.tsx
+++ b/docs/pages/examples/OnRowExample.tsx
@@ -28,8 +28,8 @@ export default function OnRowClickExample() {
   return (
     <>
       <Group>
-        <Notification disallowClose title="click on row to highlight" />
-        <Notification disallowClose title="hover over column fish to highlight cell" />
+        <Notification withCloseButton={false} title="click on row to highlight" />
+        <Notification withCloseButton={false} title="hover over column fish to highlight cell" />
       </Group>
       <DataGrid
         data={demoData.slice(0, 10)}
diff --git a/docs/pages/examples/ResetFilterExample.tsx b/docs/pages/examples/ResetFilterExample.tsx
new file mode 100644
index 0000000..1cd3a8e
--- /dev/null
+++ b/docs/pages/examples/ResetFilterExample.tsx
@@ -0,0 +1,71 @@
+import { Button, Stack } from '@mantine/core';
+import { useState } from 'react';
+import {
+  DataGrid,
+  DataGridFiltersState,
+  booleanFilterFn,
+  dateFilterFn,
+  highlightFilterValue,
+  numberFilterFn,
+  stringFilterFn,
+} from '../../../src';
+import { demoData } from '../../demoData';
+
+export default function ResetDefaultExample() {
+  const [filter, setFilter] = useState<DataGridFiltersState>([]);
+
+  return (
+    <Stack>
+      <Button disabled={filter.length === 0} onClick={() => setFilter([])}>
+        Reset Filters
+      </Button>
+      <DataGrid
+        data={demoData}
+        striped
+        highlightOnHover
+        withGlobalFilter
+        withPagination
+        withColumnFilters
+        withSorting
+        withColumnResizing
+        state={{
+          columnFilters: filter,
+        }}
+        onFilter={setFilter}
+        columns={[
+          {
+            accessorKey: 'text',
+            header: 'Text that is too long for a Header',
+            filterFn: stringFilterFn,
+            size: 300,
+            cell: highlightFilterValue,
+          },
+          {
+            header: 'Animal',
+            columns: [
+              { accessorKey: 'cat', filterFn: stringFilterFn },
+              {
+                accessorKey: 'fish',
+                filterFn: stringFilterFn,
+              },
+            ],
+          },
+          {
+            accessorKey: 'city',
+            filterFn: stringFilterFn,
+          },
+          { accessorKey: 'value', filterFn: numberFilterFn },
+          {
+            accessorKey: 'date',
+            cell: (cell) => cell.getValue<Date>()?.toLocaleDateString(),
+            filterFn: dateFilterFn,
+          },
+          {
+            accessorKey: 'bool',
+            filterFn: booleanFilterFn,
+          },
+        ]}
+      />
+    </Stack>
+  );
+}
diff --git a/docs/pages/examples/index.ts b/docs/pages/examples/index.ts
index c057b2c..4d10d15 100644
--- a/docs/pages/examples/index.ts
+++ b/docs/pages/examples/index.ts
@@ -71,6 +71,14 @@ import RowExpandingExample from './RowExpandingExample';
 // @ts-ignore
 import RowExpandingExampleCode from './RowExpandingExample.tsx?raw';
 
+import NestedExample from './NestedExample';
+// @ts-ignore
+import NestedExampleCode from './NestedExample.tsx?raw';
+
+import ResetFilterExample from './ResetFilterExample';
+// @ts-ignore
+import ResetFilterExampleCode from './ResetFilterExample.tsx?raw';
+
 export type Example = {
   label: string;
   path: string;
@@ -182,4 +190,16 @@ export const examples = {
     element: RowExpandingExample,
     code: RowExpandingExampleCode,
   }),
+  nested: ex({
+    label: 'Nested Data example',
+    path: '/example/nested',
+    element: NestedExample,
+    code: NestedExampleCode,
+  }),
+  reset: ex({
+    label: 'Reset Filter',
+    path: '/example/reset',
+    element: ResetFilterExample,
+    code: ResetFilterExampleCode,
+  }),
 };
diff --git a/docs/pages/index.ts b/docs/pages/index.ts
index 8cf93a0..c265de2 100644
--- a/docs/pages/index.ts
+++ b/docs/pages/index.ts
@@ -1,5 +1,5 @@
+import { IconBook, IconFilter, IconPaint, IconRocket, IconStar } from '@tabler/icons-react';
 import { ComponentType } from 'react';
-import { Book, Filter, Paint, Rocket, Star } from 'tabler-icons-react';
 import Demo from './Demo';
 import Filters from './Filters';
 import GettingStarted from './GettingStarted';
@@ -19,35 +19,35 @@ export type Page = {
 export const pages: Page[] = [
   {
     color: 'orange',
-    icon: Star,
+    icon: IconStar,
     label: 'Demo',
     path: '/',
     element: Demo,
   },
   {
     color: 'teal',
-    icon: Rocket,
+    icon: IconRocket,
     label: 'Getting started',
     path: '/getting-started',
     element: GettingStarted,
   },
   {
     color: 'red',
-    icon: Book,
+    icon: IconBook,
     label: 'Properties',
     path: '/properties',
     element: Properties,
   },
   {
     color: 'indigo',
-    icon: Paint,
+    icon: IconPaint,
     label: 'Styles',
     path: '/styles',
     element: Styles,
   },
   {
     color: 'yellow',
-    icon: Filter,
+    icon: IconFilter,
     label: 'Filters',
     path: '/filters',
     element: Filters,
diff --git a/package-lock.json b/package-lock.json
index 48ba89d..57a966a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,8 +17,7 @@
         "@tanstack/react-virtual": "3.0.0-beta.26",
         "dayjs": "^1.11.7",
         "react": "^18.0.0",
-        "react-dom": "^18.0.0",
-        "tabler-icons-react": "^1.56.0"
+        "react-dom": "^18.0.0"
       },
       "devDependencies": {
         "@commitlint/cli": "17.4.4",
diff --git a/package.json b/package.json
index a31e308..7e0f818 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mantine-data-grid",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "homepage": "https://kuechlin.github.io/mantine-data-grid/",
   "repository": {
     "type": "git",
@@ -31,16 +31,16 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@emotion/react": "^11.10.6",
+    "@emotion/react": "^11.11.0",
     "@mantine/core": "^6.0.6",
     "@mantine/dates": "^6.0.6",
     "@mantine/hooks": "^6.0.6",
-    "@tanstack/react-table": "8.8.5",
+    "@tabler/icons-react": "^2.20.0",
+    "@tanstack/react-table": "8.9.1",
     "@tanstack/react-virtual": "3.0.0-beta.26",
     "dayjs": "^1.11.7",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "tabler-icons-react": "^1.56.0"
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
     "@commitlint/cli": "17.5.1",
@@ -73,6 +73,10 @@
     "vite": "4.2.1"
   },
   "peerDependencies": {
+    "@emotion/react": "^11.10.6",
+    "@mantine/core": "^6.0.6",
+    "@mantine/dates": "^6.0.6",
+    "@mantine/hooks": "^6.0.6",
     "dayjs": "^1.11.7",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 374fe33..4ab496a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,13 +7,14 @@ specifiers:
   '@dnd-kit/modifiers': 6.0.1
   '@dnd-kit/sortable': 7.0.2
   '@dnd-kit/utilities': 3.2.1
-  '@emotion/react': ^11.10.6
+  '@emotion/react': ^11.11.0
   '@faker-js/faker': 7.6.0
   '@mantine/core': ^6.0.6
   '@mantine/dates': ^6.0.6
   '@mantine/hooks': ^6.0.6
   '@mantine/prism': 6.0.6
-  '@tanstack/react-table': 8.8.5
+  '@tabler/icons-react': ^2.20.0
+  '@tanstack/react-table': 8.9.1
   '@tanstack/react-virtual': 3.0.0-beta.26
   '@types/node': 18.15.11
   '@types/react': 18.0.33
@@ -36,21 +37,20 @@ specifiers:
   react-router-dom: 6.10.0
   rollup: 3.20.2
   rollup-plugin-visualizer: 5.9.0
-  tabler-icons-react: ^1.56.0
   typescript: 4.9.5
   vite: 4.2.1
 
 dependencies:
-  '@emotion/react': 11.10.6_pofolu2o2erjq4lhyzl3hqovzq
-  '@mantine/core': 6.0.11_efsdpiyvsd2ra7l4auvahzybmy
+  '@emotion/react': 11.11.0_pofolu2o2erjq4lhyzl3hqovzq
+  '@mantine/core': 6.0.11_scoa6eu6d4jvra7gycgvpk5iwa
   '@mantine/dates': 6.0.11_vdmfa7bh7vsvlxpy4ncjhijilu
   '@mantine/hooks': 6.0.11_react@18.2.0
-  '@tanstack/react-table': 8.8.5_biqbaboplfbrettd7655fr4n2y
+  '@tabler/icons-react': 2.20.0_react@18.2.0
+  '@tanstack/react-table': 8.9.1_biqbaboplfbrettd7655fr4n2y
   '@tanstack/react-virtual': 3.0.0-beta.26_react@18.2.0
   dayjs: 1.11.7
   react: 18.2.0
   react-dom: 18.2.0_react@18.2.0
-  tabler-icons-react: 1.56.0_react@18.2.0
 
 devDependencies:
   '@commitlint/cli': 17.5.1
@@ -541,38 +541,38 @@ packages:
       tslib: 2.4.0
     dev: true
 
-  /@emotion/babel-plugin/11.10.6:
-    resolution: {integrity: sha512-p2dAqtVrkhSa7xz1u/m9eHYdLi+en8NowrmXeF/dKtJpU8lCWli8RUAati7NcSl0afsBott48pdnANuD0wh9QQ==}
+  /@emotion/babel-plugin/11.11.0:
+    resolution: {integrity: sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==}
     dependencies:
       '@babel/helper-module-imports': 7.18.6
       '@babel/runtime': 7.19.0
-      '@emotion/hash': 0.9.0
-      '@emotion/memoize': 0.8.0
-      '@emotion/serialize': 1.1.1
+      '@emotion/hash': 0.9.1
+      '@emotion/memoize': 0.8.1
+      '@emotion/serialize': 1.1.2
       babel-plugin-macros: 3.1.0
       convert-source-map: 1.8.0
       escape-string-regexp: 4.0.0
       find-root: 1.1.0
       source-map: 0.5.7
-      stylis: 4.1.3
+      stylis: 4.2.0
 
-  /@emotion/cache/11.10.5:
-    resolution: {integrity: sha512-dGYHWyzTdmK+f2+EnIGBpkz1lKc4Zbj2KHd4cX3Wi8/OWr5pKslNjc3yABKH4adRGCvSX4VDC0i04mrrq0aiRA==}
+  /@emotion/cache/11.11.0:
+    resolution: {integrity: sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==}
     dependencies:
-      '@emotion/memoize': 0.8.0
-      '@emotion/sheet': 1.2.1
-      '@emotion/utils': 1.2.0
-      '@emotion/weak-memoize': 0.3.0
-      stylis: 4.1.3
+      '@emotion/memoize': 0.8.1
+      '@emotion/sheet': 1.2.2
+      '@emotion/utils': 1.2.1
+      '@emotion/weak-memoize': 0.3.1
+      stylis: 4.2.0
 
-  /@emotion/hash/0.9.0:
-    resolution: {integrity: sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==}
+  /@emotion/hash/0.9.1:
+    resolution: {integrity: sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==}
 
-  /@emotion/memoize/0.8.0:
-    resolution: {integrity: sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==}
+  /@emotion/memoize/0.8.1:
+    resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==}
 
-  /@emotion/react/11.10.6_pofolu2o2erjq4lhyzl3hqovzq:
-    resolution: {integrity: sha512-6HT8jBmcSkfzO7mc+N1L9uwvOnlcGoix8Zn7srt+9ga0MjREo6lRpuVX0kzo6Jp6oTqDhREOFsygN6Ew4fEQbw==}
+  /@emotion/react/11.11.0_pofolu2o2erjq4lhyzl3hqovzq:
+    resolution: {integrity: sha512-ZSK3ZJsNkwfjT3JpDAWJZlrGD81Z3ytNDsxw1LKq1o+xkmO5pnWfr6gmCC8gHEFf3nSSX/09YrG67jybNPxSUw==}
     peerDependencies:
       '@types/react': '*'
       react: '>=16.8.0'
@@ -581,43 +581,43 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.19.0
-      '@emotion/babel-plugin': 11.10.6
-      '@emotion/cache': 11.10.5
-      '@emotion/serialize': 1.1.1
-      '@emotion/use-insertion-effect-with-fallbacks': 1.0.0_react@18.2.0
-      '@emotion/utils': 1.2.0
-      '@emotion/weak-memoize': 0.3.0
+      '@emotion/babel-plugin': 11.11.0
+      '@emotion/cache': 11.11.0
+      '@emotion/serialize': 1.1.2
+      '@emotion/use-insertion-effect-with-fallbacks': 1.0.1_react@18.2.0
+      '@emotion/utils': 1.2.1
+      '@emotion/weak-memoize': 0.3.1
       '@types/react': 18.0.33
       hoist-non-react-statics: 3.3.2
       react: 18.2.0
 
-  /@emotion/serialize/1.1.1:
-    resolution: {integrity: sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA==}
+  /@emotion/serialize/1.1.2:
+    resolution: {integrity: sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==}
     dependencies:
-      '@emotion/hash': 0.9.0
-      '@emotion/memoize': 0.8.0
-      '@emotion/unitless': 0.8.0
-      '@emotion/utils': 1.2.0
+      '@emotion/hash': 0.9.1
+      '@emotion/memoize': 0.8.1
+      '@emotion/unitless': 0.8.1
+      '@emotion/utils': 1.2.1
       csstype: 3.1.1
 
-  /@emotion/sheet/1.2.1:
-    resolution: {integrity: sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA==}
+  /@emotion/sheet/1.2.2:
+    resolution: {integrity: sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==}
 
-  /@emotion/unitless/0.8.0:
-    resolution: {integrity: sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==}
+  /@emotion/unitless/0.8.1:
+    resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==}
 
-  /@emotion/use-insertion-effect-with-fallbacks/1.0.0_react@18.2.0:
-    resolution: {integrity: sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==}
+  /@emotion/use-insertion-effect-with-fallbacks/1.0.1_react@18.2.0:
+    resolution: {integrity: sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==}
     peerDependencies:
       react: '>=16.8.0'
     dependencies:
       react: 18.2.0
 
-  /@emotion/utils/1.2.0:
-    resolution: {integrity: sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw==}
+  /@emotion/utils/1.2.1:
+    resolution: {integrity: sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==}
 
-  /@emotion/weak-memoize/0.3.0:
-    resolution: {integrity: sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg==}
+  /@emotion/weak-memoize/0.3.1:
+    resolution: {integrity: sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==}
 
   /@esbuild/android-arm/0.17.19:
     resolution: {integrity: sha512-rIKddzqhmav7MSmoFCmDIb6e2W57geRsM94gV2l38fzhXMwq7hZoClug9USI2pFRGL06f4IOPHHpFNOkWieR8A==}
@@ -956,7 +956,7 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.14
     dev: true
 
-  /@mantine/core/6.0.11_efsdpiyvsd2ra7l4auvahzybmy:
+  /@mantine/core/6.0.11_scoa6eu6d4jvra7gycgvpk5iwa:
     resolution: {integrity: sha512-S8koDsh1mlezqoOST7UfNfojKR0FWFIrzN3RkxoHlD7ggawrxeCPjHqk0bfUyKBvDOa2UiDpjWVYYSUtxZqpLw==}
     peerDependencies:
       '@mantine/hooks': 6.0.11
@@ -965,7 +965,7 @@ packages:
     dependencies:
       '@floating-ui/react': 0.19.2_zn3vyfk3tbnwebg5ldvieekjaq
       '@mantine/hooks': 6.0.11_react@18.2.0
-      '@mantine/styles': 6.0.11_keyspdss4kub3atek752gc6fle
+      '@mantine/styles': 6.0.11_47zgoiguaund3gg2dv4s2nbrcu
       '@mantine/utils': 6.0.11_react@18.2.0
       '@radix-ui/react-scroll-area': 1.0.2_biqbaboplfbrettd7655fr4n2y
       react: 18.2.0
@@ -984,7 +984,7 @@ packages:
       dayjs: '>=1.0.0'
       react: '>=16.8.0'
     dependencies:
-      '@mantine/core': 6.0.11_efsdpiyvsd2ra7l4auvahzybmy
+      '@mantine/core': 6.0.11_scoa6eu6d4jvra7gycgvpk5iwa
       '@mantine/hooks': 6.0.11_react@18.2.0
       '@mantine/utils': 6.0.11_react@18.2.0
       dayjs: 1.11.7
@@ -1006,7 +1006,7 @@ packages:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
     dependencies:
-      '@mantine/core': 6.0.11_efsdpiyvsd2ra7l4auvahzybmy
+      '@mantine/core': 6.0.11_scoa6eu6d4jvra7gycgvpk5iwa
       '@mantine/hooks': 6.0.11_react@18.2.0
       '@mantine/utils': 6.0.6_react@18.2.0
       prism-react-renderer: 1.3.5_react@18.2.0
@@ -1014,14 +1014,14 @@ packages:
       react-dom: 18.2.0_react@18.2.0
     dev: true
 
-  /@mantine/styles/6.0.11_keyspdss4kub3atek752gc6fle:
+  /@mantine/styles/6.0.11_47zgoiguaund3gg2dv4s2nbrcu:
     resolution: {integrity: sha512-SNqDIfgs3DVUHsFQ9+5MdZ3CkNHutBCAeaBL1PxlOxhNWB0tlii61rTAwUULxhu8p9MBNMae2UvDUN+gUPvA/A==}
     peerDependencies:
       '@emotion/react': '>=11.9.0'
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
     dependencies:
-      '@emotion/react': 11.10.6_pofolu2o2erjq4lhyzl3hqovzq
+      '@emotion/react': 11.11.0_pofolu2o2erjq4lhyzl3hqovzq
       clsx: 1.1.1
       csstype: 3.0.9
       react: 18.2.0
@@ -1181,14 +1181,28 @@ packages:
     engines: {node: '>=14'}
     dev: true
 
-  /@tanstack/react-table/8.8.5_biqbaboplfbrettd7655fr4n2y:
-    resolution: {integrity: sha512-g/t21E/ICHvaCOJOhsDNr5QaB/6aDQEHFbx/YliwwU/CJThMqG+dS28vnToIBV/5MBgpeXoGRi2waDJVJlZrtg==}
+  /@tabler/icons-react/2.20.0_react@18.2.0:
+    resolution: {integrity: sha512-r2uC0Mi3ozHD2G+IYi0A0Iy2203dbQo5EAFxn055MyIhH7U2VNsvyopTqOj+AVedy7cqR86T9zhryRUGC78WZA==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0
+    dependencies:
+      '@tabler/icons': 2.20.0
+      prop-types: 15.8.1
+      react: 18.2.0
+    dev: false
+
+  /@tabler/icons/2.20.0:
+    resolution: {integrity: sha512-BsUEJoqREs8bqcrf5HfJBq6/rDvsRI3h+T+0X1o7i8LBHonsH0iAngcyL0I82YKoSy9NiVDvM3LV63zDP0nPYQ==}
+    dev: false
+
+  /@tanstack/react-table/8.9.1_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-yHs2m6lk5J5RNcu2dNtsDGux66wNXZjEgzxos6MRCX8gL+nqxeW3ZglqP6eANN0bGElPnjvqiUHGQvdACOr3Cw==}
     engines: {node: '>=12'}
     peerDependencies:
       react: '>=16'
       react-dom: '>=16'
     dependencies:
-      '@tanstack/table-core': 8.8.5
+      '@tanstack/table-core': 8.9.1
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
     dev: false
@@ -1202,8 +1216,8 @@ packages:
       react: 18.2.0
     dev: false
 
-  /@tanstack/table-core/8.8.5:
-    resolution: {integrity: sha512-Xnwa1qxpgvSW7ozLiexmKp2PIYcLBiY/IizbdGriYCL6OOHuZ9baRhrrH51zjyz+61ly6K59rmt6AI/3RR+97Q==}
+  /@tanstack/table-core/8.9.1:
+    resolution: {integrity: sha512-2+R83n8vMZND0q3W1lSiF7co9nFbeWbjAErFf27xwbeA9E0wtUu5ZDfgj+TZ6JzdAEQAgfxkk/QNFAKiS8E4MA==}
     engines: {node: '>=12'}
     dev: false
 
@@ -3276,6 +3290,11 @@ packages:
       path-key: 4.0.0
     dev: true
 
+  /object-assign/4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /object-inspect/1.12.2:
     resolution: {integrity: sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==}
     dev: true
@@ -3481,6 +3500,14 @@ packages:
       react: 18.2.0
     dev: true
 
+  /prop-types/15.8.1:
+    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      react-is: 16.13.1
+    dev: false
+
   /punycode/2.1.1:
     resolution: {integrity: sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==}
     engines: {node: '>=6'}
@@ -3977,8 +4004,8 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /stylis/4.1.3:
-    resolution: {integrity: sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==}
+  /stylis/4.2.0:
+    resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==}
 
   /supports-color/5.5.0:
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
@@ -4008,14 +4035,6 @@ packages:
   /tabbable/6.1.1:
     resolution: {integrity: sha512-4kl5w+nCB44EVRdO0g/UGoOp3vlwgycUVtkk/7DPyeLZUCuNFFKCFG6/t/DgHLrUPHjrZg6s5tNm+56Q2B0xyg==}
 
-  /tabler-icons-react/1.56.0_react@18.2.0:
-    resolution: {integrity: sha512-FOme3w6PJIWDpeXqQ4xjArQqdxzrr9xNy7PSSgWpRzOUQ71RyZ7jt6WThsfyLBz5os78TPJRA8f/0NLjnKcx9A==}
-    peerDependencies:
-      react: '>= 16.8.0'
-    dependencies:
-      react: 18.2.0
-    dev: false
-
   /tapable/2.2.1:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
     engines: {node: '>=6'}
diff --git a/src/ColumnFilter.tsx b/src/ColumnFilter.tsx
index 89db019..1a0b9f2 100644
--- a/src/ColumnFilter.tsx
+++ b/src/ColumnFilter.tsx
@@ -1,8 +1,8 @@
 import { ActionIcon, Button, Group, Menu, Stack } from '@mantine/core';
 import { useSetState } from '@mantine/hooks';
+import { IconCheck, IconFilter, IconX } from '@tabler/icons-react';
 import { Column } from '@tanstack/react-table';
 import { createElement, useState } from 'react';
-import { Check, Filter, X } from 'tabler-icons-react';
 import { DataGridFilterFn, isDataGridFilter } from './filters/types';
 
 export interface ColumnFilterProps {
@@ -12,7 +12,7 @@ export interface ColumnFilterProps {
   color: string;
 }
 
-export const ColumnFilter = function ColumnFilter({ column, className, color, filterFn }: ColumnFilterProps) {
+export const DefaultColumnFilter = function ColumnFilter({ column, className, color, filterFn }: ColumnFilterProps) {
   const [state, setState] = useSetState({ open: false, value: null as unknown });
 
   const handleOpen = () =>
@@ -55,7 +55,7 @@ export const ColumnFilter = function ColumnFilter({ column, className, color, fi
       <Menu.Target>
         <ActionIcon
           size="xs"
-          children={<Filter size={16} />}
+          children={<IconFilter size={16} />}
           onClick={handleOpen}
           className={className}
           variant={column.getIsFiltered() ? 'light' : 'transparent'}
@@ -69,7 +69,7 @@ export const ColumnFilter = function ColumnFilter({ column, className, color, fi
 
             <Group position="apart">
               <Button
-                children={<X />}
+                children={<IconX />}
                 color="gray"
                 onClick={handleClear}
                 compact
@@ -77,7 +77,7 @@ export const ColumnFilter = function ColumnFilter({ column, className, color, fi
                 aria-label="Reste Filter"
               />
               <Button
-                children={<Check />}
+                children={<IconCheck />}
                 onClick={handleSave}
                 compact
                 variant="outline"
diff --git a/src/ColumnSorter.tsx b/src/ColumnSorter.tsx
index e1919c9..cddd5c6 100644
--- a/src/ColumnSorter.tsx
+++ b/src/ColumnSorter.tsx
@@ -1,6 +1,6 @@
 import { ActionIcon } from '@mantine/core';
+import { IconChevronDown, IconSelector } from '@tabler/icons-react';
 import { Column } from '@tanstack/react-table';
-import { ChevronDown, Selector } from 'tabler-icons-react';
 
 export interface ColumnSorterProps {
   column: Column<any, any>;
@@ -8,7 +8,7 @@ export interface ColumnSorterProps {
   color: string;
 }
 
-export const ColumnSorter = ({ column, className, color }: ColumnSorterProps) => {
+export const DefaultColumnSorter = ({ column, className, color }: ColumnSorterProps) => {
   const sorted = column.getIsSorted();
   return (
     <ActionIcon
@@ -21,7 +21,7 @@ export const ColumnSorter = ({ column, className, color }: ColumnSorterProps) =>
       }}
       variant={sorted ? 'light' : 'transparent'}
       color={sorted ? color : 'gray'}
-      children={sorted ? <ChevronDown size={16} /> : <Selector size={16} />}
+      children={sorted ? <IconChevronDown size={16} /> : <IconSelector size={16} />}
     />
   );
 };
diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index 519eb2b..80827c6 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -1,14 +1,8 @@
-import { LoadingOverlay, ScrollArea, Stack, Table as MantineTable, Text } from '@mantine/core';
+import { LoadingOverlay, Table as MantineTable, ScrollArea, Stack, Text } from '@mantine/core';
+import { IconBoxOff } from '@tabler/icons-react';
 import {
   ColumnFiltersState,
   ExpandedState,
-  flexRender,
-  functionalUpdate,
-  getCoreRowModel,
-  getExpandedRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
   OnChangeFn,
   PaginationState,
   Row,
@@ -16,15 +10,21 @@ import {
   RowSelectionState,
   SortingState,
   Table,
+  TableState,
+  flexRender,
+  functionalUpdate,
+  getCoreRowModel,
+  getExpandedRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
   useReactTable,
 } from '@tanstack/react-table';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { Fragment, RefCallback, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { BoxOff } from 'tabler-icons-react';
-import { ColumnFilter } from './ColumnFilter';
-import { ColumnSorter } from './ColumnSorter';
+import { DefaultColumnFilter } from './ColumnFilter';
+import { DefaultColumnSorter } from './ColumnSorter';
 import useStyles from './DataGrid.styles';
-import { isDataGridFilter } from './filters';
 import { GlobalFilter, globalFilterFn } from './GlobalFilter';
 import { DEFAULT_INITIAL_SIZE, Pagination as DefaultPagination } from './Pagination';
 import { getRowSelectionColumn } from './RowSelection';
@@ -36,6 +36,7 @@ import {
   DefaultHeaderRow,
   DefaultHeaderWrapper,
 } from './TableComponents';
+import { isDataGridFilter } from './filters';
 import { DataGridProps } from './types';
 
 export function useDataGrid<TData extends RowData>(): [Table<TData> | null, RefCallback<Table<TData>>] {
@@ -95,7 +96,17 @@ export function DataGrid<TData extends RowData>({
   empty,
   locale,
   // component overrides
-  components: { headerWrapper, headerRow, headerCell, bodyWrapper, bodyRow, bodyCell, pagination } = {},
+  components: {
+    headerWrapper,
+    headerRow,
+    headerCell,
+    bodyWrapper,
+    bodyRow,
+    bodyCell,
+    pagination,
+    columnFilter,
+    columnSorter,
+  } = {},
   // table option ovverides
   options,
   // rest
@@ -108,6 +119,8 @@ export function DataGrid<TData extends RowData>({
   const BodyRow = bodyRow ?? DefaultBodyRow;
   const BodyCell = bodyCell ?? DefaultBodyCell;
   const Pagination = pagination ?? DefaultPagination;
+  const ColumnFilter = columnFilter ?? DefaultColumnFilter;
+  const ColumnSorter = columnSorter ?? DefaultColumnSorter;
   const { classes, theme, cx } = useStyles(
     {
       height,
@@ -170,88 +183,59 @@ export function DataGrid<TData extends RowData>({
     }
   }, [table, width, noFlexLayout, tableSize]);
 
-  const handleGlobalFilterChange: OnChangeFn<string> = useCallback(
-    (arg0) =>
-      table.setState((state) => {
-        const next = functionalUpdate(arg0, state.globalFilter || '');
-        onSearch && onSearch(next);
-        return {
-          ...state,
-          globalFilter: next,
-        };
-      }),
-    [table, onSearch]
+  const handleChange = useCallback(
+    function change<T extends keyof TableState>(
+      key: T,
+      handler?: (value: TableState[T]) => void
+    ): OnChangeFn<TableState[T]> {
+      return (arg0) => {
+        if (state && state[key]) {
+          const next = functionalUpdate(arg0, state[key]);
+          handler && handler(next);
+        } else {
+          table.setState((state) => {
+            const next = functionalUpdate(arg0, state[key]);
+            handler && handler(next);
+            return {
+              ...state,
+              [key]: next,
+            };
+          });
+        }
+      };
+    },
+    [state, table]
   );
 
-  const handleSortingChange: OnChangeFn<SortingState> = useCallback(
-    (arg0) =>
-      table.setState((state) => {
-        const next = functionalUpdate(arg0, state.sorting);
-        onSort && onSort(next);
-        return {
-          ...state,
-          sorting: next,
-        };
-      }),
-    [table, onSort]
-  );
+  const handleGlobalFilterChange: OnChangeFn<string> = useCallback(handleChange('globalFilter', onSearch), [
+    handleChange,
+    onSearch,
+  ]);
+
+  const handleSortingChange: OnChangeFn<SortingState> = useCallback(handleChange('sorting', onSort), [
+    handleChange,
+    onSort,
+  ]);
 
   const handleColumnFiltersChange: OnChangeFn<ColumnFiltersState> = useCallback(
-    (arg0) =>
-      table.setState((state) => {
-        const next = functionalUpdate(arg0, state.columnFilters);
-        onFilter && onFilter(next);
-        return {
-          ...state,
-          columnFilters: next,
-        };
-      }),
-    [table, onFilter]
+    handleChange('columnFilters', onFilter),
+    [handleChange, onFilter]
   );
 
-  const handlePaginationChange: OnChangeFn<PaginationState> = useCallback(
-    (arg0) => {
-      const pagination = table.getState().pagination;
-      const next = functionalUpdate(arg0, pagination);
-      if (next.pageIndex !== pagination.pageIndex || next.pageSize !== pagination.pageSize) {
-        onPageChange && onPageChange(next);
-        table.setState((state) => ({
-          ...state,
-          pagination: next,
-        }));
-      }
-    },
-    [table, onPageChange]
-  );
+  const handlePaginationChange: OnChangeFn<PaginationState> = useCallback(handleChange('pagination', onPageChange), [
+    handleChange,
+    onPageChange,
+  ]);
 
   const handleRowSelectionChange: OnChangeFn<RowSelectionState> = useCallback(
-    (arg0) => {
-      table.setState(() => {
-        const state = table.getState();
-        const next = functionalUpdate(arg0, state.rowSelection);
-        onRowSelectionChange && onRowSelectionChange(next);
-        return {
-          ...state,
-          rowSelection: next,
-        };
-      });
-    },
-    [table, onRowSelectionChange]
+    handleChange('rowSelection', onRowSelectionChange),
+    [handleChange, onRowSelectionChange]
   );
 
-  const handleExpandedChange: OnChangeFn<ExpandedState> = useCallback(
-    (arg0) => {
-      table.setState((state) => {
-        const next = functionalUpdate(arg0, state.expanded);
-        onExpandedChange && onExpandedChange(next);
-        return {
-          ...state,
-          expanded: next,
-        };
-      });
-    },
-    [table, onExpandedChange]
-  );
+  const handleExpandedChange: OnChangeFn<ExpandedState> = useCallback(handleChange('expanded', onExpandedChange), [
+    handleChange,
+    onExpandedChange,
+  ]);
 
   const pageCount = withPagination && total ? Math.ceil(total / table.getState().pagination.pageSize) : undefined;
 
@@ -431,7 +415,7 @@ export function DataGrid<TData extends RowData>({
                 <td style={{ width: '100%' }}>
                   {empty || (
                     <Stack align="center" spacing="xs">
-                      <BoxOff size={64} />
+                      <IconBoxOff size={64} />
                       <Text weight="bold">No Data</Text>
                     </Stack>
                   )}
diff --git a/src/GlobalFilter.tsx b/src/GlobalFilter.tsx
index 780cc81..d4695f7 100644
--- a/src/GlobalFilter.tsx
+++ b/src/GlobalFilter.tsx
@@ -1,7 +1,7 @@
 import { TextInput } from '@mantine/core';
+import { IconSearch } from '@tabler/icons-react';
 import { FilterFn, Table } from '@tanstack/react-table';
 import { isValidElement, useEffect, useState } from 'react';
-import { Search } from 'tabler-icons-react';
 import { renderToString } from 'react-dom/server';
 import { DataGridLocale } from './types';
 
@@ -32,7 +32,7 @@ export function GlobalFilter<TData>({ table, className, locale }: GlobalFilterPr
       value={value}
       onChange={(e) => setValue(e.target.value)}
       placeholder={locale?.globalSearch || 'Search...'}
-      rightSection={<Search />}
+      rightSection={<IconSearch />}
       className={className}
     />
   );
diff --git a/src/RowSelection.tsx b/src/RowSelection.tsx
index 19a4ebc..0cd7c9b 100644
--- a/src/RowSelection.tsx
+++ b/src/RowSelection.tsx
@@ -14,8 +14,8 @@ export const getRowSelectionColumn = <TData extends RowData>(): ColumnDef<TData,
   cell: ({ row }) => (
     <Checkbox disabled={!row.getCanSelect()} checked={row.getIsSelected()} onChange={row.getToggleSelectedHandler()} />
   ),
-  size: 40,
-  minSize: 40,
-  maxSize: 40,
+  size: 44,
+  minSize: 44,
+  maxSize: 44,
   enableResizing: false,
 });
diff --git a/src/filters/dateFilter.tsx b/src/filters/dateFilter.tsx
index bd7b677..6f0eae1 100644
--- a/src/filters/dateFilter.tsx
+++ b/src/filters/dateFilter.tsx
@@ -1,8 +1,8 @@
 import { DatePickerInput } from '@mantine/dates';
+import { IconFilter } from '@tabler/icons-react';
 import dayjs, { Dayjs } from 'dayjs';
 import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
 import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
-import { Filter } from 'tabler-icons-react';
 import { createOperatorFilter, OperatorFilterOptions } from './createOperatorFilter';
 import { DataGridFilterInput, DataGridFilterOperator } from './types';
 
@@ -46,7 +46,7 @@ export function createDateFilterInput(withTime = false): DataGridFilterInput<Dat
             {...rest}
             value={[parseDate(value[0]), parseDate(value[1])]}
             onChange={(value) => onChange([toString(value[0]), toString(value[1])])}
-            rightSection={<Filter size={20} />}
+            rightSection={<IconFilter size={20} />}
           />
           {/*withTime && (
             <TimeRangeInput
@@ -65,7 +65,7 @@ export function createDateFilterInput(withTime = false): DataGridFilterInput<Dat
             {...rest}
             value={parseDate(value)}
             onChange={(value) => onChange(toString(value))}
-            rightSection={<Filter size={20} />}
+            rightSection={<IconFilter size={20} />}
           />
           {/*withTime && (
             <TimeInput
diff --git a/src/filters/numberFilter.tsx b/src/filters/numberFilter.tsx
index 06c2c70..7a91b4a 100644
--- a/src/filters/numberFilter.tsx
+++ b/src/filters/numberFilter.tsx
@@ -1,6 +1,6 @@
 import { Group, NumberInput } from '@mantine/core';
-import { Filter } from 'tabler-icons-react';
-import { createOperatorFilter, OperatorFilterOptions } from './createOperatorFilter';
+import { IconFilter } from '@tabler/icons-react';
+import { OperatorFilterOptions, createOperatorFilter } from './createOperatorFilter';
 import { DataGridFilterInput, DataGridFilterOperator } from './types';
 
 type NumberFilterValue = number | [number, number];
@@ -16,7 +16,7 @@ export const NumberFilterInput: DataGridFilterInput<NumberFilterValue> = ({ onCh
       {...rest}
       value={value}
       onChange={(val) => onChange(Number(val) ?? 0)}
-      rightSection={<Filter size={20} />}
+      rightSection={<IconFilter size={20} />}
       hideControls
     />
   );
diff --git a/src/filters/stringFilter.tsx b/src/filters/stringFilter.tsx
index e402432..640e018 100644
--- a/src/filters/stringFilter.tsx
+++ b/src/filters/stringFilter.tsx
@@ -1,5 +1,5 @@
 import { TextInput } from '@mantine/core';
-import { Filter } from 'tabler-icons-react';
+import { IconFilter } from '@tabler/icons-react';
 import { createOperatorFilter, OperatorFilterOptions } from './createOperatorFilter';
 import { DataGridFilterInput, DataGridFilterOperator } from './types';
 
@@ -9,7 +9,7 @@ export const StringFilterInput: DataGridFilterInput<string> = ({ onChange, ...re
   <TextInput
     {...rest}
     onChange={(e) => onChange(e.target.value)}
-    rightSection={<Filter size={20} />}
+    rightSection={<IconFilter size={20} />}
     aria-label="Filter value"
   />
 );
diff --git a/src/types.ts b/src/types.ts
index c7e8d22..df331f5 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -16,6 +16,8 @@ import {
   TableState,
 } from '@tanstack/react-table';
 import { ComponentPropsWithoutRef, ComponentType, HTMLAttributes, ReactElement, ReactNode, Ref } from 'react';
+import { ColumnFilterProps } from './ColumnFilter';
+import { ColumnSorterProps } from './ColumnSorter';
 import useStyles from './DataGrid.styles';
 import { PaginationProps } from './Pagination';
 import {
@@ -229,4 +231,6 @@ export type DataGridComponents<TData> = {
   bodyRow: ComponentType<DataGridBodyRowProps<TData>>;
   bodyCell: ComponentType<DataGridBodyCellProps<TData>>;
   pagination: ComponentType<PaginationProps<TData>>;
+  columnFilter: ComponentType<ColumnFilterProps>;
+  columnSorter: ComponentType<ColumnSorterProps>;
 };
diff --git a/vite.config.ts b/vite.config.ts
index f027cc5..62d4f69 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,7 +1,7 @@
 import { resolve } from 'path';
-import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { visualizer } from 'rollup-plugin-visualizer';
+import { defineConfig } from 'vite';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -15,12 +15,20 @@ export default defineConfig({
     rollupOptions: {
       // make sure to externalize deps that shouldn't be bundled
       // into your library
-      external: ['dayjs', 'react', 'react-dom', '@mantine/core', '@mantine/dates', '@mantine/hooks'],
+      external: [
+        'dayjs',
+        'react',
+        'react/jsx-runtime',
+        'react-dom/server',
+        '@mantine/core',
+        '@mantine/dates',
+        '@mantine/hooks',
+      ],
       output: {
-        // Provide global variables to use in the UMD build
-        // for externalized deps
         globals: {
           react: 'React',
+          'react-dom/server': 'ReactDom',
+          dayjs: 'dayjs',
         },
       },
     },