20. Examples run time options
The DataTables examples have a number of run time options that can be controlled using a dropdown options list at the top right of the examples pages. The options available are:
- Styling framework
- Theme (light / dark mode)
There are conditions under which selected options might not be available. If that happens a warning icon will be shown and is explained in each section below.
- jQuery target - This code will make use of jQuery methods, particularly for DOM manipulation and event handling. It targets older browsers with ES3 code.
Please note that regardless of initialisation style, jQuery will be loaded as it is a dependency for DataTables. You don't need to write any jQuery code yourself if you don't want to though!
If you see a warning exclamation mark in a triangle for the initialisation target you've selected, it means that there is no matching code, and the other initialisation will be used instead. For example, if an example has jQuery initialisation, but not Vanilla JS, then the jQuery based code will always be used. Vice-versa is also a possible situation as well.
DataTables and its extensions can all be styled by a number of different styling frameworks with the intention being that if you are already using s specific framework you'll be able to have DataTables quickly and easily fit in with the existing look and feel of your site / app. If you are starting a new project you can pick the styling framework that you find most appealing!
The examples have a dropdown that lets you select from the supported styling frameworks so you can see how the example looks with each of the frameworks.
While most of the examples allow the use of any styling framework, there are some which are locked to a specific framework. For example DataTables and each of the extensions have a dedicated example for each supported styling framework - those are locked (i.e. it would be pointless for the Bootstrap 3 specific demo to be styled by Bulma!).
Of the styling frameworks supported by DataTables, both the default DataTables styling and and Bootstrap 5 (5.3+) offer a dark mode variant. This option provides the ability to change between light and dark mode. It is also possible to auto detect based on your system preferences.
Only DataTables and Bootstrap 5 (5.3+) currently offer the option of a dark mode. If dark mode is selected with any other styling framework, a warning exclamation mark in a triangle will be shown.