Feature/update readme v009 (#20)

Author: ginkelsoft-development

README.md

@@ -58,12 +58,12 @@ This package **requires Livewire** and cannot be used without it. To integrate D
         ['column' => 'email_verified_at', 'type' => 'checkbox', 'options' => ['1' => 'Verified', 'null' => 'Not Verified'], 'label' => 'Email bevestigd'],
         ['column' => 'email_verified_at', 'type' => 'select', 'options' => ['1' => 'Verified', 'null' => 'Not Verified'], 'label' => 'Email bevestigd'],
     ]"
-    :actions="[
+    :rows-actions="[
         ['name' => 'edit', 'label' => 'Edit', 'route' => 'users.datatable.export'],
         ['name' => 'delete', 'label' => 'Delete', 'route' => 'users.datatable.export'],
         ['name' => 'view', 'label' => 'View Profile', 'url' => '/users/{id}']
     ]"
-    :bulkActions="[
+    :bulk-actions="[
         'export' => ['label' => 'Export', 'route' => 'users.datatable.export']
     ]"
 />
@@ -110,12 +110,12 @@ Sorting is supported for all columns in the dataset, including text, dates, and
 
 ---
 
-## Actions & Bulk Actions
+## Row Actions & Bulk Actions
 
 ### Row Actions
 
 ```blade
-:actions="[
+:row-actions="[
     ['label' => 'Edit', 'route' => 'users.edit', 'class' => 'bg-green-500 text-white px-3 py-1 rounded'],
     ['label' => 'Delete', 'url' => 'users/{id}', 'class' => 'bg-red-500 text-white px-3 py-1 rounded', 'onclick' => 'return confirm(\'Are you sure?\')']
 ]"
@@ -124,7 +124,7 @@ Sorting is supported for all columns in the dataset, including text, dates, and
 ### Bulk Actions
 
 ```blade
-:bulkActions="[
+:bulk-actions="[
     'delete' => ['label' => 'Delete', 'route' => 'users.bulk.delete'],
     'export' => ['label' => 'Export', 'route' => 'users.bulk.export']
 ]"

resources/views/vendor/datatables/actions.blade.php

@@ -1,4 +1,3 @@
-<label class="text-sm text-gray-600">{{ __('datatable::datatables.bulk_actions') }}</label>
 <select wire:model="bulkAction"
         class="border border-gray-300 rounded-lg px-3 py-2 text-sm w-48 focus:ring-2 focus:ring-blue-400 transition">
     <option value="">{{ __('datatable::datatables.select_option') }}</option>

resources/views/vendor/datatables/components/bulk-action.blade.php

@@ -10,18 +10,18 @@ class="h-5 w-5 text-blue-500 border-gray-300 rounded focus:ring-2 focus:ring-blu
             </div>
             <div class="grid gap-2 text-sm text-gray-700">
                 @foreach($columns as $column)
-                    @if(!in_array($column, $hiddenColumns))
+                    @if(!in_array($column['column'], $hiddenColumns))
                         <div class="flex justify-between border-b pb-1">
-                            <strong>{{ $columnLabels[$column] ?? ucfirst(str_replace('_', ' ', $column)) }}:</strong>
-                            <span>{{ $row->$column }}</span>
+                            <strong>{{ ucfirst($column['column']) }}:</strong>
+                            <span>{{ $row->{$column['column']} }}</span>
                         </div>
                     @endif
                 @endforeach
             </div>
 
             {{-- ✅ Acties onderaan voor mobiel --}}
             <div class="mt-3 flex flex-wrap gap-2">
-                @includeIf($actionsView, ['row' => $row])
+                @includeIf($rowActionView, ['row' => $row])
             </div>
         </div>
     @endforeach

resources/views/vendor/datatables/components/mobile/table.blade.php

@@ -1,11 +1,10 @@
 <div class="hidden md:block">
-    <label for="perPage" class="text-sm text-gray-600">{{ __('datatable::datatables.results_per_page') }}</label>
     <select wire:change="updatePerPage($event.target.value)" id="perPage"
             class="border border-gray-300 rounded-lg px-3 py-2 text-sm w-24 focus:ring-2 focus:ring-blue-400 transition">
         <option value="10">10</option>
         <option value="25">25</option>
         <option value="50">50</option>
         <option value="100">100</option>
     </select>
-
+    <label for="perPage" class="text-sm text-gray-600">{{ __('datatable::datatables.results_per_page') }}</label>
 </div>

resources/views/vendor/datatables/components/page-result.blade.php

@@ -9,12 +9,12 @@ class="h-5 w-5 text-blue-500 border-gray-300 rounded focus:ring-2 focus:ring-blu
             </th>
             @endif
             @foreach($columns as $column)
-                @if(!in_array($column, $hiddenColumns))
+                @if(!in_array($column['column'], $hiddenColumns))
                     <th class="px-4 py-3 text-left text-sm font-semibold text-gray-700 border cursor-pointer hover:bg-gray-100 transition"
