diff --git a/apps/mantine-react-table-docs/components/prop-tables/columnOptions.ts b/apps/mantine-react-table-docs/components/prop-tables/columnOptions.ts index 7e1725816..a6b097ac8 100644 --- a/apps/mantine-react-table-docs/components/prop-tables/columnOptions.ts +++ b/apps/mantine-react-table-docs/components/prop-tables/columnOptions.ts @@ -310,13 +310,12 @@ export const columnOptions: ColumnOption[] = [ { columnOption: 'filterTooltipValueFn', defaultValue: '', - description: - 'Specify to transform tooltip values to a readable format.', + description: 'Specify to transform tooltip values to a readable format.', link: '', linkText: '', source: 'MRT', required: false, - type: "MRT_FilterTooltipValueFn", + type: 'MRT_FilterTooltipValueFn', }, { columnOption: 'filterVariant', diff --git a/packages/mantine-react-table/src/components/head/MRT_TableHeadCellFilterLabel.tsx b/packages/mantine-react-table/src/components/head/MRT_TableHeadCellFilterLabel.tsx index 2fe57585b..c2d41fc1b 100644 --- a/packages/mantine-react-table/src/components/head/MRT_TableHeadCellFilterLabel.tsx +++ b/packages/mantine-react-table/src/components/head/MRT_TableHeadCellFilterLabel.tsx @@ -56,7 +56,7 @@ export const MRT_TableHeadCellFilterLabel = ({ const currentFilterOption = columnDef._filterFn; const filterValueFn = columnDef.filterTooltipValueFn || ((value) => value as string); - type FilterValueType = Parameters[0] + type FilterValueType = Parameters[0]; const filterTooltip = columnFilterDisplayMode === 'popover' && !isFilterActive ? localization.filterByColumn?.replace( @@ -73,12 +73,17 @@ export const MRT_TableHeadCellFilterLabel = ({ '{filterValue}', `"${ Array.isArray(column.getFilterValue()) - ? (column.getFilterValue() as [FilterValueType, FilterValueType]) - .map((v) => filterValueFn(v)) - .join( - `" ${isRangeFilter ? localization.and : localization.or} "`, + ? ( + column.getFilterValue() as [ + FilterValueType, + FilterValueType, + ] ) - : filterValueFn(column.getFilterValue()) + .map((v) => filterValueFn(v)) + .join( + `" ${isRangeFilter ? localization.and : localization.or} "`, + ) + : filterValueFn(column.getFilterValue()) }"`, ) .replace('" "', ''); diff --git a/packages/mantine-react-table/src/types.ts b/packages/mantine-react-table/src/types.ts index 2f976df90..7ec72710d 100644 --- a/packages/mantine-react-table/src/types.ts +++ b/packages/mantine-react-table/src/types.ts @@ -501,7 +501,7 @@ export type MRT_ColumnDef = Omit< enableEditing?: ((row: MRT_Row) => boolean) | boolean; enableFilterMatchHighlighting?: boolean; filterFn?: MRT_FilterFn; - filterTooltipValueFn?: MRT_FilterTooltipValueFn, + filterTooltipValueFn?: MRT_FilterTooltipValueFn; filterVariant?: | 'autocomplete' | 'checkbox' diff --git a/packages/mantine-react-table/stories/features/Filtering.stories.tsx b/packages/mantine-react-table/stories/features/Filtering.stories.tsx index 4c863f102..da412862a 100644 --- a/packages/mantine-react-table/stories/features/Filtering.stories.tsx +++ b/packages/mantine-react-table/stories/features/Filtering.stories.tsx @@ -749,8 +749,12 @@ export const CustomTooltipValueFn = () => { const [columnFilters, setColumnFilters] = useState( [], ); - const [isActiveValueFn, setIsActiveValueFn] = useState|undefined>(undefined); - const [dateValueFn, setDateValueFn] = useState|undefined>(undefined); + const [isActiveValueFn, setIsActiveValueFn] = useState< + MRT_FilterTooltipValueFn | undefined + >(undefined); + const [dateValueFn, setDateValueFn] = useState< + MRT_FilterTooltipValueFn | undefined + >(undefined); const [enableValueFns, setEnableValueFns] = useState(true); const formatDate = (date: any, format: string) => {