Using DataTables JS alongside standard Bootstrap 5 classes

Created on 4 March 2024, 4 months ago
Updated 5 March 2024, 4 months ago

Problem/Motivation

We are using this module to great effect and have been able to take advantage of the fact the our front end them is Bootstrap 5 by applying the following classes to the table body via the UI...

table table-dark table-striped table-hover

Resulting in the markup...

<table class="table table-dark table-striped table-hover" id="field_data_file-0-csvfiletable" data-striping="1">

Exactly what we are after to give us some neat, dark, stripped, and hover-able tables like this...

One snag though is that for large tables, we would really like to be able to switch in the 'Use DataTables' option to kick in the JS but when we do, out tables seem to collapse and overflow like this...

Can anyone offer any guidance as to what we might be doing wrong here or of anything we might try to get the best of both worlds?

Thanks all.

πŸ’¬ Support request
Status

Closed: won't fix

Version

1.0

Component

Miscellaneous

Created by

πŸ‡¬πŸ‡§United Kingdom SirClickALot Somerset

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @SirClickALot
  • Status changed to Closed: won't fix 4 months ago
  • πŸ‡¨πŸ‡¦Canada jmdeleon

    This would seem to be an issue with how the DataTables library styles its elements, and doesn't really have anything to do with this Drupal module. It would be better to look at resources addressing the DataTables library directly.

Production build 0.69.0 2024