QueryFilter / LightFilter

QueryFilter and LightFilter solve the problem of using the form with other components, such as Table, List, etc., and avoid complicated style settings. QueryFilter and LightFilter are supported by default in ProTable as their own filter forms.

Query Filter

Query filter - put away by default


Lightweight filtering

Light filtering - border mode

Light filtering - collapsed mode

All options in collapsed mode are collapsed by default, with or without values, and the control's secondary will no longer be valid.



QueryFilter supports the following properties in addition to the API inherited from ProForm.

collapsedWhether or not to collapse out-of-bounds form items for controlled modeboolean-
defaultCollapsedWhether or not to collapse out-of-order form items in default statebooleantrue
onCollapseCallback when toggling the collapsed state of the form(collapsed)=>void-
hideRequiredMarkHide the required markers for all form items, hide by defaultbooleantrue
defaultColsNumberThe default number of controls to be displayed in the collapsed state, if not set or less than 0, one line of controls will be displayed; if the number is greater than or equal to the number of controls, the expand button will be hiddennumber-
labelWidthlabel widthnumber | 'auto'98
spanwidth of form itemsnumber[0 - 24]-
splitwhether each line has a split lineboolean-
preserveIf set to true, the form data will be lost after being put awaybooleantrue

Responsive Breakpoint Rules

Note that the values of the breakpoints are the size of the form container and not the viewport size.

Rules for default layout
container-width breakpointsingle-row display form single-column count (including action area)default layout
≧ 1352px4 columnshorizontal
≧ 1062px3 columnshorizontal
≧ 701px && < 1063px3 columnshorizontal
≧ 701px && < 1063px3 columnshorizontal
≧ 513px && < 701px2 columnsvertical
< 513px1 columnvertical
Rules when forcing top and bottom layout
container width breakpointsingle row display table single column count (including operation area)
≧ 1057px4 columns
≧ 785px && < 1057px3 columns
≧ 513px && < 785px2 columns
< 513px`1 column


LightFilter supports the following properties in addition to the API inherited from ProForm.

collapsewhether to collapse all fields by defaultbooleanfalse
collapseLabellabel of collapsed areaReactNodeMoreFilter <DownOutlined/>