Adding Datatable livewire component

app/Http/Livewire/Datatable.php

@@ -0,0 +1,93 @@
+<?php
+
+namespace App\Http\Livewire;
+
+use Livewire\Component;
+use Livewire\WithPagination;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Support\Str;
+
+class Datatable extends Component
+{
+	use WithPagination, Traits\WithSort;
+
+	/**
+	 * Query string settings.
+	 */
+	protected $queryString = [
+		'sort' => ['except' => 'id'],
+		'dir' => ['except' => 'asc'],
+		'page' => ['except' => 1]
+	];
+
+	/**
+	 * Model to get data from.
+	 */
+	public $model;
+
+	/**
+	 * Array of columns to show
+	 */
+	public array $columns;
+
+	/**
+	 * What colums are sortable
+	 */
+	public array $sort_columns;
+
+	/**
+	 * Route for editing a record (if null, link is omitted)
+	 */
+	public $route_edit;
+
+	/**
+	 * Route for deleting a record (if null, link is omitted)
+	 */
+	public $route_delete;
+
+	/**
+	 * How many records should be displayed on one page.
+	 */
+	public int $itemsPerPage = 30;
+
+    public function mount(string $model, array $columns, array $sort_columns = [],
+		$default_sort = '', $route_delete = null, $route_edit = null)
+    {
+		$this->model = app()->make($model);
+		$this->sort = $default_sort;
+		$this->sort_columns = $sort_columns;
+		$this->route_edit = $route_edit;
+		$this->route_delete = $route_delete;
+    }
+
+    /**
+     * Render the datatable
+     */
+    public function render()
+    {
+		$query = $this->model->query();
+
+		// Check colums for "dot-notated" strings.
+		// as we want to eager load those relationships
+		foreach ($this->columns as $col => $_) {
+			$p = strrpos($col, '.');
+			if ($p !== false) {
+				$rel = substr($col, 0, $p);
+				$query->with($rel);
+			}
+		}
+
+		// Apply sorting.
+		$this->sortApply($query);
+
+		$items = $query->paginate($this->itemsPerPage);
+
+        return view('livewire.datatable', ['items' => $items]);
+    }
+
+	public function getRouteKeyProperty()
+	{
+		return Str::slug(get_class($this->model));
+	}
+}

resources/views/livewire/datatable.blade.php

@@ -0,0 +1,57 @@
+<div>
+
+    <table class="table-auto w-full">
+
+        <tr class="text-left border-b-2">
+            @foreach($columns as $key => $name)
+            <th class="border px-6 py-3 w-24">
+                @if (isset($sort_columns[$key]))
+                <div class="flex items-center justify-between cursor-pointer" wire:click="sort('{{ $key }}')">
+                    <span class="hover:underline">{{ __($name) }}</span>
+                    <x-sort-link name="{{ $key }}" :column="$sort" :dir="$dir" class="ml-2 text-gray-600 h-5" />
+                </div>
+                @else
+                {{ $name }}
+                @endif
+            </th>
+            @endforeach
+
+            @if($route_delete || $route_edit)
+            <th class="border px-6 py-3 w-4">{{ __('Actions') }}</th>
+            @endif
+        </tr>
+
+        <tbody>
+        @foreach($items as $item)
+        <tr class="odd:bg-gray-100">
+            @foreach(array_keys($columns) as $key)
+            <td class="border px-4 py-2">{{ Arr::get($item, $key) }}</td>
+            @endforeach
+
+            <td class="border px-4 py-2">
+                @if($route_edit)
+                <a href="{{ route($route_edit, [ $item ]) }}">
+                    <x-icon name="heroicon-o-pencil" class="inline-block w-6 text-yellow-500"/>
+                </a>
+                @endif
+
+                @if($route_delete)
+                <x-ignite-form class="inline-block" id="dt-delete-{{$_instance->id}}-{{ $item->id }}" method="DELETE" action="{{ route($route_delete, [ $item ]) }}">
+                <a href="javascript:document.getElementById('dt-delete-{{$_instance->id}}-{{ $item->id }}').submit();">
+                    <x-icon name="heroicon-o-trash" class="inline-block w-6 text-red-500"/>
+                </a>
+                </x-ignite-form>
+                @endif
+            </td>
+        </tr>
+        @endforeach
+        </tbody>
+    </table>
+
+    @if ($items->hasPages())
+    <div class="mt-4">
+        {{ $items->links() }}
+    </div>
+    @endif
+
+</div>