chore: update screenshot and readme code snippet

vaadin · Feb 4, 2019 · ff71ac6 · ff71ac6
1 parent e4cf73c
commit ff71ac6
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -24,18 +24,28 @@
   <template>
     <script src="../webcomponentsjs/webcomponents-lite.js"></script>
     <link rel="import" href="vaadin-grid-pro.html">
+    <link rel="import" href="vaadin-grid-pro-edit-column.html">
     <next-code-block></next-code-block>
   </template>
 </custom-element-demo>
 ```
 -->
 ```html
 <vaadin-grid-pro>
-  ...
+  <vaadin-grid-pro-edit-column path="firstName" header="First Name"></vaadin-grid-pro-edit-column>
+  <vaadin-grid-pro-edit-column path="lastName" header="Last Name"></vaadin-grid-pro-edit-column>
+  <vaadin-grid-pro-edit-column path="email" header="Email"></vaadin-grid-pro-edit-column>
 </vaadin-grid-pro>
+<script>
+  // Populate the grid with data
+  const grid = document.querySelector('vaadin-grid-pro');
+  fetch('https://demo.vaadin.com/demo-data/1.0/people?count=200')
+    .then(res => res.json())
+    .then(json => grid.items = json.result);
+</script>
 ```
 
-[<img src="https://raw.githubusercontent.com/vaadin/vaadin-grid-pro/master/screenshot.png" width="200" alt="Screenshot of vaadin-grid-pro">](https://vaadin.com/components/vaadin-grid-pro)
+[<img src="https://raw.githubusercontent.com/vaadin/vaadin-grid-pro/master/screenshot.png" width="900" alt="Screenshot of vaadin-grid-pro">](https://vaadin.com/components/vaadin-grid-pro)
 
 
 ## Installation

diff --git a/screenshot.png b/screenshot.png
diff --git a/vaadin-directory-description.md b/vaadin-directory-description.md
@@ -18,6 +18,15 @@
 
 ```html
 <vaadin-grid-pro>
-  ...
+  <vaadin-grid-pro-edit-column path="firstName" header="First Name"></vaadin-grid-pro-edit-column>
+  <vaadin-grid-pro-edit-column path="lastName" header="Last Name"></vaadin-grid-pro-edit-column>
+  <vaadin-grid-pro-edit-column path="email" header="Email"></vaadin-grid-pro-edit-column>
 </vaadin-grid-pro>
+<script>
+  // Populate the grid with data
+  const grid = document.querySelector('vaadin-grid-pro');
+  fetch('https://demo.vaadin.com/demo-data/1.0/people?count=200')
+    .then(res => res.json())
+    .then(json => grid.items = json.result);
+</script>
 ```