v3 - Add option to hide Column Header (#1512)

* Add option to hide Column Header --------- Co-authored-by: lrljoe <[email protected]>
rappasoft · Nov 18, 2023 · f6a69d6 · f6a69d6
1 parent 5107ce9
commit f6a69d6
Show file tree

Hide file tree

Showing 8 changed files with 118 additions and 48 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@ All notable changes to `laravel-livewire-tables` will be documented in this file
 ## UNRELEASED
 - Add capability to set a custom script path for the scripts/styles by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1557
 - Added missing tailwind background colour class for when hovering over the clear button in dark mode by @slakbal in https://github.com/rappasoft/laravel-livewire-tables/pull/1553
+- Add capability to hide Column Label by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1512
 
 
 ## [v3.1.3] - 2023-11-03

diff --git a/docs/columns/available-methods.md b/docs/columns/available-methods.md
@@ -255,3 +255,20 @@ If you are using non-latin characters as the Column Title, you should set a lati
 Column::make('地址', 'address.address')
     ->setCustomSlug('Address')
 ```
+
+### Hiding Column Label
+
+Labels are visible by default, but should you wish to hide the label from the table header, without impacting on wider table behaviour, you may implement the following method:
+```php
+Column::make('Name')
+    ->setColumnLabelStatusDisabled()
+```
+
+### Displaying Column Label
+
+Labels are visible by default, but should you wish to override a previous "hideColumnLabel()", you may implement the below method:
+
+```php
+Column::make('Name')
+    ->setColumnLabelStatusEnabled()
+```
diff --git a/resources/views/components/table/th.blade.php b/resources/views/components/table/th.blade.php
@@ -18,32 +18,34 @@
             ->except('default')
         }}
     >
-        @unless ($component->sortingIsEnabled() && ($column->isSortable() || $column->getSortCallback()))
-            {{ $column->getTitle() }}
-        @else
-            <button
-                wire:click="sortBy('{{ ($column->isSortable() ? $column->getColumnSelectName() : $column->getSlug()) }}')"
-                {{
-                    $attributes->merge($customSortButtonAttributes)
-                        ->class(['flex items-center space-x-1 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider group focus:outline-none dark:text-gray-400' => $customSortButtonAttributes['default'] ?? true])
-                        ->except(['default', 'wire:key'])
-                }}
-            >
-                <span>{{ $column->getTitle() }}</span>
+        @if($column->getColumnLabelStatus())
+            @unless ($component->sortingIsEnabled() && ($column->isSortable() || $column->getSortCallback()))
+                {{ $column->getTitle() }}
+            @else
+                <button
+                    wire:click="sortBy('{{ ($column->isSortable() ? $column->getColumnSelectName() : $column->getSlug()) }}')"
+                    {{
+                        $attributes->merge($customSortButtonAttributes)
+                            ->class(['flex items-center space-x-1 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider group focus:outline-none dark:text-gray-400' => $customSortButtonAttributes['default'] ?? true])
+                            ->except(['default', 'wire:key'])
+                    }}
+                >
+                    <span>{{ $column->getTitle() }}</span>
 
-                <span class="relative flex items-center">
-                    @if ($direction === 'asc')
-                        <x-heroicon-o-chevron-up class="w-3 h-3 group-hover:opacity-0" />
-                        <x-heroicon-o-chevron-down class="w-3 h-3 opacity-0 group-hover:opacity-100 absolute"/>
-                    @elseif ($direction === 'desc')
-                        <x-heroicon-o-chevron-down class="w-3 h-3 group-hover:opacity-0" />
-                        <x-heroicon-o-x-circle class="w-3 h-3 opacity-0 group-hover:opacity-100 absolute"/>
-                    @else
-                        <x-heroicon-o-chevron-up class="w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
-                    @endif
-                </span>
-            </button>
-        @endunless
+                    <span class="relative flex items-center">
+                        @if ($direction === 'asc')
+                            <x-heroicon-o-chevron-up class="w-3 h-3 group-hover:opacity-0" />
+                            <x-heroicon-o-chevron-down class="w-3 h-3 opacity-0 group-hover:opacity-100 absolute"/>
+                        @elseif ($direction === 'desc')
+                            <x-heroicon-o-chevron-down class="w-3 h-3 group-hover:opacity-0" />
+                            <x-heroicon-o-x-circle class="w-3 h-3 opacity-0 group-hover:opacity-100 absolute"/>
+                        @else
+                            <x-heroicon-o-chevron-up class="w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+                        @endif
+                    </span>
+                </button>
+            @endunless
+        @endif
     </th>
 @elseif ($component->isBootstrap())
     <th scope="col" {{
@@ -55,26 +57,28 @@
             ->except('default')
         }}
     >
-        @unless ($component->sortingIsEnabled() && ($column->isSortable() || $column->getSortCallback()))
-            {{ $column->getTitle() }}
-        @else
-            <div
-                class="d-flex align-items-center"
-                wire:click="sortBy('{{ ($column->isSortable() ? $column->getColumnSelectName() : $column->getSlug()) }}')"
-                style="cursor:pointer;"
-            >
-                <span>{{ $column->getTitle() }}</span>
+        @if($column->getColumnLabelStatus())
+            @unless ($component->sortingIsEnabled() && ($column->isSortable() || $column->getSortCallback()))
+                {{ $column->getTitle() }}
+            @else
+                <div
+                    class="d-flex align-items-center"
+                    wire:click="sortBy('{{ ($column->isSortable() ? $column->getColumnSelectName() : $column->getSlug()) }}')"
+                    style="cursor:pointer;"
+                >
+                    <span>{{ $column->getTitle() }}</span>
 
-                <span class="relative d-flex align-items-center">
-                    @if ($direction === 'asc')
-                        <x-heroicon-o-chevron-up class="ml-1" style="width:1em;height:1em;" />
-                    @elseif ($direction === 'desc')
-                        <x-heroicon-o-chevron-down class="ml-1" style="width:1em;height:1em;" />
-                    @else
-                        <x-heroicon-o-chevron-up-down class="ml-1" style="width:1em;height:1em;" />
-                    @endif
-                </span>
-            </div>
-        @endunless
+                    <span class="relative d-flex align-items-center">
+                        @if ($direction === 'asc')
+                            <x-heroicon-o-chevron-up class="ml-1" style="width:1em;height:1em;" />
+                        @elseif ($direction === 'desc')
+                            <x-heroicon-o-chevron-down class="ml-1" style="width:1em;height:1em;" />
+                        @else
+                            <x-heroicon-o-chevron-up-down class="ml-1" style="width:1em;height:1em;" />
+                        @endif
+                    </span>
+                </div>
+            @endunless
+        @endif
     </th>
 @endif
diff --git a/src/Views/Column.php b/src/Views/Column.php
@@ -9,6 +9,8 @@ class Column
 {
     use IsColumn;
 
+    protected bool $displayColumnLabel = true;
+
     public function __construct(string $title, string $from = null)
     {
         $this->title = trim($title);

diff --git a/src/Views/Traits/Configuration/ColumnConfiguration.php b/src/Views/Traits/Configuration/ColumnConfiguration.php
@@ -163,4 +163,23 @@ public function setCustomSlug(string $customSlug): self
 
         return $this;
     }
+
+    public function setColumnLabelStatusDisabled(): self
+    {
+        $this->setColumnLabelStatus(false);
+
+        return $this;
+    }
+
+    public function setColumnLabelStatusEnabled(): self
+    {
+        $this->setColumnLabelStatus(true);
+
+        return $this;
+    }
+
+    public function setColumnLabelStatus(bool $status): void
+    {
+        $this->displayColumnLabel = $status;
+    }
 }
diff --git a/src/Views/Traits/Helpers/ColumnHelpers.php b/src/Views/Traits/Helpers/ColumnHelpers.php
@@ -449,4 +449,9 @@ public function hasCustomSlug(): bool
     {
         return $this->customSlug !== null;
     }
+
+    public function getColumnLabelStatus(): bool
+    {
+        return $this->displayColumnLabel ?? true;
+    }
 }
diff --git a/tests/Traits/Helpers/ColumnHelpersTest.php b/tests/Traits/Helpers/ColumnHelpersTest.php
@@ -348,4 +348,25 @@ public function can_column_custom_slug_returns(): void
 
         $this->assertSame(\Illuminate\Support\Str::slug('test123'), $column->getSlug());
     }
+
+    /** @test */
+    public function can_check_if_column_label_should_be_shown(): void
+    {
+        $column = Column::make('ID', 'id');
+
+        $this->assertTrue($column->getColumnLabelStatus());
+
+        $column2 = Column::make('ID', 'id')
+            ->setColumnLabelStatusDisabled()
+            ->footer(fn ($rows) => 'Hi');
+
+        $this->assertFalse($column2->getColumnLabelStatus());
+
+        $column3 = Column::make('ID', 'id')
+            ->setColumnLabelStatusEnabled()
+            ->footer(fn ($rows) => 'Hi');
+
+        $this->assertTrue($column3->getColumnLabelStatus());
+        $this->assertFalse($column2->getColumnLabelStatus());
+    }
 }
diff --git a/tests/Traits/Visuals/SortingVisualsTest.php b/tests/Traits/Visuals/SortingVisualsTest.php
@@ -33,9 +33,10 @@ public function testArraySetup(): array
     public function th_headers_are_buttons_with_sorting_enabled(): void
     {
         Livewire::test(PetsTable::class)
-            ->assertSeeHtml('<button
-                wire:click="sortBy(\'id\')"
-                class="flex items-center space-x-1 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider group focus:outline-none dark:text-gray-400"');
+            ->assertSeeHtmlInOrder([
+                'wire:click="sortBy(\'id\')"',
+                'class="flex items-center space-x-1 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider group focus:outline-none dark:text-gray-400"',
+            ]);
     }
 
     /** @test */