Table designer demo


Delete title in header to remove a column

<p class="lead">Delete title in header to remove a column</p>

<table class="table table-striped table-bordered">
    <thead>
        <tr data-array="Columns">
            <th data-func="input" data-name="Title" data-deleteempty="1" data-placeholder="Enter column title"></th>
        </tr>
    </thead>
    <tbody data-array="Rows">
        <tr data-sync="Columns" data-array="Cells">
            <td data-func="input" data-name="Text" data-placeholder="Enter text"></td>
        </tr>
    </tbody>
</table>
    
<button data-action="add" data-target="Columns">Add column</button>
<button data-action="add" data-target="Rows">Add row</button>
<button data-action="remove" data-target="Rows">Delete last row</button>
<button data-action="remove" data-target="Columns">Delete last column</button>
No JS code used for this example

Output templates

Templates used for document and web page generation:

Friendly Name File Name Template