Skip to content

Commit 9a58cd2

Browse files
pxpmStyleCIBottabacitu
committed
datatable component (#5688)
Co-authored-by: StyleCI Bot <bot@styleci.io> Co-authored-by: Cristian Tabacitu <cristian.tabacitu@digitallyhappy.com>
1 parent 410856a commit 9a58cd2

2 files changed

Lines changed: 898 additions & 0 deletions

File tree

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
@php
2+
// Define the table ID - use the provided tableId or default to 'crudTable'
3+
$tableId = $tableId ?? 'crudTable';
4+
@endphp
5+
6+
<div class="row mb-2 align-items-center">
7+
<div class="col-sm-9">
8+
@if ( $crud->buttons()->where('stack', 'top')->count() || $crud->exportButtons())
9+
<div class="d-print-none {{ $crud->hasAccess('create')?'with-border':'' }}">
10+
@include('crud::inc.button_stack', ['stack' => 'top'])
11+
</div>
12+
@endif
13+
</div>
14+
@if($crud->getOperationSetting('searchableTable'))
15+
<div class="col-sm-3">
16+
<div id="datatable_search_stack_{{ $tableId }}" class="mt-sm-0 mt-2 d-print-none datatable_search_stack">
17+
<div class="input-icon">
18+
<span class="input-icon-addon">
19+
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg>
20+
</span>
21+
<input type="search" class="form-control datatable-search-input" data-table-id="{{ $tableId }}" placeholder="{{ trans('backpack::crud.search') }}..."/>
22+
</div>
23+
</div>
24+
</div>
25+
@endif
26+
</div>
27+
28+
{{-- Backpack List Filters --}}
29+
@if ($crud->filtersEnabled())
30+
@include('crud::inc.filters_navbar', ['componentId' => $tableId])
31+
@endif
32+
<div class="{{ backpack_theme_config('classes.tableWrapper') }}">
33+
<table
34+
id="{{ $tableId }}"
35+
class="{{ backpack_theme_config('classes.table') ?? 'table table-striped table-hover nowrap rounded card-table table-vcenter card d-table shadow-xs border-xs' }} crud-table"
36+
data-responsive-table="{{ (int) $crud->getOperationSetting('responsiveTable') }}"
37+
data-has-details-row="{{ (int) $crud->getOperationSetting('detailsRow') }}"
38+
data-has-bulk-actions="{{ (int) $crud->getOperationSetting('bulkActions') }}"
39+
data-has-line-buttons-as-dropdown="{{ (int) $crud->getOperationSetting('lineButtonsAsDropdown') }}"
40+
data-line-buttons-as-dropdown-minimum="{{ (int) $crud->getOperationSetting('lineButtonsAsDropdownMinimum') }}"
41+
data-line-buttons-as-dropdown-show-before-dropdown="{{ (int) $crud->getOperationSetting('lineButtonsAsDropdownShowBefore') }}"
42+
data-url-start="{{ url($crud->getOperationSetting('datatablesUrl')) }}"
43+
data-responsive-table="{{ $crud->getResponsiveTable() ? 'true' : 'false' }}"
44+
data-persistent-table="{{ $crud->getPersistentTable() ? 'true' : 'false' }}"
45+
data-persistent-table-slug="{{ Str::slug($crud->getOperationSetting('datatablesUrl')) }}"
46+
data-persistent-table-duration="{{ $crud->getPersistentTableDuration() ?: '' }}"
47+
data-subheading="{{ $crud->getSubheading() ? 'true' : 'false' }}"
48+
data-reset-button="{{ ($crud->getOperationSetting('resetButton') ?? true) ? 'true' : 'false' }}"
49+
data-modifies-url="{{ var_export($modifiesUrl ?? false) }}"
50+
data-has-export-buttons="{{ var_export($crud->get('list.exportButtons') ?? false) }}"
51+
data-default-page-length="{{ $crud->getDefaultPageLength() }}"
52+
data-page-length-menu="{{ json_encode($crud->getPageLengthMenu()) }}"
53+
data-show-entry-count="{{ var_export($crud->getOperationSetting('showEntryCount') ?? true) }}"
54+
data-searchable-table="{{ var_export($crud->getOperationSetting('searchableTable') ?? true) }}"
55+
data-search-delay="{{ $crud->getOperationSetting('searchDelay') ?? 500 }}"
56+
data-total-entry-count="{{ var_export($crud->getOperationSetting('totalEntryCount') ?? false) }}"
57+
cellspacing="0">
58+
<thead>
59+
<tr>
60+
{{-- Table columns --}}
61+
@foreach ($crud->columns() as $column)
62+
@php
63+
$exportOnlyColumn = $column['exportOnlyColumn'] ?? false;
64+
$visibleInTable = $column['visibleInTable'] ?? ($exportOnlyColumn ? false : true);
65+
$visibleInModal = $column['visibleInModal'] ?? ($exportOnlyColumn ? false : true);
66+
$visibleInExport = $column['visibleInExport'] ?? true;
67+
$forceExport = $column['forceExport'] ?? (isset($column['exportOnlyColumn']) ? true : false);
68+
@endphp
69+
<th
70+
data-orderable="{{ var_export($column['orderable'], true) }}"
71+
data-priority="{{ $column['priority'] }}"
72+
data-column-name="{{ $column['name'] }}"
73+
{{--
74+
data-visible-in-table => if developer forced column to be in the table with 'visibleInTable => true'
75+
data-visible => regular visibility of the column
76+
data-can-be-visible-in-table => prevents the column to be visible into the table (export-only)
77+
data-visible-in-modal => if column appears on responsive modal
78+
data-visible-in-export => if this column is exportable
79+
data-force-export => force export even if columns are hidden
80+
--}}
81+
82+
data-visible="{{ $exportOnlyColumn ? 'false' : var_export($visibleInTable) }}"
83+
data-visible-in-table="{{ var_export($visibleInTable) }}"
84+
data-can-be-visible-in-table="{{ $exportOnlyColumn ? 'false' : 'true' }}"
85+
data-visible-in-modal="{{ var_export($visibleInModal) }}"
86+
data-visible-in-export="{{ $exportOnlyColumn ? 'true' : ($visibleInExport ? 'true' : 'false') }}"
87+
data-force-export="{{ var_export($forceExport) }}"
88+
>
89+
{{-- Bulk checkbox --}}
90+
@if($loop->first && $crud->getOperationSetting('bulkActions'))
91+
{!! View::make('crud::columns.inc.bulk_actions_checkbox')->render() !!}
92+
@endif
93+
{!! $column['label'] !!}
94+
</th>
95+
@endforeach
96+
97+
@if ( $crud->buttons()->where('stack', 'line')->count() )
98+
<th data-orderable="false"
99+
data-priority="{{ $crud->getActionsColumnPriority() }}"
100+
data-visible-in-export="false"
101+
data-action-column="true"
102+
>{{ trans('backpack::crud.actions') }}</th>
103+
@endif
104+
</tr>
105+
</thead>
106+
<tbody>
107+
</tbody>
108+
<tfoot>
109+
<tr>
110+
{{-- Table columns --}}
111+
@foreach ($crud->columns() as $column)
112+
<th>
113+
{{-- Bulk checkbox --}}
114+
@if($loop->first && $crud->getOperationSetting('bulkActions'))
115+
{!! View::make('crud::columns.inc.bulk_actions_checkbox')->render() !!}
116+
@endif
117+
{!! $column['label'] !!}
118+
</th>
119+
@endforeach
120+
121+
@if ( $crud->buttons()->where('stack', 'line')->count() )
122+
<th>{{ trans('backpack::crud.actions') }}</th>
123+
@endif
124+
</tr>
125+
</tfoot>
126+
</table>
127+
</div>
128+
129+
@if ( $crud->buttons()->where('stack', 'bottom')->count() )
130+
<div id="bottom_buttons_{{$tableId}}" class="bottom_buttons d-print-none text-sm-left">
131+
@include('crud::inc.button_stack', ['stack' => 'bottom'])
132+
<div id="datatable_button_stack_{{$tableId}}" class="datatable_button_stack float-right float-end text-right hidden-xs"></div>
133+
</div>
134+
@endif
135+
136+
@section('after_styles')
137+
{{-- CRUD LIST CONTENT - crud_list_styles stack --}}
138+
@stack('crud_list_styles')
139+
@endsection
140+
141+
@section('after_scripts')
142+
@include('crud::components.datatable.datatable_logic', ['tableId' => $tableId])
143+
@include('crud::inc.export_buttons')
144+
@include('crud::inc.details_row_logic')
145+
146+
{{-- CRUD LIST CONTENT - crud_list_scripts stack --}}
147+
@stack('crud_list_scripts')
148+
@endsection

0 commit comments

Comments
 (0)