Issue with Bootstrap 5/npm repo

incursio

Running with Bootstrap 5 here. Perhaps I fat-fingered something, but after doing this:

npm install datatables.net

and

npm install datatables.net-bs

I noticed the pagination links were unstyled. According to npm, this is what I installed (1.10.24)

datatables.net-bs | DataTables for… | =datatables | 2021-03-09 | 1.10.24 | filter sort DataTables jQuery table Bootstrap

However, when I looked at node_modules/datatables.net-bs/js/dataTables.bootstrap.js it would appear that the js (at least) is for Bootstrap 3, not 5.

So, I pulled down the files from the CDN links here: https://datatables.net/examples/styling/bootstrap5.html

And those work fine. Am I missing something, or is the npm repo not reflecting the right files? Or perhaps the BS5 support is only available via CDN or direct download, not via the npm repo?

Thanks!

allan

Our Bootstrap 5 support for DataTables and its components hasn’t been fully released yet. We were still working on support for some extensions. There isn’t a npm repo for the BS5 libraries for DataTables and its extensions yet, but they will be coming.

Allan

incursio

Thanks, and sounds good!

sadeghbarati5

@allan Bootstrap Version 5.0.0 stable is released two days ago

when will be datatables-bootstrap5 npm packages available ?

Thanks Sadegh

allan

I don’t have a firm date for it yet, but with Bootstrap 5 released now, it is moving up our priority list!

Allan

lugus

Maybe a RC soon for tests?

colin

We're actively working on BS5 now (and Bulma) and both are likely to be released later this week.

Colin

adamwillden

Any more news on BS5 progress @colin

I'm hoping it will drop sometime in the next week or so. What are the chances?

colin

We're aiming for this week, sorry about the delay. All the extensions are now supported, so it's just a case of wrapping up a few loose ends. Keep an eye on the blog as we tend to announce releases there.

Colin

adamwillden

@colin, no need to apologise and very kind of you to respond. This is good news, thank you very much.

Adam

lugus

Thank you @colin

colin

Just an update - the releases were made on Friday, but both Bulma and BS5 aren't yet available in the options on the Download page. This will be added on Monday.

Colin

lugus

I tried it with webpack but got:

Uncaught ReferenceError: bootstrap is not defined
at responsive.bootstrap5.js:53

as i don't have bootstrap globally but imported like

import { Modal } from 'bootstrap'
const myModal = new Modal(document.getElementById('someId'));

colin

I suspect you'll need Bootstrap globally so it's accessible for DataTables,

Colin

lugus

arf... i don't want to make bootstrap global just for this file... i will not include the js, CSS responsive feature seams to work without it.

icdeb

Have to agree with lugus in that making bootstrap a global to meet this criteria in the responsive.bootstrap5.js:

// Need to wait for the document to be ready for Boostrap 5 to be able to initialise to modal
$(function () {
modal = new bootstrap.Modal(_modal[0]);
});

Is not exactly ideal.

allan

The way we handle this for JSZip and pdfmade in Buttons is to present a function that you can call to pass in the included software - see the code here.

So to resolve this we might need to have something like:

$.fn.dataTable.Editor.bootstrap( bootstrap );

Sound okay for your use case?

Allan

chapterjason

@allan This would be great. Cause I use webpack, bootstrap is not exposed to the window.

Workaround:

import * as bootstrap from "bootstrap";
window.bootstrap = bootstrap;

icdeb

As with @chapterjason, I am using webpack.

Ultimately my code looks something like this:

const { Modal } = require('bootstrap')
...
require('datatables.net-responsive/js/dataTables.responsive.js')
window.bootstrap = { Modal }
require('datatables.net-responsive-bs5/js/responsive.bootstrap5.js')
import 'datatables.net-responsive-bs5/css/responsive.bootstrap5.css'
...

@allan I don't really see why I am forced to include the modal functionality of bootstrap in order to use the responsive table given that the configuration that I am using is one where I do not see the Modal being displayed, ever.

What would be nice, albeit technically challenging is an approach that leans towards tree-shaking whereby there is a clear interface and documentation relating to what specifically needs to be passed in to these functions in order for them to work.

There should be some sane defaults such as the Modal is not required is responsive unless you specifically enable the configuration flags that make use of it, or visa versa?

allan

Yes - I absolutely see where you are coming from there. I've just made a modification to Response's Bootstrap 5 integration so that the Modal is no longer required - it is used only if the Responsive modal option is used.

There is also now the option to use $.fn.dataTable.Responsive.bootstrap( ... ) to pass in a Bootstrap object if you are loading it in through a require or import rather than needing to have it available at the global scope.

Regards,
Allan

allan

Also, Editor now has a similar option $.fn.dataTable.Editor.bootstrap( ... ).

Allan

icdeb

@allan That's a great update, thanks for the effort!

I was wondering now if there is there any indication on when this change will be updated in NPM?

Not a big problem but I am also contemplating whether it is worth making a temporary monkey patch to deal with this update in the meantime.

allan

That is currently the only change in Responsive since the 2.2.9 release, so I'll probably not tag it up until around the start of next month.

Allan