Table Samples - InkJS

Table #1 - Markup with the configuration via data attributes

Notice that you can click on the table headers to sort the table.

To enable this, just add the attribute data-sortable="true" to the <th> elements in your <thead>

Pepper Scoville Rating
Trinidad Moruga Scorpion 1500000
Bhut Jolokia 1000000
Naga Viper 1463700
Red Savina Habanero 580000
THE SECOND TO LAST THING -1
THE LAST THING 0 

<table id="table1" class="ink-table" data-page-size="2">
    <thead>
        <tr>
            <th data-sortable="true" width="75%">Pepper</th>
            <th data-sortable="true" width="25%">Scoville Rating</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Trinidad Moruga Scorpion</td>
            <td>1500000</td>
        </tr>
        <tr>
            <td>Bhut Jolokia</td>
            <td>1000000</td>
        </tr>
        <tr>
            <td>Naga Viper</td>
            <td>1463700</td>
        </tr>
        <tr>
            <td>Red Savina Habanero</td>
            <td>580000</td>
        </tr>
        <tr>
            <td>THE SECOND TO LAST THING</td>
            <td>-1</td>
        </tr>
        <tr>
            <td>THE LAST THING</td>
            <td>0</td>
        </tr>
    </tbody>
</table>
<nav class="ink-navigation">
<ul>
</ul>
</nav>

(This is a table with no items and no paginator) :

Pepper Scoville Rating 

<table id="table1noitems" class="ink-table" data-page-size="2">
    <thead>
        <tr>
            <th data-sortable="true" width="75%">Pepper</th>
            <th data-sortable="true" width="25%">Scoville Rating</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Table #2 - Loading data via AJAX

<table
    id="table2" class="ink-table"
    data-endpoint="file.json" data-fields="pepper,scoville"
    data-labels="Pepper,Scoville Rating" data-sortable="scoville"
    data-paginator="#table2-pag" data-page-size="3"
>
</table>
<nav class="ink-navigation" id="table2-pag"><ul></ul></nav>
<script>
    Ink.requireModules(['Ink.UI.Table_1'],function(Table){
        var table2 = new Table('#table2', {
            processJSONHeaders: function (responseJSON) {
                var row = responseJSON[0];
                var ret = [];
                for (var k in row) if (row.hasOwnProperty(k)) {
                    ret.push({ label: k });
                }
                return ret;
            }
        });
    });
</script>