diff --git a/CHANGELOG.md b/CHANGELOG.md index 6b41050fd..18d8dc952 100644 --- a/CHANGELOG.md +++ b/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)); diff --git a/app/examples/searching-and-filtering/SearchingAndFilteringExample.tsx b/app/examples/searching-and-filtering/SearchingAndFilteringExample.tsx index ed466b321..fd13f1fe0 100644 --- a/app/examples/searching-and-filtering/SearchingAndFilteringExample.tsx +++ b/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([]); const [birthdaySearchRange, setBirthdaySearchRange] = useState(); + const [seniors, setSeniors] = useState(false); const [debouncedQuery] = useDebouncedValue(query, 200); useEffect(() => { @@ -30,9 +31,8 @@ export function SearchingAndFilteringExample() { if ( debouncedQuery !== '' && !`${firstName} ${lastName}`.toLowerCase().includes(debouncedQuery.trim().toLowerCase()) - ) { + ) return false; - } if ( birthdaySearchRange && @@ -40,17 +40,17 @@ export function SearchingAndFilteringExample() { 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 ( 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: () => ( + { + setSeniors((current) => !current); + }} + /> + ), + }, ]} /> ); diff --git a/package.json b/package.json index e4711a2d4..91529c3d2 100644 --- a/package.json +++ b/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", diff --git a/package/DataTableHeaderCellFilter.tsx b/package/DataTableHeaderCellFilter.tsx index 1592bda90..55c1ad411 100644 --- a/package/DataTableHeaderCellFilter.tsx +++ b/package/DataTableHeaderCellFilter.tsx @@ -29,7 +29,7 @@ export function DataTableHeaderCellFilter({ children, isActive }: DataTableHe - e.preventDefault()}> + e.stopPropagation()}> {typeof children === 'function' ? children({ close }) : children}