Bulma

Bulma is an emerging CSS framework that is quickly gaining popularity. DataTables offers full integration with Bulma so that your DataTables will match the same look and feel of the rest of your site.

Bulma provides a stylish integration for HTML tables, giving you flexibility over the table, while ensuring they look very slick. The DataTables / Bulma integration ensures that you can use all of these features as well as the enhancements that DataTables makes to a plain HTML table.

Installation

The simplest way to include the Bulma integration for DataTables and its extensions is to use the DataTables download builder. This is a point and click interface that lets you select what styling and what software you wish to use.

The download builder has the option of hosting the required files on the DataTables CDN or downloading a package that you can host locally.

Manual installation

If you wish to use the DataTables Git repo or download package, rather than the download builder, DataTables and all of its extensions share a similar file naming conventions that can be used to include the required files.

DataTables

The main DataTables file has the name dataTables.js. There is also a styling integration file for the various styling libraries supported by DataTables, this has the format dataTables.{style}.js (dataTables.bulma.js for Bulma for example).

Both of these Javascript files should be included - the main file to include the basic DataTables functionality and the styling file to set defaults as appropriate for the styling library.

For CSS only a single file should be included as the styling library will provide the core styling options for the table. The CSS files have the format dataTables.{style}.css (dataTables.bulma.css for Bulma for example).

Extensions

The file naming conventions described above are also applied to the extensions.

For Javascript we have: dataTables.{extension}.js and {extension}.{style}.js - for example for Buttons the files to include are dataTables.buttons.js and buttons.bulma.js - again the core library is included and the styling file to set appropriate defaults.

In the case of the CSS, only a single file should be included - the appropriate file for the styling being used - {extension}.{style}.css - buttons.bulma.css for example.

Please note that not all extensions require Javascript and / or CSS for the styling libraries. If the styling libraries are not present in the repo or package, then they are not required.

Details

Should you be interested in the dry details of the DataTables file name conventions, please refer to this technical note.

Example

An example of a DataTable styled by Bulma is available here.