Issue with Bootstrap 5/npm repo

Issue with Bootstrap 5/npm repo

incursioincursio Posts: 2Questions: 1Answers: 0

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!

Answers

  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin

    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

  • incursioincursio Posts: 2Questions: 1Answers: 0

    Thanks, and sounds good!

  • sadeghbarati5sadeghbarati5 Posts: 19Questions: 2Answers: 0
    edited May 2021

    @allan Bootstrap Version 5.0.0 stable is released two days ago

    when will be datatables-bootstrap5 npm packages available ?

    Thanks Sadegh

  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin

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

    Allan

  • luguslugus Posts: 12Questions: 2Answers: 0

    Maybe a RC soon for tests? :smile:

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

    Colin

  • adamwilldenadamwillden Posts: 2Questions: 0Answers: 0
    edited June 2021

    Any more news on BS5 progress @colin

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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • adamwilldenadamwillden Posts: 2Questions: 0Answers: 0

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

    Adam

  • luguslugus Posts: 12Questions: 2Answers: 0

    Thank you @colin

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • luguslugus Posts: 12Questions: 2Answers: 0

    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'));

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

    Colin

  • luguslugus Posts: 12Questions: 2Answers: 0

    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.

  • icdebicdeb Posts: 20Questions: 5Answers: 0

    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.

  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin

    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

  • chapterjasonchapterjason Posts: 1Questions: 0Answers: 0

    @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;
    
  • icdebicdeb Posts: 20Questions: 5Answers: 0

    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?

  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin

    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

  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin

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

    Allan

  • icdebicdeb Posts: 20Questions: 5Answers: 0

    @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.

  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin

    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

Sign In or Register to comment.