6. JavaScript

Please refer to the Bootstrap JavaScript documentation for details about how to use the JavaScript components. Bootstrap UI components were written to be as compatible with Bootstrap 3 components as possible. Namely the following sections of Bootstrap docs apply:

QUnit Tests

Tests for all components are stored in src/js/tests/ and can be run using either of the following commands:
  • $ grunt test for testing in a headless browser Phantom JS.
  • $ grunt test-remote for testing in a real browser. Please append src/js/tests/ to the URL (typically localhost:3000) to view the QUnit test page. For testing on another device, replace localhost with your local IP address.

6.1 — CKEditor Loader

Initializes CKEditor WYSIWYG editor on the given <textarea> element. It does no more than run the $.ckeditor() method. It is possible to initialize the editor with default or custom options.

JavaScript Required

Script ckeditor-loader.js, CKEditor package and CKEditor jQuery adapter must be included.

Usage

This loader only calls the jQuery plugin defined in CKEditor jQuery adapter with appropriate arguments. If the lang attribute is set on the <html> element the CKEditor is localized accordingly.

Data-API

If a <textarea> HTML element has the attribute data-onload-ckeditor defined, it will be initialized as a CKEditor upon page load. The editor can be configured by the value passed to the attribute. If no value is passed, then CKEditor is initiated with default configuration. If the value is a valid JSON, then it will be parsed and used as a configuration object (see supported options in docs). If the value is not a valid JSON, then it will be used as a path to an editor config file to be used (see custom config file documentation).

Example

<textarea data-onload-ckeditor='{"language": "en"}'>Hi, I’m a textarea and I’m wearing a fancy CKEditor dress.</textarea>

6.2 — Confirmation

Attaches a confirmation dialog to be triggered by clicking on the element.

JavaScript Required

Script confirmation.js and Bootstrap’s modal.js must be included.

The message and confirmation button labels can be modified for each instance either by setting the options appropriately or by overriding the plugin default options which affects all instances on page.

Overriding Default Options Example

$(document).ready(function(){
    // Localize confirmation messages into Czech
    $.fn.confirmation.Constructor.prototype.options = {
      'confirm-message': 'Opravdu?',
      'confirm-yes': 'Ano',
      'confirm-no': 'Ne'
    };
});
If overriding the default options while running the plugin in noConflict mode, the code above has to be modified by substituting $.fn.confirmation.Constructor.prototype.options with $.fn.my_no_conflict_name.Constructor.prototype.options.

Usage

Data-API

To bind confirmation dialog to an element, the element must have data-toggle="confirm" attribute defined.

To override default options, you can use the same options as the JavaScript API prepended with data- (i.e. data-confirm-yes="Oui").

Note that this component only supports <button> elements.

JavaScript

Options
Name Type Default Description
confirm-message string Are you sure? Optional. The message to be displayed to the user in the confirmation dialog.
confirm-yes string Yes Optional. The text to be shown in the button that confirms the action.
confirm-no string No Optional. The text to be shown in the button that confirms the action.
Methods
$().showConfirmation()

Triggers a confirmation dialog on the given element.

Events
Event Type Description
show.bui.confirmation Fired as soon as the confirmation dialog is displayed.
confirmed.bui.confirmation Fired when user confirms the dialog.
rejected.bui.confirmation Fired when user rejects the dialog.

Example

<form onsubmit="alert('Confirmation confirmed');" method="get">
    <button type="button" class="btn btn-danger" data-toggle="confirm">
        Basic confirmation
    </button>
    <button
        type="button"
        class="btn btn-danger"
        data-toggle="confirm"
        data-confirm-message="Really?"
        data-confirm-yes="Confirm"
        data-confirm-no="Reject"
    >
        Confirmation with custom text
    </button>
    <button
        type="button"
        class="btn btn-danger"
        data-toggle="confirm"
        data-confirm-yes="<span class='glyphicon glyphicon-ok'></span>"
        data-confirm-no="<span class='glyphicon glyphicon-remove'></span>"
    >
        Confirmation with icons
    </button>
</form>

6.3 — Datetimepicker Loader

Initializes Bootstrap Datetimepicker by Jonathan Peterson on the given form field. It does no more than run the $.datetimepicker() method with an optional configuration object as its argument.

JavaScript Required

Scripts datetimepicker-loader.js, moment.js (optionaly with locales, before bootstrap.js) and bootstrap-datetimepicker.js must be included.

Usage

