first init

resources/views/tables/gridjs.blade.php

@@ -0,0 +1,107 @@
+@extends('layouts.vertical', ['subtitle' => 'Grid JS'])
+
+@section('css')
+@vite(['node_modules/gridjs/dist/theme/mermaid.min.css'])
+@endsection
+
+@section('content')
+
+@include('layouts.partials/page-title', ['title' => 'Tables', 'subtitle' => 'Grid JS'])
+
+<div class="card">
+    <div class="card-header">
+        <h5 class="card-title">Basic</h5>
+        <p class="card-subtitle">The most basic list group is an unordered list with list items and the
+            proper classes. Build upon it with the options that follow, or with your own CSS as needed.
+        </p>
+    </div>
+    <div class="card-body">
+        <div>
+            <div id="table-gridjs"></div>
+        </div>
+    </div>
+</div>
+
+<div class="card">
+    <div class="card-header">
+        <h5 class="card-title">Pagination</h5>
+        <p class="text-muted mb-0">Pagination can be enabled by setting <code>pagination: true</code>:
+        </p>
+    </div>
+
+    <div class="card-body">
+        <div id="table-pagination"></div>
+    </div>
+</div>
+
+
+<div class="card">
+    <div class="card-header">
+        <h5 class="card-title">Search</h5>
+        <p class="text-muted mb-0">Grid.js supports global search on all rows and columns. Set
+            <code>search: true</code> to enable the search plugin:
+        </p>
+    </div>
+    <div class="card-body">
+        <div id="table-search"></div>
+    </div>
+</div>
+
+<div class="card">
+    <div class="card-header">
+        <h5 class="card-title">Sorting</h5>
+        <p class="text-muted mb-0">To enable sorting, simply add <code>sort: true</code> to your config:
+        </p>
+    </div>
+
+    <div class="card-body">
+        <div id="table-sorting"></div>
+    </div>
+</div>
+
+<div class="card">
+    <div class="card-header">
+        <h5 class="card-title">Loading State</h5>
+        <p class="text-muted mb-0">Grid.js renders a loading bar automatically while it waits for the
+            data to
+            be fetched. Here we are using an async
+            function to demonstrate this behaviour (e.g. an async function can be a XHR call to a server
+            backend)</p>
+    </div>
+    <div class="card-body">
+        <div id="table-loading-state"></div>
+    </div>
+</div>
+
+<div class="card">
+    <div class="card-header">
+        <h5 class="card-title">Fixed Header</h5>
+        <p class="text-muted mb-0">The most basic list group is an unordered list with list items and
+            the
+            proper classes. Build upon it with the options that follow, or with your own CSS as needed.
+        </p>
+    </div>
+
+    <div class="card-body">
+        <div id="table-fixed-header"></div>
+    </div>
+</div>
+
+<div class="card">
+    <div class="card-header">
+        <h5 class="card-title">Hidden Columns</h5>
+        <p class="text-muted mb-0">Add <code>hidden: true</code> to the columns definition to hide them.
+        </p>
+    </div>
+    <div class="card-body">
+        <div class="py-3">
+            <div id="table-hidden-column"></div>
+        </div>
+    </div>
+</div>
+
+@endsection
+
+@section('scripts')
+@vite(['resources/js/pages/table-gridjs.js'])
+@endsection