added table-design

public/limitless/Template/global_assets/css/datatable.css

+.table.dataTable.no-footer {
+  border: 0px!important;
+}
+
+.DatatableSearch {
+  border: 1px solid #888888;
+}
+
+.DatatableFilter {
+  border: 1px solid #888888;
+  margin: 5px;
+}
+
+.dataTable tbody td {
+  padding: 5px 5px !important;
+  vertical-align: middle;
+  font-size: 12px;
+  text-align: center;
+}
+
+.dataTable thead th {
+  white-space: nowrap;
+  background-color: #29363d;
+  color: #ffffff;
+  border: 1px solid #29363d;
+  border-bottom: 0px!important;
+  text-align: center;
+  font-size: 12px;
+}
+
+.dataTable {
+  border-collapse: collapse!important;
+}
+
+.c8tableBody {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.DatatableFader {
+  opacity: 0;
+  overflow-y: hidden;
+}
+.PhoenixTable
+{
+  display: none;
+}

public/limitless/Template/global_assets/js/datatable.js

+// define function
+function phoenix_init_datatable() {
+
+	// counter for datatables
+	var DatatableCounter = 0;
+
+	// scann for each datatable
+	$('.PhoenixTable').each(function () {
+
+		// count table
+		DatatableCounter++;
+
+		// loading bar
+		$(this).before('<div id="DatatableLoader' + DatatableCounter + '"><br/><center><b>[ LADE DATEN... ]</b></center><br/></div>');
+
+	});
+
+	setTimeout(function () {
+		// reset counter for datatables
+		var DatatableCounter = 0;
+
+		// scann for each datatable
+		$('.PhoenixTable').each(function () {
+
+			// count table
+			DatatableCounter++;
+
+			// create replacement
+			var NewHtml = '' +
+				'<div id="DatatableFader' + DatatableCounter + '" class="DatatableFader" style="height:0px;">' +
+				'<table id="Datatable' + DatatableCounter + '" class="display table table-striped table-bordered datatable">' +
+				$(this).html() +
+				'</table>' +
+				'</div>';
+
+			// transport code to html
+			$(this).replaceWith(NewHtml);
+
+			// render setup parameter
+			var counter = 0;
+			var sort = [];
+			var orderable = [];
+			$('#Datatable' + DatatableCounter).find('th').each(function () {
+				// define sort
+				if ($(this).attr('Sort') != undefined) {
+					sort = [
+						[counter, $(this).attr('Sort')]
+					];
+				}
+
+				// orderable
+				if ($(this).attr('Sortable') == "false") {
+					orderable.push({
+						"orderable": false,
+						"targets": counter
+					});
+				}
+
+				// searchable
+				if ($(this).attr('Serachable') != "true") {
+					orderable.push({
+						"searchable": false,
+						"targets": counter
+					});
+				}
+
+
+				// counter
+				counter++;
+			});
+
+			// rows
+			var rows = $(this).attr('rows');
+			if (rows == undefined) {
+				rows = 10;
+			}
+
+			// check entry count
+			if ($('#Datatable' + DatatableCounter).children('tbody').children('tr').length > rows) {
+				var Complex = true;
+			} else {
+				var Complex = false;
+			}
+
+			// activate datatable
+			$('#Datatable' + DatatableCounter).dataTable({
+				'dom': '<"c8tableTools01"Bf><"c8tableBody"t><"c8tableTools02"lipr>',
+                "fixedHeader": true,
+				'autoWidth': true,
+				'pageLength': parseInt(rows),
+				"order": sort,
+				"paging": Complex,
+				"searching": Complex,
+				"info": Complex,
+				"columnDefs": orderable,
+				"language": {
+					"url": "//cdn.datatables.net/plug-ins/1.10.19/i18n/German.json"
+				},
+				"lengthMenu": [
+					[rows, 10, 25, 50, 100, 500, -1],
+					['Standard (' + rows + ')', 10, 25, 50, 100, 500, "Alle"]
+				],
+				"drawCallback": function (settings) {
+
+
+					// calculate height for animation
+					var height = $('#' + settings.sTableId).parents('.dataTables_wrapper').first().height() + 10;
+
+
+					// add classes to filter and select dropdown
+					$('.dataTables_filter input').addClass('DatatableSearch');
+					$('.dataTables_length label select').addClass('DatatableFilter');
+					$('.dataTables_info').addClass('d-none d-lg-block d-md-block');
+					$('.dataTables_length').addClass('d-none d-lg-block d-md-block');
+
+					// get int from callback
+					var callbbackid = settings.sTableId.replace(/[^\d.]/g, '');
+
+					// remove loader
+					$('#DatatableLoader' + callbbackid).remove();
+
+					// break after inti
+					if ($('#DatatableFader' + callbbackid).css("opacity") == 1) {
+						return false;
+					}
+
+					// scale up table
+					$('#DatatableFader' + callbbackid).animate({
+						'opacity': '1',
+						'min-height': height
+					}, 300, function () {
+
+
+						// fix height for responsible design
+						$('#DatatableFader' + callbbackid).css("height", "auto");
+						$('#DatatableFader' + callbbackid).css("min-height", "auto");
+
+						// confirmation
+						phoenix_init_confirmation();
+					});
+
+				}
+			});
+		});
+
+	}, 300);
+}
+
+$(document).ready(phoenix_init_datatable);

resources/views/welcome.blade.php

+{{-- Master --}}
+@extends('limitless::master')
+
+{{-- Basics --}}
+@section('limitless::title', 'Limitless Design')
+@section('limitless::titleurl', 'https://google.de')
+@section('limitless::language', 'en')
+@section('limitless::largelogo', 'https://cdn.backoffice.online/limitless/Template/global_assets/images/logo_light.png')
+@section('limitless::smalllogo', 'https://cdn.backoffice.online/limitless/Template/global_assets/images/logo_icon_light.png')
+@section('limitless::mobilelogo', 'https://cdn.backoffice.online/limitless/Template/global_assets/images/logo_dark.png')
+
+{{-- Assets --}}
+@section('limitless::assets')
+
+    {{-- Javascript --}}
+    <script src="@limitless::publish( base_path().'/resources/views/example/example.js' )"></script>
+
+    {{-- Stylesheet--}}
+    <link rel="stylesheet" href="@limitless::publish( base_path().'/resources/views/example/example.css' )">
+
+    {{-- Inline --}}
+    <script>
+        console.log('Add some custom javascript here...');
+    </script>
+
+@endsection
+
+{{-- Content --}}
+@section('limitless::content')
+
+    {{-- Table Design --}}
+    @limitless::table
+    <thead>
+      {{-- Define header Here --}}
+      <tr>
+          <th Sortable="false">ID</th>
+          <th Serachable="true">First Name</th>
+          <th Serachable="true">Last Name</th>
+          <th Sort="desc">Email</th>
+      </tr>
+    </thead>
+    <tbody>
+      {{-- Loop into your rows here --}}
+      @foreach($users as $key => $user)
+      <tr>
+          <td>{{ $user['id'] ?? '' }}</td>
+          <td>{{ $user['first_name'] ?? '' }}</td>
+          <td>{{ $user['last_name'] ?? '' }}</td>
+          <td>{{ $user['email'] ?? '' }}</td>
+      </tr>
+      @endforeach
+    </tbody>
+    @limitless::endtable
+
+@endsection

routes/web.php

@@ -13,5 +13,25 @@
 
 Route::get('/', function ()
 {
-    echo "Hello World";
+    $users = [
+      [
+        'id' => 1,
+        'first_name' => 'Marco',
+        'last_name' => 'Schmiedel',
+        'email' => 'schmiedel@itmax.email',
+      ],
+      [
+        'id' => 2,
+        'first_name' => 'Antonio',
+        'last_name' => 'Norato',
+        'email' => 'norato@itmax.email',
+      ],
+      [
+        'id' => 3,
+        'first_name' => 'Mike',
+        'last_name' => 'Galon',
+        'email' => 'michael.galon@itmax.email',
+      ],
+    ];
+    return view('welcome', compact('users'));
 });