Laravel Türkiye Discord Kanalı Forumda kod paylaşılırken dikkat edilmesi gerekenler!Birlikte proje geliştirmek ister misiniz?

Bir tane ip ucu paylaşayım bunun altından paylaşmak isteyen arkadaşlar da paylaşabilirler elbette

Filament tablolarında aşağıya ve yukarıya kaydırma çubuğu eklemek isterseniz veya paginate yukarıda da olsun derseniz.

Bu paylaştığım kodu terminale yazıp

php artisan vendor:publish --tag=filament-tables-views

Tablolar view dosyasını dışarıya çıkarttıktan sonra Resource->View->Vendor->Filament-Tables->index.blade.php dosyasını açıp script kodunu sayfanın en altına.

Bu kodu da "$isReordering" bularak onun yerine yapıştırın. olay bitmiştir

        <div class="fi-ta-top-scroll-container overflow-x-auto mb-1" style="height: 12px;" onscroll="document.getElementById('main-table-container').scrollLeft = this.scrollLeft;"></div>

        <div
            id="main-table-container"
            @if ((! $isReordering) && ($pollingInterval = $getPollingInterval()))
                wire:poll.{{ $pollingInterval }}
            @endif
            @class([
                'fi-ta-content relative divide-y divide-gray-200 overflow-x-auto dark:divide-white/10 dark:border-t-white/10',
                '!border-t-0' => ! $hasHeader,
            ])
            onscroll="document.querySelector('.fi-ta-top-scroll-container').scrollLeft = this.scrollLeft;"
        >
            @if ((($records instanceof \Illuminate\Contracts\Pagination\Paginator) || ($records instanceof \Illuminate\Contracts\Pagination\CursorPaginator)) &&
     ((! ($records instanceof \Illuminate\Contracts\Pagination\LengthAwarePaginator)) || $records->total()))
                <x-filament::pagination
                    :extreme-links="$hasExtremePaginationLinks()"
                    :page-options="$getPaginationPageOptions()"
                    :paginator="$records"
                    class="fi-ta-pagination px-3 py-3 sm:px-6"
                />
            @endif
<script>
    function setupTopScroll() {
        var mainTable = document.getElementById('main-table-container');
        var topScroll = document.querySelector('.fi-ta-top-scroll-container');

        if (mainTable && topScroll) {
            var tableWidth = mainTable.scrollWidth;

            if (!topScroll.firstChild || topScroll.firstChild.style.width != tableWidth + 'px') {
                topScroll.innerHTML = '<div style="width:' + tableWidth + 'px; height: 1px;"></div>';
            }

            // Modal açıksa z-index'i düşür
            if (document.querySelector('.fi-modal-open, .fi-modal-window')) {
                topScroll.style.zIndex = '10';
            } else {
                topScroll.style.zIndex = '50';
            }
        }
    }

    document.addEventListener('DOMContentLoaded', function() {
        setupTopScroll();

        if (typeof window.Livewire !== 'undefined') {
            document.addEventListener('livewire:load', function() {
                window.Livewire.on('open-modal', function() {
                    setTimeout(setupTopScroll, 100);
                });

                window.Livewire.on('close-modal', function() {
                    setTimeout(setupTopScroll, 100);
                });

                window.Livewire.hook('message.processed', function() {
                    setTimeout(setupTopScroll, 100);
                });
            });
        }


        setInterval(setupTopScroll, 2000);

        window.addEventListener('resize', setupTopScroll);
    });
</script>

İp ucu2
İp Ucu

İyi kodlamalar dilerim