107 lines
3.0 KiB
PHP
Executable File
107 lines
3.0 KiB
PHP
Executable File
@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 |