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

Accepts

• 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

Demo

Code

<table id="myTable" class="ink-table alternating" data-page-size="6" data-pagination="#myTablePagination"> 
    <thead>
        <tr>
            <th class="align-left" data-sortable="true">Pepper</th>
            <th class="align-left" data-sortable="true">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>Habanero</td>                   
            <td>350000</td>
        </tr>
        <tr>
            <td>Scotch Bonnet</td>              
            <td>180000</td>
        </tr>
        <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>
    </tbody>
</table>

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

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

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.

Accepts

• endpoint

  New endpoint

• currentPage

  If you pass this, setCurrent will also be called.