Merge branch 'feature-1.0.0' of https://github.com/DeltaSystems/laravel-livewire-tables into DeltaSystems-feature-1.0.0

# Conflicts:
#	resources/views/tailwind/datatable.blade.php

- Use HtmlString renderer
- Use table cell component in row-columns
- Add URL as prop to row click
- Add row hover if row url is enabled
- Update readme

Author: rappasoft

README.md

@@ -33,7 +33,7 @@ php artisan vendor:publish --provider="Rappasoft\LaravelLivewireTables\LaravelLi
 
 ### Creating Tables
 
-To create the most basic of a table, you need a new Livewire component that extends the DataTable component, and you need to define a list of a columns, the base query, and the view that renders an individual row.
+To create the most basic of a table, you need a new Livewire component that extends the DataTable component, and you need to define a list of a columns and a base query.
 
 Example:
 
@@ -52,13 +52,13 @@ class Table extends DataTableComponent
     public function columns(): array
     {
         return [
-            Column::make('type', 'Type')
+            Column::make('Type')
                 ->sortable()
                 ->multiColumn(),
-            Column::make('name', 'Name')
+            Column::make('Name')
                 ->sortable()
                 ->multiColumn(),
-            Column::make('permissions', 'Permissions'),
+            Column::make('Permissions'),
             Column::blank(),
         ];
     }
@@ -67,18 +67,49 @@ class Table extends DataTableComponent
     {
         return Role::query();
     }
-
-    public function rowView(): string
-    {
-         return 'location.to.my.row.view';
-    }
 }
 ```
 
 ### Creating rows
 
+By default, the rows will be generated by the column name, so if you have a users table, and the column is 'type', the cell generated for that column will be `$row['type']`.
+
+If you would like to format the cell inline, you can use the format helper:
+
+```php
+Column::make('Name')
+    ->sortable()
+    ->multiColumn()
+    ->format(function($value) {
+        return timezone()->convertToLocal($value);
+    }),
+```
+
+**Note:** If you need more control, the full parameter list for the format callback is `$value, $column, $row`.
+
+If you would like to render HTML from the format method, you may call `asHtml` on the column.
+
+```php
+Column::make('Name')
+    ->sortable()
+    ->multiColumn()
+    ->format(function($value) {
+        return '<strong>'.timezone()->convertToLocal($value).'</strong>';
+    })
+    ->asHtml(),
+```
+
+If you would like full control over your rows without using the Column formatter, than you can define a `rowView` and return the string to the view to render the rows. The view will be passed the current $row.
+
 **row.blade.php**
 
+```php
+public function rowView(): string
+{
+     return 'location.to.my.row.view';
+}
+```
+
 ```html
 <x-livewire-tables::table.cell>
     {{ ucfirst($row->type) }}
@@ -109,7 +140,18 @@ class Table extends DataTableComponent
 
 The row view will be passed the current model named as **$row**.
 
-### Using the included blade components:
+#### Making the table row clickable
+
+Add this method to your component if you would like to be able to click a row to go to a URL:
+
+```php
+public function getTableRowUrl($row): string
+{
+    return route('my.edit.route', $row);
+}
+```
+
+### Using the included blade components in the row view:
 
 To create cells, you should use the `<x-livewire-tables::table.cell>` table cell component, which will be rendered to:
 
