Foundation from Zurb is a CSS framework that allows rapid development of complex sites, featuring a mobile first approach to the design process for HTML pages. Using a CSS framework such as Foundation gives you the ability to create a user interface with a unified look and feel very quickly. And DataTables can be integrated directly with Foundation to ensure that it fits into the flow of your site / app perfectly!

Foundation provides a number of options for styling HTML tables. The DataTables / Foundation integration ensures that you can use all of these features as well as the enhancements that DataTables makes to a plain HTML table.


The simplest way to include the Foundation 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, downloading a package that you can host locally, or using a package manager such as NPM.

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.


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 ( for Foundation 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 ( for Foundation for example).


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


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


An example of a DataTable styled by Foundation is shown below.

View example in a new window.