Using @forelse to add message when the table has no resources to display (#267)

Co-authored-by: Cristian Iosif <[email protected]>
Co-authored-by: Pascal Baljet <[email protected]>

Author: 3 people

app/app/Http/Controllers/TableController.php

@@ -81,6 +81,19 @@ public function caseInsensitive()
         ]);
     }
 
+    public function empty()
+    {
+        SpladeTable::hidePaginationWhenResourceContainsOnePage();
+
+        return view('table.users', [
+            'users' => SpladeTable::for(User::query()->where('id', '<', 1))
+                ->withGlobalSearch(columns: ['name'])
+                ->column('name')
+                ->ignoreCase(true)
+                ->paginate(10),
+        ]);
+    }
+
     public function overflow(bool $spladeQueryBuilder = false)
     {
         $query = User::query()->orderBy('name');

app/routes/web.php

@@ -309,6 +309,8 @@
         Route::get('/caseSensitive/{spladeQueryBuilder?}', [TableController::class, 'caseSensitive'])->name('table.caseSensitive');
         Route::get('/caseInsensitive/{spladeQueryBuilder?}', [TableController::class, 'caseInsensitive'])->name('table.caseInsensitive');
 
+        Route::get('/empty', [TableController::class, 'empty'])->name('table.empty');
+
         Route::get('/preserveScrollForm', [TableController::class, 'preserveScrollForm'])->name('table.preserveScrollForm');
         Route::post('/preserveScrollForm', [TableController::class, 'preserveScrollFormSubmit'])->name('table.preserveScrollFormSubmit');
 

app/tests/Browser/Table/EmptyTest.php

@@ -0,0 +1,24 @@
+<?php
+
+namespace Tests\Browser\Table;
+
+use Laravel\Dusk\Browser;
+use Tests\DuskTestCase;
+
+/**
+ * @group table
+ */
+class EmptyTest extends DuskTestCase
+{
+    /**
+     * @test
+     */
+    public function it_shows_a_text_when_no_results_have_been_found()
+    {
+        $this->browse(function (Browser $browser) {
+            $browser
+                ->visit('/table/empty/')
+                ->assertSee('There are no items to show.');
+        });
+    }
+}

resources/lang/en.json

@@ -18,6 +18,8 @@
     "Search": "",
     "Select all on this page": "",
     "Select all results": "",
+    "The password confirmation has expired.": "",
+    "There are no items to show.": "",
     "of": "",
     "per page": "",
     "results": "",

resources/views/table/body.blade.php

@@ -1,5 +1,5 @@
 <tbody class="divide-y divide-gray-200 bg-white">
-    @foreach($table->resource as $itemKey => $item)
+    @forelse($table->resource as $itemKey => $item)
         @php $itemPrimaryKey = $table->findPrimaryKey($item) @endphp
 
         <tr
@@ -39,5 +39,17 @@ class="whitespace-nowrap text-sm @if($loop->first && $hasBulkActions) pr-6 @else
                 </td>
             @endforeach
         </tr>
-    @endforeach
-</tbody>
+    @empty
+        <tr>
+            <td colspan="{{ $table->columns()->count() }}" class="whitespace-nowrap">
+                @if(isset($emptyState) && !!$emptyState)
+                    {{ $emptyState }}
+                @else
+                    <p class="text-gray-700 px-6 py-12 font-medium text-sm text-center">
+                        {{ __('There are no items to show.') }}
+                    </p>
+                @endif
+            </td>
+        </tr>
+    @endforelse
+</tbody>

src/Components/Table.php

@@ -40,12 +40,17 @@ public function __construct(
      */
     public function showPaginator(): bool
     {
-        if (SpladeTable::hidesPaginationWhenResourceContainsOnePage()) {
+        $resource = $this->for->resource;
+
+        $paginator = $resource instanceof Paginator || $resource instanceof CursorPaginator;
+
+        if (!$paginator) {
             return false;
         }
 
-        return $this->for->resource instanceof Paginator
-            || $this->for->resource instanceof CursorPaginator;
+        return SpladeTable::hidesPaginationWhenResourceContainsOnePage()
+            ? $resource->hasPages()
+            : true;
     }
 
     /**