Vue DataGrid - filterRow
The filter row allows a user to filter data by values of individual columns.
Each cell in the filter row contains a magnifying glass icon. Hovering over this icon opens a drop-down list with filters available for the column.
To make the filter row visible, assign true to the filterRow.visible property.
See Also
applyFilter
By default, the filter applies automatically after a user finishes entering a value into a cell of the filter row. Alternatively, the filter can be applied on a click on the "Apply Filter" button. To enable this mode, assign "onClick" to the applyFilter property.
betweenEndText
Specifies a placeholder for the editor that specifies the end of a range when a user selects the "between" filter operation.
betweenStartText
Specifies a placeholder for the editor that specifies the start of a range when a user selects the "between" filter operation.
operationDescriptions
The following code sample illustrates how to set this property:
jQuery
$(function() { $("#dataGridContainer").dxDataGrid({ filterRow: { // ... operationDescriptions: { startsWith: "Begins with" } } }); });
Angular
<dx-data-grid ... > <dxo-filter-row ... > <dxo-operation-descriptions startsWith="Begins with"> </dxo-operation-descriptions> </dxo-filter-row> </dx-data-grid>
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DxDataGridModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxDataGridModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { }
Vue
<template> <DxDataGrid ... > <DxFilterRow ... > <DxOperationDescriptions starts-with="Begins with" /> </DxFilterRow> </DxDataGrid> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxDataGrid, { DxFilterRow, DxOperationDescriptions } from 'devextreme-vue/data-grid'; export default { components: { DxDataGrid, DxFilterRow, DxOperationDescriptions }, // ... } </script>
React
import 'devextreme/dist/css/dx.light.css'; import DataGrid, { FilterRow, OperationDescriptions } from 'devextreme-react/data-grid'; export default function App() { return ( <DataGrid ... > <FilterRow ... > <OperationDescriptions startsWith="Begins with" /> </FilterRow> </DataGrid> ); }
See Also
- columns[].filterOperations
resetOperationText
The reset operation restores the default filter, which depends on the column's data type. For details on default filters by data types, refer to the description of the selectedFilterOperation property.
showAllText
Specifies text for the item that clears the applied filter. Used only when a cell of the filter row contains a select box.
In columns that contain Boolean values or use lookup, a user filters data with a select box. To clear the applied filter, the user selects the "All" item in this select box. The showAllText property specifies text for this item.
showOperationChooser
If you have technical questions, please create a support ticket in the DevExpress Support Center.