69 lines
2.2 KiB
PHP
69 lines
2.2 KiB
PHP
@php
|
|
$dtColumns = collect($columns)->map(function ($c, $index) {
|
|
return [
|
|
'data' => $c['key'],
|
|
'name' => $c['key'],
|
|
'orderable' => $c['orderable'] ?? true,
|
|
'searchable' => $c['searchable'] ?? true,
|
|
'visible' => $c['visible'] ?? true,
|
|
];
|
|
})->values();
|
|
@endphp
|
|
|
|
<div class="d-flex justify-content-end align-items-center mb-3">
|
|
<button class="btn btn-outline-secondary btn-sm" type="button" data-bs-toggle="offcanvas" data-bs-target="#{{ $id }}-column-offcanvas">
|
|
<i class="ti ti-columns"></i> Columns
|
|
</button>
|
|
</div>
|
|
|
|
<div class="table-responsive">
|
|
<table id="{{ $id }}" class="table table-striped w-100">
|
|
<thead>
|
|
<tr>
|
|
@foreach($columns as $col)
|
|
<th>{{ $col['label'] }}</th>
|
|
@endforeach
|
|
</tr>
|
|
</thead>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="offcanvas offcanvas-end" tabindex="-1" id="{{ $id }}-column-offcanvas">
|
|
<div class="offcanvas-header">
|
|
<h5 class="offcanvas-title">Column Visibility</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
|
|
</div>
|
|
<div class="offcanvas-body">
|
|
@foreach($columns as $index => $col)
|
|
@if((!isset($col['visibility']) || $col['visibility'] !== false) && $col['key'] !== 'checkbox')
|
|
<div class="form-check form-switch mb-2">
|
|
<input type="checkbox" class="form-check-input column-toggle"
|
|
data-column-index="{{ $index }}"
|
|
id="{{ $id }}-col-{{ $index }}"
|
|
{{ !isset($col['visible']) || $col['visible'] !== false ? 'checked' : '' }}>
|
|
<label class="form-check-label" for="{{ $id }}-col-{{ $index }}">{!! $col['label'] !!}</label>
|
|
</div>
|
|
@endif
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
@push('custom-scripts')
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
var table = $('#{{ $id }}').DataTable({
|
|
processing: true,
|
|
serverSide: true,
|
|
ajax: '{{ $ajax }}',
|
|
columns: @json($dtColumns),
|
|
});
|
|
|
|
$('#{{ $id }}-column-offcanvas').on('change', '.column-toggle', function () {
|
|
var columnIdx = $(this).data('column-index');
|
|
var column = table.column(columnIdx);
|
|
column.visible($(this).is(':checked'));
|
|
});
|
|
});
|
|
</script>
|
|
@endpush
|