@@ -131,14 +173,14 @@ A list of all available methods are displayed below:
 public function columns(): array
     {
         return [
-            Column::make('type', 'Type') // Column name and heading label
+            Column::make('Type') // Column text and optional column name, column name will be snake case of text if not defined
                 ->sortable() // Whether or not the heading can be clicked to sort
                 ->multiColumn(),
-            Column::make('name', 'Name')
+            Column::make('Name')
                 ->sortable()
                 ->multiColumn(),
-            Column::make('permissions', 'Permissions'),
-            Column::make('other', 'Other')
+            Column::make('Permissions'),
+            Column::make('Other', 'my_other_column')
                 ->sortable() // Allows the column to interact with the sorting methods
                 ->multiColumn() // Adds visual cues for multi sorting this column with other columns
                 ->addClass('hidden md:table-cell'), // Adds to the existing class list
@@ -419,25 +461,25 @@ class UsersTable extends DataTableComponent
     public function columns(): array
     {
         return [
-            Column::make('type', 'Type')
+            Column::make('Type')
                 ->sortable()
                 ->multiColumn()
                 ->addClass('hidden md:table-cell'),
-            Column::make('name', 'Name')
+            Column::make('Name')
                 ->sortable()
                 ->multiColumn(),
-            Column::make('email', 'E-mail')
+            Column::make('E-mail', 'email')
                 ->sortable()
                 ->multiColumn(),
-            Column::make('active', 'Active')
+            Column::make('Active')
                 ->sortable()
                 ->multiColumn()
                 ->addClass('hidden md:table-cell'),
-            Column::make('email_verified_at', 'Verified')
+            Column::make('Verified', 'email_verified_at')
                 ->sortable()
                 ->multiColumn()
                 ->addClass('hidden md:table-cell'),
-            Column::make('two_factor_secret', '2FA')
+            Column::make('2FA', 'two_factor_secret')
                 ->sortable()
                 ->multiColumn()
                 ->addClass('hidden md:table-cell'),

resources/views/tailwind/components/table/row-columns.blade.php

@@ -0,0 +1,9 @@
+@foreach($columns as $column)
+    <x-livewire-tables::table.cell>
+        @if ($column->asHtml)
+            {{ new \Illuminate\Support\HtmlString($column->formatted($row)) }}
+        @else
+            {{ $column->formatted($row) }}
+        @endif
+    </x-livewire-tables::table.cell>
+@endforeach

resources/views/tailwind/components/table/row.blade.php

@@ -1,3 +1,12 @@
-<tr {{ $attributes->merge(['class' => 'bg-white']) }}>
+@props(['url' => null])
+
+<tr
+    {{ $attributes->merge(['class' => 'bg-white']) }}
+
+    @if ($url)
+        onclick="window.location='{{ $url }}';"
+        style="cursor:pointer"
+    @endif
+>
     {{ $slot }}
 </tr>

resources/views/tailwind/includes/table.blade.php

@@ -65,7 +65,8 @@ class="ml-1 text-blue-600 underline text-cool-gray-700 text-sm leading-5 font-me
             <x-livewire-tables::table.row
                 wire:loading.class.delay="opacity-50"
                 wire:key="table-row-{{ $row->getKey() }}"
-                class="{{ $index % 2 === 0 ? 'bg-white' : 'bg-gray-50' }}"
+                :url="method_exists($this, 'getTableRowUrl') ? $this->getTableRowUrl($row) : null"
+                :class="$index % 2 === 0 ? 'bg-white' . (method_exists($this, 'getTableRowUrl') ? ' hover:bg-gray-100' : '') : 'bg-gray-50' . (method_exists($this, 'getTableRowUrl') ? ' hover:bg-gray-100' : '')"
             >
                 @if (count($bulkActions))
                     <x-livewire-tables::table.cell>
@@ -80,7 +81,7 @@ class="rounded-md shadow-sm border-cool-gray-300 block transition duration-150 e
                     </x-livewire-tables::table.cell>
                 @endif
 
-                @include($rowView, ['row' => $row])
+                @include($rowView)
             </x-livewire-tables::table.row>
         @empty
             <x-livewire-tables::table.row>

src/DataTableComponent.php

@@ -119,13 +119,6 @@ abstract public function columns(): array;
      */
     abstract public function query(): Builder;
 
-    /**
-     * The view to render each row of the table.
-     *
-     * @return string
-     */
-    abstract public function rowView(): string;
-
     /**
      * TableComponent constructor.
      *
@@ -164,6 +157,16 @@ public function getRowsProperty(): LengthAwarePaginator
         return $this->applyPagination($this->rowsQuery);
     }
 
+    /**
+     * The view to render each row of the table.
+     *
+     * @return string
+     */
+    public function rowView(): string
+    {
+        return 'livewire-tables::'.config('livewire-tables.theme').'.components.table.row-columns';
+    }
+
     /**
      * @return mixed
      */

src/Views/Column.php

@@ -2,6 +2,8 @@
 
 namespace Rappasoft\LaravelLivewireTables\Views;
 
+use Illuminate\Support\Str;
+
 /**
  * Class Column.
  */
@@ -37,17 +39,32 @@ class Column
      */
     public bool $blank = false;
 
+    /**
+     * @var
+     */
+    public $formatCallback;
+
+    /**
+     * @var bool
+     */
+    public bool $asHtml = false;
+
     /**
      * Column constructor.
      *
      * @param string|null $column
      * @param string|null $text
      */
-    public function __construct(string $column = null, string $text = null)
+    public function __construct(string $text = null, string $column = null)
     {
-        $this->column = $column;
         $this->text = $text;
 
+        if (! $column && $text) {
+            $this->column = Str::snake($text);
+        } else {
+            $this->column = $column;
+        }
+
         if (! $this->column && ! $this->text) {
             $this->blank = true;
         }
@@ -59,9 +76,9 @@ public function __construct(string $column = null, string $text = null)
      *
      * @return Column
      */
-    public static function make(string $column = null, string $text = null): Column
+    public static function make(string $text = null, string $column = null): Column
     {
-        return new static($column, $text);
+        return new static($text, $column);
     }
 
     /**
@@ -128,6 +145,16 @@ public function addClass(string $class): self
         return $this;
     }
 
+    /**
+     * @return Column
+     */
+    public function asHtml(): Column
+    {
+        $this->asHtml = true;
+
+        return $this;
+    }
+
     /**
      * @return string|null
      */
@@ -151,4 +178,41 @@ public function text(): ?string
     {
         return $this->text;
     }
+
+    /**
+     * @param  callable  $callable
+     *
+     * @return $this
+     */
+    public function format(callable $callable): Column
+    {
+        $this->formatCallback = $callable;
+
+        return $this;
+    }
+
+    /**
+     * @param $row
+     * @param  null  $column
+     *
+     * @return array|mixed|null
+     */
+    public function formatted($row, $column = null)
+    {
+        if ($column instanceof self) {
+            $columnName = $column->column();
+        } elseif (is_string($column)) {
+            $columnName = $column;
+        } else {
+            $columnName = $this->column();
+        }
+
+        $value = data_get($row, $columnName);
+
+        if ($this->formatCallback) {
+            return app()->call($this->formatCallback, ['value' => $value, 'column' => $column, 'row' => $row]);
+        }
+
+        return $value;
+    }
 }