This loader only calls the jQuery plugin defined in bootstrap-datetimepicker component. If the lang attribute is set on the <html> element the datetimepicker is localized accordingly.

Data-API

If an input group has the attribute data-onload-datetimepicker defined, it will be initialized with a datetimepicker upon page load. The picker can be configured by the value passed to the attribute. If no value is passed, the picker is initiated with default configuration. If the value is a valid JSON, then it will be parsed and used as a configuration object (see http://eonasdan.github.io/bootstrap-datetimepicker/Options for supported options).

Example

<div class="row">
    <div class="col-md-6">
        <div class="form-group">
            <label>Default configuration</label>
            <div class="input-group date" data-onload-datetimepicker>
                <input type="text" class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
                </span>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label>Custom format and localization</label>
            <div class="input-group date" data-onload-datetimepicker='{"locale": "cs", "format": "D. M. YYYY"}'>
                <input type="text" class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
                </span>
            </div>
        </div>
    </div>
</div>

6.4 — Disable

Toggles the disabled property on DOM elements.

JavaScript Required

Script disable.js must be included.

Usage

Data-API

To use an element as control element for toggling disable status on other elements, it must possess the data-toggle="disable" attribute. It also must define the data-disable-target attribute that holds a string which, when evaluated as a jQuery selector, returns a jQuery object referencing the elements that are to be disabled or enabled.

By default the control element triggers the disable() method on the JS event change. This can be changed by specifying the data-disable-event attribute on the control element (i.e. data-disable-event="click").

JavaScript

Methods
$().toggle()

Toggles between enabled and disabled states.

Events
Event Type Description
toggle.bui.disable Fired as soon as the disable function is called.
toggled.bui.disable Fired when the disable function is finished.

Example

Delivery Address
<form>
    <div class="checkbox">
        <label>
            <input type="checkbox" data-toggle="disable" data-disable-target=".js-delivery" />
            Deliver to different address
        </label>
    </div>
    <fieldset>
        <legend>Delivery Address</legend>
        <div class="form-group">
            <label for="delivery_name">Name</label>
            <input type="text" id="delivery_name" name="delivery[name]" class="form-control js-delivery" disabled />
        </div>
        <div class="form-group">
            <label for="delivery_address">Address</label>
            <input type="text" id="delivery_address" name="delivery[address]" class="form-control js-delivery" disabled />
        </div>
        <div class="form-group">
            <label for="delivery_city">City</label>
            <input type="text" id="delivery_city" name="delivery[city]" class="form-control js-delivery" disabled />
        </div>
    </fieldset>
</form>

6.5 — Filterable

Allows for filtering of elements matching a given jQuery selector. The elements that do not pass the filter are hidden until the filter is updated and their visibility is reevaluated.

Each element that is to be filterable must define on itself the appropriate data attributes by which it can be filtered. If a data attribute is not provided, the element is ignored by the filter for that particular condition and is treated as if it passed the filter.

The options to be passed to the Filterable plugin are always an array of filter definition objects. If using the data-API, each of these objects has to be represented by a single :input element with the appropriate data-* attributes.

To allow users to view all filterable elements when using the data-API, simply place a button with type="reset" attribute within the filter <form>.

JavaScript Required

Script filterable.js must be included.

Usage

Data-API

The filter has to be a <form> with a data-filter-target attribute containing a string which, when evaluated as a jQuery selector, returns a jQuery object holding the DOM elements to be filtered.

Each of the :input elements of the form that are to be used for filtering have to define the data-toggle="filter" attribute. Further each one also has to possess the data-filter-attrib and data-filter-operator attributes (see the Filter Object section below).

To save the filter conditions to the browser session storage set the attribute data-filter-storage-id. This identifies the data in the context of the given host, domain and path combination. If the filter form changes the filter data in session storage that are not applicable any more are silently ignored.

The element that is to reset the filter on click has to have the data-toggle="reset-filter" attribute defined.

JavaScript

Filter Object
Name Type Default Description
filter-attrib string Defines the name of the data- attribute of the filterable objects to use for filtering.
filter-value string The filter value to be used in the condition. When using the data-api, this is automatically generated from the :input element value and does not not have to be set manually.
filter-operator enum Defines how to compare the values. If comparing strings or arrays of strings, we can use either subset or intersect operators. For comparing numeric values, the =, <, >, <= and >= are available.
Filter object filter-value Filterable element data-* attribute value Operator Description
[string] string intersect Checks if the filterable string attribute is a member of the filter object value array.
[string] [string] intersect Checks if the filterable array attribute has at least one common element with the filter object value array.
[string] [string] subset Checks if the filterable array attribute elements are all members of the filter object value array.
string [string] intersect Checks if the filterable array attribute contains the filter object value string.
number number = Checks if the filterable numeric attribute is equal to the filter object numeric value.
number number > Checks if the filterable numeric attribute is greater than the filter object numeric value.
number number < Checks if the filterable numeric attribute is lower than the filter object numeric value.
number number >= Checks if the filterable numeric attribute is greater than or equal to the filter object numeric value.
number number <= Checks if the filterable numeric attribute is lower than or equal to the filter object numeric value.
Methods
$().filter(filterObjects)

Filters the set of elements on which it is called according to the given array of filter objects.

$().resetFilter()

Displays all filterable elements.

Events
Event Type Description
resetStart.bui.filterable Fired as soon as the reset method is called.
resetEnd.bui.filterable Fired as soon as the reset method is finished executing.
filter.bui.filterable Fired when the filter method is called.
filtered.bui.filterable Fired when the filter method is finished executing.

Example

# User Place of Birth Cash Residence Countries Visited Favorite Meal
1 Brown, James Prague 10 Philadelphia China, Russia Hamburger, Pizza, Spagethi
2 Paisley, Brad Denver 15 Philadelphia China, USA Hamburger, Hotdog, Fries
3 Parker, Maceo Munich 8 Toronto USA, Russia, Denmark Fries, Meatloaf
4 Cimrman, Jára Liptákov 25 Vienna China, Russia, Germany Goulash
5 Smith, John Munich 17 Sydney Germany, Holland, Denmark Meatloaf, Hotdog
6 Scholizin, Vladimir Moscow 5 Philadelphia USA Pizza, Goulash
7 Wesley, Fred Denver 0 Toronto Germany, Russia, Denmark Pizza, Hotdog
<div class="row">
    <form class="form-filter offset-bottom" data-filter-target="#people tr" data-filter-storage-id="filterable-example">
        <div class="row">
            <div class="col-sm-3">
                <div class="form-group">
                    <label>Place of Birth</label>
                    <select
                        class="form-control"
                        data-toggle="filter"
                        data-filter-attrib="birth-place"
                        data-filter-operator="intersect"
                    >
                        <option value="">All</option>
                        <option value="Denver">Denver</option>
                        <option value="Liptákov">Liptákov</option>
                        <option value="Moscow">Moscow</option>
                        <option value="Munich">Munich</option>
                        <option value="Prague">Prague</option>
                        <option value="Vienna">Vienna</option>
                    </select>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="form-group">
                    <label>Cash under</label>
                    <input
                        type="text"
                        class="form-control"
                        data-toggle="filter"
                        data-filter-attrib="cash"
                        data-filter-operator="<"
                    >
                </div>
            </div>
            <div class="col-sm-3">
                <div class="form-group">
                    <label>Cash over</label>
                    <input
                        type="text"
                        class="form-control"
                        data-toggle="filter"
                        data-filter-attrib="cash"
                        data-filter-operator=">"
                    >
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-3">
                <div class="form-group">
                    <label>Country visited</label>
                    <select
                        class="form-control"
                        data-toggle="filter"
                        data-filter-attrib="countries-visited"
                        data-filter-operator="intersect"
                        multiple
                    >
                        <option value="">Any</option>
                        <option value="China">China</option>
                        <option value="Denmark">Denmark</option>
                        <option value="Germany">Germany</option>
                        <option value="Holland">Holland</option>
                        <option value="Russia">Russia</option>
                        <option value="USA">USA</option>
                    </select>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="form-group">
                    <label>Residence</label>
                    <select
                        class="form-control"
                        data-toggle="filter"
                        data-filter-attrib="residence"
                        data-filter-operator="intersect"
                        multiple
                    >
                        <option value="Denver">Denver</option>
                        <option value="Philadelphia">Philadelphia</option>
                        <option value="Sydney">Sydney</option>
                        <option value="Toronto">Toronto</option>
                        <option value="Vienna">Vienna</option>
                    </select>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="form-group">
                    <label>Favorite meal </label>
                    <select
                        class="form-control"
                        data-toggle="filter"
                        data-filter-attrib="favorite-meal"
                        data-filter-operator="subset"
                        multiple
                    >
                        <option value="Fries">Fries</option>
                        <option value="Goulash">Goulash</option>
                        <option value="Hamburger">Hamburger</option>
                        <option value="Hotdog">Hotdog</option>
                        <option value="Meatloaf">Meatloaf</option>
                        <option value="Pizza">Pizza</option>
                        <option value="Spagethi">Spagethi</option>
                    </select>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="form-actions">
                    <button
                        type="reset"
                        class="btn btn-default"
                        data-toggle="filter-reset"
                    >
                        Reset Filter
                    </button>
                </div>
            </div>
        </div><!-- .row -->
    </form>
    <div class="table-responsive">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th class="table-cell-id">#</th>
                    <th>User</th>
                    <th>Place of Birth</th>
                    <th>Cash</th>
                    <th>Residence</th>
                    <th>Countries Visited</th>
                    <th>Favorite Meal</th>
                </tr>
            </thead>
            <tbody id="people">
                <tr
                    data-birth-place="Prague"
                    data-residence="Philadelphia"
                    data-cash="10"
                    data-countries-visited='["China", "Russia"]'
                    data-favorite-meal='["Hamburger", "Pizza", "Spagethi"]'
                >
                    <td class="table-cell-id">1</td>
                    <td><a href="#"><strong>Brown</strong>, James</a></td>
                    <td>Prague</td>
                    <td>10</td>
                    <td>Philadelphia</td>
                    <td>China, Russia</td>
                    <td>Hamburger, Pizza, Spagethi</td>
                </tr>
                <tr
                    data-birth-place="Denver"
                    data-residence="Philadelphia"
                    data-cash="15"
                    data-countries-visited='["China", "USA"]'
                    data-favorite-meal='["Hamburger", "Hotdog", "Fries"]'
                >
                    <td class="table-cell-id">2</td>
                    <td><a href="#"><strong>Paisley</strong>, Brad</a></td>
                    <td>Denver</td>
                    <td>15</td>
                    <td>Philadelphia</td>
                    <td>China, USA</td>
                    <td>Hamburger, Hotdog, Fries</td>
                </tr>
                <tr
                    data-birth-place="Munich"
                    data-residence="Toronto"
                    data-cash="8"
                    data-countries-visited='["USA", "Russia", "Denmark"]'
                    data-favorite-meal='["Fries", "Meatloaf"]'
                >
                    <td class="table-cell-id">3</td>
                    <td><a href="#"><strong>Parker</strong>, Maceo</a></td>
                    <td>Munich</td>
                    <td>8</td>
                    <td>Toronto</td>
                    <td>USA, Russia, Denmark</td>
                    <td>Fries, Meatloaf</td>
                </tr>
                <tr
                    data-birth-place="Liptákov"
                    data-residence="Vienna"
                    data-cash="25"
                    data-countries-visited='["China", "Russia", "Germany"]'
                    data-favorite-meal='["Goulash"]'
                >
                    <td class="table-cell-id">4</td>
                    <td><a href="#"><strong>Cimrman</strong>, Jára</a></td>
                    <td>Liptákov</td>
                    <td>25</td>
                    <td>Vienna</td>
                    <td>China, Russia, Germany</td>
                    <td>Goulash</td>
                </tr>
                <tr
                    data-birth-place="Munich"
                    data-residence="Sydney"
                    data-cash="17"
                    data-countries-visited='["Germany", "Holland", "Denmark"]'
                    data-favorite-meal='["Meatloaf", "Hotdog"]'
                >
                    <td class="table-cell-id">5</td>
                    <td><a href="#"><strong>Smith</strong>, John</a></td>
                    <td>Munich</td>
                    <td>17</td>
                    <td>Sydney</td>
                    <td>Germany, Holland, Denmark</td>
                    <td>Meatloaf, Hotdog</td>
                </tr>
                <tr
                    data-birth-place="Moscow"
                    data-residence="Philadelphia"
                    data-cash="5"
                    data-countries-visited='["USA"]'
                    data-favorite-meal='["Pizza", "Goulash"]'
                >
                    <td class="table-cell-id">6</td>
                    <td><a href="#"><strong>Scholizin</strong>, Vladimir</a></td>
                    <td>Moscow</td>
                    <td>5</td>
                    <td>Philadelphia</td>
                    <td>USA</td>
                    <td>Pizza, Goulash</td>
                </tr>
                <tr
                    data-birth-place="Denver"
                    data-residence="Toronto"
                    data-cash="0"
                    data-countries-visited='["Germany", "Russia", "Denamrk"]'
                    data-favorite-meal='["Pizza", "Goulash"]'
                >
                    <td class="table-cell-id">7</td>
                    <td><a href="#"><strong>Wesley</strong>, Fred</a></td>
                    <td>Denver</td>
                    <td>0</td>
                    <td>Toronto</td>
                    <td>Germany, Russia, Denmark</td>
                    <td>Pizza, Hotdog</td>
                </tr>
            </tbody>
        </table>
    </div>
</div><!-- .row -->

6.6 — Select2 Loader

Initializes select2 on the given <select> element. It does no more than run the $.select2() method. It is possible to initialize the widget with default or custom options.

JavaScript Required

Script select2-loader.js and select2 package must be included.

Usage

This loader only calls the jQuery plugin defined in the select2 library with appropriate arguments. The select2 component natively uses the lang attribute of any parent element, so just be sure to include the correct locale file.

Data-API

If a <select> element has the attribute data-onload-select2 defined, it will be initialized as a select2 upon page load. The widget can be configured by the value passed to the attribute. If no value is passed, then select2 is initiated with default configuration. If a JSON object is passed, then it will be parsed and used as a configuration object (see https://select2.github.io/options.html for supported options).

6.6.1 — Single Selection

Example

<select class="form-control" data-onload-select2='{"minimumResultsForSearch": "Infinity"}'>
    <option
        selected
        value="flag-czech"
        data-image-src="//satyr.io/32x16?flag=cze"
        data-image-srcset="//satyr.io/32x16?flag=cze, //satyr.io/64x32?flag=cze 2x"
        data-image-width="32"
        data-image-height="16"
    >Czech</option>
    <option
        value="flag-canada"
        data-image-src="//satyr.io/32x16?flag=can"
        data-image-srcset="//satyr.io/32x16?flag=can, //satyr.io/64x32?flag=can 2x"
        data-image-width="32"
        data-image-height="16"
    >Canadian</option>
    <option
        data-image-src="//satyr.io/32x16?flag=che"
        data-image-srcset="//satyr.io/32x16?flag=che, //satyr.io/64x32?flag=che 2x"
        data-image-width="32"
        data-image-height="16"
    >Swiss</option>
</select>

6.6.2 — Multiple Selection

Example

<select class="form-control" multiple data-onload-select2='{"minimumResultsForSearch": "Infinity"}'>
    <option
        selected
        data-image-src="//satyr.io/40x40/forestgreen"
        data-image-width="40"
        data-image-height="40"
    >Forest green</option>
    <option
        selected
        data-image-src="//satyr.io/40x40/crimson"
        data-image-width="40"
        data-image-height="40"
    >Crimson</option>
    <option
        data-image-src="//satyr.io/40x40/steelblue"
        data-image-width="40"
        data-image-height="40"
    >Steel blue</option>
</select>

6.7 — Slugger

Creates a slug in one HTML form element based on a value in another. The relationship is unidirectional in the sense that changes made to the source element affect the target element, but not vice versa.

JavaScript Required

Script slugger.js must be included.

Usage

Data-API

To make this component function there must be two HTML form elements. One is the source where the user types text and the other is the target where the slugger dynamically generates the slug.

Two attributes have to be defined on the source element:

  • data-toggle="slugger"indicates that the element’s value will be used as the string from which the slug is to be generated.
  • data-slugger-target="#id-of-the-target-element" defines the jQuery selector of the HTML form element where the generated slug is to be displayed.

JavaScript

Options
Name Type Default Description
target jQuery HTML element collection The element(s) where the slug should be displayed
Methods
$().updateSlug()

Sets slug generated as the value of the target element based on the value of the source element.

Events
Event Type Description
updated.bui.slugger Fired when user changes the value of the source element and the slug gets updated.
changed.bui.slugger Fired when the source element loses focus after a change.

Example

<div class="row">
    <div class="col-sm-6">
        <div class="form-group">
            <label>Source</label>
            <input type="text" class="form-control" data-toggle="slugger" data-slugger-target="#slugger-target" />
        </div>
    </div>
    <div class="col-sm-6">
        <div class="form-group">
            <label>Target</label>
            <input type="text" class="form-control" id="slugger-target" />
        </div>
    </div>
</div>

6.8 — Sortable Table

Provides client-side sorting functionality. If browser supports language argument to the String.prototype.localeCompare() function, the ordering will be locale aware. If the argument is not supported or if the supplied argument is not a valid locale the ordering will not be locale aware.

To ensure keyboard accessibility, remember to add tabindex="0" to all sortable column headers.

If a given cell has the attribute data-sort-value="someValue" specified, the value of this element is used as opposed to the value of the cell.

To initialize the component taking into account that the data is already sorted when the page is loaded, a .sorting-asc and .sorting-desc can be added to the relevant <th> to indicate the column and direction of the default sorting.

JavaScript Required

Script sortable-table.js must be included.

Component Dependency

Usage

Data-API

To use sortable-table via data-API, data-toggle="sort" has to be defined on the <th> that should trigger sorting on click.

In order to utilize the navigation feature, data-sort-navigation has to be defined on the <table> element and it must contain a string that, when evaluated as a jQuery selector, will return a jQuery object referencing the navigation container DOM element.

Forcing sorting of a given table on page load (and potentially generating group headers and navigation) can be achieved by specifying the attribute data-sort-onload on the appropriate <th>. This attribute takes the value of either asc or desc to indicate the sorting order.

JavaScript

Options
Name Type Default Description
sorted-th string Mandatory. A jQuery object with reference to the <th> DOM element in the column by which we are to sort the table.
sort-direction string If the column is already sorted it defaults to the reverse order. If it is not sorted, it defaults to asc. Optional. Defines the direction by which to sort. Accepts values asc or desc.
sort-navigation jQuery object Optional. A jQuery object with reference to the DOM element where the group quick links are to appear. The elements are grouped according to the value of th data-sort-group="someValue" attribute of each cell. For this to work correctly, all cells in a given column either must or must not posses the data-sort-group attribute.
Methods
$().sortableTable(options)

Initiates a sortable table if needed and performs the sorting according to the options object.

Events
Event Type Description
sort.bui.sortableTable Fired as soon as the sort method is called.
sorted.bui.sortableTable Fired as soon as the sort method is finished executing.

6.8.1 — Sortable Table Simple

Example

<div class="table-responsive">
    <table class="table table-hover">
        <thead>
            <tr>
                <th class="table-cell-id" data-sort-onload="asc" data-toggle="sort" tabindex="0">#</th>
                <th data-toggle="sort" tabindex="0">Page Title</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="table-cell-id">1</td>
                <td><a href="#">Hotforwords Can Explain Lorem Ipsum far better than I can</a></td>
                <td class="table-cell-actions">
                    <a href="#" class="item-action" title="Edit">
                        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                    </a>
                    <a href="#" class="item-action item-action-danger" title="Delete">
                        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                    </a>
                </td>
            </tr>
            <tr>
                <td class="table-cell-id">2</td>
                <td><a href="#">Seas spirit morning, fill seasons every I wherein kind</a></td>
                <td class="table-cell-actions">
                    <a href="#" class="item-action" title="Edit">
                        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                    </a>
                    <a href="#" class="item-action item-action-danger" title="Delete">
                        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                    </a>
                </td>
            </tr>
            <tr>
                <td class="table-cell-id">3</td>
                <td><a href="#">Cattle she’d of herb third</a></td>
                <td class="table-cell-actions">
                    <a href="#" class="item-action" title="Edit">
                        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                    </a>
                    <a href="#" class="item-action item-action-danger" title="Delete">
                        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                    </a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

6.8.2 — Sortable Table with Navigation

Table with automatically generated header sections and letter navigation.

Example

<div class="row">
    <div class="col-sm-2 col-sm-push-10">
        <nav class="sortable-table-nav" id="tableSortNavigation"></nav>
    </div>
    <div class="col-sm-10 col-sm-pull-2">
        <div class="table-responsive">
            <table class="table table-hover" data-sort-navigation="#tableSortNavigation">
                <thead>
                    <tr>
                        <th class="table-cell-id" data-toggle="sort" tabindex="0">#</th>
                        <th data-toggle="sort" data-sort-onload="desc" tabindex="0">User</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                       <td class="table-cell-id">1</td>
                        <td data-sort-group="B"><a href="#"><strong>Brown</strong>, James</a></td>
                    </tr>
                    <tr>
                        <td class="table-cell-id">2</td>
                        <td data-sort-group="P"><a href="#"><strong>Paisley</strong>, Brad</a></td>
                    </tr>
                    <tr>
                        <td class="table-cell-id">3</td>
                        <td data-sort-group="P"><a href="#"><strong>Parker</strong>, Maceo</a></td>
                    </tr>
                    <tr>
                        <td class="table-cell-id">4</td>
                        <td data-sort-group="W"><a href="#"><strong>Wesley</strong>, Fred</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div><!-- .row -->