I'm stuck with responsive: Datatables react for resizing, the table element doesn't

hellsing

Link to test case: Sorry, it's still on localhost
Debugger code (debug.datatables.net):
Error messages shown: none
Description of problem:

Please help, I'm stuck with responsive: Datatables react for viewport resizing, but the table element doesn't.

Here is the main part of the code that initialises Datatables:

            let prefers = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
            let html = document.querySelector('html');

            html.classList.add(prefers);
            html.setAttribute('data-bs-theme', prefers);

            $(document).ready( function () {
                $( myTable ).DataTable({
                    dom: 'Bfrtip',
                    stateSave: true,
                    responsive: true,
                    buttons: [
                        'pageLength',
                        {
                            extend: 'excelHtml5',
                            title: pTitle + ' ' + fDate
                        },
                        'pdf', 'print','copy'
                    ],
                lengthMenu: [
                        [10, 25, -1],
                        [10, 25, 'All']
                    ],
                    ajax: {
                        url: '/server/getdata/',
                        dataSrc: ''
                    }
                });
            });

Everything works, there's no error msg on the console but my table is not responsive. It seems somehow the HTML table element gets a fixed width: nnnpx setting upon initialisation, then when I resize the window the other parts of the Datatable react as expected (they move closer to each other or even stack) but the table itself keeps the width it got at initialisation overflows the screen. If I begin with a narrower viewport and then resize to a wider setting, the Datatable grows except for the HTML table element.

I don't have any code that would set a fixed width to the table.

I would be happy to get any ideas.

kthorngren

I'm not familiar with React and if this will help but check this flexible width example to see if it solves the problem.

Kevin

hellsing

Thanks @kthorngren , I'll check your suggestion but I don't use React.

hellsing

@kthorngren , actually your suggestion helped. I usually avoid to use hard coded styles in HTML but I applied style="width:100%" from the example and now my table is responsive. Thanks a lot!