-                        wire:click="sortBy('{{ $column }}')">
+                        wire:click="sortBy('{{ $column['column'] }}')">
                         <div class="flex items-center">
-                            {{ $columnLabels[$column] ?? ucfirst(str_replace('_', ' ', $column)) }}
-                            @if ($sortColumn === $column)
+                            {{ ucfirst($column['label']) }}
+                            @if ($sortColumn === $column['column'])
                                 <span class="ml-2 text-blue-500">
                                     @if ($sortDirection === 'asc')
                                         ▲
@@ -45,14 +45,14 @@ class="h-5 w-5 text-blue-500 border-gray-300 rounded focus:ring-2 focus:ring-blu
                 </td>
                 @endif
                 @foreach($columns as $column)
-                    @if(!in_array($column, $hiddenColumns))
+                    @if(!in_array($column['column'], $hiddenColumns))
                         <td class="px-4 py-3 border text-sm text-gray-700">
-                            {{ $row->$column }}
+                            {{ $row->{$column['column']} }}
                         </td>
                     @endif
                 @endforeach
                 <td class="px-4 py-3 border">
-                    @includeIf($actionsView, ['row' => $row])
+                    @includeIf($rowActionView, ['row' => $row])
                 </td>
             </tr>
         @endforeach

resources/views/vendor/datatables/components/table.blade.php

@@ -30,7 +30,6 @@
                     @includeIf('datatable::components.bulk-action')
                 </div>
             @endif
-
         </div>
 
         <div class="overflow-x-auto">

resources/views/vendor/datatables/datatable.blade.php

@@ -0,0 +1,11 @@
+<div class="flex items-center space-x-2">
+    @foreach($rowActions as $action)
+        <a href="{{ isset($action['route']) ? route($action['route'], $row->id) : (isset($action['url']) ? str_replace('{id}', $row->id, $action['url']) : '#') }}"
+           onclick="event.stopPropagation();"
+        @foreach($action['attributes'] ?? [] as $key => $value)
+            {{ $key }}="{{ $value }}"
+        @endforeach>
+        {{ $action['label'] }}
+        </a>
+    @endforeach
+</div>

resources/views/vendor/datatables/row-actions.blade.php

@@ -27,10 +27,10 @@ class DataTableComponent extends Component
     public array $columns = [];
 
     /** @var array List of actions available for each row */
-    public array $actions = [];
+    public array $rowActions = [];
 
     /** @var string The Blade view file for displaying row actions */
-    public string $actionsView = 'datatable::actions';
+    public string $rowActionView = 'datatable::row-actions';
 
         /** @var string The search query entered by the user */
     #[\Livewire\Attributes\Url(history: true)]
@@ -79,26 +79,26 @@ class DataTableComponent extends Component
      *
      * @param string $model The model class name.
      * @param array $columns List of table columns.
-     * @param array $actions Row actions.
-     * @param string $actionsView Blade view for row actions.
+     * @param array rowActions
+     * @param string $rowActionView Blade view for row actions.
      * @param array $hiddenColumns Columns that should be hidden.
      * @param array $bulkActions Available bulk actions.
      * @param array $filters Initial filters.
      */
     public function mount(
         string $model,
         array  $columns,
-        array  $actions = [],
-        string $actionsView = 'datatable::actions',
+        array  $rowActions = [],
+        string $rowActionView = 'datatable::row-actions',
         array  $hiddenColumns = [],
         array  $bulkActions = [],
         array  $filters = []
     ): void
     {
         $this->model = $model;
         $this->columns = $columns;
-        $this->actions = array_map(fn($action) => $action instanceof Action ? $action->toArray() : $action, $actions);
-        $this->actionsView = $actionsView;
+        $this->rowAction = array_map(fn($action) => $action instanceof Action ? $action->toArray() : $action, $rowActions);
+        $this->rowActionView = $rowActionView;
         $this->hiddenColumns = $hiddenColumns;
         $this->bulkActions = $bulkActions;
         $this->filters = collect($filters)
@@ -319,8 +319,8 @@ public function render(): View
         return view('datatable::datatable', [
             'rows' => $this->getRows(),
             'columns' => $this->columns,
-            'actions' => $this->actions,
-            'actionsView' => $this->actionsView,
+            'rowActions' => $this->rowActions,
+            'rowActionView' => $this->rowActionView,
             'hiddenColumns' => $this->hiddenColumns,
             'selectedRows' => $this->selectedRows,
             'selectAll' => $this->selectAll,

src/Livewire/DataTableComponent.php

@@ -41,7 +41,7 @@ public function apply(Builder $query, array $columns): Builder
         if (!empty($this->searchTerm)) {
             $query->where(function (Builder $q) use ($columns) {
                 foreach ($columns as $column) {
-                    $q->orWhere($column, 'like', "%{$this->searchTerm}%");
+                    $q->orWhere($column['column'], 'like', "%{$this->searchTerm}%");
                 }
             });
         }