---
title: "Dynamic Reactive Tables with LemonadeJS | v3 docs"
description: "LemonadeJS v3 archive. How to create a reactive dynamic table from an array of objects using the loop attribute."
source: https://lemonadejs.com/docs/v3/examples/table/
---

Table
=====

How to create dynamic tables from a JavaScript array of objects. The following example uses `:loop` attribute.  
  

Basic example
-------------

Creating a dynamic HTML table using LemonadeJS.  

### Source code

```html
<html>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs@3/dist/lemonade.js"></script>
<div id='root'></div>
<script>
function Component() {
    const self = this;

    self.rows = [
        { title:'Google', description: 'The alpha search engine...' },
        { title:'Bing', description: 'The microsoft search engine...' },
        { title:'Duckduckgo', description: 'Privacy in the first place...' },
    ];

    // Custom components such as List should always be unique inside a real tag.
    return `<table cellpadding="6">
        <thead><tr><th>Title</th><th>Description</th></th></thead>
        <tbody :loop="self.rows">
        <tr><td>{{self.title}}</td><td>{{self.description}}</td></tr>
        </tbody>
    </table>`;
}
lemonade.render(Component, document.getElementById('root'));
</script>
</html>
```
```javascript
import lemonade from "lemonadejs";

export default function Component() {
    const self = this;

    self.rows = [
        { title:'Google', description: 'The alpha search engine...' },
        { title:'Bing', description: 'The microsoft search engine...' },
        { title:'Duckduckgo', description: 'Privacy in the first place...' },
    ];

    // Custom components such as List should always be unique inside a real tag.
    return `<table cellpadding="6">
        <thead><tr><th>Title</th><th>Description</th></th></thead>
        <tbody :loop="self.rows">
        <tr><td>{{self.title}}</td><td>{{self.description}}</td></tr>
        </tbody>
    </table>`;
}
```