Backend API
import React, { type ComponentProps } from 'react';
import CardView, { Column, HeaderFilter, ColumnHeaderFilter, ColumnHeaderFilterSearch } from 'devextreme-react/card-view';
import type { CardViewTypes } from 'devextreme-react/card-view';
import type { DataSourceOptions } from 'devextreme-react/common/data';
import { orders } from './data.ts';
import type { Order, OrderFilter } from './data.ts';
function getOrderDay(rowData: Order) {
return new Date(rowData.OrderDate).getDay();
}
function calculateOrderDateFilterExpression(
this: CardViewTypes.Column,
value: string,
selectedFilterOperations: string | null,
target: string
) {
if (value === 'weekends') {
return [[getOrderDay, '=', 0], 'or', [getOrderDay, '=', 6]];
}
return this.defaultCalculateFilterExpression(value, selectedFilterOperations, target);
}
const saleAmountHeaderFilterDataSource: OrderFilter[] = [
{
text: 'Less than $3000',
value: ['SaleAmount', '<', 3000],
},
{
text: '$3000 - $5000',
value: [
['SaleAmount', '>=', 3000],
['SaleAmount', '<', 5000],
],
},
{
text: '$5000 - $10000',
value: [
['SaleAmount', '>=', 5000],
['SaleAmount', '<', 10000],
],
},
{
text: '$10000 - $20000',
value: [
['SaleAmount', '>=', 10000],
['SaleAmount', '<', 20000],
],
},
{
text: 'Greater than $20000',
value: ['SaleAmount', '>=', 20000],
},
];
const citySearchEditorOptions = {
placeholder: 'Search city or state',
};
const citySearchFields = ['StoreCity', 'StoreState'];
const stateSearchEditorOptions = {
placeholder: 'Search state or city',
};
const stateSearchFields = ['StoreState', 'StoreCity'];
interface HeaderFilterDataResult {
text: string;
value: string;
}
interface HeaderFilterDataSourceOptions {
component: Record<string, any>;
dataSource: DataSourceOptions<HeaderFilterDataResult> | null;
}
function orderDateHeaderFilterDataSource(options: HeaderFilterDataSourceOptions): void {
if (options.dataSource) {
options.dataSource.postProcess = (results: HeaderFilterDataResult[]) => {
results.push({
text: 'Weekends',
value: 'weekends',
});
return results;
};
}
}
const App = () => (
<CardView
dataSource={orders}
keyExpr="OrderNumber"
cardsPerRow="auto"
cardMinWidth={280}
wordWrapEnabled={true}
>
<HeaderFilter
visible={true}
/>
<Column
dataField="OrderNumber"
>
<ColumnHeaderFilter
groupInterval={10000}
/>
</Column>
<Column
dataField="OrderDate"
dataType="date"
calculateFilterExpression={calculateOrderDateFilterExpression as ComponentProps<typeof Column>['calculateFilterExpression']}
>
<ColumnHeaderFilter
dataSource={orderDateHeaderFilterDataSource}
/>
</Column>
<Column
dataField="SaleAmount"
dataType="number"
>
<ColumnHeaderFilter
dataSource={saleAmountHeaderFilterDataSource}
/>
</Column>
<Column
dataField="StoreCity"
>
<ColumnHeaderFilter>
<ColumnHeaderFilterSearch
enabled={true}
editorOptions={citySearchEditorOptions}
searchExpr={citySearchFields}
/>
</ColumnHeaderFilter>
</Column>
<Column
dataField="StoreState"
>
<ColumnHeaderFilter>
<ColumnHeaderFilterSearch
enabled={true}
editorOptions={stateSearchEditorOptions}
searchExpr={stateSearchFields}
/>
</ColumnHeaderFilter>
</Column>
<Column
dataField="Employee"
/>
</CardView>
);
export default App;
import React from 'react';
import CardView, {
Column,
HeaderFilter,
ColumnHeaderFilter,
ColumnHeaderFilterSearch,
} from 'devextreme-react/card-view';
import { orders } from './data.js';
function getOrderDay(rowData) {
return new Date(rowData.OrderDate).getDay();
}
function calculateOrderDateFilterExpression(value, selectedFilterOperations, target) {
if (value === 'weekends') {
return [[getOrderDay, '=', 0], 'or', [getOrderDay, '=', 6]];
}
return this.defaultCalculateFilterExpression(value, selectedFilterOperations, target);
}
const saleAmountHeaderFilterDataSource = [
{
text: 'Less than $3000',
value: ['SaleAmount', '<', 3000],
},
{
text: '$3000 - $5000',
value: [
['SaleAmount', '>=', 3000],
['SaleAmount', '<', 5000],
],
},
{
text: '$5000 - $10000',
value: [
['SaleAmount', '>=', 5000],
['SaleAmount', '<', 10000],
],
},
{
text: '$10000 - $20000',
value: [
['SaleAmount', '>=', 10000],
['SaleAmount', '<', 20000],
],
},
{
text: 'Greater than $20000',
value: ['SaleAmount', '>=', 20000],
},
];
const citySearchEditorOptions = {
placeholder: 'Search city or state',
};
const citySearchFields = ['StoreCity', 'StoreState'];
const stateSearchEditorOptions = {
placeholder: 'Search state or city',
};
const stateSearchFields = ['StoreState', 'StoreCity'];
function orderDateHeaderFilterDataSource(options) {
if (options.dataSource) {
options.dataSource.postProcess = (results) => {
results.push({
text: 'Weekends',
value: 'weekends',
});
return results;
};
}
}
const App = () => (
<CardView
dataSource={orders}
keyExpr="OrderNumber"
cardsPerRow="auto"
cardMinWidth={280}
wordWrapEnabled={true}
>
<HeaderFilter visible={true} />
<Column dataField="OrderNumber">
<ColumnHeaderFilter groupInterval={10000} />
</Column>
<Column
dataField="OrderDate"
dataType="date"
calculateFilterExpression={calculateOrderDateFilterExpression}
>
<ColumnHeaderFilter dataSource={orderDateHeaderFilterDataSource} />
</Column>
<Column
dataField="SaleAmount"
dataType="number"
>
<ColumnHeaderFilter dataSource={saleAmountHeaderFilterDataSource} />
</Column>
<Column dataField="StoreCity">
<ColumnHeaderFilter>
<ColumnHeaderFilterSearch
enabled={true}
editorOptions={citySearchEditorOptions}
searchExpr={citySearchFields}
/>
</ColumnHeaderFilter>
</Column>
<Column dataField="StoreState">
<ColumnHeaderFilter>
<ColumnHeaderFilterSearch
enabled={true}
editorOptions={stateSearchEditorOptions}
searchExpr={stateSearchFields}
/>
</ColumnHeaderFilter>
</Column>
<Column dataField="Employee" />
</CardView>
);
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
import type { FilterBuilderTypes } from 'devextreme-react/filter-builder';
export interface Order {
OrderNumber: number;
SaleAmount: number;
StoreCity: string;
StoreState: string;
Employee: string;
OrderDate: string;
}
export type OrderFilterValue<T extends keyof Order = keyof Order> = [T, FilterBuilderTypes.FilterOperation, Order[T]];
export interface OrderFilter {
text: string;
value: OrderFilterValue | OrderFilterValue[];
}
export const orders: Order[] = [{
OrderNumber: 35703,
SaleAmount: 11800,
StoreCity: 'Los Angeles',
StoreState: 'California',
Employee: 'Harv Mudd',
OrderDate: '2024/04/10',
}, {
OrderNumber: 35711,
OrderDate: '2024/01/12',
SaleAmount: 16050,
StoreState: 'California',
StoreCity: 'San Jose',
Employee: 'Jim Packard',
}, {
OrderNumber: 35714,
OrderDate: '2024/01/22',
SaleAmount: 14750,
StoreState: 'Nevada',
StoreCity: 'Las Vegas',
Employee: 'Harv Mudd',
}, {
OrderNumber: 35983,
OrderDate: '2024/02/07',
SaleAmount: 3725,
StoreState: 'Colorado',
StoreCity: 'Denver',
Employee: 'Todd Hoffman',
}, {
OrderNumber: 36987,
OrderDate: '2024/03/11',
SaleAmount: 14200,
StoreState: 'Utah',
StoreCity: 'Salt Lake City',
Employee: 'Clark Morgan',
}, {
OrderNumber: 38466,
OrderDate: '2024/03/01',
SaleAmount: 7800,
StoreState: 'California',
StoreCity: 'Los Angeles',
Employee: 'Harv Mudd',
}, {
OrderNumber: 39420,
OrderDate: '2024/02/15',
SaleAmount: 20500,
StoreState: 'California',
StoreCity: 'San Jose',
Employee: 'Jim Packard',
}, {
OrderNumber: 39874,
OrderDate: '2024/02/04',
SaleAmount: 9050,
StoreState: 'Nevada',
StoreCity: 'Las Vegas',
Employee: 'Harv Mudd',
}, {
OrderNumber: 42847,
OrderDate: '2024/02/15',
SaleAmount: 20400,
StoreState: 'Wyoming',
StoreCity: 'Casper',
Employee: 'Todd Hoffman',
}, {
OrderNumber: 43982,
OrderDate: '2024/05/29',
SaleAmount: 6050,
StoreState: 'Utah',
StoreCity: 'Salt Lake City',
Employee: 'Clark Morgan',
}, {
OrderNumber: 56272,
OrderDate: '2024/05/16',
SaleAmount: 15850,
StoreState: 'Utah',
StoreCity: 'Salt Lake City',
Employee: 'Clark Morgan',
}, {
OrderNumber: 57429,
OrderDate: '2024/04/11',
SaleAmount: 11050,
StoreState: 'Arizona',
StoreCity: 'Phoenix',
Employee: 'Clark Morgan',
}, {
OrderNumber: 58292,
OrderDate: '2024/04/05',
SaleAmount: 13500,
StoreState: 'California',
StoreCity: 'Los Angeles',
Employee: 'Harv Mudd',
}, {
OrderNumber: 62427,
OrderDate: '2024/05/17',
SaleAmount: 23500,
StoreState: 'Nevada',
StoreCity: 'Las Vegas',
Employee: 'Harv Mudd',
}, {
OrderNumber: 65977,
OrderDate: '2024/02/13',
SaleAmount: 2550,
StoreState: 'Wyoming',
StoreCity: 'Casper',
Employee: 'Todd Hoffman',
}, {
OrderNumber: 66947,
OrderDate: '2024/01/06',
SaleAmount: 3500,
StoreState: 'Utah',
StoreCity: 'Salt Lake City',
Employee: 'Clark Morgan',
}, {
OrderNumber: 68428,
OrderDate: '2024/03/13',
SaleAmount: 10500,
StoreState: 'California',
StoreCity: 'Los Angeles',
Employee: 'Harv Mudd',
}, {
OrderNumber: 69477,
OrderDate: '2024/01/22',
SaleAmount: 14200,
StoreState: 'California',
StoreCity: 'Anaheim',
Employee: 'Harv Mudd',
}, {
OrderNumber: 72947,
OrderDate: '2024/03/05',
SaleAmount: 13350,
StoreState: 'Nevada',
StoreCity: 'Las Vegas',
Employee: 'Harv Mudd',
}, {
OrderNumber: 73088,
OrderDate: '2024/01/21',
SaleAmount: 8600,
StoreState: 'Nevada',
StoreCity: 'Reno',
Employee: 'Clark Morgan',
}, {
OrderNumber: 76927,
OrderDate: '2024/04/04',
SaleAmount: 9800,
StoreState: 'Utah',
StoreCity: 'Salt Lake City',
Employee: 'Clark Morgan',
}, {
OrderNumber: 77297,
OrderDate: '2024/01/07',
SaleAmount: 10850,
StoreState: 'Arizona',
StoreCity: 'Phoenix',
Employee: 'Clark Morgan',
}, {
OrderNumber: 84744,
OrderDate: '2024/05/20',
SaleAmount: 4650,
StoreState: 'Nevada',
StoreCity: 'Las Vegas',
Employee: 'Harv Mudd',
}, {
OrderNumber: 85028,
OrderDate: '2024/02/08',
SaleAmount: 2575,
StoreState: 'Nevada',
StoreCity: 'Reno',
Employee: 'Clark Morgan',
}, {
OrderNumber: 87297,
OrderDate: '2024/04/08',
SaleAmount: 14200,
StoreState: 'Wyoming',
StoreCity: 'Casper',
Employee: 'Todd Hoffman',
}, {
OrderNumber: 88027,
OrderDate: '2024/05/18',
SaleAmount: 13650,
StoreState: 'Utah',
StoreCity: 'Salt Lake City',
Employee: 'Clark Morgan',
}, {
OrderNumber: 94726,
OrderDate: '2024/02/23',
SaleAmount: 20500,
StoreState: 'California',
StoreCity: 'San Jose',
Employee: 'Jim Packard',
}, {
OrderNumber: 95266,
OrderDate: '2024/03/18',
SaleAmount: 9050,
StoreState: 'Nevada',
StoreCity: 'Las Vegas',
Employee: 'Harv Mudd',
}, {
OrderNumber: 98477,
OrderDate: '2024/05/08',
SaleAmount: 23500,
StoreState: 'Wyoming',
StoreCity: 'Casper',
Employee: 'Todd Hoffman',
}, {
OrderNumber: 99247,
OrderDate: '2024/02/27',
SaleAmount: 2100,
StoreState: 'Utah',
StoreCity: 'Salt Lake City',
Employee: 'Clark Morgan',
}, {
OrderNumber: 174884,
OrderDate: '2024/03/03',
SaleAmount: 7200,
StoreState: 'Colorado',
StoreCity: 'Denver',
Employee: 'Todd Hoffman',
}, {
OrderNumber: 188877,
OrderDate: '2024/02/14',
SaleAmount: 8750,
StoreState: 'Arizona',
StoreCity: 'Phoenix',
Employee: 'Clark Morgan',
}, {
OrderNumber: 191883,
OrderDate: '2024/02/28',
SaleAmount: 9900,
StoreState: 'California',
StoreCity: 'Los Angeles',
Employee: 'Harv Mudd',
}, {
OrderNumber: 192474,
OrderDate: '2024/02/18',
SaleAmount: 12800,
StoreState: 'California',
StoreCity: 'Anaheim',
Employee: 'Harv Mudd',
}, {
OrderNumber: 193847,
OrderDate: '2024/05/06',
SaleAmount: 14100,
StoreState: 'California',
StoreCity: 'San Diego',
Employee: 'Harv Mudd',
}, {
OrderNumber: 194877,
OrderDate: '2024/03/17',
SaleAmount: 4750,
StoreState: 'California',
StoreCity: 'San Jose',
Employee: 'Jim Packard',
}, {
OrderNumber: 195746,
OrderDate: '2024/02/04',
SaleAmount: 9050,
StoreState: 'Nevada',
StoreCity: 'Las Vegas',
Employee: 'Harv Mudd',
}, {
OrderNumber: 197474,
OrderDate: '2024/01/17',
SaleAmount: 6400,
StoreState: 'Nevada',
StoreCity: 'Reno',
Employee: 'Clark Morgan',
}, {
OrderNumber: 198746,
OrderDate: '2024/02/04',
SaleAmount: 15700,
StoreState: 'Colorado',
StoreCity: 'Denver',
Employee: 'Todd Hoffman',
}, {
OrderNumber: 214222,
OrderDate: '2024/02/03',
SaleAmount: 11050,
StoreState: 'Arizona',
StoreCity: 'Phoenix',
Employee: 'Clark Morgan',
}];
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
export const orders = [
{
OrderNumber: 35703,
SaleAmount: 11800,
StoreCity: 'Los Angeles',
StoreState: 'California',
Employee: 'Harv Mudd',
OrderDate: '2024/04/10',
},
{
OrderNumber: 35711,
OrderDate: '2024/01/12',
SaleAmount: 16050,
StoreState: 'California',
StoreCity: 'San Jose',
Employee: 'Jim Packard',
},
{
OrderNumber: 35714,
OrderDate: '2024/01/22',
SaleAmount: 14750,
StoreState: 'Nevada',
StoreCity: 'Las Vegas',
Employee: 'Harv Mudd',
},
{
OrderNumber: 35983,
OrderDate: '2024/02/07',
SaleAmount: 3725,
StoreState: 'Colorado',
StoreCity: 'Denver',
Employee: 'Todd Hoffman',
},
{
OrderNumber: 36987,
OrderDate: '2024/03/11',
SaleAmount: 14200,
StoreState: 'Utah',
StoreCity: 'Salt Lake City',
Employee: 'Clark Morgan',
},
{
OrderNumber: 38466,
OrderDate: '2024/03/01',
SaleAmount: 7800,
StoreState: 'California',
StoreCity: 'Los Angeles',
Employee: 'Harv Mudd',
},
{
OrderNumber: 39420,
OrderDate: '2024/02/15',
SaleAmount: 20500,
StoreState: 'California',
StoreCity: 'San Jose',
Employee: 'Jim Packard',
},
{
OrderNumber: 39874,
OrderDate: '2024/02/04',
SaleAmount: 9050,
StoreState: 'Nevada',
StoreCity: 'Las Vegas',
Employee: 'Harv Mudd',
},
{
OrderNumber: 42847,
OrderDate: '2024/02/15',
SaleAmount: 20400,
StoreState: 'Wyoming',
StoreCity: 'Casper',
Employee: 'Todd Hoffman',
},
{
OrderNumber: 43982,
OrderDate: '2024/05/29',
SaleAmount: 6050,
StoreState: 'Utah',
StoreCity: 'Salt Lake City',
Employee: 'Clark Morgan',
},
{
OrderNumber: 56272,
OrderDate: '2024/05/16',
SaleAmount: 15850,
StoreState: 'Utah',
StoreCity: 'Salt Lake City',
Employee: 'Clark Morgan',
},
{
OrderNumber: 57429,
OrderDate: '2024/04/11',
SaleAmount: 11050,
StoreState: 'Arizona',
StoreCity: 'Phoenix',
Employee: 'Clark Morgan',
},
{
OrderNumber: 58292,
OrderDate: '2024/04/05',
SaleAmount: 13500,
StoreState: 'California',
StoreCity: 'Los Angeles',
Employee: 'Harv Mudd',
},
{
OrderNumber: 62427,
OrderDate: '2024/05/17',
SaleAmount: 23500,
StoreState: 'Nevada',
StoreCity: 'Las Vegas',
Employee: 'Harv Mudd',
},
{
OrderNumber: 65977,
OrderDate: '2024/02/13',
SaleAmount: 2550,
StoreState: 'Wyoming',
StoreCity: 'Casper',
Employee: 'Todd Hoffman',
},
{
OrderNumber: 66947,
OrderDate: '2024/01/06',
SaleAmount: 3500,
StoreState: 'Utah',
StoreCity: 'Salt Lake City',
Employee: 'Clark Morgan',
},
{
OrderNumber: 68428,
OrderDate: '2024/03/13',
SaleAmount: 10500,
StoreState: 'California',
StoreCity: 'Los Angeles',
Employee: 'Harv Mudd',
},
{
OrderNumber: 69477,
OrderDate: '2024/01/22',
SaleAmount: 14200,
StoreState: 'California',
StoreCity: 'Anaheim',
Employee: 'Harv Mudd',
},
{
OrderNumber: 72947,
OrderDate: '2024/03/05',
SaleAmount: 13350,
StoreState: 'Nevada',
StoreCity: 'Las Vegas',
Employee: 'Harv Mudd',
},
{
OrderNumber: 73088,
OrderDate: '2024/01/21',
SaleAmount: 8600,
StoreState: 'Nevada',
StoreCity: 'Reno',
Employee: 'Clark Morgan',
},
{
OrderNumber: 76927,
OrderDate: '2024/04/04',
SaleAmount: 9800,
StoreState: 'Utah',
StoreCity: 'Salt Lake City',
Employee: 'Clark Morgan',
},
{
OrderNumber: 77297,
OrderDate: '2024/01/07',
SaleAmount: 10850,
StoreState: 'Arizona',
StoreCity: 'Phoenix',
Employee: 'Clark Morgan',
},
{
OrderNumber: 84744,
OrderDate: '2024/05/20',
SaleAmount: 4650,
StoreState: 'Nevada',
StoreCity: 'Las Vegas',
Employee: 'Harv Mudd',
},
{
OrderNumber: 85028,
OrderDate: '2024/02/08',
SaleAmount: 2575,
StoreState: 'Nevada',
StoreCity: 'Reno',
Employee: 'Clark Morgan',
},
{
OrderNumber: 87297,
OrderDate: '2024/04/08',
SaleAmount: 14200,
StoreState: 'Wyoming',
StoreCity: 'Casper',
Employee: 'Todd Hoffman',
},
{
OrderNumber: 88027,
OrderDate: '2024/05/18',
SaleAmount: 13650,
StoreState: 'Utah',
StoreCity: 'Salt Lake City',
Employee: 'Clark Morgan',
},
{
OrderNumber: 94726,
OrderDate: '2024/02/23',
SaleAmount: 20500,
StoreState: 'California',
StoreCity: 'San Jose',
Employee: 'Jim Packard',
},
{
OrderNumber: 95266,
OrderDate: '2024/03/18',
SaleAmount: 9050,
StoreState: 'Nevada',
StoreCity: 'Las Vegas',
Employee: 'Harv Mudd',
},
{
OrderNumber: 98477,
OrderDate: '2024/05/08',
SaleAmount: 23500,
StoreState: 'Wyoming',
StoreCity: 'Casper',
Employee: 'Todd Hoffman',
},
{
OrderNumber: 99247,
OrderDate: '2024/02/27',
SaleAmount: 2100,
StoreState: 'Utah',
StoreCity: 'Salt Lake City',
Employee: 'Clark Morgan',
},
{
OrderNumber: 174884,
OrderDate: '2024/03/03',
SaleAmount: 7200,
StoreState: 'Colorado',
StoreCity: 'Denver',
Employee: 'Todd Hoffman',
},
{
OrderNumber: 188877,
OrderDate: '2024/02/14',
SaleAmount: 8750,
StoreState: 'Arizona',
StoreCity: 'Phoenix',
Employee: 'Clark Morgan',
},
{
OrderNumber: 191883,
OrderDate: '2024/02/28',
SaleAmount: 9900,
StoreState: 'California',
StoreCity: 'Los Angeles',
Employee: 'Harv Mudd',
},
{
OrderNumber: 192474,
OrderDate: '2024/02/18',
SaleAmount: 12800,
StoreState: 'California',
StoreCity: 'Anaheim',
Employee: 'Harv Mudd',
},
{
OrderNumber: 193847,
OrderDate: '2024/05/06',
SaleAmount: 14100,
StoreState: 'California',
StoreCity: 'San Diego',
Employee: 'Harv Mudd',
},
{
OrderNumber: 194877,
OrderDate: '2024/03/17',
SaleAmount: 4750,
StoreState: 'California',
StoreCity: 'San Jose',
Employee: 'Jim Packard',
},
{
OrderNumber: 195746,
OrderDate: '2024/02/04',
SaleAmount: 9050,
StoreState: 'Nevada',
StoreCity: 'Las Vegas',
Employee: 'Harv Mudd',
},
{
OrderNumber: 197474,
OrderDate: '2024/01/17',
SaleAmount: 6400,
StoreState: 'Nevada',
StoreCity: 'Reno',
Employee: 'Clark Morgan',
},
{
OrderNumber: 198746,
OrderDate: '2024/02/04',
SaleAmount: 15700,
StoreState: 'Colorado',
StoreCity: 'Denver',
Employee: 'Todd Hoffman',
},
{
OrderNumber: 214222,
OrderDate: '2024/02/03',
SaleAmount: 11050,
StoreState: 'Arizona',
StoreCity: 'Phoenix',
Employee: 'Clark Morgan',
},
];
<!DOCTYPE html>
<html lang="en">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
<script src="bundles/vendor/react.vendor.js"></script>
<script src="./bundle.js"></script>
</body>
</html>
Display Header Filter Icons
Assign true to the headerFilter.visible property to allow users to filter CardView fields with header icons. To hide the icon for a specific column, set columns.allowHeaderFiltering to false.
Enable Search UI Within Header Filters
DevExtreme CardView supports text-based search (to find specific values in a header filter). Define the search property in the headerFilter object or a columns.headerFilter object to configure this capability.
The search panel checks for values only within the same data field. To expand search to additional fields, use the search.searchExpr property. For example, this demo allows you to enter a state name in the City column's header filter. You can then see a list of all cities within the specified state and select city names that you want to use as a filter.
To apply a comparison operation (used to search header filter values), specify the search.mode property.