Have both class logic and column visibility controlled automatically

SmithfieldBuilding

https://webdev.brandnetics.co.uk/cm/assetzexchange/Bootstrap%204/Template/layout_4/LTR/default/full/browse-properties-v2.html

At any screen size up to tablet-l I want the table to always display vertically (in child rows), which it currently does. However, adding this class to my html triggers manual mode, and columns will no longer wrap to a child row when they overflow the screen, instead becoming a large horizontal table with a scroll bar.

The table has buttons which will double the amount of data shown if the user wishes, so I need both the table to continue to wrap in child rows at any size up to tablet-l, AND still have the column visibility controlled automatically so that any column that overflows the table will wrap to a child row with no scroll bar.

I appreciate this is a contradiction, but was wondering if it's implementable through the options?

html:

  <table id="tableAllBrowseProperties" class="table table-striped table-hover rounded " style="width:100%">
                                                    <thead class="bg-primary">
                                                        <tr class="">
                                                            <th class="min-tablet-l text-center">#</th>

                                                            <th class="min-tablet-l js-column-location">Property</th>
                                                            <th class="min-tablet-l text-center"><span class="text-nowrap">Net rental</span> yield</th>

                                                            <th class="min-tablet-l text-center">Total return</th>



                                                            <th class="min-tablet-l text-center">Live price </th>


                                                            <th class="min-tablet-l text-center">Valuation</th>
                                                            <th class="min-tablet-l text-center"><span class="text-nowrap">Discount (-)</span> <span class="text-nowrap">Premium (+)</span></th>


                                                            <th class="min-tablet-l text-center">Fees</th>

                                                            <th class="min-tablet-l text-center">Unmatched offers</th>
                                                            <th class="min-tablet-l text-center">Your investment</th>
                                                            <th class="min-tablet-l text-center">Capitalised cost</th>
                                                            <th class="min-tablet-l text-center"><span class="text-nowrap">Net rental</span> income</th>
                                                            <th class="min-tablet-l text-center">Growth</th>
                                                            <th class="min-tablet-l text-center">Total return</th>


                                                            <th class="min-tablet-l text-center">View</th>




                                                        </tr>
                                                    </thead>

                                                    <tbody> </tbody>

                                                </table>
                                            </div>

js:

$(document).ready(function () {

    // Setting datatable defaults
    $.extend($.fn.dataTable.defaults, {
        dom: '<"datatable-scroll"t><"datatable-footer"ip>',

        language: {
            paginate: {
                'first': 'First',
                'last': 'Last',
                'next': $('html').attr('dir') == 'rtl' ? '&larr;' : '&rarr;',
                'previous': $('html').attr('dir') == 'rtl' ? '&rarr;' : '&larr;',
            },
        },
        'pagination': true,
        'info': true,
        'searching': true,
        "lengthChange": false,
        "columnDefs": [{
            "targets": ["js-column-reports", "js-column-trade", "js-column-location"],
            "searchable": false,
            "orderable": false,
   }],
        "pageLength": 5,

        "responsive": true
    });




    var x = $('#tableAllBrowseProperties').DataTable({
        "responsive": {
            details: {
                type: 'none',
                display: $.fn.dataTable.Responsive.display.childRowImmediate,
                renderer: function (api, rowIdx, columns) {
                    var data = $.map(columns, function (col, i) {
                        return col.hidden ?
                            '<tr data-dt-row="' + col.rowIndex + '" data-dt-column="' + col.columnIndex + '">' +
                            '<td class="w-50"><strong>' + col.title + ':' + '<strong></td> ' +
                            '<td class="w-50 text-right">' + col.data + '</td>' +
                            '</tr>' :
                            '';
                    }).join('');

                    return data ?
                        $('<table class="table table-striped table-bordered w-100"/>').append(data) :
                        false;
                }
            }
        },


        colReorder: true,
        dom: 'Bfrtip',
        buttons: {
            buttons: [
                {
                    extend: 'colvisGroup',
                    text: 'Show my investments',
                    show: [9, 10, 11, 12, 13]
            },
                {
                    extend: 'colvisGroup',
                    text: 'Hide my investments',
                    hide: [9, 10, 11, 12, 13]
            }
            ],
            dom: {
                button: {
                    tag: "button",
                    className: "btn btn-light rounded"
                },
                buttonLiner: {
                    tag: null
                }
            }
        },

        "searching": false
    });

    x.columns([9, 10, 11, 12, 13]).visible(false);
    x.on('column-visibility.dt', function (e) {
        x.columns.adjust().draw();
    });



    $('a.toggle-vis').on('click', function (e) {
        e.preventDefault();

        // Get the column API object
        var column = x.column($(this).attr('data-column'));

        // Toggle the visibility
        column.visible(!column.visible());
    });
});

rf1234

I have a similar requirement. The only difference is that whether using a scrollbar or wrapping columns in child rows does not depend on the screen size but on the user clicking a button that sets a cookie.

For fully automatic wrapping in child rows regardless of screen size you can use data tables responsive mode.

So I read my cookie before data table initialization. If the cookie says it is horizontal scrolling time I set the following parameters for the data table initialization:

responsive = false;
scrollX = true;
fixedHeader = false; //doesn't work with scrollX

else I have

responsive = true;
scrollX = false;
fixedHeader = true;

This is my entire code for this which runs before data table initialization:

var responsive = true;
var scrollX = false;
var fixedHeader = true;
horizontalScrolling = 0;
if ( checkExists('#somePage') ) {
    //check whether we want horizontal scrolling!
    horizontalScrolling = Cookies.get('scrollX');
    if ( horizontalScrolling > 0 ) {
        responsive = false;
        scrollX = true;
        fixedHeader = false;
    }
}

//Data tables default settings
$.extend( true, $.fn.dataTable.defaults, {
    scrollX: scrollX,
    fixedHeader: {
        header: fixedHeader,
        headerOffset: $('.navbar-header').outerHeight()
    },
    paging: true,
    colReorder: true,
    responsive: responsive,
    select: true,
    stateSave: stateSave,
    processing: true
} );

Since these changes need to happen before data table initialization I do a page refresh whenever the user decides to change the cookie value on button click.
That of course would be a downside for your approach: When the user makes the screen smaller or bigger you would suddenly need to make a page refresh. But maybe that doesn't really occur much in reality?! I mean not many users make the browser window smaller or bigger during the use of the same device.

This code sets the cookie on change of a check box on the page and does the page refresh if needed:

Cookies.set('scrollX', box.checked ? 1 : 0, {expires: 360, secure: secureMode});
if ( ! checkExists('#homePage')  ) {
    location.reload(true);
}