Merge branch 'upstream/master' into introduce-summary-row

Author: Herbert Maschke

README.md

@@ -52,7 +52,7 @@ somewhere in your CSS
 ```html
 ...
 
-<livewire:datatable model="App\User" />
+<livewire:datatable model="App\User" name="all-my-users" />
 
 ...
 ```
@@ -62,11 +62,14 @@ somewhere in your CSS
 ```html
 <livewire:datatable
     model="App\User"
+    name="users"
     include="id, name, dob, created_at"
     dates="dob"
 />
 ```
 
+- *Attention*: Please note that having multiple datatables on the same page _or_ more than one datatable of the same type on different pages needs to have a unique `name` attribute assigned to each one so they do not conflict with each other as in the example above.
+
 ### Props
 | Property | Arguments | Result | Example |
 |----|----|----|----|
@@ -100,7 +103,6 @@ somewhere in your CSS
 
 ### Declare a public method ```columns``` that returns an array containing one or more ```Mediconesystems\LivewireDatatables\Column```
 
-
 ## Columns
 Columns can be built using any of the static methods below, and then their attributes assigned using fluent method chains.
 There are additional specific types of Column; ```NumberColumn```, ```DateColumn```, ```TimeColumn```, using the correct one for your datatype will enable type-specific formatting and filtering:

resources/views/livewire/datatables/header-inline-hide.blade.php

@@ -13,8 +13,8 @@ class="w-32 hidden group-hover:inline-block absolute z-10 top-0 left-0 ml-3 bg-b
         <path stroke-miterlimit="10" d="M313.66 206.75H.5V1.49l157.65 204.9L313.66 1.49v205.26z" />
     </svg>
 </div>
-<div
-    class="@if($column['hidden']) hidden @else relative h-12 overflow-hidden align-top flex table-cell @endif" @if (isset($column['width']))style="width:{{ $column['width'] }}"@endif>
+<div class="@if($column['hidden']) hidden @else relative h-12 overflow-hidden align-top flex table-cell @endif" @include('datatables::style-width')>
+
     @if($column['unsortable'])
         <div class="w-full h-full px-6 py-3 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider flex justify-between items-center focus:outline-none">
             <span class="inline flex-grow @if($column['align'] === 'right') text-right @elseif($column['align'] === 'center') text-center @endif"">{{ str_replace('_', ' ', $column['label']) }}</span>

resources/views/livewire/datatables/header-no-hide.blade.php

@@ -1,5 +1,5 @@
 @unless($column['hidden'])
-<div class="relative table-cell h-12 overflow-hidden align-top" @if (isset($column['width']))style="width:{{ $column['width'] }}"@endif>
+    <div class="relative table-cell h-12 overflow-hidden align-top" @include('datatables::style-width')>
     @if($column['unsortable'])
         <div class="w-full h-full px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider flex items-center focus:outline-none @if($column['align'] === 'right') justify-end @elseif($column['align'] === 'center') justify-center @endif">
             <span class="inline ">{{ str_replace('_', ' ', $column['label']) }}</span>

resources/views/livewire/datatables/style-width.blade.php

@@ -0,0 +1,3 @@
+@if (isset($column['width']))style="width:{{ $column['width'] }};"@endif
+@if (isset($column['minWidth']))style="min-width:{{ $column['minWidth'] }};"@endif
+@if (isset($column['maxWidth']))style="max-width:{{ $column['maxWidth'] }};"@endif

src/Column.php

@@ -4,10 +4,12 @@
 
 use Illuminate\Support\Facades\DB;
 use Illuminate\Support\Str;
+use Mediconesystems\LivewireDatatables\Http\Livewire\LivewireDatatable;
 
 class Column
 {
     public $type = 'string';
+    public $index = 0;
     public $label;
     public $name;
     public $select;
@@ -31,6 +33,8 @@ class Column
     public $align = 'left';
     public $preventExport;
     public $width;
+    public $minWidth;
+    public $maxWidth;
     public $exportCallback;
 
     /**
@@ -63,6 +67,18 @@ public static function name($name)
         return $column;
     }
 
+    public static function index(LivewireDatatable $datatable, $attribute = 'id')
+    {
+        $column = new static;
+        $column->name = $attribute;
+        $column->label = '#';
+        $column->callback = function () use ($datatable) {
+            return $datatable->page * $datatable->perPage - $datatable->perPage + $datatable->row++;
+        };
+
+        return $column;
+    }
+
     public static function raw($raw)
     {
         $column = new static;
@@ -133,6 +149,13 @@ public function disableSummary()
         return $this;
     }
 
+    public function setIndex($index)
+    {
+        $this->index = $index;
+
+        return $this;
+    }
+
     public function sortBy($column)
     {
         $this->sort = $column;
@@ -408,4 +431,34 @@ public function width($width)
 
         return $this;
     }
+
+    public function minWidth($minWidth)
+    {
+        if (preg_match('/^\\d*\\.?\\d+$/i', $minWidth) === 1) {
+            $minWidth .= 'px';
+        }
+
+        if (preg_match('/^(\\d*\\.?\\d+)\\s?(cm|mm|in|px|pt|pc|em|ex|ch|rem|vw|vmin|vmax|%+)$/i', $minWidth) === 0) {
+            return $this;
+        }
+
+        $this->minWidth = $minWidth;
+
+        return $this;
+    }
+
+    public function maxWidth($maxWidth)
+    {
+        if (preg_match('/^\\d*\\.?\\d+$/i', $maxWidth) === 1) {
+            $maxWidth .= 'px';
+        }
+
+        if (preg_match('/^(\\d*\\.?\\d+)\\s?(cm|mm|in|px|pt|pc|em|ex|ch|rem|vw|vmin|vmax|%+)$/i', $maxWidth) === 0) {
+            return $this;
+        }
+
+        $this->maxWidth = $maxWidth;
+
+        return $this;
+    }
 }

src/ColumnSet.php

@@ -26,15 +26,27 @@ public static function fromModelInstance($model)
         return new static(
             collect($model->getAttributes())->keys()->reject(function ($name) use ($model) {
                 return in_array($name, $model->getHidden());
-            })->map(function ($attribute) {
-                return Column::name($attribute);
+            })->map(function ($attribute, $index) {
+                return Column::name($attribute)->setIndex($index);
             })
         );
     }
 
     public static function fromArray($columns)
     {
-        return new static(collect($columns));
+        return new static(collect(static::squeezeIndex($columns)));
+    }
+
+    /**
+     * Takes an array of columns and squeezes the consecutive index inside each element.
+     */
+    public static function squeezeIndex($columns)
+    {
+        foreach ($columns as $index => $column) {
+            $column->setIndex($index);
+        }
+
+        return $columns;
     }
 
     public function include($include)