All samples are using Ink.requireModules, please read how to use it at Ink.requireModules section

Ink.UI.Table class

The Table component transforms the native/DOM table element into a sortable, paginated component. You can use this component to display data from a JSON endpoint, or from table rows in the DOM. Displaying from the DOM is more practical, but sometimes you don't want to load everything at once (if you have a HUGE table). In those cases, you should configure Ink.UI.Table to get data from JSON endpoint. To enable sorting, just set the data-sortable attribute of your table headers (they must be in the thead of the table) to "true". To enable pagination, you should pass either an Ink.UI.Pagination instance or a selector to create the Ink.UI.Pagination element on.

Method name Description
new Table(selector, [options]) Constructor
.setEndpoint(endpoint, currentPage) Sets the AJAX endpoint.

new Ink.UI.Table(selector, [options])


  • selector

    Your `table` element.
  • options

    Options object containing:
  • options.pageSize

    Number of rows per page. Omit to avoid paginating.
  • options.endpoint

    Endpoint to get the records via AJAX. Omit if you don't want to do AJAX
  • options.createEndpointURL

    Callback to customise what URL the AJAX endpoint is at. Receives three arguments: base (the "endpoint" option), sort (`{ order: 'asc' or 'desc', field: fieldname }`) and page ({ page: page number, size: items per page })
  • options.getDataFromEndpoint

    Callback to allow the user to retrieve the data himself given an URL. Must accept two arguments: `url` and `callback`. This `callback` will take as a single argument a JavaScript object.
  • options.processJSONRows

    Retrieve an array of rows from the data which came from AJAX.
  • options.processJSONHeaders

    Get an object with all the headers' names as keys, and a { label, sortable } object as value. Example: `{col1: {label: "Column 1"}, col2: {label: "Column 2", sortable: true}`. Takes a single argument, the JSON response.
  • options.processJSONRow

    Process a row object before it gets on the table.
  • options.processJSONField

    Process the field data before putting it on the table. You can return HTML, a DOM element, or a string here. Arguments you receive: `(column, fieldData, rowIndex)`.
  • options.processJSONField.FIELD_NAME

    The same as processJSONField, but for a particular field.
  • options.processJSONTotalRows

    A callback where you have a chance to say how many rows are in the dataset (not only on this page) you have on the collection. You get as an argument the JSON response.
  • options.getSortKey

    A function taking a `{ columnIndex, columnName, data, element }` object and returning a value which serves as a sort key for the sorting operation. For example, if you want to sort by a `data-sort-key` atribute, set `getSortKey` to: function (cell) { return cell.element.getAttribute('data-sort-key'); }
  • options.getSortKey.FIELD_NAME

    Same as `options.getSortKey`, but for a particular field.
  • options.tdClassNames

    An object mapping each field to what classes it gets. Example: `{ name: "large-10", isBoss: "hide-small" }`
  • options.pagination

    Pagination instance, element or selector.
  • options.paginationOptions

    Override the options with which we instantiate the Ink.UI.Pagination.
  • options.allowResetSorting

    Allow sort order to be set to "none" in addition to "ascending" and "descending"
  • options.visibleFields

    Set of fields which get shown on the table


Pepper Scoville Rating
Trinidad Moruga Scorpion 1500000
Bhut Jolokia 1000000
Naga Viper 1463700
Red Savina Habanero 580000
Habanero 350000
Scotch Bonnet 180000
Malagueta 50000
Tabasco 35000
Serrano Chili 27000
Jalapeño 8000
Poblano 1500
Peperoncino 500


<table id="myTable" class="ink-table alternating" data-page-size="6" data-pagination="#myTablePagination"> 
            <th class="align-left" data-sortable="true">Pepper</th>
            <th class="align-left" data-sortable="true">Scoville Rating</th>
            <td>Trinidad Moruga Scorpion</td>   
            <td>Bhut Jolokia</td>               
            <td>Naga Viper</td>                 
            <td>Red Savina Habanero</td>        
            <td>Scotch Bonnet</td>              
        <tr><td>Malagueta</td>                  <td>50000</td></tr>
        <tr><td>Tabasco</td>                    <td>35000</td></tr>
        <tr><td>Serrano Chili</td>              <td>27000</td></tr>
        <tr><td>Jalapeño</td>                   <td>8000</td></tr>
        <tr><td>Poblano</td>                    <td>1500</td></tr>
        <tr><td>Peperoncino</td>                <td>500</td></tr>

<nav class="ink-navigation" id="myTablePagination">
    <ul class="pagination "></ul>

    Ink.requireModules( ['Ink.Dom.Selector_1','Ink.UI.Table_1'], function( Selector, Table ){
        var tableElement = Ink.s('#myTable');
        var tableObj = new Table( tableElement );

How to acquire data from remote endpoints via AJAX

First, set the `endpoint` option to a URL.

Then, an AJAX request to that URL is initiated, with the parameters "sortOrder" and "sortField" set to the order ('asc' or 'desc') and the field which is being sorted by, `rows_per_page` indicating how many rows each page should have, and `page` indicating what page we are on right now.

If your endpoint does not support the above format, you can change the AJAX request URL by passing a `createEndpointURL` option, which is a function taking `(endpoint, sort /*{ order, field }*/, page /*{ size, page }*/)` and returning the AJAX request URL.

How to massage remote data for Table use

When data comes from a HTTP endpoint, it almost surely does not conform to what Table expects. You need to massage it a bit so that Table may consume it.

Below are the names of the options you are supposed to register, what they are called with, and what they are supposed to return.

// remoteData is what came from the endpoint.

// By default, processJSONHeaders will look at the keys in the first field of the response
var tableHeaders = options.processJSONHeaders(remoteData);  // ['Name of column 1', 'Name of column 2', 'Name of column 3']

// By default, processJSONRows will return the "rows" attribute of your JSON response object. If the response is an array, it returns that array.
var tableRows = options.processJSONRows(remoteData);  // Array of objects like this: { 'Name of column 1': 'Field 1', 'Name of column 2': 'Field 2', ... }

// By default, it returns the `totalRows` or `length` attribute of your JSON response object.
var rowCount = options.processJSONTotalRows(remoteData);  // The amount of total rows there is (this can't be just tableRows.length because that refers to this page only).

// Optional:
// By default, processJSONField returns just what was passed to it.
var eachField = options.processJSONField['Name of column 1'](fieldData, columnName, rowIndex);  // A DOM Element or a string or a number.

.setEndpoint(endpoint, currentPage) method

Sets the AJAX endpoint.
Useful to change the endpoint in runtime.


  • endpoint

    New endpoint
  • currentPage

    If you pass this, setCurrent will also be called.