fix: global filter on nested data #58

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}

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>

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';

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>

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>
+          ),
+        },
+      ]}
+    />
+  );
+}

docs/pages/examples/index.ts

@@ -71,6 +71,10 @@ import RowExpandingExample from './RowExpandingExample';
 // @ts-ignore
 import RowExpandingExampleCode from './RowExpandingExample.tsx?raw';
 
+import NestedExample from './NestedExample';
+// @ts-ignore
+import NestedExampleCode from './NestedExample.tsx?raw';
+
 export type Example = {
   label: string;
   path: string;
@@ -182,4 +186,10 @@ export const examples = {
     element: RowExpandingExample,
     code: RowExpandingExampleCode,
   }),
+  nested: ex({
+    label: 'Nested Data example',
+    path: '/example/nested',
+    element: NestedExample,
+    code: NestedExampleCode,
+  }),
 };

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,

package.json

@@ -31,12 +31,12 @@
     "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",
     "@tabler/icons-react": "^2.20.0",
-    "@tanstack/react-table": "8.8.5",
+    "@tanstack/react-table": "8.9.1",
     "@tanstack/react-virtual": "3.0.0-beta.26",
     "dayjs": "^1.11.7",
     "react": "^18.0.0",