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:
- Javascript initialisation target
- 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.
Initialisation target
Most of the examples have initialisation code that are either jQuery based or Vanilla Javascript. This is in recognition that you may prefer to write Javascript without a supporting DOM library, or you might want to make use of jQuery, or any other DOM and event library. The example will run the code type selected, which will also be shown on the page (typically below the demonstration DataTable).
- jQuery target - This code will make use of jQuery methods, particularly for DOM manipulation and event handling. It targets older browsers with ES3 code.
- Vanilla JS target - makes use of the newer features of Javascript (ES6+) such as fat arrow functions and iterators. Does not use a DOM or event library, other than those offered by DataTables or the software being shown on the page.
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!
Warning icon
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.
Styling framework
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.
Warning icon
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!).
Theme
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.
Warning icon
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.