Bootstrap UI Documentation

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

Default configuration

Custom format and localization

<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

<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.

filter-strict

-

When `data-filter-strict` is present, both strings must be equal to produce a match. This differs from normal behavior where only part of the string can be used to get a match. Only applicable if `data-filter-operator` is set to intersect.

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

Place of Birth

Cash under

Cash over

Allergens

Country visited

Residence

Favorite meal

#	User	Place of Birth	Cash	Residence	Countries Visited	Favorite Meal	Allergens
1	Brown, James	Prague	10	Philadelphia	China, Russia	Hamburger, Pizza, Spagethi	1
2	Paisley, Brad	Denver	15	Philadelphia	China, USA	Hamburger, Hotdog, Fries	2
3	Parker, Maceo	Munich	8	Toronto	USA, Russia, Denmark	Fries, Meatloaf	3
4	Cimrman, Jára	Liptákov	25	Vienna	China, Russia, Germany	Goulash	1, 2, 13
5	Smith, John	Munich	17	Sydney	Germany, Holland, Denmark	Meatloaf, Hotdog	11
6	Scholizin, Vladimir	Moscow	5	Philadelphia	USA	Pizza, Goulash	12
7	Wesley, Fred	Denver	0	Toronto	Germany, Russia, Denmark	Pizza, Hotdog	13

<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 class="col-sm-3">
                <div class="form-group">
                    <label>Allergens</label>
                    <input
                        type="text"
                        class="form-control"
                        data-toggle="filter"
                        data-filter-attrib="allergens"
                        data-filter-operator="intersect"
                        data-filter-strict
                    >
                </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>
                    <th>Allergens</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"]'
                    data-allergens='["1"]'
                >
                    <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>
                    <td>1</td>
                </tr>
                <tr
                    data-birth-place="Denver"
                    data-residence="Philadelphia"
                    data-cash="15"
                    data-countries-visited='["China", "USA"]'
                    data-favorite-meal='["Hamburger", "Hotdog", "Fries"]'
                    data-allergens='["2"]'
                >
                    <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>
                    <td>2</td>
                </tr>
                <tr
                    data-birth-place="Munich"
                    data-residence="Toronto"
                    data-cash="8"
                    data-countries-visited='["USA", "Russia", "Denmark"]'
                    data-favorite-meal='["Fries", "Meatloaf"]'
                    data-allergens='["3"]'
                >
                    <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>
                    <td>3</td>
                </tr>
                <tr
                    data-birth-place="Liptákov"
                    data-residence="Vienna"
                    data-cash="25"
                    data-countries-visited='["China", "Russia", "Germany"]'
                    data-favorite-meal='["Goulash"]'
                    data-allergens='["1", "2", "13"]'
                >
                    <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>
                    <td>1, 2, 13</td>
                </tr>
                <tr
                    data-birth-place="Munich"
                    data-residence="Sydney"
                    data-cash="17"
                    data-countries-visited='["Germany", "Holland", "Denmark"]'
                    data-favorite-meal='["Meatloaf", "Hotdog"]'
                    data-allergens='["11"]'
                >
                    <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>
                    <td>11</td>
                </tr>
                <tr
                    data-birth-place="Moscow"
                    data-residence="Philadelphia"
                    data-cash="5"
                    data-countries-visited='["USA"]'
                    data-favorite-meal='["Pizza", "Goulash"]'
                    data-allergens='["12"]'
                >
                    <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>
                    <td>12</td>
                </tr>
                <tr
                    data-birth-place="Denver"
                    data-residence="Toronto"
                    data-cash="0"
                    data-countries-visited='["Germany", "Russia", "Denamrk"]'
                    data-favorite-meal='["Pizza", "Goulash"]'
                    data-allergens='["13"]'
                >
                    <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>
                    <td>13</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

Source

Target

<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

[Sortable table with navigation](#section-6.8.2) requires [Letter Navigation](section-3.html#section-3.3) component.

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 `	` 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

#	Page Title
1	Hotforwords Can Explain Lorem Ipsum far better than I can
2	Seas spirit morning, fill seasons every I wherein kind
3	Cattle she’d of herb third

<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

#	User
1	Brown, James
2	Paisley, Brad
3	Parker, Maceo
4	Wesley, Fred

<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 -->

6. JavaScript

QUnit Tests

6.1 — CKEditor Loader

JavaScript Required

Usage

Data-API

6.2 — Confirmation

JavaScript Required

Overriding Default Options Example

Usage

Data-API

JavaScript

Options

Methods

$().showConfirmation()

Events

6.3 — Datetimepicker Loader

JavaScript Required

Usage

Data-API

6.4 — Disable

JavaScript Required

Usage

Data-API

JavaScript

Methods

$().toggle()

Events

6.5 — Filterable

JavaScript Required

Usage

Data-API

JavaScript

Filter Object

Methods

$().filter(filterObjects)

$().resetFilter()

Events

6.6 — Select2 Loader

JavaScript Required

Usage

Data-API

6.6.1 — Single Selection

6.6.2 — Multiple Selection

6.7 — Slugger

JavaScript Required

Usage

Data-API

JavaScript

Options

Methods

$().updateSlug()

Events

6.8 — Sortable Table

JavaScript Required

Component Dependency

Usage

Data-API

JavaScript

Options

Methods

$().sortableTable(options)

Events

6.8.1 — Sortable Table Simple

6.8.2 — Sortable Table with Navigation