ready

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "workbench.colorTheme": "Monokai Dimmed"
+}

README.md

@@ -5,7 +5,17 @@
 [![Quality Score](https://img.shields.io/scrutinizer/g/mediconesystems/livewire-datatables.svg?style=flat-square)](https://scrutinizer-ci.com/g/mediconesystems/livewire-datatables)
 [![Total Downloads](https://img.shields.io/packagist/dt/mediconesystems/livewire-datatables.svg?style=flat-square)](https://packagist.org/packages/mediconesystems/livewire-datatables)
 
-Advanced datatable with sorting, filtering, searching ...
+### Features
+- Use a model or query builder to supply data
+- Mutate and format fields using preset or cutom callbacks
+- Sort data using field or computed field
+- Filter using booleans, times, dates, selects or free text
+- Show / hide columns
+
+## Requirements
+- [Laravel 7.x](https://laravel.com/docs/7.x)
+- [Livewire 1.x](https://laravel-livewire.com/)
+
 
 ## Installation
 
@@ -17,25 +27,56 @@ composer require mediconesystems/livewire-datatables
 
 ## Basic Usage
 
-``` php
-<?php
-
-namespace App\Http\Livewire;
+- Use the ```livewire-datatables``` component in your blade view, and pass in a model:
+```html
+...
 
-use App\User;
-use Livewire\Component;
-use Mediconesystems\LivewireDatatables\Traits\LivewireDatatable;
+<livewire:livewire-datatables model="App\User" />
 
-class UsersTable extends Component
-{
-    use LivewireDatatable;
+...
+```
 
-    public function model()
-    {
-        return User::class;
-    }
-}
+## Modifying Fields
+- There are many ways to modify the table by passing additional properties into the component:
+```html
+<livewire:livewire-datatable
+    model="App\User"
+    :hide-show="true"
+    :except="['users.updated_at', 'users.email_verified_at']"
+    :uppercase="['users.id', 'users.dob']"
+    :truncate="['users.bio']"
+    :formatDates="['users.dob']"
+    :dateFilters="['users.dob']"
+    :rename="['users.created_at' => 'Created']"
+/>
 ```
+| Property | Accepts | Result |
+|----|----|----|
+|**hide-show**|*Boolean* default: *false*|Panel of buttons to show/hide columns in table is removed if this is ```true```|
+|**except**|*Array* of column definitions|columns are excluded from table|
+|**uppercase**|*Array* of column definitions|field names are capitalised. Useful for ID fields or abbreviations|
+|**truncate**|*Array* of column definitions|field values are truncated, the whole text can be seen in tooltip on hover|
+|**formatDates**|*Array* of column definitions|field values are formatted as per the default date format|
+|**dateFilters**|*Array* of column definitions|Date filters are made available on the table for these fields|
+|**rename**|*Associative Array* of column definitions and desired name|Applies custom field names|
+
+
+
+
+
+
+
+
+
+
+- To get more control over the table, create a new livewire component that extends ```Mediconesystems\LivewireDatatables\LivewireDatatable```
+
+    (if you use the ```livewire:make``` artisan command you can delete the blade view file)
+
+- The new compnent must have a
+
+
+
 
 ### Testing
 

composer.json

@@ -17,7 +17,8 @@
     ],
     "require": {
         "php": "^7.2.5",
-        "illuminate/support": "^7.0"
+        "illuminate/support": "^7.0",
+        "livewire/livewire": "^1.2"
     },
     "require-dev": {
         "orchestra/testbench": "^4.0|5.0",

config/livewire-datatables.php

@@ -0,0 +1,8 @@
+<?php
+
+return [
+
+    'default_time_format' => 'H:i',
+    'default_date_format' => 'd/m/Y'
+
+];

resources/views/boolean.blade.php

@@ -0,0 +1,7 @@
+<div>
+@isset($value)
+    <x-icons.check-circle class="text-green-600 mx-auto" />
+@else
+    <x-icons.x-circle class="text-red-300 mx-auto" />
+@endisset
+</div>

resources/views/highlight.blade.php

@@ -0,0 +1 @@
+<span class="bg-yellow-100 py-1">{{ $slot }}</span>

resources/views/link.blade.php

@@ -0,0 +1 @@
+<a href="{{ $href }}" class="border-2 border-transparent hover:border-blue-500 hover:bg-blue-100 hover:shadow-lg text-blue-600 rounded-lg px-3 py-1">{{ $slot }}</a>

resources/views/tooltip.blade.php

@@ -0,0 +1,4 @@
+<span class="relative group cursor-pointer">
+    <span class="inline-block flex items-center">{{ Str::limit($slot, $length) }}</span>
+    <span class="hidden group-hover:block absolute z-10 -ml-28 w-96 mt-2 p-2 text-xs whitespace-pre-wrap rounded-lg bg-gray-100 border border-gray-300 shadow-xl text-gray-700 text-left whitespace-normal">{{ $slot }}</span>
+</span>

src/Field.php

@@ -2,20 +2,26 @@
 
 namespace Mediconesystems\LivewireDatatables;
 
-use Illuminate\Database\Eloquent\Model;
 use Illuminate\Support\Str;
+use Illuminate\Support\Facades\DB;
 
 class Field
 {
     public $name;
     public $column;
+    public $raw;
+    public $globalSearch;
+    public $sort;
+    public $defaultSort;
     public $callback;
     public $selectFilter;
     public $booleanFilter;
     public $textFilter;
+    public $numberFilter;
     public $dateFilter;
     public $timeFilter;
     public $hidden;
+    public $params = [];
 
 
     public static function fromColumn($column)
@@ -27,6 +33,16 @@ public static function fromColumn($column)
         return $field;
     }
 
+    public static function fromRaw($raw)
+    {
+        $field = new static;
+        $field->raw = $raw;
+        $field->name = (string) Str::of($raw)->afterLast(' AS ')->replace('`', '');
+        $field->sort = DB::raw((string) Str::of($raw)->beforeLast(' AS '));
+
+        return $field;
+    }
+
     public static function fromScope($scope, $alias)
     {
         $field = new static;
@@ -51,6 +67,24 @@ public function name($name)
         return $this;
     }
 
+    public function sortBy($column)
+    {
+        $this->sort = $column;
+        return $this;
+    }
+
+    public function defaultSort($direction = 'desc')
+    {
+        $this->defaultSort = $direction;
+        return $this;
+    }
+
+    public function globalSearch()
+    {
+        $this->globalSearch = true;
+        return $this;
+    }
+
     public function withSelectFilter($selectFilter)
     {
         $this->selectFilter = $selectFilter;
@@ -82,6 +116,12 @@ public function withTextFilter()
         return $this;
     }
 
+    public function withNumberFilter($range)
+    {
+        $this->numberFilter = $range;
+        return $this;
+    }
+
     public function withDateFilter()
     {
         $this->dateFilter = true;
@@ -100,35 +140,42 @@ public function formatBoolean()
         return $this;
     }
 
-    public function linkTo($model)
+    public function linkTo($model, $pad)
     {
         $this->callback = 'makeLink';
-        $this->params = $model;
+        $this->params = func_get_args();
         return $this;
     }
 
-    public function formatDate($format = 'd/m/Y')
+    public function truncate($length = 16)
+    {
+        $this->callback = 'truncate';
+        $this->params = [$length];
+        return $this;
+    }
+
+    public function formatDate($format = null)
     {
         $this->callback = 'formatDate';
-        $this->params = $format;
+        $this->params = func_get_args();
         return $this;
     }
 
-    public function formatTime($format = 'H:i')
+    public function formatTime($format = null)
     {
         $this->callback = 'formatTime';
-        $this->params = $format;
+        $this->params = func_get_args();
         return $this;
     }
 
     public function round($precision = 0)
     {
         $this->callback = 'round';
-        $this->params = $precision;
+        $this->params = func_get_args();
         return $this;
     }
 
-    public function callback($callback, $params = null)
+    public function callback($callback, $params = [])
     {
         $this->callback = $callback;
         $this->params = $params;
@@ -142,6 +189,11 @@ public function hidden()
         return $this;
     }
 
+    public function toggleHidden()
+    {
+        $this->hidden = !$this->hidden();
+    }
+
     public function toArray()
     {
         return get_object_vars($this);