Styling frameworks
When creating a web-site or application, you will want all of the UI components to look and feel the same, to provide an integrated and consistent interface for the end user. There are many styling frameworks available that provide the building blocks for building such interfaces, and DataTables provides full integration with many of the most popular frameworks.
The styling frameworks that DataTables and its extensions support are:
DataTables also has its own default stylesheet which can be used on any web-site and provides a clean and simple style for your tables.
All of the examples on this site can be displayed using any of these styling frameworks, so you can get an idea of what they look like before implementing them in your own applications. To change the styling framework for the examples, load an example and then, in the top right, use the styling framework menu to change the style. There is also the option of changing the theme (dark / light) for those frameworks which support it.
Installation
Installation for styling packages for DataTables starts the same way as DataTables core - use the download builder!
NPM
DataTables, and each of the extensions, provide the core software as a single package on npm - e.g. datatables.net for DataTables core, and datatables.net-buttons for the Buttons library. You also need a styling package, which is denoted by a short postfix to the base package name - e.g. datatables.net-bs5 is the Bootstrap 5 styling integration for DataTables core with Bootstrap 5. The styling packages automatically have a dependency on their core packages, so you only need to install one per piece of software.
Use the download builder! I cannot overstate this! There are a huge number of combinations for the DataTables suite packages when considering the styling packages. Select the styling and software that you want using the download builder and click the npm distribution option at the bottom of the page. It will list the packages that you should install.
CDN
The URLs of the CDN files define the styling framework using the styling acronym near the start of the URL. In the following, the /dt/ denotes that DataTables styling will be used. To use Bootstrap 5 styling, it would be changed to /bs5/:
As with the NPM installation option, use the download builder to make sure that you get the files that you need for the styling and software you have selected.