Skip to content

Commit bb38c1a

Browse files
lrljoelrljoe
authored
Fix Lazy Loading
1 parent eb88797 commit bb38c1a

File tree

1 file changed

+103
-101
lines changed

1 file changed

+103
-101
lines changed

‎resources/views/datatable.blade.php‎

Lines changed: 103 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -6,134 +6,136 @@
66
@php($isBootstrap4 = $this->isBootstrap4)
77
@php($isBootstrap5 = $this->isBootstrap5)
88

9-
<div {{ $this->getTopLevelAttributes() }}>
10-
11-
@includeWhen(
12-
$this->hasConfigurableAreaFor('before-wrapper'),
13-
$this->getConfigurableAreaFor('before-wrapper'),
14-
$this->getParametersForConfigurableArea('before-wrapper')
15-
)
16-
17-
<x-livewire-tables::wrapper :component="$this" :tableName="$tableName" :$primaryKey :$isTailwind :$isBootstrap :$isBootstrap4 :$isBootstrap5>
18-
@if($this->hasActions && !$this->showActionsInToolbar)
19-
<x-livewire-tables::includes.actions/>
20-
@endif
21-
9+
<div>
10+
<div {{ $this->getTopLevelAttributes() }}>
2211

2312
@includeWhen(
24-
$this->hasConfigurableAreaFor('before-tools'),
25-
$this->getConfigurableAreaFor('before-tools'),
26-
$this->getParametersForConfigurableArea('before-tools')
13+
$this->hasConfigurableAreaFor('before-wrapper'),
14+
$this->getConfigurableAreaFor('before-wrapper'),
15+
$this->getParametersForConfigurableArea('before-wrapper')
2716
)
2817

29-
@if($this->shouldShowTools)
30-
<x-livewire-tables::tools>
31-
@if ($this->showSortPillsSection)
32-
<x-livewire-tables::tools.sorting-pills />
33-
@endif
34-
@if($this->showFilterPillsSection)
35-
<x-livewire-tables::tools.filter-pills />
18+
<x-livewire-tables::wrapper :component="$this" :tableName="$tableName" :$primaryKey :$isTailwind :$isBootstrap :$isBootstrap4 :$isBootstrap5>
19+
@if($this->hasActions && !$this->showActionsInToolbar)
20+
<x-livewire-tables::includes.actions/>
3621
@endif
22+
3723

3824
@includeWhen(
39-
$this->hasConfigurableAreaFor('before-toolbar'),
40-
$this->getConfigurableAreaFor('before-toolbar'),
41-
$this->getParametersForConfigurableArea('before-toolbar')
25+
$this->hasConfigurableAreaFor('before-tools'),
26+
$this->getConfigurableAreaFor('before-tools'),
27+
$this->getParametersForConfigurableArea('before-tools')
4228
)
4329

44-
@if($this->shouldShowToolBar)
45-
<x-livewire-tables::tools.toolbar />
46-
@endif
47-
48-
@includeWhen(
49-
$this->hasConfigurableAreaFor('after-toolbar'),
50-
$this->getConfigurableAreaFor('after-toolbar'),
51-
$this->getParametersForConfigurableArea('after-toolbar')
52-
)
53-
54-
</x-livewire-tables::tools>
55-
@endif
56-
57-
<x-livewire-tables::table>
58-
59-
<x-slot name="thead">
60-
@if($this->getCurrentlyReorderingStatus)
61-
<x-livewire-tables::table.th.reorder x-cloak x-show="currentlyReorderingStatus" />
30+
@if($this->shouldShowTools)
31+
<x-livewire-tables::tools>
32+
@if ($this->showSortPillsSection)
33+
<x-livewire-tables::tools.sorting-pills />
6234
@endif
63-
@if($this->showBulkActionsSections)
64-
<x-livewire-tables::table.th.bulk-actions :displayMinimisedOnReorder="true" />
65-
@endif
66-
@if ($this->showCollapsingColumnSections)
67-
<x-livewire-tables::table.th.collapsed-columns />
35+
@if($this->showFilterPillsSection)
36+
<x-livewire-tables::tools.filter-pills />
6837
@endif
6938

