added table class and row parameter

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

@@ -12,20 +12,28 @@
 }
 
 .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;
+.dataTable tbody td {
+  vertical-align: middle;
   text-align: center;
-  font-size: 12px;
+}
+
+.table thead:first-child tr:first-child th {
+  border-top: 1px solid #ddd;
+}
+
+.table thead th {
+    vertical-align: middle;
+    border-bottom: 1px solid #b7b7b7;
+}
+
+.dataTable thead th {
+  padding-right: 2.5rem;
+  font-weight: 500;
+  padding: .75rem 1.25rem;
 }
 
 .dataTable {
@@ -41,7 +49,7 @@
   opacity: 0;
   overflow-y: hidden;
 }
-.PhoenixTable
+.LimitlessTable
 {
   display: none;
 }

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

 // define function
-function phoenix_init_datatable() {
+function limitless_init_datatable() {
 
 	// counter for datatables
 	var DatatableCounter = 0;
 
 	// scann for each datatable
-	$('.PhoenixTable').each(function () {
+	$('.LimitlessTable').each(function () {
 
 		// count table
 		DatatableCounter++;
@@ -20,15 +20,18 @@ function phoenix_init_datatable() {
 		var DatatableCounter = 0;
 
 		// scann for each datatable
-		$('.PhoenixTable').each(function () {
+		$('.LimitlessTable').each(function () {
 
 			// count table
 			DatatableCounter++;
 
+			var currentClass = $(this).attr('class');
+			currentClass = currentClass.replace('LimitlessTable','');
+
 			// 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">' +
+				'<table id="Datatable' + DatatableCounter + '" class="display table datatable ' + currentClass + '">' +
 				$(this).html() +
 				'</table>' +
 				'</div>';
@@ -136,7 +139,7 @@ function phoenix_init_datatable() {
 						$('#DatatableFader' + callbbackid).css("min-height", "auto");
 
 						// confirmation
-						phoenix_init_confirmation();
+						limitless_init_confirmation();
 					});
 
 				}
@@ -146,4 +149,4 @@ function phoenix_init_datatable() {
 	}, 300);
 }
 
-$(document).ready(phoenix_init_datatable);
+$(document).ready(limitless_init_datatable);

resources/views/welcome.blade.php

@@ -28,8 +28,10 @@
 {{-- Content --}}
 @section('limitless::content')
 
+    @limitless::card('First Card')
+
       {{-- Table Design --}}
-    @limitless::table
+      @limitless::table(['class' => 'table-striped table-bordered', 'rows' => 10])
       <thead>
         {{-- Define header Here --}}
         {{-- Column options
@@ -57,4 +59,6 @@
       </tbody>
       @limitless::endtable
 
+    @limitless::endcard
+
 @endsection

routes/web.php

@@ -32,6 +32,102 @@ Route::get('/', function ()
         'last_name' => 'Galon',
         'email' => 'michael.galon@itmax.email',
       ],
+      [
+        'id' => 3,
+        'first_name' => 'Mike',
+        'last_name' => 'Galon',
+        'email' => 'michael.galon@itmax.email',
+      ],
+      [
+        'id' => 3,
+        'first_name' => 'Mike',
+        'last_name' => 'Galon',
+        'email' => 'michael.galon@itmax.email',
+      ],
+      [
+        'id' => 3,
+        'first_name' => 'Mike',
+        'last_name' => 'Galon',
+        'email' => 'michael.galon@itmax.email',
+      ],
+      [
+        'id' => 3,
+        'first_name' => 'Mike',
+        'last_name' => 'Galon',
+        'email' => 'michael.galon@itmax.email',
+      ],
+      [
+        'id' => 3,
+        'first_name' => 'Mike',
+        'last_name' => 'Galon',
+        'email' => 'michael.galon@itmax.email',
+      ],
+      [
+        'id' => 3,
+        'first_name' => 'Mike',
+        'last_name' => 'Galon',
+        'email' => 'michael.galon@itmax.email',
+      ],
+      [
+        'id' => 3,
+        'first_name' => 'Mike',
+        'last_name' => 'Galon',
+        'email' => 'michael.galon@itmax.email',
+      ],
+      [
+        'id' => 3,
+        'first_name' => 'Mike',
+        'last_name' => 'Galon',
+        'email' => 'michael.galon@itmax.email',
+      ],
+      [
+        'id' => 3,
+        'first_name' => 'Mike',
+        'last_name' => 'Galon',
+        'email' => 'michael.galon@itmax.email',
+      ],
+      [
+        'id' => 3,
+        'first_name' => 'Mike',
+        'last_name' => 'Galon',
+        'email' => 'michael.galon@itmax.email',
+      ],
+      [
+        'id' => 3,
+        'first_name' => 'Mike',
+        'last_name' => 'Galon',
+        'email' => 'michael.galon@itmax.email',
+      ],
+      [
+        'id' => 3,
+        'first_name' => 'Mike',
+        'last_name' => 'Galon',
+        'email' => 'michael.galon@itmax.email',
+      ],
+      [
+        'id' => 3,
+        'first_name' => 'Mike',
+        'last_name' => 'Galon',
+        'email' => 'michael.galon@itmax.email',
+      ],
+      [
+        'id' => 3,
+        'first_name' => 'Mike',
+        'last_name' => 'Galon',
+        'email' => 'michael.galon@itmax.email',
+      ],
+      [
+        'id' => 3,
+        'first_name' => 'Mike',
+        'last_name' => 'Galon',
+        'email' => 'michael.galon@itmax.email',
+      ],
+      [
+        'id' => 3,
+        'first_name' => 'Mike',
+        'last_name' => 'Galon',
+        'email' => 'michael.galon@itmax.email',
+      ],
     ];
     return view('welcome', compact('users'));
 });