strprfcrm/resources/views/partials/table.blade.php

<div class="table-responsive">
    <div class="py-2 bg-primary rounded-start" style="position: absolute; right: 0">
        <button type="button" class="btn btn-sm btn-primary " data-bs-toggle="modal" data-bs-target="#table_{{ $id }}_modal">
            <i class="bi bi-gear-fill"></i>
        </button>
    </div>
    <table class="table" id="tbl" data-table-name="{{ $id }}">
        <thead>
            <tr>
                @foreach($header as $headerName => $headerTitle)
                    <th scope="col" class="column_{{ $headerName }} hrader_{{ $headerName }}">{{ $headerTitle }}</th>
                @endforeach

            </tr>
        </thead>
        <tbody>
        @foreach($products as $product)
            <tr>
                @foreach($header as $headerName => $headerTitle)
                    <td class="column_{{$headerName}}">{!! $product->$headerName !!}</td>
                @endforeach
            </tr>
        @endforeach
        </tbody>
    </table>
</div>

<!-- Модальное окно настроек таблицы -->
<div class="modal fade" id="table_{{ $id }}_modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-fullscreen-sm-down">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Выбор отображаемых колонок</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
            </div>
            <div class="modal-body">
                @foreach($header as $headerName => $headerTitle)
                <div>
                    <label class="me-3"><input type="checkbox" checked="checked" data-name="{{ $headerName }}" class="toggle-column checkbox-{{ $headerName }}"> {{ $headerTitle }}</label>
                </div>
                @endforeach
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
            </div>
        </div>
    </div>
</div>


@push('scripts')
    <script type="module">
        // on page load set column visible
        let tableName = $('#tbl').attr('data-table-name');
        let tables = JSON.parse(localStorage.getItem('table_'+tableName));

        // on first load create tables object
        if(!tables) {
            tables = {};
        }

        $.each(tables, function (colName, colStatus) {
            if(!colStatus) {
                $('.checkbox-'+colName).attr('checked', false);
                $('.column_'+colName).hide();
            }
        });

        $('.toggle-column').on('change', function () {
            let columnName = $(this).attr('data-name');
            let columnStatus = $(this).is(':checked');

            // save column status
            tables[columnName] = columnStatus;
            localStorage.setItem('table_'+tableName, JSON.stringify(tables));

            // show or hide column
            if(columnStatus) {
                $('.column_'+columnName).show('fast');
            } else {
                $('.column_'+columnName).hide('fast');
            }
        });





        $('#table-settings').on('click', function () {

        });




    </script>
@endpush