70-
@foreach($this->selectedVisibleColumns as $index => $column)
71-
<x-livewire-tables::table.th wire:key="{{ $tableName.'-table-head-'.$index }}" :column="$column" :index="$index" />
72-
@endforeach
73-
</x-slot>
74-
75-
@if($this->secondaryHeaderIsEnabled() && $this->hasColumnsWithSecondaryHeader())
76-
<x-livewire-tables::table.tr.secondary-header />
77-
@endif
78-
@if($this->hasDisplayLoadingPlaceholder())
79-
<x-livewire-tables::includes.loading colCount="{{ $this->columns->count()+1 }}" />
80-
@endif
39+
@includeWhen(
40+
$this->hasConfigurableAreaFor('before-toolbar'),
41+
$this->getConfigurableAreaFor('before-toolbar'),
42+
$this->getParametersForConfigurableArea('before-toolbar')
43+
)
8144

45+
@if($this->shouldShowToolBar)
46+
<x-livewire-tables::tools.toolbar />
47+
@endif
8248

83-
@if($this->showBulkActionsSections)
84-
<x-livewire-tables::table.tr.bulk-actions :displayMinimisedOnReorder="true" />
49+
@includeWhen(
50+
$this->hasConfigurableAreaFor('after-toolbar'),
51+
$this->getConfigurableAreaFor('after-toolbar'),
52+
$this->getParametersForConfigurableArea('after-toolbar')
53+
)
54+
55+
</x-livewire-tables::tools>
8556
@endif
8657

87-
@forelse ($this->getRows as $rowIndex => $row)
88-
<x-livewire-tables::table.tr wire:key="{{ $tableName }}-row-wrap-{{ $row->{$primaryKey} }}" :row="$row" :rowIndex="$rowIndex">
58+
<x-livewire-tables::table>
59+
60+
<x-slot name="thead">
8961
@if($this->getCurrentlyReorderingStatus)
90-
<x-livewire-tables::table.td.reorder x-cloak x-show="currentlyReorderingStatus" wire:key="{{ $tableName }}-row-reorder-{{ $row->{$primaryKey} }}" :rowID="$tableName.'-'.$row->{$this->getPrimaryKey()}" :rowIndex="$rowIndex" />
62+
<x-livewire-tables::table.th.reorder x-cloak x-show="currentlyReorderingStatus" />
9163
@endif
9264
@if($this->showBulkActionsSections)
93-
<x-livewire-tables::table.td.bulk-actions wire:key="{{ $tableName }}-row-bulk-act-{{ $row->{$primaryKey} }}" :row="$row" :rowIndex="$rowIndex"/>
65+
<x-livewire-tables::table.th.bulk-actions :displayMinimisedOnReorder="true" />
9466
@endif
9567
@if ($this->showCollapsingColumnSections)
96-
<x-livewire-tables::table.td.collapsed-columns wire:key="{{ $tableName }}-row-collapsed-{{ $row->{$primaryKey} }}" :rowIndex="$rowIndex" />
68+
<x-livewire-tables::table.th.collapsed-columns />
9769
@endif
9870

99-
@foreach($this->selectedVisibleColumns as $colIndex => $column)
100-
<x-livewire-tables::table.td wire:key="{{ $tableName . '-' . $row->{$primaryKey} . '-datatable-td-' . $column->getSlug() }}" :column="$column" :colIndex="$colIndex">
101-
@if($column->isHtml())
102-
{!! $column->renderContents($row) !!}
103-
@else
104-
{{ $column->renderContents($row) }}
105-
@endif
106-
</x-livewire-tables::table.td>
71+
@foreach($this->selectedVisibleColumns as $index => $column)
72+
<x-livewire-tables::table.th wire:key="{{ $tableName.'-table-head-'.$index }}" :column="$column" :index="$index" />
10773
@endforeach
108-
</x-livewire-tables::table.tr>
74+
</x-slot>
10975

