Initial implementation of ComponentRenderer for Grid (#8743)

Fixes #8622 
Fixes #8623 

1 files changed, 41 insertions, 2 deletions

diff --git a/documentation/components/components-grid.asciidoc b/documentation/components/components-grid.asciidoc
index 957a9a7fb4..7fd6332dd6 100644
--- a/documentation/components/components-grid.asciidoc
+++ b/documentation/components/components-grid.asciidoc
@@ -448,7 +448,7 @@ The column type must be a [interfacename]#Resource#, as described in
 +
 [source, java]
 ----
-Column<ThemeResource> imageColumn = grid.addColumn(
+Column<Person, ThemeResource> imageColumn = grid.addColumn(
     p -> new ThemeResource("img/"+p.getLastname()+".jpg"),
     new ImageRenderer());
 ----
@@ -478,7 +478,7 @@ Set the renderer in the [classname]#Grid.Column# object:
 +
 [source, java]
 ----
-Column<String> htmlColumn grid.addColumn(person ->
+Column<Person, String> htmlColumn grid.addColumn(person ->
       "<a href='" + person.getDetailsUrl() + "' target='_top'>info</a>",
       new HtmlRenderer());
 ----
@@ -502,6 +502,45 @@ Column<Integer> birthYear = grid.addColumn(Person::getBirthYear,
 [classname]#ProgressBarRenderer#:: Renders a progress bar in a column with a [classname]#Double# type. The value
 must be between 0.0 and 1.0.
 
+[classname]#ComponentRenderer#:: Renders a Vaadin [classname]#Component# in a column. Since components
+are quite complex, the [classname]#ComponentRenderer# comes with possible performance issues.
+To use it efficiently you should use as few nested components as possible.
+
++
+Use [classname]#Button# in [classname]#Grid#:
++
+----
+grid.addColumn(person -> {
+      Button button = new Button("Click me!");
+      button.addClickListener(click -> 
+            Notification.show("Clicked: " + person.toString()));
+      return button;
+}, new ComponentRenderer());
+----
+
+Components will occasionally be generated again during runtime. If you have a state in your 
+component and not in the data object, you need to handle storing it yourself. Below is a simple
+example on how to achieve this.
+
++
+Store a [classname]#TextField# with changed value.
++
+----
+Map<Person, TextField> textFields = new HashMap<>();
+grid.addColumn(person -> {
+      // Check for existing text field
+      if (textFields.containsKey(person)) {
+            return textFields.get(person);
+      }
+      // Create a new one
+      TextField textField = new TextField();
+      textField.setValue(person.getLastname());
+      // Store the text field when user updates the value
+      textField.addValueChangeListener(change -> 
+            textFields.put(person, textField));
+      return textField;
+      }, new ComponentRenderer());
+----
 
 [[components.grid.renderer.custom]]
 === Custom Renderers