Merge pull request #494 from icflorescu/next

Fix #481, bump version

CHANGELOG.md

@@ -3,6 +3,10 @@
 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.3.2 (2023-12-21)
+
+- Fix checkbox inside filter popover not working (issue [#481](https://github.com/icflorescu/mantine-datatable/issues/481))
+
 ## 7.3.1 (2023-12-21)
 
 - Implement column resizing (see [#490](https://github.com/icflorescu/mantine-datatable/pull/490));

app/examples/searching-and-filtering/SearchingAndFilteringExample.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ActionIcon, Button, MultiSelect, Stack, TextInput } from '@mantine/core';
+import { ActionIcon, Button, Checkbox, MultiSelect, Stack, TextInput } from '@mantine/core';
 import { DatePicker, type DatesRangeValue } from '@mantine/dates';
 import { useDebouncedValue } from '@mantine/hooks';
 import { IconSearch, IconX } from '@tabler/icons-react';
@@ -22,6 +22,7 @@ export function SearchingAndFilteringExample() {
   const [query, setQuery] = useState('');
   const [selectedDepartments, setSelectedDepartments] = useState<string[]>([]);
   const [birthdaySearchRange, setBirthdaySearchRange] = useState<DatesRangeValue>();
+  const [seniors, setSeniors] = useState(false);
   const [debouncedQuery] = useDebouncedValue(query, 200);
 
   useEffect(() => {
@@ -30,27 +31,26 @@ export function SearchingAndFilteringExample() {
         if (
           debouncedQuery !== '' &&
           !`${firstName} ${lastName}`.toLowerCase().includes(debouncedQuery.trim().toLowerCase())
-        ) {
+        )
           return false;
-        }
 
         if (
           birthdaySearchRange &&
           birthdaySearchRange[0] &&
           birthdaySearchRange[1] &&
           (dayjs(birthdaySearchRange[0]).isAfter(birthDate, 'day') ||
             dayjs(birthdaySearchRange[1]).isBefore(birthDate, 'day'))
-        ) {
+        )
           return false;
-        }
 
-        if (selectedDepartments.length && !selectedDepartments.some((d) => d === department.name)) {
-          return false;
-        }
+        if (selectedDepartments.length && !selectedDepartments.some((d) => d === department.name)) return false;
+
+        if (seniors && dayjs().diff(birthDate, 'y') < 70) return false;
+
         return true;
       })
     );
-  }, [debouncedQuery, birthdaySearchRange, selectedDepartments]);
+  }, [debouncedQuery, birthdaySearchRange, selectedDepartments, seniors]);
 
   return (
     <DataTable
@@ -83,7 +83,7 @@ export function SearchingAndFilteringExample() {
           accessor: 'department.name',
           filter: (
             <MultiSelect
-              label="Departments "
+              label="Departments"
               description="Show all employees working at the selected departments"
               data={departments}
               value={selectedDepartments}
@@ -96,7 +96,7 @@ export function SearchingAndFilteringExample() {
           ),
           filtering: selectedDepartments.length > 0,
         },
-        { accessor: 'department.company.name' },
+        { accessor: 'department.company.name', title: 'Company' },
         {
           accessor: 'birthDate',
           textAlign: 'right',
@@ -123,7 +123,21 @@ export function SearchingAndFilteringExample() {
           ),
           filtering: Boolean(birthdaySearchRange),
         },
-        { accessor: 'age', textAlign: 'right', render: ({ birthDate }) => dayjs().diff(birthDate, 'y') },
+        {
+          accessor: 'age',
+          textAlign: 'right',
+          render: ({ birthDate }) => dayjs().diff(birthDate, 'y'),
+          filter: () => (
+            <Checkbox
+              label="Seniors"
+              description="Show employees who are older than 70 years"
+              checked={seniors}
+              onChange={() => {
+                setSeniors((current) => !current);
+              }}
+            />
+          ),
+        },
       ]}
     />
   );

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mantine-datatable",
-  "version": "7.3.1",
+  "version": "7.3.2",
   "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",

package/DataTableHeaderCellFilter.tsx

@@ -29,7 +29,7 @@ export function DataTableHeaderCellFilter<T>({ children, isActive }: DataTableHe
           <Icon />
         </ActionIcon>
       </PopoverTarget>
-      <PopoverDropdown onClick={(e) => e.preventDefault()}>
+      <PopoverDropdown onClick={(e) => e.stopPropagation()}>
         {typeof children === 'function' ? children({ close }) : children}
       </PopoverDropdown>
     </Popover>