110-
@if ($this->showCollapsingColumnSections)
111-
<x-livewire-tables::table.collapsed-columns :row="$row" :rowIndex="$rowIndex" />
76+
@if($this->secondaryHeaderIsEnabled() && $this->hasColumnsWithSecondaryHeader())
77+
<x-livewire-tables::table.tr.secondary-header />
11278
@endif
113-
@empty
114-
<x-livewire-tables::table.empty />
115-
@endforelse
116-
117-
@if ($this->footerIsEnabled() && $this->hasColumnsWithFooter())
118-
<x-slot name="tfoot">
119-
@if ($this->useHeaderAsFooterIsEnabled())
120-
<x-livewire-tables::table.tr.secondary-header />
121-
@else
122-
<x-livewire-tables::table.tr.footer />
79+
@if($this->hasDisplayLoadingPlaceholder())
80+
<x-livewire-tables::includes.loading colCount="{{ $this->columns->count()+1 }}" />
81+
@endif
82+
83+
84+
@if($this->showBulkActionsSections)
85+
<x-livewire-tables::table.tr.bulk-actions :displayMinimisedOnReorder="true" />
86+
@endif
87+
88+
@forelse ($this->getRows as $rowIndex => $row)
89+
<x-livewire-tables::table.tr wire:key="{{ $tableName }}-row-wrap-{{ $row->{$primaryKey} }}" :row="$row" :rowIndex="$rowIndex">
90+
@if($this->getCurrentlyReorderingStatus)
91+
<x-livewire-tables::table.td.reorder x-cloak x-show="currentlyReorderingStatus" wire:key="{{ $tableName }}-row-reorder-{{ $row->{$primaryKey} }}" :rowID="$tableName.'-'.$row->{$this->getPrimaryKey()}" :rowIndex="$rowIndex" />
92+
@endif
93+
@if($this->showBulkActionsSections)
94+
<x-livewire-tables::table.td.bulk-actions wire:key="{{ $tableName }}-row-bulk-act-{{ $row->{$primaryKey} }}" :row="$row" :rowIndex="$rowIndex"/>
95+
@endif
96+
@if ($this->showCollapsingColumnSections)
97+
<x-livewire-tables::table.td.collapsed-columns wire:key="{{ $tableName }}-row-collapsed-{{ $row->{$primaryKey} }}" :rowIndex="$rowIndex" />
98+
@endif
99+
100+
@foreach($this->selectedVisibleColumns as $colIndex => $column)
101+
<x-livewire-tables::table.td wire:key="{{ $tableName . '-' . $row->{$primaryKey} . '-datatable-td-' . $column->getSlug() }}" :column="$column" :colIndex="$colIndex">
102+
@if($column->isHtml())
103+
{!! $column->renderContents($row) !!}
104+
@else
105+
{{ $column->renderContents($row) }}
106+
@endif
107+
</x-livewire-tables::table.td>
108+
@endforeach
109+
</x-livewire-tables::table.tr>
110+
111+
@if ($this->showCollapsingColumnSections)
112+
<x-livewire-tables::table.collapsed-columns :row="$row" :rowIndex="$rowIndex" />
123113
@endif
124-
</x-slot>
125-
@endif
126-
</x-livewire-tables::table>
114+
@empty
115+
<x-livewire-tables::table.empty />
116+
@endforelse
117+
118+
@if ($this->footerIsEnabled() && $this->hasColumnsWithFooter())
119+
<x-slot name="tfoot">
120+
@if ($this->useHeaderAsFooterIsEnabled())
121+
<x-livewire-tables::table.tr.secondary-header />
122+
@else
123+
<x-livewire-tables::table.tr.footer />
124+
@endif
125+
</x-slot>
126+
@endif
127+
</x-livewire-tables::table>
127128

128-
<x-livewire-tables::pagination />
129+
<x-livewire-tables::pagination />
129130

130-
@includeIf($customView)
131-
</x-livewire-tables::wrapper>
131+
@includeIf($customView)
132+
</x-livewire-tables::wrapper>
132133

133-
@includeWhen(
134-
$this->hasConfigurableAreaFor('after-wrapper'),
135-
$this->getConfigurableAreaFor('after-wrapper'),
136-
$this->getParametersForConfigurableArea('after-wrapper')
137-
)
138-
139-
</div>
134+
@includeWhen(
135+
$this->hasConfigurableAreaFor('after-wrapper'),
136+
$this->getConfigurableAreaFor('after-wrapper'),
137+
$this->getParametersForConfigurableArea('after-wrapper')
138+
)
139+
140+
</div>
141+
</div>

0 commit comments

Comments
 (0)