ca-datatables-bs4

jQuery.dataTables.net Styling for Bootstrap 4

https://github.com/CarbonAtom/datatables-bootstrap-4

*NOTE: Since Bootstrap4 is in alpha, this styling may change drastically

This package adds bootstrap 4 styling to datatables.net with additional options for extended styling support. The filter and length select controls have been changed to accommodate Bootstrap's component styles better. For quick install, include files located in the /dist folder. The js file overrides dataTables.net basic settings, so load after dataTables.

Basic setup

npm

npm install ca-datatables-bs4 --save

Use the setup procedures listed in dataTables.net documentation available at https://datatables.net/manual/index then add the class ca-dt-bootstrap to the table element.

Advanced setup

DOM settings

The default filter and length select menu are replaced with custom implementations for better compatibility with Bootstrap. Use F and L for the respective control when customizing the dom setting. The current setting is:

"<'row'<'col'<'form-inline ca-dt-bootstrap__header'LF>>>" +
"<'row'<'col'tr>>" +
"<'row'<'col'<'ca-dt-bootstrap__footer'ip>>>"

See https://datatables.net/reference/option/dom for more information

Table/Control Sizing

Bootstrap's sizing modifiers can be applied simply by added ca-dt-bootstrap--lg or ca-dt-bootstrap--sm (for large and small respectively) to the table element. The table and control sizing can be applied separately by appending -table for the table only, -pager for the paging component and -input for the length menu and filter components. Combine to size any combination. *NOTE: table-lg is currently not implemented in Bootstrap4 and serves merely as a placeholder.

Embedded Css Classes

*NOTE: All classes added by this library are prefixed with ca-dt-bootstrap following the BEM pattern. Learn more about BEM at http://getbem.com/introduction/

The following class settings can be changed using $.extend(true, $.fn.dataTable.ext.classes, {})

sProcessing: 'dataTables_processing panel panel-default',
sWrapper: 'ca-dt-bootstrap__wrapper',
// paging
sPaging: 'ca-dt-paginate ca-dt-paginate--',
sPageButton: 'paginate_button page-item',
// sizing
sSizeSmall: 'ca-dt-bootstrap--sm',
sSizeLarge: 'ca-dt-bootstrap--lg',
// sorting
sSortable: 'ca-dt-bootstrap__sorting',
sSortAsc: 'ca-dt-bootstrap__sorting--asc',
sSortDesc: 'ca-dt-bootstrap__sorting--desc',
sSortColumn: 'ca-dt-bootstrap__sorting--col-',
// scrolling
sScrollWrapper: 'ca-dt-bootstrap__scroll',
sScrollHead: 'ca-dt-bootstrap__scroll-head',
sScrollHeadInner: 'ca-dt-bootstrap__scroll-head-inner',
sScrollBody: 'ca-dt-bootstrap__scroll-body',
sScrollFoot: 'ca-dt-bootstrap__scroll-foot',
sScrollFootInner: 'ca-dt-bootstrap__scroll-foot-inner',
// icons
sIconSortAsc: 'ca-dt-bootstrap__icon-asc',
sIconSortDesc: 'ca-dt-bootstrap__icon-desc',
sIconSearch: 'ca-dt-bootstrap__icon-search'

For example, to use Font Awesome's ascending sort icon, change sIconSortAsc to fa fa-sort-asc

SCSS Compiling

To avoid additional dependencies, default icons using base64 data-uris are provided for column sorting and table filter control. Set $render-embedded-icons: false to remove them from compiling to save a few kbs. sIcon classes will need overridden when using this option.

Additionally, the default sort icon state opacity can be customized by setting the following variables:

$opacity-default: 0.2 !default;
$opacity-step-1: 0.45 !default;
$opacity-step-2: 0.8 !default;