-
Notifications
You must be signed in to change notification settings - Fork 203
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fifth and hopefully last pass at editing.
- Loading branch information
1 parent
cd0f2a7
commit 46c08a6
Showing
3 changed files
with
27 additions
and
23 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
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
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 |
---|---|---|
|
@@ -14,7 +14,7 @@ Auto Grid is a component for displaying tabular data based on a Java backend ser | |
|
||
== Basic Usage | ||
|
||
Auto Grid requires a Java service that implements the `ListService<T>` interface. In the example here, the `ProductService` class extends `ListRepositoryService<T, ID, R>`, which in turn implements the `ListService<T>`: | ||
Auto Grid requires a Java service that implements the `ListService<T>` interface. In this example, the `ProductService` class extends `ListRepositoryService<T, ID, R>`, which in turn implements the `ListService<T>`: | ||
|
||
[.example] | ||
-- | ||
|
@@ -58,7 +58,7 @@ Here's what the rendered grid looks like: | |
include::{root}/frontend/demo/component/auto-grid/react/auto-grid-basic.tsx[render,tags=snippet,indent=0,group=React] | ||
---- | ||
|
||
As you can see, Auto Grid automatically expands properties of `@OneToOne` relationships -- in this case the properties of the `supplier` -- and it displays them as columns in the grid. However, properties annotated with `@Id` or `@Version` are excluded by default. If you want to show them, though, you can use the `visibleColumns` property to specify which columns should be displayed. This is covered in the next section. | ||
As you can see, Auto Grid automatically expands properties of `@OneToOne` relationships -- in this case the properties of the `supplier` -- and it displays them as columns in the grid. However, properties annotated with `@Id` or `@Version` are excluded by default. To show them, though, you can use the `visibleColumns` property to specify which columns to display. You can find more information on this in the next section. | ||
|
||
|
||
== Customizing Columns | ||
|
@@ -70,7 +70,7 @@ It's possible to customize the columns displayed by Auto Grid. How this is done | |
|
||
To choose which of the data properties should be displayed as columns in Auto Grid, and to specify the column order, set the property names to the `visibleColumns` property. | ||
|
||
The following example uses only the `category`, `name`, `supplier.supplierName`, and `price` properties, in this order: | ||
The following example uses only the `category`, `name`, `supplier.supplierName`, and `price` properties -- in that order: | ||
|
||
.Auto Grid with Chosen Columns | ||
[source,tsx] | ||
|
@@ -102,7 +102,7 @@ You can pass the same options as when rendering a column in a regular grid. See | |
|
||
=== Adding Custom Columns | ||
|
||
To add a custom column by joining the value of two or more properties and displaying them in a single column, this can be done by using the `customColumns` property. The `customColumns` property takes an array of `GridColumn` instances and renders them after the auto columns. Refer to the <<../grid/#,Grid>> documentation page for more information on the `GridColumn` type. | ||
To add a custom column that joins the values of multiple properties and displays them in a single column, use the `customColumns` property. This property takes an array of `GridColumn` instances and renders them after the auto columns. Refer to the <<../grid/#,Grid>> documentation page for more information on the `GridColumn` type. | ||
|
||
The following example uses the `customColumns` property to render a custom column that concatenates and displays the product's supplier `name` and `headquarterCity` properties in the same column: | ||
|
||
|
@@ -114,12 +114,12 @@ include::{root}/frontend/demo/component/auto-grid/react/auto-grid-custom-columns | |
|
||
.Customizing vs. Adding Columns | ||
[NOTE] | ||
In general, when it comes to customizing automatically rendered columns, you can use the `columnOptions` property. As for adding or customizing the custom columns, use `customColumns`. | ||
In general, for customizing automatically rendered columns, you can use the `columnOptions` property. As for adding or customizing the custom columns, use `customColumns`. | ||
|
||
|
||
==== [since:dev.hilla:[email protected]]#Custom Columns Order# | ||
|
||
By default, custom columns are added after the automatically rendered columns. You can also define the order of appearance for custom columns by using the `visibleColumns` property. Custom columns can be freely placed before, in between, or after other columns. To achieve this, you'll need to provide the `key` property of the custom column in the `visibleColumns` property. | ||
By default, custom columns are added after the automatically rendered columns. You can also define the order of appearance for custom columns by using the `visibleColumns` property. Custom columns can be freely placed before, in between, or after other columns. To do this, you'll need to provide the `key` property of the custom column in the `visibleColumns` property. | ||
|
||
The following example shows a custom column with `supplierInfo` as the `key` placed between two automatically rendered columns: | ||
|
||
|
@@ -184,7 +184,7 @@ The example here enables single-row selection in the Auto Grid by using a combin | |
include::{root}/frontend/demo/component/auto-grid/react/auto-grid-selection.tsx[render,tags=snippet,indent=0,group=React] | ||
---- | ||
|
||
You can read more on the properties, and use cases supported, on the <<../grid#,Grid component>> documentation page. | ||
You can read more about the properties, and use cases supported, on the <<../grid#,Grid component>> documentation page. | ||
|
||
++++ | ||
<style> | ||
|