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 }}" style="display: none;">
        <thead>
            <tr>
                @foreach($header as $headerName => $headerTitle)
                    <th scope="col" class="bg-primary-subtle column_{{ $headerName }} hrader_{{ $headerName }}">
                        <span class="cursor-pointer sort-by-column" data-name="{{ $headerName }}">
                            {{ $headerTitle }}
                            @if(str_starts_with($headerName, $sortBy))
                                @if($orderBy === 'asc')
                                    <i class="bi bi-arrow-up"></i>
                                @else
                                    <i class="bi bi-arrow-down"></i>
                                @endif
                            @endif

                        </span>
                    </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();
            }
        });

        $('.table').fadeIn();

        $('.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');
            }
        });

        $('.sort-by-column').on('click', function () {
            let columnName = $(this).attr('data-name');
            let currentUrl = new URL(document.location.href);
            let currentColumnName = currentUrl.searchParams.get('sortBy');
            currentUrl.searchParams.set('sortBy', columnName);
            if((currentColumnName !== columnName) || (currentUrl.searchParams.has('order'))) {
                currentUrl.searchParams.delete('order');
            } else {
                currentUrl.searchParams.set('order', 'desc');
            }
            document.location.href = currentUrl.href;
        });



    </script>
@endpush