Screenshots now working in generated docs

Author: emamid

README.md

@@ -1,6 +1,6 @@
 ## Svelte Data Table based on [Flowbite Svelte](https://flowbite-svelte.com/), [Flowbite Icons](https://flowbite.com/icons/), and [Tailwind](https://tailwindcss.com/)
 
-This data table is designed for viewing and editing data in an array of objects. It works in conjunction with the Flowbite Svelte library, with support for custom cell editors, moving focus between cells with tab and enter, column sorting (simple and custom), conditional CSS, and more.
+This data table is designed for viewing and editing data in an array of objects. It's built using the Flowbite Svelte library's Table components and works in conjunction with it, with support for custom cell editors, moving focus between cells with tab and enter, column sorting (simple and custom), conditional CSS, and more.
 
 ## Install
 
@@ -44,4 +44,22 @@ Then install the Flowbite components and icons along with the data table compone
 </main>
 ```
 
-Examples for most of the component's features are under /examples . You can find the documentation [here](https://emamid.github.io/svelte-data-table/).
+Examples for most of the component's features are under /examples . You can find the documentation [here](https://emamid.github.io/svelte-data-table/).
+
+#### Example 1 - Basic data table
+![Example 1](./screenshot-01.png)
+
+#### Example 2 - Table with cell focus components
+![Example 2](./screenshot-02.png)
+
+#### Example 3 - Table with cell focus Select components, cell renderers, and custom sort
+![Example 3](./screenshot-03.png)
+
+#### Example 4 - Table with actions and cell view components
+![Example 4](./screenshot-04.png)
+
+#### Example 5 - Table with custom cell component
+![Example 5](./screenshot-05.png)
+
+#### Example 6 - Table with cell and row class getter functions
+![Example 6](./screenshot-06.png)

docs/index.html

@@ -101,7 +101,7 @@ <h3> </h3>
 
     <section>
         <article><h2>Svelte Data Table based on <a href="https://flowbite-svelte.com/">Flowbite Svelte</a>, <a href="https://flowbite.com/icons/">Flowbite Icons</a>, and <a href="https://tailwindcss.com/">Tailwind</a></h2>
-<p>This data table is designed for viewing and editing data in an array of objects. It works in conjunction with the Flowbite Svelte library, with support for custom cell editors, moving focus between cells with tab and enter, column sorting (simple and custom), conditional CSS, and more.</p>
+<p>This data table is designed for viewing and editing data in an array of objects. It's built using the Flowbite Svelte library's Table components and works in conjunction with it, with support for custom cell editors, moving focus between cells with tab and enter, column sorting (simple and custom), conditional CSS, and more.</p>
 <h2>Install</h2>
 <p>To add to an existing Svelte app, first install Tailwind if you haven't already:</p>
 <pre class="prettyprint source lang-bash"><code>> npx svelte-add@latest tailwindcss
@@ -135,7 +135,19 @@ <h2>Basic example</h2>
   />
 &lt;/main>
 </code></pre>
-<p>Examples for most of the component's features are under /examples . You can find the documentation <a href="https://emamid.github.io/svelte-data-table/">here</a>.</p></article>
+<p>Examples for most of the component's features are under /examples . You can find the documentation <a href="https://emamid.github.io/svelte-data-table/">here</a>.</p>
+<h4>Example 1 - Basic data table</h4>
+<p><img src="./screenshot-01.png" alt="Example 1"></p>
+<h4>Example 2 - Table with cell focus components</h4>
+<p><img src="./screenshot-02.png" alt="Example 2"></p>
+<h4>Example 3 - Table with cell focus Select components, cell renderers, and custom sort</h4>
+<p><img src="./screenshot-03.png" alt="Example 3"></p>
+<h4>Example 4 - Table with actions and cell view components</h4>
+<p><img src="./screenshot-04.png" alt="Example 4"></p>
+<h4>Example 5 - Table with custom cell component</h4>
+<p><img src="./screenshot-05.png" alt="Example 5"></p>
+<h4>Example 6 - Table with cell and row class getter functions</h4>
+<p><img src="./screenshot-06.png" alt="Example 6"></p></article>
     </section>
 
 

examples/01-basic/screenshot-01.png docs/screenshot-01.pngexamples/01-basic/screenshot-01.png renamed to docs/screenshot-01.png

@@ -2,7 +2,7 @@
 
 Just the basic data table with columns and data items, no in-grid components or conditional/computed CSS.
 
-![](screenshot-01.png)
+![](../../screenshot-01.png)
 
 ## Installation
 

examples/02-cell-focus/screenshot-02.png docs/screenshot-02.pngexamples/02-cell-focus/screenshot-02.png renamed to docs/screenshot-02.png

@@ -2,7 +2,7 @@
 
 The Name column has an ```InputCell``` focus component, while the Fingers and Level columns have ```NumberInputCell``` focus components. Editing is implemented via the ```cellChanged``` event. All three columns are sortable.
 
-![](screenshot-02.png)
+![](../../screenshot-02.png)
 
 ## Installation