Search

bootstrap'}, {s: 'bs4', f: 'bootstrap4'}, {s: 'bs5', f: 'bootstrap5'},

This example shows FixedHeader being styled by the Bootstrap 4 CSS framework.

This example shows DataTables and the FixedColumns extension being used with Bootstrap 4 providing the styling. The DataTables / Bootstrap integration provides seamless integration for DataTables to be used in a Bootstrap 4 page.

Bootstrap 4 is the fourth major iteration the popular CSS framework that provides a unified look-and-feel for your web-applications. Through Editor's abilities to be extensively customised and Bootstrap integration for DataTables you can have a beautiful Bootstrap styled interface for your tables and Editor in virtually no time! This example shows Bootstrap 4 integration with DataTables and two of its components: Buttons and Editor.

This example shows DataTables and the ColReorder extension being used with Bootstrap 4 providing the styling. The DataTables / Bootstrap integration provides seamless integration for DataTables in a Bootstrap 4 page.

This example shows DataTables and the Buttons extension being used with the Bootstrap 4 framework providing the styling.

This example shows DataTables and the AutoFill extension being used with Bootstrap 4 providing the styling. The DataTables / Bootstrap integration provides seamless integration for DataTables to be used in a Bootstrap 4 page.

As with Bootstrap 3, DataTables can also be integrated seamlessly with Bootstrap 4. This integration is done simply by including the DataTables Bootstrap 4 files (CSS and JS) which sets the defaults needed for DataTables to be initialised as normal, as shown in this example.

This example shows the responsive.details.display option being used with the modal option, which, when used with the Bootstrap 4 integration for Responsive, will use Bootstrap's native modal display. The built-in modal display option should be executed as a function with optional parameters passed in to control the behaviour of the modal display. In the case of Bootstrap 4 it has only a header option which is a function that should return the title for the modal. If you do not wish to display a title, simply don't use this option. Additionally, the responsive.details.renderer option is used here to display the full data for the row, rather than just the hidden columns (which is the default behaviour) as this looks a bit better in a modal!

bootstrap'}, {s: 'bs4', f: 'bootstrap4'}, {s: 'bs5', f: 'bootstrap5'},

work with dynamic data, bootstrap4 and fixed columns. Here's

have tried to use bootstrap4 Badges classes inside tables

a dataTable inside a Bootstrap4 card-body (which is already

Excuse me, but is this really intended that way? It's a default package with bootstrap4 i just downloaded

Using editor.show('field_name') with bootstrap4 the editor add style="display: block;" on this line: ... <div class="DTE_Field form-group row DTE_Field_Type_text DTE_Field_Name_contatti.cont_ragsoc" style="display: block;"> is there a solution? Thanks, Giuseppe

is it possible that using the bootstrap4 extension the editor.dependert() statement can not hide the fields? Maybe I'm wrong?

They are concatenated. If you look inside those files they have all the software you selected. Allan

Thanks for the quick fix

Oh wow - I can't believe how long this bug has been present and this is the first it has been picked. Many thanks for letting us know about it - it looks like it might be around a decade old :-/ I've committed a fix. Its actually a bit of a work around, but it works... I've already committed changes to our v2 development branch to DataTables to make the sorting classes / styling more "sane". Regards, Allan

Great explanation. I suggest updating your bs4 example with a container div.