Using webpack Encore, DataTables responsive button is not showing-CodePudding

I have a DataTable and I want to use the Responsive extension.

I set up my DataTable:

import 'datatables.net-responsive';

$(function () {
    let myTable = $('#my-list').DataTable({
        responsive: {
            details: {
                type: 'column',
                target: 'tr'
            }
        },
        // ...
    });
    myTable.draw();
});

The columns are collapsing under a new line, appearing on row click but there isn't any button like the one in the documentation.

I found a discussion in which someone explains we need to include the extension CSS file but there isn't any CSS in the node_module/datatables.net-responsive folder. What am I missing?

CodePudding user response：

As the DataTables Responsive GitHub ReadMe is stating:

Only the core software for this library is contained in this package - to be correctly styled, a styling package for Responsive must also be included. Styling options include DataTable's native styling, Bootstrap and Foundation.

In my case, I installed the Bootstrap 5 style:

yarn add datatables.net-responsive-bs5

Then I included it in my SCSS file:

@import '~datatables.net-responsive-bs5';

And now the button is showing.