Dynamic table in static table

I have to write dynamic table in static table. the static table fixed 10 rows.
from my way, i will write table in JS then fix loop row 10 rounds.

Do you have other idea to handle table like this?

I would prob use hardcoded references (Handlebars expressions) to the records in your book table a shown in the picture below.

Erik

In Design view

The merged result

The HTML in the Source could look something like this:

<table class="books" style="width :100%">
    <thead>
        <tr>
            <th>id</th> 
            <th>author</th> 
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>{{books.0.id}}</td> 
            <td>{{books.0.author}}</td> 
        </tr>
        <tr>
            <td>{{books.1.id}}</td> 
            <td>{{books.1.author}}</td> 
        </tr>
        <tr>
            <td>{{books.2.id}}</td> 
            <td>{{books.2.author}}</td> 
        </tr>
        <tr>
            <td>{{books.3.id}}</td> 
            <td>{{books.3.author}}</td> 
        </tr>
        <tr>
            <td>{{books.4.id}}</td> 
            <td>{{books.4.author}}</td> 
        </tr>
        <tr>
            <td>{{books.5.id}}</td> 
            <td>{{books.5.author}}</td> 
        </tr>
        <tr>
            <td>{{books.6.id}}</td> 
            <td>{{books.6.author}}</td> 
        </tr>
        <tr>
            <td>{{books.7.id}}</td> 
            <td>{{books.7.author}}</td> 
        </tr>
        <tr>
            <td>{{books.8.id}}</td> 
            <td>{{books.8.author}}</td> 
        </tr>
        <tr>
            <td>{{books.9.id}}</td> 
            <td>{{books.9.author}}</td> 
        </tr>
    </tbody>
</table>