-
Notifications
You must be signed in to change notification settings - Fork 204
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: disable sorting and filtering in auto grid columns
- Loading branch information
1 parent
9cb44d7
commit f05cafb
Showing
2 changed files
with
32 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -147,21 +147,40 @@ The following example shows a custom column with `supplierInfo` as the `key` pla | |
[NOTE] | ||
If the `visibleColumns` property is present, only the custom columns for which their keys are mentioned in the `visibleColumns` are rendered according to the specified order. | ||
|
||
== Filtering | ||
== Sorting and Filtering | ||
|
||
Auto Grid has column-based filtering enabled by default. You can disable the built-in column filters by setting the `noHeaderFilters` flag. | ||
Auto Grid has sorting and filtering enabled by default for all columns with a supported Java type. That includes all primitive types, like strings, numbers, booleans, as well as some complex types like enums, `java.time.LocalDate` and `java.time.LocalTime`. It automatically sorts by the first column, and shows a filter field in the header of each column. | ||
|
||
.Auto Grid using `noHeaderFilters={true}` | ||
You can disable sorting and filtering for individual columns by configuring the `sortable` and `filterable` properties of the column in the `columnOptions` object. This can be useful, for example for columns that show a computed property for which no sorting and filtering is implemented in the `ListService`, or if there simply isn't any meaningful way to sort or filter. | ||
Check warning on line 154 in articles/react/components/auto-grid/index.asciidoc GitHub Actions / vale[vale] articles/react/components/auto-grid/index.asciidoc#L154
Raw output
|
||
|
||
.Auto Grid with sorting and filtering disabled for the `displayName` column | ||
[source,tsx] | ||
---- | ||
include::{root}/frontend/demo/component/auto-grid/react/auto-grid-no-header-filters.tsx[render,tags=snippet,indent=0,group=React] | ||
<AutoGrid | ||
service={ProductService} | ||
model={ProductModel} | ||
columnOptions={{ | ||
displayName: { | ||
filterable: false, | ||
sortable: false, | ||
}, | ||
}} | ||
/> | ||
---- | ||
|
||
Auto Grid supports external filtering by using the criteria specified by the `experimentalFilter` property. | ||
Alternatively, you can disable all header filters by setting the `noHeaderFilters` property. | ||
|
||
.Experimental Feature | ||
[WARNING] | ||
External Auto Grid filtering is an experimental feature. The `experimentalFilter` property API may be changed or removed in future releases. | ||
.Auto Grid with all header filters disabled | ||
[source,tsx] | ||
---- | ||
<AutoGrid | ||
service={ProductService} | ||
model={ProductModel} | ||
noHeaderFilters | ||
/> | ||
---- | ||
|
||
As an alternative to the built-in header filters, Auto Grid supports external filtering by passing a custom filter definition to the `experimentalFilter` property. | ||
|
||
In the example below, the data in Auto Grid is filtered using the _contains_ matcher for the `name` property, combined with the _equals_ matcher for `category` when a specific category is selected: | ||
|
||
|
@@ -171,7 +190,11 @@ In the example below, the data in Auto Grid is filtered using the _contains_ mat | |
include::{root}/frontend/demo/component/auto-grid/react/auto-grid-filtering.tsx[render,tags=snippet,indent=0,group=React] | ||
---- | ||
|
||
You can combine several filtering criteria by using the `{t: 'and' | 'or', children: []}` composite filter type. | ||
You can combine several filtering criteria by using the `{'@type': 'and' | 'or', children: []}` composite filter type. | ||
|
||
.Experimental Feature | ||
[WARNING] | ||
External Auto Grid filtering is an experimental feature. The `experimentalFilter` property API may be changed or removed in future releases. | ||
|
||
== [since:dev.hilla:[email protected]]#Refreshing Data# | ||
|
||
|
16 changes: 0 additions & 16 deletions
16
frontend/demo/component/auto-grid/react/auto-grid-no-header-filters.tsx
This file was deleted.
Oops, something went wrong.