<div class='ractive-datatable {{class}}' id='{{id}}' style='{{style}}'>

{{#if data}}

<div class='scroll'>

<table>

<thead class='{{sortable ? "sortable" : ""}}'>

{{#cols}}

<th {{#if sortOn === this}}class='sort {{sortMode}}'{{/if}} on-click='setSort(this)'>{{columns && columns[this] && columns[this].header ? columns[this].header : this}}</th>

{{/}}

</thead>

<tbody>

{{#rows:r}}

<tr {{#if selectionMode == 'row' && _selection.indexOf(index) !== -1 }}class='selected'{{/if}} on-click='selectRow(event)' index='{{index}}'>

{{#cols:c}}

{{#if editable && can('edit', this, rows[r].item) && editing == r+'-'+c}}

<td class='editing'>

<input value="{{rows[r].item[this]}}" on-blur-keyup='fieldedited(event)' twoway='false'>

</td>

{{else}}

<td class='{{this}}' on-dblclick='set("editing", r + "-" + c)' {{#if selectionMode == 'cell' && selection[index] && selection[index][c] }}class='selected'{{/if}} on-click='selectCell(event)'>

{{#if rows[r] && rows[r].item}}

{{> cellFor(cols[c]) (rows[r].item[this] || rows[r].item) }}

{{/if}}

</td>

{{/if}}

{{/}}

</tr>

{{/}}

</tbody>

</table>

</div>

<div class='footer'>

Displaying {{current}} of {{total}}

{{#if pages}}

<span class='pagination'>

{{#if onFirstPage}}

<span class='disabled'>Previous</span>

{{else}}

<a on-click='previousPage()'>Previous</a>

{{/if}}

<span class='pages'>

{{#pages}}

<a on-click='gotoPage(this)' class='{{page == this ? "active" : ""}}'>{{.}}</a>

{{/}}

</span>

{{#if onLastPage}}

<span class='disabled'>Next</span>

{{else}}

<a on-click='nextPage()'>Next</a>

{{/if}}

</span>

{{/if}}

</div>

{{/if}}