Skip to content

Commit

Permalink
docs: disable sorting and filtering in auto grid columns
Browse files Browse the repository at this point in the history
  • Loading branch information
sissbruecker committed Dec 5, 2023
1 parent 9cb44d7 commit f05cafb
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 25 deletions.
41 changes: 32 additions & 9 deletions articles/react/components/auto-grid/index.asciidoc
Original file line number Diff line number Diff line change
Expand Up @@ -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

View workflow job for this annotation

GitHub Actions / vale

[vale] articles/react/components/auto-grid/index.asciidoc#L154

[Vaadin.JustSimply] Avoid using 'simply'. It may be insensitive.
Raw output
{"message": "[Vaadin.JustSimply] Avoid using 'simply'. It may be insensitive.", "location": {"path": "articles/react/components/auto-grid/index.asciidoc", "range": {"start": {"line": 154, "column": 323}}}, "severity": "WARNING"}

.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:

Expand All @@ -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#

Expand Down

This file was deleted.

0 comments on commit f05cafb

Please sign in to comment.