diff --git a/apps/demos/Demos/CardView/ColumnHeaderFilter/Angular/app/app.component.ts b/apps/demos/Demos/CardView/ColumnHeaderFilter/Angular/app/app.component.ts
index 7d863e2adef9..2480a760ed61 100644
--- a/apps/demos/Demos/CardView/ColumnHeaderFilter/Angular/app/app.component.ts
+++ b/apps/demos/Demos/CardView/ColumnHeaderFilter/Angular/app/app.component.ts
@@ -68,7 +68,12 @@ export class AppComponent {
     },
   ];
 
-  calculateOrderDateFilterExpression(this: DxCardViewTypes.Column, value, selectedFilterOperations, target) {
+  calculateOrderDateFilterExpression(
+    this: DxCardViewTypes.Column,
+    value: string,
+    selectedFilterOperations: string | null,
+    target: string
+  ) {
     if (value === 'weekends') {
       return [[getOrderDay, '=', 0], 'or', [getOrderDay, '=', 6]];
     }
diff --git a/apps/demos/Demos/CardView/ColumnHeaderFilter/React/App.tsx b/apps/demos/Demos/CardView/ColumnHeaderFilter/React/App.tsx
index b153ad453e47..9d507f9190d8 100644
--- a/apps/demos/Demos/CardView/ColumnHeaderFilter/React/App.tsx
+++ b/apps/demos/Demos/CardView/ColumnHeaderFilter/React/App.tsx
@@ -12,15 +12,15 @@ function getOrderDay(rowData: Order) {
 }
 
 function calculateOrderDateFilterExpression(
-  this: CardViewTypes.Column,
+  this: CardViewTypes.Column<Order>,
   value: string,
   selectedFilterOperations: string | null,
   target: string
-) {
+): string | any[] | (() => void) {
   if (value === 'weekends') {
     return [[getOrderDay, '=', 0], 'or', [getOrderDay, '=', 6]];
   }
-  return this.defaultCalculateFilterExpression(value, selectedFilterOperations, target);
+  return this.defaultCalculateFilterExpression(value, selectedFilterOperations, target) as string | any[] | (() => void);
 }
 
 const saleAmountHeaderFilterDataSource: OrderFilter[] = [
@@ -99,7 +99,7 @@ const App = () => (
     <Column
       dataField="OrderDate"
       dataType="date"
-      calculateFilterExpression={calculateOrderDateFilterExpression as ComponentProps<typeof Column>['calculateFilterExpression']}
+      calculateFilterExpression={calculateOrderDateFilterExpression}
     >
       <ColumnHeaderFilter
         dataSource={orderDateHeaderFilterDataSource}
diff --git a/apps/demos/Demos/CardView/ColumnHeaderFilter/Vue/App.vue b/apps/demos/Demos/CardView/ColumnHeaderFilter/Vue/App.vue
index a75ff7d760da..ced152922398 100644
--- a/apps/demos/Demos/CardView/ColumnHeaderFilter/Vue/App.vue
+++ b/apps/demos/Demos/CardView/ColumnHeaderFilter/Vue/App.vue
@@ -78,7 +78,7 @@ function calculateOrderDateFilterExpression(
   if (value === 'weekends') {
     return [[getOrderDay, '=', 0], 'or', [getOrderDay, '=', 6]];
   }
-  return this.defaultCalculateFilterExpression(value, selectedFilterOperations, target) as any;
+  return this.defaultCalculateFilterExpression(value, selectedFilterOperations, target);
 }
 
 type HeaderFilterDataSourceArg = {
diff --git a/packages/devextreme-angular/src/ui/card-view/nested/column-dxi.ts b/packages/devextreme-angular/src/ui/card-view/nested/column-dxi.ts
index f3747a3924eb..ce973f5348bd 100644
--- a/packages/devextreme-angular/src/ui/card-view/nested/column-dxi.ts
+++ b/packages/devextreme-angular/src/ui/card-view/nested/column-dxi.ts
@@ -20,6 +20,7 @@ import * as CommonTypes from 'devextreme/common';
 import { HorizontalAlignment, DataType, SortOrder } from 'devextreme/common';
 import { FilterType, ColumnHeaderFilter } from 'devextreme/common/grids';
 import { Format } from 'devextreme/common/core/localization';
+import type { Column } from 'devextreme/ui/card_view';
 import { dxFormSimpleItem } from 'devextreme/ui/form';
 
 import {
@@ -134,10 +135,10 @@ export class DxiCardViewColumnComponent extends CollectionNestedOption {
     }
 
     @Input()
-    get calculateFilterExpression(): ((filterValue: any, selectedFilterOperation: string | null, target: string) => string | Array<any> | Function) {
+    get calculateFilterExpression(): ((this: Column, filterValue: any, selectedFilterOperation: string | null, target: string) => string | Array<any> | Function) {
         return this._getOption('calculateFilterExpression');
     }
-    set calculateFilterExpression(value: ((filterValue: any, selectedFilterOperation: string | null, target: string) => string | Array<any> | Function)) {
+    set calculateFilterExpression(value: ((this: Column, filterValue: any, selectedFilterOperation: string | null, target: string) => string | Array<any> | Function)) {
         this._setOption('calculateFilterExpression', value);
     }
 
diff --git a/packages/devextreme-react/src/card-view.ts b/packages/devextreme-react/src/card-view.ts
index 9b09a7734199..1dcd814c9a90 100644
--- a/packages/devextreme-react/src/card-view.ts
+++ b/packages/devextreme-react/src/card-view.ts
@@ -9,7 +9,7 @@ import dxCardView, {
 import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
-import type { CardClickEvent, CardDblClickEvent, CardInsertedEvent, CardInsertingEvent, CardPreparedEvent, CardRemovedEvent, CardRemovingEvent, CardUpdatedEvent, CardUpdatingEvent, ContextMenuPreparingEvent, EditCanceledEvent, EditCancelingEvent, EditingStartEvent, FieldCaptionClickEvent, FieldCaptionDblClickEvent, FieldCaptionPreparedEvent, FieldValueClickEvent, FieldValueDblClickEvent, FieldValuePreparedEvent, InitNewCardEvent, SavedEvent, SavingEvent, CardTemplateData, CardHeaderItem as CardViewCardHeaderItem, CardHeaderPredefinedItem, FieldTemplateData, ColumnTemplateData, EditingTexts as CardViewEditingTexts, PredefinedToolbarItem, dxCardViewToolbarItem } from "devextreme/ui/card_view";
+import type { CardClickEvent, CardDblClickEvent, CardInsertedEvent, CardInsertingEvent, CardPreparedEvent, CardRemovedEvent, CardRemovingEvent, CardUpdatedEvent, CardUpdatingEvent, Column, ContextMenuPreparingEvent, EditCanceledEvent, EditCancelingEvent, EditingStartEvent, FieldCaptionClickEvent, FieldCaptionDblClickEvent, FieldCaptionPreparedEvent, FieldValueClickEvent, FieldValueDblClickEvent, FieldValuePreparedEvent, InitNewCardEvent, SavedEvent, SavingEvent, CardTemplateData, CardHeaderItem as CardViewCardHeaderItem, CardHeaderPredefinedItem, FieldTemplateData, ColumnTemplateData, EditingTexts as CardViewEditingTexts, PredefinedToolbarItem, dxCardViewToolbarItem } from "devextreme/ui/card_view";
 import type { AnimationConfig, CollisionResolution, PositionConfig, AnimationState, AnimationType, CollisionResolutionCombination } from "devextreme/common/core/animation";
 import type { ValidationRuleType, HorizontalAlignment, VerticalAlignment, ButtonStyle, template, ButtonType, ToolbarItemLocation, ToolbarItemComponent, SearchMode, SingleMultipleOrNone, SelectAllMode, DataType, Format as CommonFormat, SortOrder, ComparisonOperator, DragHighlight, Mode, Direction, PositionAlignment, DisplayMode, ScrollbarMode, TabsIconPosition, TabsStyle, Position as CommonPosition } from "devextreme/common";
 import type { dxButtonOptions, ClickEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, OptionChangedEvent } from "devextreme/ui/button";
@@ -630,7 +630,7 @@ type IColumnProps = React.PropsWithChildren<{
   allowSorting?: boolean;
   calculateDisplayValue?: ((cardData: any) => any);
   calculateFieldValue?: ((cardData: any) => any);
-  calculateFilterExpression?: ((filterValue: any, selectedFilterOperation: string | null, target: string) => string | Array<any> | (() => void));
+  calculateFilterExpression?: ((this: Column, filterValue: any, selectedFilterOperation: string | null, target: string) => string | Array<any> | (() => void));
   calculateSortValue?: ((cardData: any) => any) | string;
   caption?: string | undefined;
   customizeText?: ((fieldInfo: { groupInterval: string | number, target: string, value: any, valueText: string }) => string);
diff --git a/packages/devextreme-vue/src/card-view.ts b/packages/devextreme-vue/src/card-view.ts
index e5ce4ce63aad..e5c649af8922 100644
--- a/packages/devextreme-vue/src/card-view.ts
+++ b/packages/devextreme-vue/src/card-view.ts
@@ -45,6 +45,7 @@ import {
  EditingTexts,
  PredefinedToolbarItem,
  dxCardViewToolbarItem,
+ Column,
 } from "devextreme/ui/card_view";
 import {
  Mode,
@@ -1020,7 +1021,7 @@ const DxColumnConfig = {
     allowSorting: Boolean,
     calculateDisplayValue: Function as PropType<((cardData: any) => any)>,
     calculateFieldValue: Function as PropType<((cardData: any) => any)>,
-    calculateFilterExpression: Function as PropType<((filterValue: any, selectedFilterOperation: string | null, target: string) => string | Array<any> | (() => void))>,
+    calculateFilterExpression: Function as PropType<((this: Column, filterValue: any, selectedFilterOperation: string | null, target: string) => string | Array<any> | (() => void))>,
     calculateSortValue: [Function, String] as PropType<(((cardData: any) => any)) | string>,
     caption: String,
     customizeText: Function as PropType<((fieldInfo: { groupInterval: string | number, target: string, value: any, valueText: string }) => string)>,