Add clickable rows

Author: rappasoft

CHANGELOG.md

@@ -7,6 +7,8 @@ All notable changes to `laravel-livewire-tables` will be documented in this file
 ### Added
 
 - Turkish Translation - https://github.com/rappasoft/laravel-livewire-tables/pull/686
+- Added missing table row click functionality
+- Added ability to mark column as unclickable if you need a cell to have another clickable element with clickable rows turned on.
 
 ### Changed
 

resources/views/components/table/td.blade.php

@@ -8,19 +8,36 @@
 @endphp
 
 @if ($theme === 'tailwind')
-    <td {{
-        $attributes->merge($customAttributes)
-            ->class(['px-6 py-4 whitespace-nowrap text-sm font-medium dark:text-white' => $customAttributes['default'] ?? true])
-            ->class(['hidden sm:table-cell' => $column && $column->shouldCollapseOnMobile()])
-            ->class(['hidden md:table-cell' => $column && $column->shouldCollapseOnTablet()])
-            ->except('default')
-    }}>{{ $slot }}</td>
+    <td
+        @if ($column->isClickable())
+            onclick="window.open('{{ $component->getTableRowUrl($row) }}', '{{ $component->getTableRowUrlTarget($row) ?? '_self' }}')"
+        @endif
+
+        {{
+            $attributes->merge($customAttributes)
+                ->class(['px-6 py-4 whitespace-nowrap text-sm font-medium dark:text-white' => $customAttributes['default'] ?? true])
+                ->class(['hidden sm:table-cell' => $column && $column->shouldCollapseOnMobile()])
+                ->class(['hidden md:table-cell' => $column && $column->shouldCollapseOnTablet()])
+                ->except('default')
+        }}
+    >
+        {{ $slot }}
+    </td>
 @elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
-    <td {{
-        $attributes->merge($customAttributes)
-            ->class(['' => $customAttributes['default'] ?? true])
-            ->class(['d-none d-sm-table-cell' => $column && $column->shouldCollapseOnMobile()])
-            ->class(['d-none d-md-table-cell' => $column && $column->shouldCollapseOnTablet()])
-            ->except('default')
-    }}>{{ $slot }}</td>
+    <td
+        @if ($column->isClickable())
+            onclick="window.open('{{ $component->getTableRowUrl($row) }}', '{{ $component->getTableRowUrlTarget($row) ?? '_self' }}')"
+            style="cursor:pointer"
+        @endif
+
+        {{
+            $attributes->merge($customAttributes)
+                ->class(['' => $customAttributes['default'] ?? true])
+                ->class(['d-none d-sm-table-cell' => $column && $column->shouldCollapseOnMobile()])
+                ->class(['d-none d-md-table-cell' => $column && $column->shouldCollapseOnTablet()])
+                ->except('default')
+        }}
+    >
+        {{ $slot }}
+    </td>
 @endif

resources/views/components/table/tr.blade.php

@@ -19,6 +19,7 @@
             $attributes->merge($customAttributes)
                 ->class(['bg-white dark:bg-gray-700 dark:text-white' => ($customAttributes['default'] ?? true) && $rowIndex % 2 === 0])
                 ->class(['bg-gray-50 dark:bg-gray-800 dark:text-white' => ($customAttributes['default'] ?? true) && $rowIndex % 2 !== 0])
+                ->class(['cursor-pointer' => $component->hasTableRowUrl()])
                 ->except('default')
         }}
     >
@@ -27,7 +28,7 @@
 @elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
     <tr
         wire:loading.class.delay=""
-
+        
         @if ($component->reorderIsEnabled() && $component->currentlyReorderingIsEnabled())
             wire:sortable.item="{{ $row->getKey() }}"
         @endif

src/Traits/ComponentUtilities.php

@@ -26,6 +26,8 @@ trait ComponentUtilities
     protected array $tbodyAttributes = [];
     protected $thAttributesCallback;
     protected $trAttributesCallback;
+    protected $trUrlCallback;
+    protected $trUrlTargetCallback;
     protected $tdAttributesCallback;
     protected $collapsingColumnsStatus = true;
     protected string $emptyMessage = 'No items found. Try to broaden your search.';

src/Traits/Configuration/ComponentConfiguration.php

@@ -261,4 +261,23 @@ public function setCollapsingColumnsDisabled(): self
 
         return $this;
     }
+
+
+
+
+
+
+    public function setTableRowUrl(callable $callback): self
+    {
+        $this->trUrlCallback = $callback;
+
+        return $this;
+    }
+
+    public function setTableRowUrlTarget(callable $callback): self
+    {
+        $this->trUrlTargetCallback = $callback;
+
+        return $this;
+    }
 }

src/Traits/Helpers/ComponentHelpers.php

@@ -275,4 +275,22 @@ public function collapsingColumnsAreDisabled(): bool
     {
         return $this->getCollapsingColumnsStatus() === false;
     }
+
+
+
+
+    public function hasTableRowUrl(): bool
+    {
+        return $this->trUrlCallback !== null;
+    }
+
+    public function getTableRowUrl($row): ?string
+    {
+        return $this->trUrlCallback ? call_user_func($this->trUrlCallback, $row) : null;
+    }
+
+    public function getTableRowUrlTarget($row): ?string
+    {
+        return $this->trUrlTargetCallback ? call_user_func($this->trUrlTargetCallback, $row) : null;
+    }
 }

src/Views/Column.php

@@ -4,6 +4,7 @@
 
 use Illuminate\Support\Str;
 use Rappasoft\LaravelLivewireTables\DataTableComponent;
+use Rappasoft\LaravelLivewireTables\Views\Columns\LinkColumn;
 use Rappasoft\LaravelLivewireTables\Views\Traits\Configuration\ColumnConfiguration;
 use Rappasoft\LaravelLivewireTables\Views\Traits\Helpers\ColumnHelpers;
 use Rappasoft\LaravelLivewireTables\Views\Traits\Helpers\RelationshipHelpers;
@@ -53,6 +54,7 @@ class Column
     protected $secondaryHeaderCallback;
     protected bool $footer = false;
     protected $footerCallback;
+    protected bool $clickable = true;
 
     /**
      * @param  string  $title

src/Views/Traits/Configuration/ColumnConfiguration.php

@@ -176,4 +176,13 @@ public function footer($callback = null): self
 
         return $this;
     }
+
+
+
+    public function unclickable(): self
+    {
+        $this->clickable = false;
+
+        return $this;
+    }
 }

src/Views/Traits/Helpers/ColumnHelpers.php

@@ -509,4 +509,14 @@ public function arrayToAttributes(array $attributes)
             return $key . '="' . $attributes[$key] . '"';
         }, array_keys($attributes)));
     }
+
+
+
+
+    public function isClickable(): bool
+    {
+        return $this->clickable && 
+            $this->component->hasTableRowUrl() &&
+            ! $this instanceof LinkColumn;
+    }
 }