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>
İyi kodlamalar dilerim