Grid Excel-like key navigation table demo

Excel-like keyboard navigation to tables with input fields in rows and columns.

The arrows on the keyboard will behave like this:

Up Moves to the first editable field in the same column. If at top row in table nothing happens.
Down Moves down to the next editable row. If at bottom within table nothing happens.
Left If at the far left of content or the entire cell is selected the cursor moves to the previous column.
Right If at the far right of content or the entire cell is selected the cursor moves to the next column.

Name	Address	City	ZIP code

<p>Excel-like keyboard navigation to tables with input fields in rows and columns.</p>
<p>The arrows on the keyboard will behave like this:</p>
<ul>
    <li><kbd>Up</kbd> Moves to the first editable field in the same column. If at top row in table nothing happens.</li>
    <li><kbd>Down</kbd> Moves down to the next editable row. If at bottom within table nothing happens.</li>
    <li><kbd>Left</kbd> If at the far left of content or the entire cell is selected the cursor moves to the previous column.</li>
    <li><kbd>Right</kbd> If at the far right of content or the entire cell is selected the cursor moves to the next column.</li>
</ul>
<table class="table table-striped" data-func="grid">
    <thead>
        <tr>
            <th>Name</th>
            <th>Address</th>
            <th>City</th>
            <th>ZIP code</th>
        </tr>
    </thead>
    <tbody data-array="Rows" data-autoinsert="1" data-remove="1">
        <tr>
            <td data-func="input" data-name="Name" data-placeholder="Enter name"></td>
            <td data-func="input" data-name="Address" data-placeholder="Enter Address"></td>
            <td data-func="input" data-name="City" data-placeholder="Enter city"></td>
            <td data-func="input" data-name="ZIP" data-placeholder="Enter ZIP code"></td>
        </tr>
    </tbody>
</table>

No JS code used for this example

Output templates

Templates used for document and web page generation:

Friendly Name	File Name	Template