3056 lines
155 KiB
PHP
Executable File
3056 lines
155 KiB
PHP
Executable File
@extends('layouts.master')
|
|
@section('title') @lang('translation.basic-tables') @endsection
|
|
@section('content')
|
|
@component('components.breadcrumb')
|
|
@slot('li_1') Tables @endslot
|
|
@slot('title') Basic Tables @endslot
|
|
@endcomponent
|
|
<div class="row">
|
|
<div class="col-xl-6">
|
|
<div class="card">
|
|
<div class="card-header align-items-center d-flex">
|
|
<h4 class="card-title mb-0 flex-grow-1">Default Table</h4>
|
|
<div class="flex-shrink-0">
|
|
<div class="form-check form-switch form-switch-right form-switch-md">
|
|
<label for="default-showcode" class="form-label text-muted">Show Code</label>
|
|
<input class="form-check-input code-switcher" type="checkbox" id="default-showcode">
|
|
</div>
|
|
</div>
|
|
</div><!-- end card header -->
|
|
|
|
<div class="card-body">
|
|
<p class="text-muted">Use <code>table</code> class to show bootstrap-based default table.</p>
|
|
<div class="live-preview">
|
|
<div class="table-responsive">
|
|
<table class="table align-middle table-nowrap mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">ID</th>
|
|
<th scope="col">Customer</th>
|
|
<th scope="col">Date</th>
|
|
<th scope="col">Invoice</th>
|
|
<th scope="col">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row"><a href="#" class="fw-medium">#VZ2110</a></th>
|
|
<td>Bobby Davis</td>
|
|
<td>October 15, 2021</td>
|
|
<td>$2,300</td>
|
|
<td><a href="javascript:void(0);" class="link-success">View More <i class="ri-arrow-right-line align-middle"></i></a></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row"><a href="#" class="fw-medium">#VZ2109</a></th>
|
|
<td>Christopher Neal</td>
|
|
<td>October 7, 2021</td>
|
|
<td>$5,500</td>
|
|
<td><a href="javascript:void(0);" class="link-success">View More <i class="ri-arrow-right-line align-middle"></i></a></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row"><a href="#" class="fw-medium">#VZ2108</a></th>
|
|
<td>Monkey Karry</td>
|
|
<td>October 5, 2021</td>
|
|
<td>$2,420</td>
|
|
<td><a href="javascript:void(0);" class="link-success">View More <i class="ri-arrow-right-line align-middle"></i></a></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row"><a href="#" class="fw-medium">#VZ2107</a></th>
|
|
<td>James White</td>
|
|
<td>October 2, 2021</td>
|
|
<td>$7,452</td>
|
|
<td><a href="javascript:void(0);" class="link-success">View More <i class="ri-arrow-right-line align-middle"></i></a></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-none code-view">
|
|
<pre class="language-markup" style="height: 275px;"><code><table class="table table-nowrap">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">ID</th>
|
|
<th scope="col">Customer</th>
|
|
<th scope="col">Date</th>
|
|
<th scope="col">Invoice</th>
|
|
<th scope="col">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row"><a href="#" class="fw-semibold">#VZ2110</a></th>
|
|
<td>Bobby Davis</td>
|
|
<td>October 15, 2021</td>
|
|
<td>$2,300</td>
|
|
<td><a href="javascript:void(0);" class="link-success">View More <i class="ri-arrow-right-line align-middle"></i></a></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row"><a href="#" class="fw-semibold">#VZ2109</a></th>
|
|
<td>Christopher Neal</td>
|
|
<td>October 7, 2021</td>
|
|
<td>$5,500</td>
|
|
<td><a href="javascript:void(0);" class="link-success">View More <i class="ri-arrow-right-line align-middle"></i></a></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row"><a href="#" class="fw-semibold">#VZ2108</a></th>
|
|
<td>Monkey Karry</td>
|
|
<td>October 5, 2021</td>
|
|
<td>$2,420</td>
|
|
<td><a href="javascript:void(0);" class="link-success">View More <i class="ri-arrow-right-line align-middle"></i></a></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row"><a href="#" class="fw-semibold">#VZ2107</a></th>
|
|
<td>James White</td>
|
|
<td>October 2, 2021</td>
|
|
<td>$7,452</td>
|
|
<td><a href="javascript:void(0);" class="link-success">View More <i class="ri-arrow-right-line align-middle"></i></a></td>
|
|
</tr>
|
|
</tbody>
|
|
</table></code></pre>
|
|
</div>
|
|
</div><!-- end card-body -->
|
|
</div><!-- end card -->
|
|
</div>
|
|
<!-- end col -->
|
|
|
|
<div class="col-xl-6">
|
|
<div class="card">
|
|
<div class="card-header align-items-center d-flex">
|
|
<h4 class="card-title mb-0 flex-grow-1">Striped Rows</h4>
|
|
<div class="flex-shrink-0">
|
|
<div class="form-check form-switch form-switch-right form-switch-md">
|
|
<label for="striped-rows-showcode" class="form-label text-muted">Show Code</label>
|
|
<input class="form-check-input code-switcher" type="checkbox" id="striped-rows-showcode">
|
|
</div>
|
|
</div>
|
|
</div><!-- end card header -->
|
|
|
|
<div class="card-body">
|
|
<p class="text-muted">Use <code>table-striped</code> class to add zebra-striping to any table row within the <tbody>.</p>
|
|
<div class="live-preview">
|
|
<div class="table-responsive">
|
|
<table class="table table-striped table-nowrap align-middle mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">ID</th>
|
|
<th scope="col">Customer</th>
|
|
<th scope="col">Date</th>
|
|
<th scope="col">Invoice</th>
|
|
<th scope="col">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="fw-medium">01</td>
|
|
<td>Bobby Davis</td>
|
|
<td>Nov 14, 2021</td>
|
|
<td>$2,410</td>
|
|
<td><span class="badge bg-success">Confirmed</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">02</td>
|
|
<td>Christopher Neal</td>
|
|
<td>Nov 21, 2021</td>
|
|
<td>$1,450</td>
|
|
<td><span class="badge bg-warning">Waiting</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">03</td>
|
|
<td>Monkey Karry</td>
|
|
<td>Nov 24, 2021</td>
|
|
<td>$3,500</td>
|
|
<td><span class="badge bg-success">Confirmed</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">04</td>
|
|
<td>Aaron James</td>
|
|
<td>Nov 25, 2021</td>
|
|
<td>$6,875</td>
|
|
<td><span class="badge bg-danger">Cancelled</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="d-none code-view">
|
|
<pre class="language-markup" style="height: 275px;"><code><!-- Striped Rows -->
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Id</th>
|
|
<th scope="col">Customer</th>
|
|
<th scope="col">Date</th>
|
|
<th scope="col">Invoice</th>
|
|
<th scope="col">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">1</th>
|
|
<td>Bobby Davis</td>
|
|
<td>Nov 14, 2021</td>
|
|
<td>$2,410</td>
|
|
<td><span class="badge bg-success">Confirmed</span></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">2</th>
|
|
<td>Christopher Neal</td>
|
|
<td>Nov 21, 2021</td>
|
|
<td>$1,450</td>
|
|
<td><span class="badge bg-warning">Waiting</span></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">3</th>
|
|
<td>Monkey Karry</td>
|
|
<td>Nov 24, 2021</td>
|
|
<td>$3,500</td>
|
|
<td><span class="badge bg-success">Confirmed</span></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">4</th>
|
|
<td>Aaron James</td>
|
|
<td>Nov 25, 2021</td>
|
|
<td>$6,875</td>
|
|
<td><span class="badge bg-danger">Cancelled</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table></code></pre>
|
|
</div>
|
|
</div><!-- end card-body -->
|
|
</div><!-- end card -->
|
|
</div>
|
|
<!-- end col -->
|
|
</div>
|
|
<!-- end row -->
|
|
|
|
<div class="row">
|
|
<div class="col-xl-12">
|
|
<div class="card">
|
|
<div class="card-header align-items-center d-flex">
|
|
<h4 class="card-title mb-0 flex-grow-1">Striped columns</h4>
|
|
|
|
<div class="flex-shrink-0">
|
|
<div class="form-check form-switch form-switch-right form-switch-md">
|
|
<label for="card-tables-showcode" class="form-label text-muted">Show Code</label>
|
|
<input class="form-check-input code-switcher" type="checkbox" id="card-tables-showcode">
|
|
</div>
|
|
</div>
|
|
</div><!-- end card header -->
|
|
|
|
<div class="card-body">
|
|
<p class="text-muted mb-4">Use .<code>table-striped-columns</code> to add zebra-striping to any table column.</p>
|
|
|
|
<div class="live-preview">
|
|
<div class="table-responsive table-card">
|
|
<table class="table align-middle table-nowrap table-striped-columns mb-0">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th scope="col" style="width: 46px;">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="cardtableCheck">
|
|
<label class="form-check-label" for="cardtableCheck"></label>
|
|
</div>
|
|
</th>
|
|
<th scope="col">ID</th>
|
|
<th scope="col">Name</th>
|
|
<th scope="col">Date</th>
|
|
<th scope="col">Total</th>
|
|
<th scope="col">Status</th>
|
|
<th scope="col" style="width: 150px;">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="cardtableCheck01">
|
|
<label class="form-check-label" for="cardtableCheck01"></label>
|
|
</div>
|
|
</td>
|
|
<td><a href="#" class="fw-medium">#VL2110</a></td>
|
|
<td>William Elmore</td>
|
|
<td>07 Oct, 2021</td>
|
|
<td>$24.05</td>
|
|
<td><span class="badge bg-success">Paid</span></td>
|
|
<td>
|
|
<button type="button" class="btn btn-sm btn-light">Details</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="cardtableCheck02">
|
|
<label class="form-check-label" for="cardtableCheck02"></label>
|
|
</div>
|
|
</td>
|
|
<td><a href="#" class="fw-medium">#VL2109</a></td>
|
|
<td>Georgie Winters</td>
|
|
<td>07 Oct, 2021</td>
|
|
<td>$26.15</td>
|
|
<td><span class="badge bg-success">Paid</span></td>
|
|
<td>
|
|
<button type="button" class="btn btn-sm btn-light">Details</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="cardtableCheck03">
|
|
<label class="form-check-label" for="cardtableCheck03"></label>
|
|
</div>
|
|
</td>
|
|
<td><a href="#" class="fw-medium">#VL2108</a></td>
|
|
<td>Whitney Meier</td>
|
|
<td>06 Oct, 2021</td>
|
|
<td>$21.25</td>
|
|
<td><span class="badge bg-danger">Refund</span></td>
|
|
<td>
|
|
<button type="button" class="btn btn-sm btn-light">Details</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="cardtableCheck04">
|
|
<label class="form-check-label" for="cardtableCheck04"></label>
|
|
</div>
|
|
</td>
|
|
<td><a href="#" class="fw-medium">#VL2107</a></td>
|
|
<td>Justin Maier</td>
|
|
<td>05 Oct, 2021</td>
|
|
<td>$25.03</td>
|
|
<td><span class="badge bg-success">Paid</span></td>
|
|
<td>
|
|
<button type="button" class="btn btn-sm btn-light">Details</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="d-none code-view">
|
|
<pre class="language-markup" style="height: 275px;"><code><div class="table-responsive table-card">
|
|
<table class="table table-nowrap table-striped-columns mb-0">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th scope="col">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="cardtableCheck">
|
|
<label class="form-check-label" for="cardtableCheck"></label>
|
|
</div>
|
|
</th>
|
|
<th scope="col">Id</th>
|
|
<th scope="col">Name</th>
|
|
<th scope="col">Date</th>
|
|
<th scope="col">Total</th>
|
|
<th scope="col">Status</th>
|
|
<th scope="col">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="cardtableCheck01">
|
|
<label class="form-check-label" for="cardtableCheck01"></label>
|
|
</div>
|
|
</td>
|
|
<td><a href="#" class="fw-semibold">#VL2110</a></td>
|
|
<td>William Elmore</td>
|
|
<td>07 Oct, 2021</td>
|
|
<td>$24.05</td>
|
|
<td><span class="badge bg-success">Paid</span></td>
|
|
<td>
|
|
<button type="button" class="btn btn-sm btn-light">Details</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="cardtableCheck02">
|
|
<label class="form-check-label" for="cardtableCheck02"></label>
|
|
</div>
|
|
</td>
|
|
<td><a href="#" class="fw-semibold">#VL2109</a></td>
|
|
<td>Georgie Winters</td>
|
|
<td>07 Oct, 2021</td>
|
|
<td>$26.15</td>
|
|
<td><span class="badge bg-success">Paid</span></td>
|
|
<td>
|
|
<button type="button" class="btn btn-sm btn-light">Details</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="cardtableCheck03">
|
|
<label class="form-check-label" for="cardtableCheck03"></label>
|
|
</div>
|
|
</td>
|
|
<td><a href="#" class="fw-semibold">#VL2108</a></td>
|
|
<td>Whitney Meier</td>
|
|
<td>06 Oct, 2021</td>
|
|
<td>$21.25</td>
|
|
<td><span class="badge bg-danger">Refund</span></td>
|
|
<td>
|
|
<button type="button" class="btn btn-sm btn-light">Details</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="cardtableCheck04">
|
|
<label class="form-check-label" for="cardtableCheck04"></label>
|
|
</div>
|
|
</td>
|
|
<td><a href="#" class="fw-semibold">#VL2107</a></td>
|
|
<td>Justin Maier</td>
|
|
<td>05 Oct, 2021</td>
|
|
<td>$25.03</td>
|
|
<td><span class="badge bg-success">Paid</span></td>
|
|
<td>
|
|
<button type="button" class="btn btn-sm btn-light">Details</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div></code></pre>
|
|
</div>
|
|
</div><!-- end card-body -->
|
|
</div><!-- end card -->
|
|
</div><!-- end col -->
|
|
</div><!-- end row -->
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="card">
|
|
<div class="card-header align-items-center d-flex">
|
|
<h4 class="card-title mb-0 flex-grow-1">Tables Colors</h4>
|
|
<div class="flex-shrink-0">
|
|
<div class="form-check form-switch form-switch-right form-switch-md">
|
|
<label for="striped-colors-showcode" class="form-label text-muted">Show Code</label>
|
|
<input class="form-check-input code-switcher" type="checkbox" id="striped-colors-showcode">
|
|
</div>
|
|
</div>
|
|
</div><!-- end card header -->
|
|
|
|
<div class="card-body">
|
|
<p class="text-muted">Use <code>table-dark</code> class to set dark color table body and <code>table-success</code> class to set success color table body respectively.
|
|
use <code>table-</code> class with different color variation to set required table body color.</p>
|
|
<div class="live-preview">
|
|
<div class="row">
|
|
<div class="col-xl-6">
|
|
<div class="table-responsive">
|
|
<table class="table table-dark table-striped table-nowrap mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">ID</th>
|
|
<th scope="col">Customer</th>
|
|
<th scope="col">Date</th>
|
|
<th scope="col">Invoice</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="fw-medium">01</td>
|
|
<td>Bobby Davis</td>
|
|
<td>Nov 14, 2021</td>
|
|
<td>$2,410</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">02</td>
|
|
<td>Christopher Neal</td>
|
|
<td>Nov 21, 2021</td>
|
|
<td>$1,450</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">03</td>
|
|
<td>Monkey Karry</td>
|
|
<td>Nov 24, 2021</td>
|
|
<td>$3,500</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">04</td>
|
|
<td>Aaron James</td>
|
|
<td>Nov 25, 2021</td>
|
|
<td>$6,875</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<!--end col-->
|
|
|
|
<div class="col-xl-6">
|
|
<div class="table-responsive mt-4 mt-xl-0">
|
|
<table class="table table-success table-striped table-nowrap align-middle mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">ID</th>
|
|
<th scope="col">Invoice</th>
|
|
<th scope="col">Amount</th>
|
|
<th scope="col">Date</th>
|
|
<th scope="col">Status</th>
|
|
<th scope="col">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="fw-medium">01</td>
|
|
<td>Basic Plan</td>
|
|
<td>$860</td>
|
|
<td>Nov 22, 2021</td>
|
|
<td><i class="ri-checkbox-circle-line align-middle text-success"></i> Subscribed</td>
|
|
<td>
|
|
<div class="hstack gap-3 flex-wrap">
|
|
<a href="javascript:void(0);" class="link-success fs-15"><i class="ri-edit-2-line"></i></a>
|
|
<a href="javascript:void(0);" class="link-danger fs-15"><i class="ri-delete-bin-line"></i></a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">02</td>
|
|
<td>Premium Plan</td>
|
|
<td>$1200</td>
|
|
<td>Nov 10, 2021</td>
|
|
<td><i class="ri-close-circle-line align-middle text-danger"></i> Unsubscribed</td>
|
|
<td>
|
|
<div class="hstack gap-3 flex-wrap">
|
|
<a href="javascript:void(0);" class="link-success fs-15"><i class="ri-edit-2-line"></i></a>
|
|
<a href="javascript:void(0);" class="link-danger fs-15"><i class="ri-delete-bin-line"></i></a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">03</td>
|
|
<td>Basic Plan</td>
|
|
<td>$860</td>
|
|
<td>Nov 19, 2021</td>
|
|
<td><i class="ri-checkbox-circle-line align-middle text-success"></i> Subscribed</td>
|
|
<td>
|
|
<div class="hstack gap-3 flex-wrap">
|
|
<a href="javascript:void(0);" class="link-success fs-15"><i class="ri-edit-2-line"></i></a>
|
|
<a href="javascript:void(0);" class="link-danger fs-15"><i class="ri-delete-bin-line"></i></a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">04</td>
|
|
<td>Corporate Plan</td>
|
|
<td>$1599</td>
|
|
<td>Nov 22, 2021</td>
|
|
<td><i class="ri-checkbox-circle-line align-middle text-success"></i> Subscribed</td>
|
|
<td>
|
|
<div class="hstack gap-3 flex-wrap">
|
|
<a href="javascript:void(0);" class="link-success fs-15"><i class="ri-edit-2-line"></i></a>
|
|
<a href="javascript:void(0);" class="link-danger fs-15"><i class="ri-delete-bin-line"></i></a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<!--end col-->
|
|
</div>
|
|
<!--end row-->
|
|
</div>
|
|
<div class="d-none code-view">
|
|
<pre class="language-markup" style="height: 275px;"><code><!-- Table Dark -->
|
|
<table class="table table-dark table-striped table-nowrap">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Id</th>
|
|
<th scope="col">Customer</th>
|
|
<th scope="col">Date</th>
|
|
<th scope="col">Invoice</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">1</th>
|
|
<td>Bobby Davis</td>
|
|
<td>Nov 14, 2021</td>
|
|
<td>$2,410</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">2</th>
|
|
<td>Christopher Neal</td>
|
|
<td>Nov 21, 2021</td>
|
|
<td>$1,450</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">3</th>
|
|
<td>Monkey Karry</td>
|
|
<td>Nov 24, 2021</td>
|
|
<td>$3,500</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">4</th>
|
|
<td>Aaron James</td>
|
|
<td>Nov 25, 2021</td>
|
|
<td>$6,875</td>
|
|
</tr>
|
|
</tbody>
|
|
</table></code>
|
|
|
|
<code><table class="table table-success table-striped align-middle table-nowrap mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Id</th>
|
|
<th scope="col">Invoice</th>
|
|
<th scope="col">Amount</th>
|
|
<th scope="col">Date</th>
|
|
<th scope="col">Status</th>
|
|
<th scope="col">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">1</th>
|
|
<td>Basic Plan</td>
|
|
<td>$860</td>
|
|
<td>Nov 22, 2021</td>
|
|
<td><i class="ri-checkbox-circle-line align-middle text-success"></i> Subscribed</td>
|
|
<td>
|
|
<div class="hstack gap-3 flex-wrap">
|
|
<a href="javascript:void(0);" class="link-success fs-15"><i class="ri-edit-2-line"></i></a>
|
|
<a href="javascript:void(0);" class="link-danger fs-15"><i class="ri-delete-bin-line"></i></a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">2</th>
|
|
<td>Premium Plan</td>
|
|
<td>$1200</td>
|
|
<td>Nov 10, 2021</td>
|
|
<td><i class="ri-close-circle-line align-middle text-danger"></i> Unsubscribed</td>
|
|
<td>
|
|
<div class="hstack gap-3 flex-wrap">
|
|
<a href="javascript:void(0);" class="link-success fs-15"><i class="ri-edit-2-line"></i></a>
|
|
<a href="javascript:void(0);" class="link-danger fs-15"><i class="ri-delete-bin-line"></i></a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">3</th>
|
|
<td>Basic Plan</td>
|
|
<td>$860</td>
|
|
<td>Nov 19, 2021</td>
|
|
<td><i class="ri-checkbox-circle-line align-middle text-success"></i> Subscribed</td>
|
|
<td>
|
|
<div class="hstack gap-3 flex-wrap">
|
|
<a href="javascript:void(0);" class="link-success fs-15"><i class="ri-edit-2-line"></i></a>
|
|
<a href="javascript:void(0);" class="link-danger fs-15"><i class="ri-delete-bin-line"></i></a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">4</th>
|
|
<td>Corporate Plan</td>
|
|
<td>$1599</td>
|
|
<td>Nov 22, 2021</td>
|
|
<td><i class="ri-checkbox-circle-line align-middle text-success"></i> Subscribed</td>
|
|
<td>
|
|
<div class="hstack gap-3 flex-wrap">
|
|
<a href="javascript:void(0);" class="link-success fs-15"><i class="ri-edit-2-line"></i></a>
|
|
<a href="javascript:void(0);" class="link-danger fs-15"><i class="ri-delete-bin-line"></i></a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table></code></pre>
|
|
</div>
|
|
</div><!-- end card-body -->
|
|
</div><!-- end card -->
|
|
</div>
|
|
<!-- end col -->
|
|
</div>
|
|
<!--end row-->
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="card">
|
|
<div class="card-header align-items-center d-flex">
|
|
<h4 class="card-title mb-0 flex-grow-1">Hoverable Rows</h4>
|
|
<div class="flex-shrink-0">
|
|
<div class="form-check form-switch form-switch-right form-switch-md">
|
|
<label for="hover-rows-showcode" class="form-label text-muted">Show Code</label>
|
|
<input class="form-check-input code-switcher" type="checkbox" id="hover-rows-showcode">
|
|
</div>
|
|
</div>
|
|
</div><!-- end card header -->
|
|
|
|
<div class="card-body">
|
|
<p class="text-muted">Use <code>table-hover</code> class to enable a hover state on table rows within a <tbody>.</p>
|
|
|
|
<div class="live-preview">
|
|
<div class="row">
|
|
<div class="col-xl-6">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover align-middle table-nowrap mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" style="width: 25px;">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="checkAll" value="option1">
|
|
</div>
|
|
</th>
|
|
<th scope="col">Order ID</th>
|
|
<th scope="col">Shop</th>
|
|
<th scope="col">Customer</th>
|
|
<th scope="col">Price</th>
|
|
<th scope="col">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option1" checked>
|
|
</div>
|
|
</th>
|
|
<td>#541254265</td>
|
|
<td>Amezon</td>
|
|
<td>Cleo Carson</td>
|
|
<td>$4,521</td>
|
|
<td><a href="javascript:void(0);"><i class="ri-download-2-line fs-17 lh-1 align-middle"></i></a></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option1" checked>
|
|
</div>
|
|
</th>
|
|
<td>#744145235</td>
|
|
<td>Shoppers</td>
|
|
<td>Juston Eichmann</td>
|
|
<td>$7,546</td>
|
|
<td><a href="javascript:void(0);"><i class="ri-download-2-line fs-17 lh-1 align-middle"></i></a></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="inlineCheckbox4" value="option1">
|
|
</div>
|
|
</th>
|
|
<td>#9855126598</td>
|
|
<td>Flipkart</td>
|
|
<td>Bettie Johson</td>
|
|
<td>$1,350</td>
|
|
<td><a href="javascript:void(0);"><i class="ri-download-2-line fs-17 lh-1 align-middle"></i></a></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="inlineCheckbox5" value="option1">
|
|
</div>
|
|
</th>
|
|
<td>#847512653</td>
|
|
<td>Shoppers</td>
|
|
<td>Maritza Blanda</td>
|
|
<td>$4,521</td>
|
|
<td><a href="javascript:void(0);"><i class="ri-download-2-line fs-17 lh-1 align-middle"></i></a></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<!--end col-->
|
|
|
|
<div class="col-xl-6">
|
|
<div class="table-responsive mt-4 mt-xl-0">
|
|
<table class="table table-hover table-striped align-middle table-nowrap mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">ID</th>
|
|
<th scope="col">Invoice</th>
|
|
<th scope="col">Amount</th>
|
|
<th scope="col">Date</th>
|
|
<th scope="col">Status</th>
|
|
<th scope="col">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="fw-medium">01</td>
|
|
<td>Basic Plan</td>
|
|
<td>$860</td>
|
|
<td>Nov 22, 2021</td>
|
|
<td><i class="ri-checkbox-circle-line align-middle text-success"></i> Subscribed</td>
|
|
<td>
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck1" checked="">
|
|
<label class="form-check-label ms-2" for="SwitchCheck1">Yes/No</label>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">02</td>
|
|
<td>Premium Plan</td>
|
|
<td>$1200</td>
|
|
<td>Nov 10, 2021</td>
|
|
<td><i class="ri-close-circle-line align-middle text-danger"></i> Unsubscribed</td>
|
|
<td>
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck2">
|
|
<label class="form-check-label ms-2" for="SwitchCheck2">Yes/No</label>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">03</td>
|
|
<td>Basic Plan</td>
|
|
<td>$860</td>
|
|
<td>Nov 19, 2021</td>
|
|
<td><i class="ri-checkbox-circle-line align-middle text-success"></i> Subscribed</td>
|
|
<td>
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck3">
|
|
<label class="form-check-label ms-2" for="SwitchCheck3">Yes/No</label>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">04</td>
|
|
<td>Corporate Plan</td>
|
|
<td>$1599</td>
|
|
<td>Nov 22, 2021</td>
|
|
<td><i class="ri-checkbox-circle-line align-middle text-success"></i> Subscribed</td>
|
|
<td>
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck4" checked="">
|
|
<label class="form-check-label ms-2" for="SwitchCheck4">Yes/No</label>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<!--end col-->
|
|
</div>
|
|
<!--end row-->
|
|
</div>
|
|
<div class="d-none code-view">
|
|
<pre class="language-markup" style="height: 275px;"><code><!-- Hoverable Rows -->
|
|
<table class="table table-hover table-nowrap mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="checkAll" value="option1">
|
|
</div>
|
|
</th>
|
|
<th scope="col">Order ID</th>
|
|
<th scope="col">Shop</th>
|
|
<th scope="col">Customer</th>
|
|
<th scope="col">Price</th>
|
|
<th scope="col">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option1" checked>
|
|
</div>
|
|
</th>
|
|
<td>#541254265</td>
|
|
<td>Amezon</td>
|
|
<td>Cleo Carson</td>
|
|
<td>$4,521</td>
|
|
<td><a href="javascript:void(0);"><i class="ri-download-2-line"></i></a></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option1" checked>
|
|
</div>
|
|
</th>
|
|
<td>#744145235</td>
|
|
<td>Shoppers</td>
|
|
<td>Juston Eichmann</td>
|
|
<td>$7,546</td>
|
|
<td><a href="javascript:void(0);"><i class="ri-download-2-line"></i></a></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="inlineCheckbox4" value="option1">
|
|
</div>
|
|
</th>
|
|
<td>#9855126598</td>
|
|
<td>Flipkart</td>
|
|
<td>Bettie Johson</td>
|
|
<td>$1,350</td>
|
|
<td><a href="javascript:void(0);"><i class="ri-download-2-line"></i></a></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="inlineCheckbox5" value="option1">
|
|
</div>
|
|
</th>
|
|
<td>#847512653</td>
|
|
<td>Shoppers</td>
|
|
<td>Maritza Blanda</td>
|
|
<td>$4,521</td>
|
|
<td><a href="javascript:void(0);"><i class="ri-download-2-line"></i></a></td>
|
|
</tr>
|
|
</tbody>
|
|
</table></code>
|
|
|
|
<code><table class="table table-hover table-striped align-middle table-nowrap mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Id</th>
|
|
<th scope="col">Invoice</th>
|
|
<th scope="col">Amount</th>
|
|
<th scope="col">Date</th>
|
|
<th scope="col">Status</th>
|
|
<th scope="col">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">1</th>
|
|
<td>Basic Plan</td>
|
|
<td>$860</td>
|
|
<td>Nov 22, 2021</td>
|
|
<td><i class="ri-checkbox-circle-line align-middle text-success"></i> Subscribed</td>
|
|
<td>
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck1" checked="">
|
|
<label class="form-check-label" for="SwitchCheck1">Yes/No</label>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">2</th>
|
|
<td>Premium Plan</td>
|
|
<td>$1200</td>
|
|
<td>Nov 10, 2021</td>
|
|
<td><i class="ri-close-circle-line align-middle text-danger"></i> Unsubscribed</td>
|
|
<td>
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck2">
|
|
<label class="form-check-label" for="SwitchCheck2">Yes/No</label>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">3</th>
|
|
<td>Basic Plan</td>
|
|
<td>$860</td>
|
|
<td>Nov 19, 2021</td>
|
|
<td><i class="ri-checkbox-circle-line align-middle text-success"></i> Subscribed</td>
|
|
<td>
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck3">
|
|
<label class="form-check-label" for="SwitchCheck3">Yes/No</label>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">4</th>
|
|
<td>Corporate Plan</td>
|
|
<td>$1599</td>
|
|
<td>Nov 22, 2021</td>
|
|
<td><i class="ri-checkbox-circle-line align-middle text-success"></i> Subscribed</td>
|
|
<td>
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck4" checked="">
|
|
<label class="form-check-label" for="SwitchCheck4">Yes/No</label>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table></code></pre>
|
|
</div>
|
|
</div><!-- end card-body -->
|
|
</div><!-- end card -->
|
|
</div>
|
|
<!-- end col -->
|
|
</div>
|
|
<!--end row-->
|
|
|
|
<div class="row">
|
|
<div class="col-xl-12">
|
|
<div class="card">
|
|
<div class="card-header align-items-center d-flex">
|
|
<h4 class="card-title mb-0 flex-grow-1">Card Tables</h4>
|
|
|
|
<div class="flex-shrink-0">
|
|
<div class="form-check form-switch form-switch-right form-switch-md">
|
|
<label for="card-tables-showcode" class="form-label text-muted">Show Code</label>
|
|
<input class="form-check-input code-switcher" type="checkbox" id="card-tables-showcode">
|
|
</div>
|
|
</div>
|
|
</div><!-- end card header -->
|
|
|
|
<div class="card-body">
|
|
<p class="text-muted mb-4">Use <code>table-card</code> class to show card-based table within a <tbody>.</p>
|
|
|
|
<div class="live-preview">
|
|
<div class="table-responsive table-card">
|
|
<table class="table align-middle table-nowrap mb-0">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th scope="col" style="width: 46px;">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="cardtableCheck">
|
|
<label class="form-check-label" for="cardtableCheck"></label>
|
|
</div>
|
|
</th>
|
|
<th scope="col">ID</th>
|
|
<th scope="col">Name</th>
|
|
<th scope="col">Date</th>
|
|
<th scope="col">Total</th>
|
|
<th scope="col">Status</th>
|
|
<th scope="col" style="width: 150px;">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="cardtableCheck01">
|
|
<label class="form-check-label" for="cardtableCheck01"></label>
|
|
</div>
|
|
</td>
|
|
<td><a href="#" class="fw-medium">#VL2110</a></td>
|
|
<td>William Elmore</td>
|
|
<td>07 Oct, 2021</td>
|
|
<td>$24.05</td>
|
|
<td><span class="badge bg-success">Paid</span></td>
|
|
<td>
|
|
<button type="button" class="btn btn-sm btn-light">Details</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="cardtableCheck02">
|
|
<label class="form-check-label" for="cardtableCheck02"></label>
|
|
</div>
|
|
</td>
|
|
<td><a href="#" class="fw-medium">#VL2109</a></td>
|
|
<td>Georgie Winters</td>
|
|
<td>07 Oct, 2021</td>
|
|
<td>$26.15</td>
|
|
<td><span class="badge bg-success">Paid</span></td>
|
|
<td>
|
|
<button type="button" class="btn btn-sm btn-light">Details</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="cardtableCheck03">
|
|
<label class="form-check-label" for="cardtableCheck03"></label>
|
|
</div>
|
|
</td>
|
|
<td><a href="#" class="fw-medium">#VL2108</a></td>
|
|
<td>Whitney Meier</td>
|
|
<td>06 Oct, 2021</td>
|
|
<td>$21.25</td>
|
|
<td><span class="badge bg-danger">Refund</span></td>
|
|
<td>
|
|
<button type="button" class="btn btn-sm btn-light">Details</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="cardtableCheck04">
|
|
<label class="form-check-label" for="cardtableCheck04"></label>
|
|
</div>
|
|
</td>
|
|
<td><a href="#" class="fw-medium">#VL2107</a></td>
|
|
<td>Justin Maier</td>
|
|
<td>05 Oct, 2021</td>
|
|
<td>$25.03</td>
|
|
<td><span class="badge bg-success">Paid</span></td>
|
|
<td>
|
|
<button type="button" class="btn btn-sm btn-light">Details</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="d-none code-view">
|
|
<pre class="language-markup" style="height: 275px;"><code><div class="table-responsive table-card">
|
|
<table class="table table-nowrap mb-0">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th scope="col">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="cardtableCheck">
|
|
<label class="form-check-label" for="cardtableCheck"></label>
|
|
</div>
|
|
</th>
|
|
<th scope="col">Id</th>
|
|
<th scope="col">Name</th>
|
|
<th scope="col">Date</th>
|
|
<th scope="col">Total</th>
|
|
<th scope="col">Status</th>
|
|
<th scope="col">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="cardtableCheck01">
|
|
<label class="form-check-label" for="cardtableCheck01"></label>
|
|
</div>
|
|
</td>
|
|
<td><a href="#" class="fw-semibold">#VL2110</a></td>
|
|
<td>William Elmore</td>
|
|
<td>07 Oct, 2021</td>
|
|
<td>$24.05</td>
|
|
<td><span class="badge bg-success">Paid</span></td>
|
|
<td>
|
|
<button type="button" class="btn btn-sm btn-light">Details</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="cardtableCheck02">
|
|
<label class="form-check-label" for="cardtableCheck02"></label>
|
|
</div>
|
|
</td>
|
|
<td><a href="#" class="fw-semibold">#VL2109</a></td>
|
|
<td>Georgie Winters</td>
|
|
<td>07 Oct, 2021</td>
|
|
<td>$26.15</td>
|
|
<td><span class="badge bg-success">Paid</span></td>
|
|
<td>
|
|
<button type="button" class="btn btn-sm btn-light">Details</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="cardtableCheck03">
|
|
<label class="form-check-label" for="cardtableCheck03"></label>
|
|
</div>
|
|
</td>
|
|
<td><a href="#" class="fw-semibold">#VL2108</a></td>
|
|
<td>Whitney Meier</td>
|
|
<td>06 Oct, 2021</td>
|
|
<td>$21.25</td>
|
|
<td><span class="badge bg-danger">Refund</span></td>
|
|
<td>
|
|
<button type="button" class="btn btn-sm btn-light">Details</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="cardtableCheck04">
|
|
<label class="form-check-label" for="cardtableCheck04"></label>
|
|
</div>
|
|
</td>
|
|
<td><a href="#" class="fw-semibold">#VL2107</a></td>
|
|
<td>Justin Maier</td>
|
|
<td>05 Oct, 2021</td>
|
|
<td>$25.03</td>
|
|
<td><span class="badge bg-success">Paid</span></td>
|
|
<td>
|
|
<button type="button" class="btn btn-sm btn-light">Details</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div></code></pre>
|
|
</div>
|
|
</div><!-- end card-body -->
|
|
</div><!-- end card -->
|
|
</div><!-- end col -->
|
|
</div><!-- end row -->
|
|
|
|
<div class="row">
|
|
<div class="col-xl-6">
|
|
<div class="card">
|
|
<div class="card-header align-items-center d-flex">
|
|
<h4 class="card-title mb-0 flex-grow-1">Active Tables</h4>
|
|
<div class="flex-shrink-0">
|
|
<div class="form-check form-switch form-switch-right form-switch-md">
|
|
<label for="active-tables-showcode" class="form-label text-muted">Show Code</label>
|
|
<input class="form-check-input code-switcher" type="checkbox" id="active-tables-showcode">
|
|
</div>
|
|
</div>
|
|
</div><!-- end card header -->
|
|
|
|
<div class="card-body">
|
|
<p class="text-muted">Use <code>table-active</code> class to highlight a table row or cell.</p>
|
|
|
|
<div class="live-preview">
|
|
<div class="table-responsive">
|
|
<table class="table align-middle table-nowrap mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" style="width: 42px;">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="activetableCheck">
|
|
<label class="form-check-label" for="activetableCheck"></label>
|
|
</div>
|
|
</th>
|
|
<th scope="col">Order ID</th>
|
|
<th scope="col">Shop</th>
|
|
<th scope="col">Customer</th>
|
|
<th scope="col">Price</th>
|
|
<th scope="col">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="activetableCheck01" checked>
|
|
<label class="form-check-label" for="activetableCheck01"></label>
|
|
</div>
|
|
</th>
|
|
<td>#541254265</td>
|
|
<td>Amezon</td>
|
|
<td>Cleo Carson</td>
|
|
<td>$4,521</td>
|
|
<td><a href="javascript:void(0);"><i class="ri-download-2-line fs-17 lh-1 align-middle"></i></a></td>
|
|
</tr>
|
|
<tr class="table-active">
|
|
<th scope="row">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="activetableCheck02" checked>
|
|
<label class="form-check-label" for="activetableCheck02"></label>
|
|
</div>
|
|
</th>
|
|
<td>#744145235</td>
|
|
<td>Shoppers</td>
|
|
<td>Juston Eichmann</td>
|
|
<td>$7,546</td>
|
|
<td><a href="javascript:void(0);"><i class="ri-download-2-line fs-17 lh-1 align-middle"></i></a></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="activetableCheck03">
|
|
<label class="form-check-label" for="activetableCheck03"></label>
|
|
</div>
|
|
</th>
|
|
<td>#9855126598</td>
|
|
<td>Flipkart</td>
|
|
<td>Bettie Johson</td>
|
|
<td>$1,350</td>
|
|
<td><a href="javascript:void(0);"><i class="ri-download-2-line fs-17 lh-1 align-middle"></i></a></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="activetableCheck04">
|
|
<label class="form-check-label" for="activetableCheck04"></label>
|
|
</div>
|
|
</th>
|
|
<td>#847512653</td>
|
|
<td>Shoppers</td>
|
|
<td class="table-active">Maritza Blanda</td>
|
|
<td>$4,521</td>
|
|
<td><a href="javascript:void(0);"><i class="ri-download-2-line fs-17 lh-1 align-middle"></i></a></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="d-none code-view">
|
|
<pre class="language-markup" style="height: 275px;"><code><!-- Active Tables -->
|
|
<table class="table table-nowrap mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="activetableCheck">
|
|
<label class="form-check-label" for="activetableCheck"></label>
|
|
</div>
|
|
</th>
|
|
<th scope="col">Order ID</th>
|
|
<th scope="col">Shop</th>
|
|
<th scope="col">Customer</th>
|
|
<th scope="col">Price</th>
|
|
<th scope="col">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="activetableCheck01" checked>
|
|
<label class="form-check-label" for="activetableCheck01"></label>
|
|
</div>
|
|
</th>
|
|
<td>#541254265</td>
|
|
<td>Amezon</td>
|
|
<td>Cleo Carson</td>
|
|
<td>$4,521</td>
|
|
<td><a href="javascript:void(0);"><i class="ri-download-2-line"></i></a></td>
|
|
</tr>
|
|
<tr class="table-active">
|
|
<th scope="row">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="activetableCheck02" checked>
|
|
<label class="form-check-label" for="activetableCheck02"></label>
|
|
</div>
|
|
</th>
|
|
<td>#744145235</td>
|
|
<td>Shoppers</td>
|
|
<td>Juston Eichmann</td>
|
|
<td>$7,546</td>
|
|
<td><a href="javascript:void(0);"><i class="ri-download-2-line"></i></a></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="activetableCheck03">
|
|
<label class="form-check-label" for="activetableCheck03"></label>
|
|
</div>
|
|
</th>
|
|
<td>#9855126598</td>
|
|
<td>Flipkart</td>
|
|
<td>Bettie Johson</td>
|
|
<td>$1,350</td>
|
|
<td><a href="javascript:void(0);"><i class="ri-download-2-line"></i></a></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="activetableCheck04">
|
|
<label class="form-check-label" for="activetableCheck04"></label>
|
|
</div>
|
|
</th>
|
|
<td>#847512653</td>
|
|
<td>Shoppers</td>
|
|
<td class="table-active">Maritza Blanda</td>
|
|
<td>$4,521</td>
|
|
<td><a href="javascript:void(0);"><i class="ri-download-2-line"></i></a></td>
|
|
</tr>
|
|
</tbody>
|
|
</table></code></pre>
|
|
</div>
|
|
</div><!-- end card-body -->
|
|
</div><!-- end card -->
|
|
</div>
|
|
<!-- end col -->
|
|
|
|
<div class="col-xl-6">
|
|
<div class="card">
|
|
<div class="card-header align-items-center d-flex">
|
|
<h4 class="card-title mb-0 flex-grow-1">Bordered Tables</h4>
|
|
<div class="flex-shrink-0">
|
|
<div class="form-check form-switch form-switch-right form-switch-md">
|
|
<label for="bordered-tables-showcode" class="form-label text-muted">Show Code</label>
|
|
<input class="form-check-input code-switcher" type="checkbox" id="bordered-tables-showcode">
|
|
</div>
|
|
</div>
|
|
</div><!-- end card header -->
|
|
|
|
<div class="card-body">
|
|
<p class="text-muted">Use <code>table-bordered</code> class to show borders on all sides of the table and cells.</p>
|
|
|
|
<div class="live-preview">
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered align-middle table-nowrap mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">ID</th>
|
|
<th scope="col">Title</th>
|
|
<th scope="col">Status</th>
|
|
<th scope="col">Assignee</th>
|
|
<th scope="col">Price</th>
|
|
<th scope="col"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="fw-medium">01</td>
|
|
<td>Implement new UX</td>
|
|
<td><span class="badge badge-soft-primary">Backlog</span></td>
|
|
<td>Lanora Sandoval</td>
|
|
<td>$4,521</td>
|
|
<td>
|
|
<div class="dropdown">
|
|
<a href="#" role="button" id="dropdownMenuLink1" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<i class="ri-more-2-fill"></i>
|
|
</a>
|
|
|
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink1">
|
|
<li><a class="dropdown-item" href="#">View</a></li>
|
|
<li><a class="dropdown-item" href="#">Edit</a></li>
|
|
<li><a class="dropdown-item" href="#">Delete</a></li>
|
|
</ul>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">02</td>
|
|
<td>Design syntax</td>
|
|
<td><span class="badge badge-soft-secondary">In Progress</span></td>
|
|
<td>Calvin Garrett</td>
|
|
<td>$7,546</td>
|
|
<td>
|
|
<div class="dropdown">
|
|
<a href="#" role="button" id="dropdownMenuLink2" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<i class="ri-more-2-fill"></i>
|
|
</a>
|
|
|
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
|
|
<li><a class="dropdown-item" href="#">View</a></li>
|
|
<li><a class="dropdown-item" href="#">Edit</a></li>
|
|
<li><a class="dropdown-item" href="#">Delete</a></li>
|
|
</ul>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">03</td>
|
|
<td>Configurable resources</td>
|
|
<td><span class="badge badge-soft-success">Done</span></td>
|
|
<td>Florence Guzman</td>
|
|
<td>$1,350</td>
|
|
<td>
|
|
<div class="dropdown">
|
|
<a href="#" role="button" id="dropdownMenuLink3" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<i class="ri-more-2-fill"></i>
|
|
</a>
|
|
|
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink3">
|
|
<li><a class="dropdown-item" href="#">View</a></li>
|
|
<li><a class="dropdown-item" href="#">Edit</a></li>
|
|
<li><a class="dropdown-item" href="#">Delete</a></li>
|
|
</ul>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">04</td>
|
|
<td>Implement extensions</td>
|
|
<td><span class="badge badge-soft-secondary">In Progress</span></td>
|
|
<td>Maritza Blanda</td>
|
|
<td>$4,521</td>
|
|
<td>
|
|
<div class="dropdown">
|
|
<a href="#" role="button" id="dropdownMenuLink4" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<i class="ri-more-2-fill"></i>
|
|
</a>
|
|
|
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink4">
|
|
<li><a class="dropdown-item" href="#">View</a></li>
|
|
<li><a class="dropdown-item" href="#">Edit</a></li>
|
|
<li><a class="dropdown-item" href="#">Delete</a></li>
|
|
</ul>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="d-none code-view">
|
|
<pre class="language-markup" style="height: 275px;"><code><!-- Bordered Tables -->
|
|
<table class="table table-bordered table-nowrap">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Id</th>
|
|
<th scope="col">Title</th>
|
|
<th scope="col">Status</th>
|
|
<th scope="col">Assignee</th>
|
|
<th scope="col">Price</th>
|
|
<th scope="col"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">1</th>
|
|
<td>Implement new UX</td>
|
|
<td><span class="badge badge-soft-primary">Backlog</span></td>
|
|
<td>Lanora Sandoval</td>
|
|
<td>$4,521</td>
|
|
<td>
|
|
<div class="dropdown">
|
|
<a href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<i class="ri-more-2-fill"></i>
|
|
</a>
|
|
|
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
|
|
<li><a class="dropdown-item" href="#">View</a></li>
|
|
<li><a class="dropdown-item" href="#">Edit</a></li>
|
|
<li><a class="dropdown-item" href="#">Delete</a></li>
|
|
</ul>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">2</th>
|
|
<td>Design syntax</td>
|
|
<td><span class="badge badge-soft-secondary">In Progress</span></td>
|
|
<td>Calvin Garrett</td>
|
|
<td>$7,546</td>
|
|
<td>
|
|
<div class="dropdown">
|
|
<a href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<i class="ri-more-2-fill"></i>
|
|
</a>
|
|
|
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
|
|
<li><a class="dropdown-item" href="#">View</a></li>
|
|
<li><a class="dropdown-item" href="#">Edit</a></li>
|
|
<li><a class="dropdown-item" href="#">Delete</a></li>
|
|
</ul>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">3</th>
|
|
<td>Configurable resources</td>
|
|
<td><span class="badge badge-soft-success">Done</span></td>
|
|
<td>Florence Guzman</td>
|
|
<td>$1,350</td>
|
|
<td>
|
|
<div class="dropdown">
|
|
<a href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<i class="ri-more-2-fill"></i>
|
|
</a>
|
|
|
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
|
|
<li><a class="dropdown-item" href="#">View</a></li>
|
|
<li><a class="dropdown-item" href="#">Edit</a></li>
|
|
<li><a class="dropdown-item" href="#">Delete</a></li>
|
|
</ul>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">4</th>
|
|
<td>Implement extensions</td>
|
|
<td><span class="badge badge-soft-secondary">In Progress</span></td>
|
|
<td>Maritza Blanda</td>
|
|
<td>$4,521</td>
|
|
<td>
|
|
<div class="dropdown">
|
|
<a href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<i class="ri-more-2-fill"></i>
|
|
</a>
|
|
|
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
|
|
<li><a class="dropdown-item" href="#">View</a></li>
|
|
<li><a class="dropdown-item" href="#">Edit</a></li>
|
|
<li><a class="dropdown-item" href="#">Delete</a></li>
|
|
</ul>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table></code></pre>
|
|
</div>
|
|
</div><!-- end card-body -->
|
|
</div><!-- end card -->
|
|
</div><!-- end col -->
|
|
</div>
|
|
<!--end row-->
|
|
|
|
<div class="row">
|
|
<div class="col-xl-6">
|
|
<div class="card">
|
|
<div class="card-header align-items-center d-flex">
|
|
<h4 class="card-title mb-0 flex-grow-1">Tables Border Colors</h4>
|
|
<div class="flex-shrink-0">
|
|
<div class="form-check form-switch form-switch-right form-switch-md">
|
|
<label for="tables-border-showcode" class="form-label text-muted">Show Code</label>
|
|
<input class="form-check-input code-switcher" type="checkbox" id="tables-border-showcode">
|
|
</div>
|
|
</div>
|
|
</div><!-- end card header -->
|
|
<div class="card-body">
|
|
<p class="text-muted">Use <code>border-</code> class with color variation class to set table border color.</p>
|
|
|
|
<div class="live-preview">
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered border-secondary table-nowrap align-middle mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">ID</th>
|
|
<th scope="col">Title</th>
|
|
<th scope="col">Status</th>
|
|
<th scope="col">Assignee</th>
|
|
<th scope="col">Price</th>
|
|
<th scope="col"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="fw-medium">01</td>
|
|
<td>Implement new UX</td>
|
|
<td><span class="badge badge-soft-primary">Backlog</span></td>
|
|
<td>Lanora Sandoval</td>
|
|
<td>$4,521</td>
|
|
<td>
|
|
<div class="dropdown">
|
|
<a href="#" role="button" id="dropdownMenuLink5" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<i class="ri-more-2-fill"></i>
|
|
</a>
|
|
|
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink5">
|
|
<li><a class="dropdown-item" href="#">View</a></li>
|
|
<li><a class="dropdown-item" href="#">Edit</a></li>
|
|
<li><a class="dropdown-item" href="#">Delete</a></li>
|
|
</ul>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">02</td>
|
|
<td>Design syntax</td>
|
|
<td><span class="badge badge-soft-secondary">In Progress</span></td>
|
|
<td>Calvin Garrett</td>
|
|
<td>$7,546</td>
|
|
<td>
|
|
<div class="dropdown">
|
|
<a href="#" role="button" id="dropdownMenuLink6" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<i class="ri-more-2-fill"></i>
|
|
</a>
|
|
|
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink6">
|
|
<li><a class="dropdown-item" href="#">View</a></li>
|
|
<li><a class="dropdown-item" href="#">Edit</a></li>
|
|
<li><a class="dropdown-item" href="#">Delete</a></li>
|
|
</ul>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">03</td>
|
|
<td>Configurable resources</td>
|
|
<td><span class="badge badge-soft-success">Done</span></td>
|
|
<td>Florence Guzman</td>
|
|
<td>$1,350</td>
|
|
<td>
|
|
<div class="dropdown">
|
|
<a href="#" role="button" id="dropdownMenuLink7" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<i class="ri-more-2-fill"></i>
|
|
</a>
|
|
|
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink7">
|
|
<li><a class="dropdown-item" href="#">View</a></li>
|
|
<li><a class="dropdown-item" href="#">Edit</a></li>
|
|
<li><a class="dropdown-item" href="#">Delete</a></li>
|
|
</ul>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">04</td>
|
|
<td>Implement extensions</td>
|
|
<td><span class="badge badge-soft-secondary">In Progress</span></td>
|
|
<td>Maritza Blanda</td>
|
|
<td>$4,521</td>
|
|
<td>
|
|
<div class="dropdown">
|
|
<a href="#" role="button" id="dropdownMenuLink8" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<i class="ri-more-2-fill"></i>
|
|
</a>
|
|
|
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink8">
|
|
<li><a class="dropdown-item" href="#">View</a></li>
|
|
<li><a class="dropdown-item" href="#">Edit</a></li>
|
|
<li><a class="dropdown-item" href="#">Delete</a></li>
|
|
</ul>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="d-none code-view">
|
|
<pre class="language-markup" style="height: 275px;"><code><!-- Tables Border Colors -->
|
|
<table class="table table-bordered border-secondary table-nowrap">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Id</th>
|
|
<th scope="col">Title</th>
|
|
<th scope="col">Status</th>
|
|
<th scope="col">Assignee</th>
|
|
<th scope="col">Price</th>
|
|
<th scope="col"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">1</th>
|
|
<td>Implement new UX</td>
|
|
<td><span class="badge badge-soft-primary">Backlog</span></td>
|
|
<td>Lanora Sandoval</td>
|
|
<td>$4,521</td>
|
|
<td>
|
|
<div class="dropdown">
|
|
<a href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<i class="ri-more-2-fill"></i>
|
|
</a>
|
|
|
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
|
|
<li><a class="dropdown-item" href="#">View</a></li>
|
|
<li><a class="dropdown-item" href="#">Edit</a></li>
|
|
<li><a class="dropdown-item" href="#">Delete</a></li>
|
|
</ul>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">2</th>
|
|
<td>Design syntax</td>
|
|
<td><span class="badge badge-soft-secondary">In Progress</span></td>
|
|
<td>Calvin Garrett</td>
|
|
<td>$7,546</td>
|
|
<td>
|
|
<div class="dropdown">
|
|
<a href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<i class="ri-more-2-fill"></i>
|
|
</a>
|
|
|
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
|
|
<li><a class="dropdown-item" href="#">View</a></li>
|
|
<li><a class="dropdown-item" href="#">Edit</a></li>
|
|
<li><a class="dropdown-item" href="#">Delete</a></li>
|
|
</ul>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">3</th>
|
|
<td>Configurable resources</td>
|
|
<td><span class="badge badge-soft-success">Done</span></td>
|
|
<td>Florence Guzman</td>
|
|
<td>$1,350</td>
|
|
<td>
|
|
<div class="dropdown">
|
|
<a href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<i class="ri-more-2-fill"></i>
|
|
</a>
|
|
|
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
|
|
<li><a class="dropdown-item" href="#">View</a></li>
|
|
<li><a class="dropdown-item" href="#">Edit</a></li>
|
|
<li><a class="dropdown-item" href="#">Delete</a></li>
|
|
</ul>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">4</th>
|
|
<td>Implement extensions</td>
|
|
<td><span class="badge badge-soft-secondary">In Progress</span></td>
|
|
<td>Maritza Blanda</td>
|
|
<td>$4,521</td>
|
|
<td>
|
|
<div class="dropdown">
|
|
<a href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<i class="ri-more-2-fill"></i>
|
|
</a>
|
|
|
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
|
|
<li><a class="dropdown-item" href="#">View</a></li>
|
|
<li><a class="dropdown-item" href="#">Edit</a></li>
|
|
<li><a class="dropdown-item" href="#">Delete</a></li>
|
|
</ul>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table></code></pre>
|
|
</div>
|
|
</div><!-- end card-body -->
|
|
</div><!-- end card -->
|
|
</div><!-- end col -->
|
|
|
|
<div class="col-xl-6">
|
|
<div class="card">
|
|
<div class="card-header align-items-center d-flex">
|
|
<h4 class="card-title mb-0 flex-grow-1">Tables Without Borders</h4>
|
|
<div class="flex-shrink-0">
|
|
<div class="form-check form-switch form-switch-right form-switch-md">
|
|
<label for="tables-without-border-showcode" class="form-label text-muted">Show Code</label>
|
|
<input class="form-check-input code-switcher" type="checkbox" id="tables-without-border-showcode">
|
|
</div>
|
|
</div>
|
|
</div><!-- end card header -->
|
|
|
|
<div class="card-body">
|
|
<p class="text-muted">Use <code>table-borderless</code> to set a table without borders.</p>
|
|
<div class="live-preview">
|
|
<div class="table-responsive">
|
|
<table class="table table-borderless align-middle table-nowrap mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">ID</th>
|
|
<th scope="col">Name</th>
|
|
<th scope="col">Job Title</th>
|
|
<th scope="col">Date</th>
|
|
<th scope="col">Status</th>
|
|
<th scope="col"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="fw-medium">01</td>
|
|
<td>Annette Black</td>
|
|
<td>Industrial Designer</td>
|
|
<td>10, Nov 2021</td>
|
|
<td><span class="badge badge-soft-success">Active</span></td>
|
|
<td>
|
|
<div class="hstack gap-3 fs-15">
|
|
<a href="javascript:void(0);" class="link-primary"><i class="ri-settings-4-line"></i></a>
|
|
<a href="javascript:void(0);" class="link-danger"><i class="ri-delete-bin-5-line"></i></a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">02</td>
|
|
<td>Bessie Cooper</td>
|
|
<td>Graphic Designer</td>
|
|
<td>13, Nov 2021</td>
|
|
<td><span class="badge badge-soft-success">Active</span></td>
|
|
<td>
|
|
<div class="hstack gap-3 fs-15">
|
|
<a href="javascript:void(0);" class="link-primary"><i class="ri-settings-4-line"></i></a>
|
|
<a href="javascript:void(0);" class="link-danger"><i class="ri-delete-bin-5-line"></i></a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">03</td>
|
|
<td>Leslie Alexander</td>
|
|
<td>Product Manager</td>
|
|
<td>17, Nov 2021</td>
|
|
<td><span class="badge badge-soft-success">Active</span></td>
|
|
<td>
|
|
<div class="hstack gap-3 fs-15">
|
|
<a href="javascript:void(0);" class="link-primary"><i class="ri-settings-4-line"></i></a>
|
|
<a href="javascript:void(0);" class="link-danger"><i class="ri-delete-bin-5-line"></i></a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">04</td>
|
|
<td>Lenora Sandoval</td>
|
|
<td>Applications Engineer</td>
|
|
<td>25, Nov 2021</td>
|
|
<td><span class="badge badge-soft-danger">Disabled</span></td>
|
|
<td>
|
|
<div class="hstack gap-3 fs-15">
|
|
<a href="javascript:void(0);" class="link-primary"><i class="ri-settings-4-line"></i></a>
|
|
<a href="javascript:void(0);" class="link-danger"><i class="ri-delete-bin-5-line"></i></a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- end card-body -->
|
|
</div><!-- end card -->
|
|
</div><!-- end col -->
|
|
</div>
|
|
<!--end row-->
|
|
|
|
<div class="row">
|
|
<div class="col-xl-6">
|
|
<div class="card">
|
|
<div class="card-header align-items-center d-flex">
|
|
<h4 class="card-title mb-0 flex-grow-1">Small Tables</h4>
|
|
<div class="flex-shrink-0">
|
|
<div class="form-check form-switch form-switch-right form-switch-md">
|
|
<label for="tables-small-showcode" class="form-label text-muted">Show Code</label>
|
|
<input class="form-check-input code-switcher" type="checkbox" id="tables-small-showcode">
|
|
</div>
|
|
</div>
|
|
</div><!-- end card header -->
|
|
|
|
<div class="card-body">
|
|
<p class="text-muted">Use <code>table-sm</code> class to create any table more compact by cutting all cell padding in half.</p>
|
|
|
|
<div class="live-preview">
|
|
<div class="table-responsive">
|
|
<table class="table table-sm table-nowrap mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">ID</th>
|
|
<th scope="col">Title</th>
|
|
<th scope="col">Status</th>
|
|
<th scope="col">Assignee</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="fw-medium">01</td>
|
|
<td>Implement new UX</td>
|
|
<td><span class="badge badge-soft-primary">Backlog</span></td>
|
|
<td>Lanora Sandoval</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">02</td>
|
|
<td>Design syntax</td>
|
|
<td><span class="badge badge-soft-secondary">In Progress</span></td>
|
|
<td>Calvin Garrett</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">03</td>
|
|
<td>Configurable resources</td>
|
|
<td><span class="badge badge-soft-success">Done</span></td>
|
|
<td>Florence Guzman</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">04</td>
|
|
<td>Implement extensions</td>
|
|
<td><span class="badge badge-soft-dark">Backlog</span></td>
|
|
<td>Maritza Blanda</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">05</td>
|
|
<td>Applications Engineer</td>
|
|
<td>
|
|
<span class="badge badge-soft-success">Done</span></td>
|
|
<td>Leslie Alexander</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="d-none code-view">
|
|
<pre class="language-markup" style="height: 275px;"><code><!-- Small Tables -->
|
|
<table class="table table-sm table-nowrap">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Id</th>
|
|
<th scope="col">Title</th>
|
|
<th scope="col">Status</th>
|
|
<th scope="col">Assignee</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">1</th>
|
|
<td>Implement new UX</td>
|
|
<td><span class="badge badge-soft-primary">Backlog</span></td>
|
|
<td>Lanora Sandoval</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">2</th>
|
|
<td>Design syntax</td>
|
|
<td><span class="badge badge-soft-secondary">In Progress</span></td>
|
|
<td>Calvin Garrett</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">3</th>
|
|
<td>Configurable resources</td>
|
|
<td><span class="badge badge-soft-success">Done</span></td>
|
|
<td>Florence Guzman</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">4</th>
|
|
<td>Implement extensions</td>
|
|
<td><span class="badge badge-soft-dark">Backlog</span></td>
|
|
<td>Maritza Blanda</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">5</th>
|
|
<td>Applications Engineer</td><td>
|
|
<span class="badge badge-soft-success">Done</span></td>
|
|
<td>Leslie Alexander</td>
|
|
</tr>
|
|
</tbody>
|
|
</table></code></pre>
|
|
</div>
|
|
</div><!-- end card-body -->
|
|
</div><!-- end card -->
|
|
</div>
|
|
<!-- end col -->
|
|
|
|
<div class="col-xl-6">
|
|
<div class="card">
|
|
<div class="card-header align-items-center d-flex">
|
|
<h4 class="card-title mb-0 flex-grow-1">Table Head</h4>
|
|
<div class="flex-shrink-0">
|
|
<div class="form-check form-switch form-switch-right form-switch-md">
|
|
<label for="tables-head-showcode" class="form-label text-muted">Show Code</label>
|
|
<input class="form-check-input code-switcher" type="checkbox" id="tables-head-showcode">
|
|
</div>
|
|
</div>
|
|
</div><!-- end card header -->
|
|
|
|
<div class="card-body">
|
|
<p class="text-muted">Use <code>table-light</code> or <code>table-dark</code> class to create <thead> appear light or dark.</p>
|
|
|
|
<div class="live-preview">
|
|
<div class="table-responsive">
|
|
<table class="table align-middle table-nowrap mb-0">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th scope="col">Student</th>
|
|
<th scope="col">Course</th>
|
|
<th scope="col">Author</th>
|
|
<th scope="col">Payment</th>
|
|
<th scope="col">Process</th>
|
|
<th scope="col">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Milana Scot</td>
|
|
<td>UI/UX design</td>
|
|
<td>Mitchell Flores</td>
|
|
<td>$450</td>
|
|
<td>
|
|
<div class="progress progress-sm">
|
|
<div class="progress-bar bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</td>
|
|
<td><a href="javascript:void(0);" class="link-success">Confirmed</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Jassica Welsh</td>
|
|
<td>3d Animation</td>
|
|
<td>Dan Evgeni</td>
|
|
<td>$860</td>
|
|
<td>
|
|
<div class="progress progress-sm">
|
|
<div class="progress-bar bg-warning" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</td>
|
|
<td><a href="javascript:void(0);" class="link-warning">Waiting</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Leslie Alexander</td>
|
|
<td>Logotype Design</td>
|
|
<td>Olimpia Jordan</td>
|
|
<td>$450</td>
|
|
<td>
|
|
<div class="progress progress-sm">
|
|
<div class="progress-bar bg-warning" role="progressbar" style="width: 35%" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</td>
|
|
<td><a href="javascript:void(0);" class="link-warning">Waiting</a></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="d-none code-view">
|
|
<pre class="language-markup" style="height: 275px;"><code><!-- Table Head -->
|
|
<table class="table align-middle table-nowrap mb-0">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th scope="col">Student</th>
|
|
<th scope="col">Course</th>
|
|
<th scope="col">Author</th>
|
|
<th scope="col">Payment</th>
|
|
<th scope="col">Process</th>
|
|
<th scope="col">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Milana Scot</td>
|
|
<td>UI/UX design</td>
|
|
<td>Mitchell Flores</td>
|
|
<td>$450</td>
|
|
<td>
|
|
<div class="progress progress-sm">
|
|
<div class="progress-bar bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</td>
|
|
<td><a href="javascript:void(0);" class="link-success">Confirmed</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Jassica Welsh</td>
|
|
<td>3d Animation</td>
|
|
<td>Dan Evgeni</td>
|
|
<td>$860</td>
|
|
<td>
|
|
<div class="progress progress-sm">
|
|
<div class="progress-bar bg-warning" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</td>
|
|
<td><a href="javascript:void(0);" class="link-warning">Waiting</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Leslie Alexander</td>
|
|
<td>Logotype Design</td>
|
|
<td>Olimpia Jordan</td>
|
|
<td>$450</td>
|
|
<td>
|
|
<div class="progress progress-sm">
|
|
<div class="progress-bar bg-warning" role="progressbar" style="width: 35%" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</td>
|
|
<td><a href="javascript:void(0);" class="link-warning">Waiting</a></td>
|
|
</tr>
|
|
</tbody>
|
|
</table></code></pre>
|
|
</div>
|
|
</div><!-- end card-body -->
|
|
</div><!-- end card -->
|
|
</div><!-- end col -->
|
|
</div>
|
|
<!--end row-->
|
|
|
|
<div class="row">
|
|
<div class="col-xl-6">
|
|
<div class="card">
|
|
<div class="card-header align-items-center d-flex">
|
|
<h4 class="card-title mb-0 flex-grow-1">Table Foot</h4>
|
|
<div class="flex-shrink-0">
|
|
<div class="form-check form-switch form-switch-right form-switch-md">
|
|
<label for="tables-foot-showcode" class="form-label text-muted">Show Code</label>
|
|
<input class="form-check-input code-switcher" type="checkbox" id="tables-foot-showcode">
|
|
</div>
|
|
</div>
|
|
</div><!-- end card header -->
|
|
|
|
<div class="card-body">
|
|
<p class="text-muted">Add <code><tbody></code> attribute to group footer content in an HTML table.</p>
|
|
|
|
<div class="live-preview">
|
|
<div class="table-responsive">
|
|
<table class="table table-nowrap mb-0">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th scope="col">ID</th>
|
|
<th scope="col">Name</th>
|
|
<th scope="col">Job Title</th>
|
|
<th scope="col">Date</th>
|
|
<th scope="col">Payment</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="fw-medium">01</td>
|
|
<td>Annette Black</td>
|
|
<td>Industrial Designer</td>
|
|
<td>10, Nov 2021</td>
|
|
<td>$450</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">02</td>
|
|
<td>Bessie Cooper</td>
|
|
<td>Graphic Designer</td>
|
|
<td>13, Nov 2021</td>
|
|
<td>$875</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">03</td>
|
|
<td>Leslie Alexander</td>
|
|
<td>Product Manager</td>
|
|
<td>17, Nov 2021</td>
|
|
<td>$410</td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot class="table-light">
|
|
<tr>
|
|
<td colspan="4">Total</td>
|
|
<td>$940</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="d-none code-view">
|
|
<pre class="language-markup" style="height: 275px;"><code><!-- Table Foot -->
|
|
<table class="table table-nowrap">
|
|
<thead class="table-light ">
|
|
<tr>
|
|
<th scope="col">Id</th>
|
|
<th scope="col">Name</th>
|
|
<th scope="col">Job Title</th>
|
|
<th scope="col">Date</th>
|
|
<th scope="col">Payment</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">1</th>
|
|
<td>Annette Black</td>
|
|
<td>Industrial Designer</td>
|
|
<td>10, Nov 2021</td>
|
|
<td>$450</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">2</th>
|
|
<td>Bessie Cooper</td>
|
|
<td>Graphic Designer</td>
|
|
<td>13, Nov 2021</td>
|
|
<td>$875</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">3</th>
|
|
<td>Leslie Alexander</td>
|
|
<td>Product Manager</td>
|
|
<td>17, Nov 2021</td>
|
|
<td>$410</td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot class="table-light">
|
|
<tr>
|
|
<td colspan="4">Total</td>
|
|
<td>$940</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table></code></pre>
|
|
</div>
|
|
</div><!-- end card-body -->
|
|
</div><!-- end card -->
|
|
</div><!-- end col -->
|
|
|
|
<div class="col-xl-6">
|
|
<div class="card">
|
|
<div class="card-header align-items-center d-flex">
|
|
<h4 class="card-title mb-0 flex-grow-1">Captions</h4>
|
|
<div class="flex-shrink-0">
|
|
<div class="form-check form-switch form-switch-right form-switch-md">
|
|
<label for="tables-caption-showcode" class="form-label text-muted">Show Code</label>
|
|
<input class="form-check-input code-switcher" type="checkbox" id="tables-caption-showcode">
|
|
</div>
|
|
</div>
|
|
</div><!-- end card header -->
|
|
|
|
<div class="card-body">
|
|
<p class="text-muted">You can also put the <code><caption></code> attribute on the top of the table with <code>caption-top</code> class.</p>
|
|
|
|
<div class="live-preview">
|
|
<div class="table-responsive">
|
|
<table class="table caption-top table-nowrap mb-0">
|
|
<caption>List of users</caption>
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th scope="col">ID</th>
|
|
<th scope="col">Student</th>
|
|
<th scope="col">Course</th>
|
|
<th scope="col">Author</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="fw-medium">01</td>
|
|
<td>Milana Scot</td>
|
|
<td>UI/UX design</td>
|
|
<td>Mitchell Flores</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">02</td>
|
|
<td>Jassica Welsh</td>
|
|
<td>3d Animation</td>
|
|
<td>Dan Evgeni</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">03</td>
|
|
<td>Leslie Alexander</td>
|
|
<td>Logotype Design</td>
|
|
<td>Olimpia Jordan</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="d-none code-view">
|
|
<pre class="language-markup" style="height: 275px;"><code><!-- Captions -->
|
|
<table class="table caption-top table-nowrap">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th scope="col">Id</th>
|
|
<th scope="col">Name</th>
|
|
<th scope="col">Job Title</th>
|
|
<th scope="col">Date</th>
|
|
<th scope="col">Payment</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">1</th>
|
|
<td>Annette Black</td>
|
|
<td>Industrial Designer</td>
|
|
<td>10, Nov 2021</td>
|
|
<td>$450</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">2</th>
|
|
<td>Bessie Cooper</td>
|
|
<td>Graphic Designer</td>
|
|
<td>13, Nov 2021</td>
|
|
<td>$875</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">3</th>
|
|
<td>Leslie Alexander</td>
|
|
<td>Product Manager</td>
|
|
<td>17, Nov 2021</td>
|
|
<td>$410</td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot class="table-light">
|
|
<tr>
|
|
<td colspan="4">Total</td>
|
|
<td>$940</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table></code></pre>
|
|
</div>
|
|
</div><!-- end card-body -->
|
|
</div><!-- end card -->
|
|
</div><!-- end col -->
|
|
</div>
|
|
<!--end row-->
|
|
|
|
<div class="row">
|
|
<div class="col-xl-6">
|
|
<div class="card">
|
|
<div class="card-header align-items-center d-flex">
|
|
<h4 class="card-title mb-0 flex-grow-1">Table Nesting</h4>
|
|
<div class="flex-shrink-0">
|
|
<div class="form-check form-switch form-switch-right form-switch-md">
|
|
<label for="tables-nesting-showcode" class="form-label text-muted">Show Code</label>
|
|
<input class="form-check-input code-switcher" type="checkbox" id="tables-nesting-showcode">
|
|
</div>
|
|
</div>
|
|
</div><!-- end card header -->
|
|
|
|
<div class="card-body">
|
|
<p class="text-muted">Example of basic table nesting. Border styles, active styles, and table variants are not inherited by nested tables.</p>
|
|
<div class="live-preview">
|
|
<div class="table-responsive">
|
|
<table class="table table-nowrap mb-0">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th scope="col">ID</th>
|
|
<th scope="col">Name</th>
|
|
<th scope="col">Job Title</th>
|
|
<th scope="col">Date</th>
|
|
<th scope="col">Payment</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="fw-medium">01</td>
|
|
<td>Annette Black</td>
|
|
<td>Industrial Designer</td>
|
|
<td>10, Nov 2021</td>
|
|
<td>$450</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="5">
|
|
<table class="table table-nowrap mb-0">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th scope="col">ID</th>
|
|
<th scope="col">Student</th>
|
|
<th scope="col">Course</th>
|
|
<th scope="col">Author</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="fw-medium">I</td>
|
|
<td>Milana Scot</td>
|
|
<td>3d Animation</td>
|
|
<td>James Black</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">II</td>
|
|
<td>Juston Eichmann</td>
|
|
<td>Design syntax</td>
|
|
<td>Olimpia Jordan</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">02</td>
|
|
<td>Bessie Cooper</td>
|
|
<td>Graphic Designer</td>
|
|
<td>13, Nov 2021</td>
|
|
<td>$875</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">03</td>
|
|
<td>Leslie Alexander</td>
|
|
<td>Product Manager</td>
|
|
<td>16, Nov 2021</td>
|
|
<td>$410</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">04</td>
|
|
<td>Bettie Johson</td>
|
|
<td>Applications Engineer</td>
|
|
<td>24, Nov 2021</td>
|
|
<td>$620</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-medium">05</td>
|
|
<td>Monkey Karry</td>
|
|
<td>Implement new UX</td>
|
|
<td>25, Nov 2021</td>
|
|
<td>$795</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="d-none code-view">
|
|
<pre class="language-markup" style="height: 275px;"><code><!-- Table Nesting -->
|
|
<table class="table table-nowrap">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th scope="col">#</th>
|
|
<th scope="col">Name</th>
|
|
<th scope="col">Job Title</th>
|
|
<th scope="col">Date</th>
|
|
<th scope="col">Payment</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">1</th>
|
|
<td>Annette Black</td>
|
|
<td>Industrial Designer</td>
|
|
<td>10, Nov 2021</td>
|
|
<td>$450</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="5">
|
|
<table class="table table-nowrap mb-0">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th scope="col">#</th>
|
|
<th scope="col">Student</th>
|
|
<th scope="col">Course</th>
|
|
<th scope="col">Author</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">1</th>
|
|
<td>Milana Scot</td>
|
|
<td>3d Animation</td>
|
|
<td>James Black</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">2</th>
|
|
<td>Juston Eichmann</td>
|
|
<td>Design syntax</td>
|
|
<td>Olimpia Jordan</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">2</th>
|
|
<td>Bessie Cooper</td>
|
|
<td>Graphic Designer</td>
|
|
<td>13, Nov 2021</td>
|
|
<td>$875</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">3</th>
|
|
<td>Leslie Alexander</td>
|
|
<td>Product Manager</td>
|
|
<td>16, Nov 2021</td>
|
|
<td>$410</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">4</th>
|
|
<td>Bettie Johson</td>
|
|
<td>Applications Engineer</td>
|
|
<td>24, Nov 2021</td>
|
|
<td>$620</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">5</th>
|
|
<td>Monkey Karry</td>
|
|
<td>Implement new UX</td>
|
|
<td>25, Nov 2021</td>
|
|
<td>$795</td>
|
|
</tr>
|
|
</tbody>
|
|
</table></code></pre>
|
|
</div>
|
|
</div><!-- end card-body -->
|
|
</div><!-- end card -->
|
|
</div><!-- end col -->
|
|
|
|
<div class="col-xl-6">
|
|
<div class="card">
|
|
<div class="card-header align-items-center d-flex">
|
|
<h4 class="card-title mb-0 flex-grow-1">Variants</h4>
|
|
<div class="flex-shrink-0">
|
|
<div class="form-check form-switch form-switch-right form-switch-md">
|
|
<label for="variants-showcode" class="form-label text-muted">Show Code</label>
|
|
<input class="form-check-input code-switcher" type="checkbox" id="variants-showcode">
|
|
</div>
|
|
</div>
|
|
</div><!-- end card header -->
|
|
|
|
<div class="card-body">
|
|
<p class="text-muted">Use <code>table-</code> class with below-mentioned color variation class within <tr> to set color on table row.</p>
|
|
|
|
<div class="live-preview">
|
|
<div class="table-responsive">
|
|
<table class="table table-nowrap mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">#</th>
|
|
<th scope="col">Name</th>
|
|
<th scope="col">Position</th>
|
|
<th scope="col">Department</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Default</td>
|
|
<td>Monkey Karry</td>
|
|
<td>Medical Specialist</td>
|
|
<td>Orthopedics</td>
|
|
</tr>
|
|
<tr class="table-primary">
|
|
<td>Primary</td>
|
|
<td>James White</td>
|
|
<td>Medical Assistant</td>
|
|
<td>Surgery</td>
|
|
</tr>
|
|
<tr class="table-secondary">
|
|
<td>Secondary</td>
|
|
<td>Aaron James</td>
|
|
<td>Medical Specialist</td>
|
|
<td>Neurology</td>
|
|
</tr>
|
|
<tr class="table-success">
|
|
<td>Success</td>
|
|
<td>Bettie Johson</td>
|
|
<td>Medical Specialist</td>
|
|
<td>Cardiology</td>
|
|
</tr>
|
|
<tr class="table-danger">
|
|
<td>Danger</td>
|
|
<td>Bessie Cooper</td>
|
|
<td>Medical Assistant</td>
|
|
<td>Surgery</td>
|
|
</tr>
|
|
<tr class="table-warning">
|
|
<td>Warning</td>
|
|
<td>Lenora Sandoval</td>
|
|
<td>Medical Assistant</td>
|
|
<td>Cardiology</td>
|
|
</tr>
|
|
<tr class="table-info">
|
|
<td>Info</td>
|
|
<td>Eric Pierce</td>
|
|
<td>Medical Specialist</td>
|
|
<td>Neurology</td>
|
|
</tr>
|
|
<tr class="table-light">
|
|
<td>Light</td>
|
|
<td>Ruth Zimmermann</td>
|
|
<td>Medical Specialist</td>
|
|
<td>Neurology</td>
|
|
</tr>
|
|
<tr class="table-dark">
|
|
<td>Dark</td>
|
|
<td>Leslie Alexander</td>
|
|
<td>Medical Assistant</td>
|
|
<td>Cardiology</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="d-none code-view">
|
|
<pre class="language-markup" style="height: 275px;"><code><!-- Variants -->
|
|
<table class="table table-nowrap">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">#</th>
|
|
<th scope="col">Name</th>
|
|
<th scope="col">Position</th>
|
|
<th scope="col">Department</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Default</td>
|
|
<td>Monkey Karry</td>
|
|
<td>Medical Specialist</td>
|
|
<td>Orthopedics</td>
|
|
</tr>
|
|
<tr class="table-primary">
|
|
<td>Primary</td>
|
|
<td>James White</td>
|
|
<td>Medical Assistant</td>
|
|
<td>Surgery</td>
|
|
</tr>
|
|
<tr class="table-secondary">
|
|
<td>Secondary</td>
|
|
<td>Aaron James</td>
|
|
<td>Medical Specialist</td>
|
|
<td>Neurology</td>
|
|
</tr>
|
|
<tr class="table-success">
|
|
<td>Success</td>
|
|
<td>Bettie Johson</td>
|
|
<td>Medical Specialist</td>
|
|
<td>Cardiology</td>
|
|
</tr>
|
|
<tr class="table-danger">
|
|
<td>Danger</td>
|
|
<td>Bessie Cooper</td>
|
|
<td>Medical Assistant</td>
|
|
<td>Surgery</td>
|
|
</tr>
|
|
<tr class="table-warning">
|
|
<td>Warning</td>
|
|
<td>Lenora Sandoval</td>
|
|
<td>Medical Assistant</td>
|
|
<td>Cardiology</td>
|
|
</tr>
|
|
<tr class="table-info">
|
|
<td>Info</td>
|
|
<td>Eric Pierce</td>
|
|
<td>Medical Specialist</td>
|
|
<td>Neurology</td>
|
|
</tr>
|
|
<tr class="table-light">
|
|
<td>Light</td>
|
|
<td>Ruth Zimmermann</td>
|
|
<td>Medical Specialist</td>
|
|
<td>Neurology</td>
|
|
</tr>
|
|
<tr class="table-dark">
|
|
<td>Dark</td>
|
|
<td>Leslie Alexander</td>
|
|
<td>Medical Assistant</td>
|
|
<td>Cardiology</td>
|
|
</tr>
|
|
</tbody>
|
|
</table></code></pre>
|
|
</div>
|
|
</div><!-- end card-body -->
|
|
</div><!-- end card -->
|
|
</div><!-- end col -->
|
|
</div>
|
|
<!--end row-->
|
|
|
|
<div class="row">
|
|
<div class="col-xl-12">
|
|
<div class="card">
|
|
<div class="card-header align-items-center d-flex">
|
|
<h4 class="card-title mb-0 flex-grow-1">Vertical alignment</h4>
|
|
<div class="flex-shrink-0">
|
|
<div class="form-check form-switch form-switch-right form-switch-md">
|
|
<label for="vertical-table-showcode" class="form-label text-muted">Show Code</label>
|
|
<input class="form-check-input code-switcher" type="checkbox" id="vertical-table-showcode">
|
|
</div>
|
|
</div>
|
|
</div><!-- end card header -->
|
|
|
|
<div class="card-body">
|
|
|
|
<p class="text-muted">Table cells of <code><thead></code> are always vertical aligned to the bottom. Table cells in <code><tbody></code> inherit their alignment from <code><table></code> and are aligned to the the top by default. Use the vertical align classes to re-align where needed.</p>
|
|
|
|
<div class="live-preview">
|
|
<div class="table-responsive">
|
|
<table class="table align-middle">
|
|
<thead>
|
|
<tr>
|
|
<th>Heading</th>
|
|
<th>Heading</th>
|
|
<th>Heading</th>
|
|
<th>Heading</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
|
|
<td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
|
|
<td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
|
|
<td>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. Use the vertical align classes to re-align where needed. inherit their alignment from and are aligned to the the top by default.</td>
|
|
</tr>
|
|
<tr class="align-bottom">
|
|
<td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td>
|
|
<td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td>
|
|
<td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td>
|
|
<td>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. Use the vertical align classes to re-align where needed. inherit their alignment from and are aligned to the the top by default.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
|
|
<td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
|
|
<td class="align-top">This cell is aligned to the top.</td>
|
|
<td>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. Use the vertical align classes to re-align where needed. inherit their alignment from and are aligned to the the top by default.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="d-none code-view">
|
|
<pre class="language-markup" style="height: 275px;"><code><!-- Vertical alignment -->
|
|
<div class="table-responsive">
|
|
<table class="table align-middle">
|
|
<thead>
|
|
<tr>
|
|
...
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
...
|
|
</tr>
|
|
<tr class="align-bottom">
|
|
...
|
|
</tr>
|
|
<tr>
|
|
<td>...</td>
|
|
<td>...</td>
|
|
<td class="align-top">This cell is aligned to the top.</td>
|
|
<td>...</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div></code></pre>
|
|
</div>
|
|
</div><!-- end card-body -->
|
|
</div><!-- end card -->
|
|
</div><!-- end col -->
|
|
</div>
|
|
<!--end row-->
|
|
|
|
<div class="row">
|
|
<div class="col-xl-12">
|
|
<div class="card">
|
|
<div class="card-header align-items-center d-flex">
|
|
<h4 class="card-title mb-0 flex-grow-1">Responsive Tables</h4>
|
|
<div class="flex-shrink-0">
|
|
<div class="form-check form-switch form-switch-right form-switch-md">
|
|
<label for="responsive-table-showcode" class="form-label text-muted">Show Code</label>
|
|
<input class="form-check-input code-switcher" type="checkbox" id="responsive-table-showcode">
|
|
</div>
|
|
</div>
|
|
</div><!-- end card header -->
|
|
|
|
<div class="card-body">
|
|
<p class="text-muted">Use <code>table-responsive</code> class to make any table responsive across all viewports. Responsive tables allow tables to be scrolled horizontally with ease.</p>
|
|
<div class="live-preview">
|
|
<div class="table-responsive">
|
|
<table class="table align-middle table-nowrap mb-0">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th scope="col" style="width: 42px;">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="responsivetableCheck">
|
|
<label class="form-check-label" for="responsivetableCheck"></label>
|
|
</div>
|
|
</th>
|
|
<th scope="col">ID</th>
|
|
<th scope="col">Date</th>
|
|
<th scope="col">Status</th>
|
|
<th scope="col">Customer</th>
|
|
<th scope="col">Purchased</th>
|
|
<th scope="col">Revenue</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="responsivetableCheck01">
|
|
<label class="form-check-label" for="responsivetableCheck01"></label>
|
|
</div>
|
|
</th>
|
|
<td><a href="#" class="fw-medium">#VZ2110</a></td>
|
|
<td>10 Oct, 14:47</td>
|
|
<td class="text-success"><i class="ri-checkbox-circle-line fs-17 align-middle"></i> Paid</td>
|
|
<td>
|
|
<div class="d-flex gap-2 align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<img src="{{ URL::asset('assets/images/users/avatar-3.jpg') }}" alt="" class="avatar-xs rounded-circle" />
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
Jordan Kennedy
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>Mastering the grid</td>
|
|
<td>$9.98</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="responsivetableCheck02">
|
|
<label class="form-check-label" for="responsivetableCheck02"></label>
|
|
</div>
|
|
</th>
|
|
<td><a href="#" class="fw-medium">#VZ2109</a></td>
|
|
<td>17 Oct, 02:10</td>
|
|
<td class="text-success"><i class="ri-checkbox-circle-line fs-17 align-middle"></i> Paid</td>
|
|
<td>
|
|
<div class="d-flex gap-2 align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<img src="{{ URL::asset('assets/images/users/avatar-4.jpg') }}" alt="" class="avatar-xs rounded-circle" />
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
Jackson Graham
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>Splashify</td>
|
|
<td>$270.60</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="responsivetableCheck03">
|
|
<label class="form-check-label" for="responsivetableCheck03"></label>
|
|
</div>
|
|
</th>
|
|
<td><a href="#" class="fw-medium">#VZ2108</a></td>
|
|
<td>26 Oct, 08:20</td>
|
|
<td class="text-primary"><i class="ri-refresh-line fs-17 align-middle"></i> Refunded</td>
|
|
<td>
|
|
<div class="d-flex gap-2 align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<img src="{{ URL::asset('assets/images/users/avatar-5.jpg') }}" alt="" class="avatar-xs rounded-circle" />
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
Lauren Trujillo
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>Wireframing Kit for Figma</td>
|
|
<td>$145.42</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="responsivetableCheck04">
|
|
<label class="form-check-label" for="responsivetableCheck04"></label>
|
|
</div>
|
|
</th>
|
|
<td><a href="#" class="fw-medium">#VZ2107</a></td>
|
|
<td>02 Nov, 04:52</td>
|
|
<td class="text-danger"><i class="ri-close-circle-line fs-17 align-middle"></i> Cancel</td>
|
|
<td>
|
|
<div class="d-flex gap-2 align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<img src="{{ URL::asset('assets/images/users/avatar-6.jpg') }}" alt="" class="avatar-xs rounded-circle" />
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
Curtis Weaver
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>Wireframing Kit for Figma</td>
|
|
<td>$170.68</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="responsivetableCheck05">
|
|
<label class="form-check-label" for="responsivetableCheck05"></label>
|
|
</div>
|
|
</th>
|
|
<td><a href="#" class="fw-medium">#VZ2106</a></td>
|
|
<td>10 Nov, 07:20</td>
|
|
<td class="text-success"><i class="ri-checkbox-circle-line fs-17 align-middle"></i> Paid</td>
|
|
<td>
|
|
<div class="d-flex gap-2 align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<img src="{{ URL::asset('assets/images/users/avatar-1.jpg') }}" alt="" class="avatar-xs rounded-circle" />
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
Jason schuller
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>Splashify</td>
|
|
<td>$350.87</td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot class="table-light">
|
|
<tr>
|
|
<td colspan="6">Total</td>
|
|
<td>$947.55</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
<!-- end table -->
|
|
</div>
|
|
<!-- end table responsive -->
|
|
</div>
|
|
<div class="d-none code-view">
|
|
<pre class="language-markup" style="height: 275px;"><code><div class="table-responsive">
|
|
<table class="table align-middle mb-0">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th scope="col">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="responsivetableCheck">
|
|
<label class="form-check-label" for="responsivetableCheck"></label>
|
|
</div>
|
|
</th>
|
|
<th scope="col">#</th>
|
|
<th scope="col">Date</th>
|
|
<th scope="col">Status</th>
|
|
<th scope="col">Customer</th>
|
|
<th scope="col">Purchased</th>
|
|
<th scope="col">Revenue</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="responsivetableCheck01">
|
|
<label class="form-check-label" for="responsivetableCheck01"></label>
|
|
</div>
|
|
</th>
|
|
<td><a href="#" class="fw-semibold">#VZ2110</a></td>
|
|
<td>10 Oct, 14:47</td>
|
|
<td class="text-success"><i class="ri-checkbox-circle-line fs-17 align-middle"></i> Paid</td>
|
|
<td>
|
|
<div class="d-flex gap-2 align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<img src="assets/images/users/avatar-3.jpg" alt="" class="avatar-xs rounded-circle" />
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
Jordan Kennedy
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>Mastering the grid</td>
|
|
<td>$9.98</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="responsivetableCheck02">
|
|
<label class="form-check-label" for="responsivetableCheck02"></label>
|
|
</div>
|
|
</th>
|
|
<td><a href="#" class="fw-semibold">#VZ2109</a></td>
|
|
<td>17 Oct, 02:10</td>
|
|
<td class="text-success"><i class="ri-checkbox-circle-line fs-17 align-middle"></i> Paid</td>
|
|
<td>
|
|
<div class="d-flex gap-2 align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<img src="assets/images/users/avatar-4.jpg" alt="" class="avatar-xs rounded-circle" />
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
Jackson Graham
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>Splashify</td>
|
|
<td>$270.60</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="responsivetableCheck03">
|
|
<label class="form-check-label" for="responsivetableCheck03"></label>
|
|
</div>
|
|
</th>
|
|
<td><a href="#" class="fw-semibold">#VZ2108</a></td>
|
|
<td>26 Oct, 08:20</td>
|
|
<td class="text-primary"><i class="ri-refresh-line fs-17 align-middle"></i> Refunded</td>
|
|
<td>
|
|
<div class="d-flex gap-2 align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<img src="assets/images/users/avatar-5.jpg" alt="" class="avatar-xs rounded-circle" />
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
Lauren Trujillo
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>Wireframing Kit for Figma</td>
|
|
<td>$145.42</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="responsivetableCheck04">
|
|
<label class="form-check-label" for="responsivetableCheck04"></label>
|
|
</div>
|
|
</th>
|
|
<td><a href="#" class="fw-semibold">#VZ2107</a></td>
|
|
<td>02 Nov, 04:52</td>
|
|
<td class="text-danger"><i class="ri-close-circle-line fs-17 align-middle"></i> Cancel</td>
|
|
<td>
|
|
<div class="d-flex gap-2 align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<img src="assets/images/users/avatar-6.jpg" alt="" class="avatar-xs rounded-circle" />
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
Curtis Weaver
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>Wireframing Kit for Figma</td>
|
|
<td>$170.68</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="responsivetableCheck05">
|
|
<label class="form-check-label" for="responsivetableCheck05"></label>
|
|
</div>
|
|
</th>
|
|
<td><a href="#" class="fw-semibold">#VZ2106</a></td>
|
|
<td>10 Nov, 07:20</td>
|
|
<td class="text-success"><i class="ri-checkbox-circle-line fs-17 align-middle"></i> Paid</td>
|
|
<td>
|
|
<div class="d-flex gap-2 align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<img src="assets/images/users/avatar-1.jpg" alt="" class="avatar-xs rounded-circle" />
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
Jason schuller
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>Splashify</td>
|
|
<td>$350.87</td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot class="table-light">
|
|
<tr>
|
|
<td colspan="6">Total</td>
|
|
<td>$947.55</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
<!-- end table -->
|
|
</div>
|
|
<!-- end table responsive --></code></pre>
|
|
</div>
|
|
</div><!-- end card-body -->
|
|
</div><!-- end card -->
|
|
</div><!-- end col -->
|
|
</div>
|
|
<!--end row-->
|
|
@endsection
|
|
@section('script')
|
|
<script src="{{ URL::asset('assets/libs/prismjs/prismjs.min.js') }}"></script>
|
|
|
|
<script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
|
|
@endsection
|