Blocks
Last updated 3 months ago
Table
Contents
Tables are essential UI components used to present structured data in an organized and readable format. They support features like sorting, filtering, and inline actions, making data management efficient.
Code Structure
Here’s the Code Structure for the Table Filtering Block, using Bootstrap and vanilla JavaScript:
View Mode
HTML
<table class="table align-middle">
<thead>
<tr>
<th>#</th>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
<!-- Usage Example -->
<BaseTable :data_options="dataOptions">
<template #header>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Status</th>
</tr>
</template>
<template #body>
<tr>
<td>3</td>
<td>Alice Johnson</td>
<td>[email protected]</td>
<td>active</td>
</tr>
<tr>
<td>4</td>
<td>Bob Williams</td>
<td>[email protected]</td>
<td>inactive</td>
</tr>
<tr>
<td>5</td>
<td>Charlie Brown</td>
<td>[email protected]</td>
<td>active</td>
</tr>
<tr>
<td>6</td>
<td>Diana Miller</td>
<td>[email protected]</td>
<td>inactive</td>
</tr>
</template>
</BaseTable>
<!-- Vue Component Code Block -->
<template>
<table class="table align-middle">
<thead>
<slot name="header"></slot>
</thead>
<tbody>
<slot v-if="data_options?.source?.length" name="body"></slot>
<empty-data-table v-else />
</tbody>
</table>
</template>
<script setup>
import EmptyDataTable from './EmptyDataTable.vue'
defineProps(['data_options'])
</script>
<! -- Empty data table component -->
<template>
<tr>
<td class="text-center text-body-sm text-subdued" colspan="100%">
لم يتم العثور على أي سجلات.
</td>
</tr>
</template>
<script>
export default {
name: 'EmptyDataTable',
props: {
dataOptions: {
type: Object,
default(rawProps) {
return {
source: [],
}
},
},
emptyMessage: {
type: String,
default: 'لا توجد نتائج',
},
subeEmptyMessage: {
type: String,
default: 'لا توجد نتائج',
},
hasAddBnt: {
type: Boolean,
default: false,
},
addBtnTitle: {
type: String,
default: 'إضافة جديد',
},
addBtnModalId: {
type: String,
default: '',
},
},
computed: {
// map getters here
},
}
</script>Example #1
View Mode
HTML
<div class="table-wrapper">
<div class="table-header d-flex justify-content-between align-items-center">
<div class="input-group"><span class="tticon-search input-group-text"></span>
<input class="form-control" type="search" placeholder="بحث داخل الحقول..." />
</div>
<div class="d-flex gap-2 align-items-center"><span class="spinner"></span>
<div class="dropdown">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown"
aria-expanded="false"><span class="tticon-filter-light btn-icon"> </span><span>فلترة</span></button>
<ul class="dropdown-menu dropdown-start">
<li class="dropdown-header"> <span class="dropdown-title">اختر إجراء الفلترة</span></li>
<li>
<button class="dropdown-item dropdown-toggle submenu-open" data-bs-toggle="dropdown">الخدمة<span
class="dropdown-end-area"> <span class="dropdown-number">2</span><span
class="dropdown-chevron tticon-chevron-left"></span></span></button>
<ul class="dropdown-menu submenu" style="min-width: 230px">
<li class="dropdown-header">
<button class="submenu-close dropdown-toggle"> <span class="tticon-chevron-right"> </span>رجوع
للفلترة</button>
</li>
<li class="dropdown-search"> <span class="input-group"><span
class="tticon-search input-group-text"></span>
<input class="form-control" type="text" placeholder="بحث في الفلتر.." /></span></li>
<li class="dropdown-checks"><span class="form-check dropdown-check-item">
<label class="form-label">
<input class="form-check-input" type="checkbox" value="" />خدمة توفير نقاط البيع
</label></span><span class="form-check dropdown-check-item">
<label class="form-label">
<input class="form-check-input" type="checkbox" value="" checked="checked" />خدمة صرف العلاج الدوائي
</label></span></li>
<li class="dropdown-footer">
<button class="btn btn-primary btn-sm">اعتماد</button>
<button class="btn btn-secondary btn-sm">إعادة تعيين</button>
</li>
</ul>
</li>
<li>
<button class="dropdown-item dropdown-toggle submenu-open" data-bs-toggle="dropdown">الحالة<span
class="dropdown-end-area"> <span class="dropdown-number">1</span><span
class="dropdown-chevron tticon-chevron-left"></span></span></button>
<ul class="dropdown-menu submenu" style="min-width: 230px">
<li class="dropdown-header">
<button class="submenu-close dropdown-toggle"> <span class="tticon-chevron-right"> </span>رجوع
للفلترة</button>
</li>
<li class="dropdown-search"> <span class="input-group"><span
class="tticon-search input-group-text"></span>
<input class="form-control" type="text" placeholder="بحث في الفلتر.." /></span></li>
<li class="dropdown-checks"><span class="form-check dropdown-check-item">
<label class="form-label">
<input class="form-check-input" type="checkbox" value="" />قيد المراجعة
</label></span><span class="form-check dropdown-check-item">
<label class="form-label">
<input class="form-check-input" type="checkbox" value="" checked="checked" />قيد التنفيذ
</label></span><span class="form-check dropdown-check-item">
<label class="form-label">
<input class="form-check-input" type="checkbox" value="" />مكتملة
</label></span><span class="form-check dropdown-check-item">
<label class="form-label">
<input class="form-check-input" type="checkbox" value="" />تجربة سريعة
</label></span></li>
<li class="dropdown-footer">
<button class="btn btn-primary btn-sm">اعتماد</button>
<button class="btn btn-secondary btn-sm">إعادة تعيين</button>
</li>
</ul>
</li>
<li>
<button class="dropdown-item dropdown-toggle submenu-open" data-bs-toggle="dropdown">النطاق الزمني<span
class="dropdown-end-area"> <span class="dropdown-number d-none">0</span><span
class="dropdown-chevron tticon-chevron-left"></span></span></button>
<ul class="dropdown-menu submenu" style="min-width: 230px">
<li class="dropdown-header">
<button class="submenu-close dropdown-toggle"> <span class="tticon-chevron-right"> </span>رجوع
للفلترة</button>
</li>
<li class="js-stop-propagation">
<input class="js-datepicker" type="hidden" />
</li>
<li class="dropdown-footer">
<button class="btn btn-primary btn-sm">اعتماد</button>
<button class="btn btn-secondary btn-sm">إعادة تعيين</button>
</li>
</ul>
</li>
</ul>
</div>
<button class="btn btn-secondary btn-sm flex-shrink-0"><span class="tticon-download btn-icon"> </span>
<sapn class="d-none d-sm-inline">نسخة CSV</sapn>
</button>
</div>
</div>
<div>
<table class="table align-middle">
<thead>
<tr>
<th class="d-none d-sm-table-cell text-english" scope="col">#</th>
<th scope="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" />
</div>
</th>
<th class="d-none d-sm-table-cell" scope="col">المٌعرّف</th>
<th scope="col">الخدمة</th>
<th scope="col">المستفيد</th>
<th class="d-none d-xxl-table-cell" scope="col">الميزانية</th>
<th class="d-none d-md-table-cell d-lg-none d-xl-table-cell" scope="col">التنفيذ</th>
<th class="d-none d-xl-table-cell" scope="col">الردود</th>
<th scope="col">الحالة</th>
<th class="d-none d-xl-table-cell" scope="col">تاريخ الإنشاء</th>
<th scope="col">العمليات</th>
</tr>
</thead>
<tbody>
<tr>
<td class="d-none d-sm-table-cell text-english text-subdued">1</td>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" />
</div>
</td>
<td class="d-none d-sm-table-cell text-english">#110654</td>
<td>خدمة توفير نقاط البيع</td>
<td>محمد العتيبي</td>
<td class="d-none d-xxl-table-cell"><span class="d-flex align-items-center"><span class="text-english">489
</span><span class="tticon-sar icon-12"></span></span></td>
<td class="d-none d-md-table-cell d-lg-none d-xl-table-cell">يومين</td>
<td class="d-none d-xl-table-cell"><span class="number-badge">6</span></td>
<td> <span class="status status--warning"> قيد المراجعة</span></td>
<td class="d-none d-xl-table-cell text-english">24-6-2024</td>
<td>
<div class="dropdown">
<button class="btn btn-square dropdown-toggle" type="button" data-bs-toggle="dropdown"
aria-expanded="false" data-boundary="viewport"><span
class="tticon-dots-horizontal-bold btn-icon"></span></button>
<ul class="dropdown-menu dropdown-start">
<li class="dropdown-header"> <span>اختر عملية</span></li>
<li><a class="dropdown-item" href="order-page.html"><span
class="tticon-eye dropdown-icon"></span>التفاصيل</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-link dropdown-icon"></span>الخدمة</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-pen dropdown-icon"></span>تحرير</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-download dropdown-icon"></span>تحميل</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td class="d-none d-sm-table-cell text-english text-subdued">2</td>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" />
</div>
</td>
<td class="d-none d-sm-table-cell text-english">#110654</td>
<td>خدمة صرف العلاج الدوائي</td>
<td>عبدالله الأشمري</td>
<td class="d-none d-xxl-table-cell">مجانية</td>
<td class="d-none d-md-table-cell d-lg-none d-xl-table-cell">يومين</td>
<td class="d-none d-xl-table-cell"><span class="number-badge">4</span></td>
<td> <span class="status status--success">مكتملة</span></td>
<td class="d-none d-xl-table-cell text-english">24-6-2024</td>
<td>
<div class="dropdown">
<button class="btn btn-square dropdown-toggle" type="button" data-bs-toggle="dropdown"
aria-expanded="false" data-boundary="viewport"><span
class="tticon-dots-horizontal-bold btn-icon"></span></button>
<ul class="dropdown-menu dropdown-start">
<li class="dropdown-header"> <span>اختر عملية</span></li>
<li><a class="dropdown-item" href="order-page.html"><span
class="tticon-eye dropdown-icon"></span>التفاصيل</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-link dropdown-icon"></span>الخدمة</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-pen dropdown-icon"></span>تحرير</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-download dropdown-icon"></span>تحميل</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td class="d-none d-sm-table-cell text-english text-subdued">3</td>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" />
</div>
</td>
<td class="d-none d-sm-table-cell text-english">#110654</td>
<td>خدمة صرف العلاج الدوائي</td>
<td>خالد القحطاني</td>
<td class="d-none d-xxl-table-cell"><span class="d-flex align-items-center"><span class="text-english">210
</span><span class="tticon-sar icon-12"></span></span></td>
<td class="d-none d-md-table-cell d-lg-none d-xl-table-cell">يومين</td>
<td class="d-none d-xl-table-cell"><span class="number-badge">0</span></td>
<td> <span class="status status--info">قيد التنفيذ</span></td>
<td class="d-none d-xl-table-cell text-english">24-6-2024</td>
<td>
<div class="dropdown">
<button class="btn btn-square dropdown-toggle" type="button" data-bs-toggle="dropdown"
aria-expanded="false" data-boundary="viewport"><span
class="tticon-dots-horizontal-bold btn-icon"></span></button>
<ul class="dropdown-menu dropdown-start">
<li class="dropdown-header"> <span>اختر عملية</span></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-eye dropdown-icon"></span>التفاصيل</a></li>
<li><a class="dropdown-item" href="order-page.html"><span
class="tticon-link dropdown-icon"></span>الخدمة</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-pen dropdown-icon"></span>تحرير</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-download dropdown-icon"></span>تحميل</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-footer">
<ul class="pagination">
<li class="pagination__item pagination__item--disabled pagination__item--prev"><a class="pagination__item-link"
href="#!"><span class="pagination__item-icon tticon-chevron-right"></span></a></li>
<li class="pagination__item pagination__item--active"><a class="pagination__item-link" href="#!">1</a></li>
<li class="pagination__item"><a class="pagination__item-link" href="#!">2</a></li>
<li class="pagination__item"><a class="pagination__item-link" href="#!">3</a></li>
<li class="pagination__item"><span class="pagination__item-dots">...</span></li>
<li class="pagination__item"><a class="pagination__item-link" href="#!">12</a></li>
<li class="pagination__item pagination__item--next"><a class="pagination__item-link" href="#!"><span
class="pagination__item-icon tticon-chevron-left"></span></a></li>
</ul>
<div class="end-area">
<div class="dropdown">
<button class="dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<svg class="dropdown-img" width="24" height="24" viewBox="0 0 24 24" fill="var(--tt-text-loud)"
xmlns="http://www.w3.org/2000/svg">
<path
d="M10.306 2.55301L6.29113 7.314C5.61613 8.114 6.18913 9.33304 7.23913 9.33304H15.7611C16.8111 9.33304 17.3831 8.114 16.7091 7.314L12.6942 2.55301C12.0712 1.81501 10.929 1.81501 10.306 2.55301Z" />
<path opacity="0.4"
d="M12.694 21.447L16.7089 16.686C17.3839 15.886 16.8109 14.667 15.7609 14.667H7.23893C6.18893 14.667 5.61693 15.886 6.29093 16.686L10.3058 21.447C10.9288 22.185 12.071 22.185 12.694 21.447Z" />
</svg>10
</button>
<ul class="dropdown-menu dropdown-start">
<li><a class="dropdown-item active" href="#!">10</a></li>
<li><a class="dropdown-item" href="#!">20</a></li>
<li><a class="dropdown-item" href="#!">30</a></li>
<li><a class="dropdown-item" href="#!">40</a></li>
<li><a class="dropdown-item" href="#!">50</a></li>
</ul>
</div><span>93</span><span class="d-none d-sm-inline">/</span><span class="d-none d-sm-inline">1-10</span>
</div>
</div>
</div>
<!-- Usage Example -->
<DefaultTable
:data_options="dataOptions"
:total_items="totalItems"
@perPageUpdated="updatePerPage"
@search-filter="onSearch"
@pageChanged="onPageChange"
>
<template #filter>
<div class="dropdown">
<button
class="btn btn-secondary btn-sm dropdown-toggle"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<span class="tticon-filter-light btn-icon"> </span><span>فلترة</span>
</button>
<ul class="dropdown-menu dropdown-start">
<li class="dropdown-header">
<span class="dropdown-title">اختر إجراء الفلترة</span>
</li>
<li>
<button
class="dropdown-item dropdown-toggle submenu-open"
data-bs-toggle="dropdown"
>
الخدمة<span class="dropdown-end-area">
<span class="dropdown-number">2</span
><span class="dropdown-chevron tticon-chevron-left"></span
></span>
</button>
<ul class="dropdown-menu submenu" style="min-width: 230px">
<li class="dropdown-header">
<button class="submenu-close dropdown-toggle">
<span class="tticon-chevron-right"> </span>رجوع للفلترة
</button>
</li>
<li class="dropdown-search">
<span class="input-group"
><span class="tticon-search input-group-text"></span>
<input class="form-control" type="text" placeholder="بحث في الفلتر.."
/></span>
</li>
<li class="dropdown-checks">
<span class="form-check dropdown-check-item">
<label class="form-label">
<input class="form-check-input" type="checkbox" value="" />خدمة توفير
نقاط البيع
</label></span
><span class="form-check dropdown-check-item">
<label class="form-label">
<input
class="form-check-input"
type="checkbox"
value=""
checked="checked"
/>خدمة صرف العلاج الدوائي
</label></span
>
</li>
<li class="dropdown-footer">
<button class="btn btn-primary btn-sm">اعتماد</button>
<button class="btn btn-secondary btn-sm">إعادة تعيين</button>
</li>
</ul>
</li>
<li>
<button
class="dropdown-item dropdown-toggle submenu-open"
data-bs-toggle="dropdown"
>
الحالة<span class="dropdown-end-area">
<span class="dropdown-number">1</span
><span class="dropdown-chevron tticon-chevron-left"></span
></span>
</button>
<ul class="dropdown-menu submenu" style="min-width: 230px">
<li class="dropdown-header">
<button class="submenu-close dropdown-toggle">
<span class="tticon-chevron-right"> </span>رجوع للفلترة
</button>
</li>
<li class="dropdown-search">
<span class="input-group"
><span class="tticon-search input-group-text"></span>
<input class="form-control" type="text" placeholder="بحث في الفلتر.."
/></span>
</li>
<li class="dropdown-checks">
<span class="form-check dropdown-check-item">
<label class="form-label">
<input class="form-check-input" type="checkbox" value="" />قيد المراجعة
</label></span
><span class="form-check dropdown-check-item">
<label class="form-label">
<input
class="form-check-input"
type="checkbox"
value=""
checked="checked"
/>قيد التنفيذ
</label></span
><span class="form-check dropdown-check-item">
<label class="form-label">
<input class="form-check-input" type="checkbox" value="" />مكتملة
</label></span
><span class="form-check dropdown-check-item">
<label class="form-label">
<input class="form-check-input" type="checkbox" value="" />تجربة سريعة
</label></span
>
</li>
<li class="dropdown-footer">
<button class="btn btn-primary btn-sm">اعتماد</button>
<button class="btn btn-secondary btn-sm">إعادة تعيين</button>
</li>
</ul>
</li>
<li>
<button
class="dropdown-item dropdown-toggle submenu-open"
data-bs-toggle="dropdown"
>
النطاق الزمني<span class="dropdown-end-area">
<span class="dropdown-number d-none">0</span
><span class="dropdown-chevron tticon-chevron-left"></span
></span>
</button>
<ul class="dropdown-menu submenu" style="min-width: 230px">
<li class="dropdown-header">
<button class="submenu-close dropdown-toggle">
<span class="tticon-chevron-right"> </span>رجوع للفلترة
</button>
</li>
<li class="js-stop-propagation">
<input class="js-datepicker" type="hidden" />
</li>
<li class="dropdown-footer">
<button class="btn btn-primary btn-sm">اعتماد</button>
<button class="btn btn-secondary btn-sm">إعادة تعيين</button>
</li>
</ul>
</li>
</ul>
</div>
</template>
<template #buttons>
<Button btn-style="secondary" label="نسخة CSV" icon="tticon-download" />
</template>
<template #header>
<tr>
<th class="d-none d-sm-table-cell text-english" scope="col">#</th>
<th scope="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" />
</div>
</th>
<th class="d-none d-sm-table-cell" scope="col">المٌعرّف</th>
<th scope="col">الخدمة</th>
<th scope="col">المستفيد</th>
<th class="d-none d-xxl-table-cell" scope="col">الميزانية</th>
<th class="d-none d-md-table-cell d-lg-none d-xl-table-cell" scope="col">
التنفيذ
</th>
<th class="d-none d-xl-table-cell" scope="col">الردود</th>
<th scope="col">الحالة</th>
<th class="d-none d-xl-table-cell" scope="col">تاريخ الإنشاء</th>
<th scope="col">العمليات</th>
</tr>
</template>
<template #body>
<tr>
<td class="d-none d-sm-table-cell text-english text-subdued">1</td>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" />
</div>
</td>
<td class="d-none d-sm-table-cell text-english">#110654</td>
<td>خدمة توفير نقاط البيع</td>
<td>محمد العتيبي</td>
<td class="d-none d-xxl-table-cell">
<span class="d-flex align-items-center"
><span class="text-english">489 </span><span class="tticon-sar icon-12"></span
></span>
</td>
<td class="d-none d-md-table-cell d-lg-none d-xl-table-cell">يومين</td>
<td class="d-none d-xl-table-cell"><span class="number-badge">6</span></td>
<td><span class="status status--warning"> قيد المراجعة</span></td>
<td class="d-none d-xl-table-cell text-english">24-6-2024</td>
<td>
<div class="dropdown">
<button
class="btn btn-square dropdown-toggle"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"
data-boundary="viewport"
>
<span class="tticon-dots-horizontal-bold btn-icon"></span>
</button>
<ul class="dropdown-menu dropdown-start">
<li class="dropdown-header"><span>اختر عملية</span></li>
<li>
<a class="dropdown-item" href="order-page.html"
><span class="tticon-eye dropdown-icon"></span>التفاصيل</a
>
</li>
<li>
<a class="dropdown-item" href="#!"
><span class="tticon-link dropdown-icon"></span>الخدمة</a
>
</li>
<li>
<a class="dropdown-item" href="#!"
><span class="tticon-pen dropdown-icon"></span>تحرير</a
>
</li>
<li>
<a class="dropdown-item" href="#!"
><span class="tticon-download dropdown-icon"></span>تحميل</a
>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td class="d-none d-sm-table-cell text-english text-subdued">2</td>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" />
</div>
</td>
<td class="d-none d-sm-table-cell text-english">#110654</td>
<td>خدمة صرف العلاج الدوائي</td>
<td>عبدالله الأشمري</td>
<td class="d-none d-xxl-table-cell">مجانية</td>
<td class="d-none d-md-table-cell d-lg-none d-xl-table-cell">يومين</td>
<td class="d-none d-xl-table-cell"><span class="number-badge">4</span></td>
<td><span class="status status--success">مكتملة</span></td>
<td class="d-none d-xl-table-cell text-english">24-6-2024</td>
<td>
<div class="dropdown">
<button
class="btn btn-square dropdown-toggle"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"
data-boundary="viewport"
>
<span class="tticon-dots-horizontal-bold btn-icon"></span>
</button>
<ul class="dropdown-menu dropdown-start">
<li class="dropdown-header"><span>اختر عملية</span></li>
<li>
<a class="dropdown-item" href="order-page.html"
><span class="tticon-eye dropdown-icon"></span>التفاصيل</a
>
</li>
<li>
<a class="dropdown-item" href="#!"
><span class="tticon-link dropdown-icon"></span>الخدمة</a
>
</li>
<li>
<a class="dropdown-item" href="#!"
><span class="tticon-pen dropdown-icon"></span>تحرير</a
>
</li>
<li>
<a class="dropdown-item" href="#!"
><span class="tticon-download dropdown-icon"></span>تحميل</a
>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td class="d-none d-sm-table-cell text-english text-subdued">3</td>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" />
</div>
</td>
<td class="d-none d-sm-table-cell text-english">#110654</td>
<td>خدمة صرف العلاج الدوائي</td>
<td>خالد القحطاني</td>
<td class="d-none d-xxl-table-cell">
<span class="d-flex align-items-center"
><span class="text-english">210 </span><span class="tticon-sar icon-12"></span
></span>
</td>
<td class="d-none d-md-table-cell d-lg-none d-xl-table-cell">يومين</td>
<td class="d-none d-xl-table-cell"><span class="number-badge">0</span></td>
<td><span class="status status--info">قيد التنفيذ</span></td>
<td class="d-none d-xl-table-cell text-english">24-6-2024</td>
<td>
<div class="dropdown">
<button
class="btn btn-square dropdown-toggle"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"
data-boundary="viewport"
>
<span class="tticon-dots-horizontal-bold btn-icon"></span>
</button>
<ul class="dropdown-menu dropdown-start">
<li class="dropdown-header"><span>اختر عملية</span></li>
<li>
<a class="dropdown-item" href="#!"
><span class="tticon-eye dropdown-icon"></span>التفاصيل</a
>
</li>
<li>
<a class="dropdown-item" href="order-page.html"
><span class="tticon-link dropdown-icon"></span>الخدمة</a
>
</li>
<li>
<a class="dropdown-item" href="#!"
><span class="tticon-pen dropdown-icon"></span>تحرير</a
>
</li>
<li>
<a class="dropdown-item" href="#!"
><span class="tticon-download dropdown-icon"></span>تحميل</a
>
</li>
</ul>
</div>
</td>
</tr>
</template>
</DefaultTable>
<!-- Vue Component Code Block -->
<template>
<div class="table-wrapper mt-4">
<div class="table-header d-flex justify-content-between align-items-center">
<div class="input-group">
<span class="tticon-search input-group-text"></span>
<input
class="form-control"
@input="emit('search-filter', filter)"
v-model="filter.q"
type="text"
placeholder="بحث داخل الحقول..."
/>
</div>
<div class="d-flex gap-2 align-items-center">
<slot name="filter"></slot>
<slot name="buttons"></slot>
</div>
</div>
<div class="overflow-scrolld">
<table class="table align-middle">
<thead>
<slot name="header"></slot>
</thead>
<tbody>
<slot v-if="data_options?.source?.length" name="body"></slot>
<empty-data-table v-else />
</tbody>
</table>
</div>
<div class="table-footer">
<paginate
:prev-text="'‹'"
:next-text="'›'"
:page-count="Math.ceil(total_items / perPage)"
:click-handler="nextPage"
:container-class="'pagination'"
:page-class="'pagination__item'"
:page-link-class="'pagination__item-link'"
:prev-class="'pagination__item pagination__item--prev'"
:prev-link-class="'pagination__item-link'"
:next-class="'pagination__item pagination__item--next'"
:next-link-class="'pagination__item-link'"
:active-class="'pagination__item--active'"
:disabled-class="'pagination__item--disabled'"
:break-view-class="'pagination__item'"
:break-view-link-class="'pagination__item-dots'"
:value="currentPage"
>
</paginate>
<data-table-counter
@update-per-page="updatePerPage"
:per-page="perPage"
:data-options="data_options"
/>
</div>
</div>
</template>
<script setup>
import { computed, provide, ref } from 'vue'
import Paginate from 'vuejs-paginate-next'
import DataTableCounter from './DataTableCounter.vue'
import { useRoute, useRouter } from 'vue-router'
import EmptyDataTable from './EmptyDataTable.vue'
const route = useRoute()
const router = useRouter()
defineProps(['data_options', 'total_items'])
const emit = defineEmits(['perPageUpdated', 'search-filter', 'pageChanged'])
const perPage = ref(10)
const currentPage = computed(() => {
return route.query.page ? parseInt(route.query.page) : 1
})
const currentPageSeek = computed(() => {
return (currentPage.value - 1) * perPage.value
})
provide('currentPageSeek', currentPageSeek)
const filter = ref({
q: '',
})
function updatePerPage(count) {
perPage.value = count
emit('perPageUpdated', count)
updateRoute()
}
function nextPage(page) {
router.push({ query: { ...route.query, page: page } })
emit('pageChanged', page)
}
function updateRoute() {
router.push({ query: { ...route.query, page: currentPage.value } })
}
</script>
<!-- DataTableCounter Component Code Block -->
<template>
<div class="end-area">
<div class="dropdown">
<button class="dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<svg class="dropdown-img" width="24" height="24" viewBox="0 0 24 24"
fill="var(--tt-text-loud)" xmlns="http://www.w3.org/2000/svg">
<path d="M10.306 2.55301L6.29113 7.314C5.61613 8.114 6.18913 9.33304 7.23913 9.33304H15.7611C16.8111 9.33304 17.3831 8.114 16.7091 7.314L12.6942 2.55301C12.0712 1.81501 10.929 1.81501 10.306 2.55301Z"/>
<path opacity="0.4"
d="M12.694 21.447L16.7089 16.686C17.3839 15.886 16.8109 14.667 15.7609 14.667H7.23893C6.18893 14.667 5.61693 15.886 6.29093 16.686L10.3058 21.447C10.9288 22.185 12.071 22.185 12.694 21.447Z"/>
</svg>
{{ perPage }}
</button>
<ul class="dropdown-menu dropdown-start dropdown-menu--auto-width">
<li><a @click="$emit('updatePerPage', 10)" :class="{'active':perPage===10}" class="dropdown-item"
href="javascript:">10</a>
</li>
<li><a @click="$emit('updatePerPage', 20)" :class="{'active':perPage===20}" class="dropdown-item"
href="javascript:">20</a></li>
<li><a @click="$emit('updatePerPage', 30)" :class="{'active':perPage===30}" class="dropdown-item"
href="javascript:">30</a></li>
<li><a @click="$emit('updatePerPage', 40)" :class="{'active':perPage===40}" class="dropdown-item"
href="javascript:">40</a></li>
<li><a @click="$emit('updatePerPage', 50)" :class="{'active':perPage===50}" class="dropdown-item"
href="javascript:">50</a></li>
</ul>
</div>
<span>{{ opts.paginator.total }}</span>
<span class="d-none d-sm-inline">/</span>
<span class="d-none d-sm-inline">{{ opts.paginator.from }}-{{ opts.paginator.to }}</span>
</div>
</template>
<script>
export default {
name: "DataTableCounter",
emits: ['updatePerPage'],
props: ['dataOptions', 'perPage'],
data() {
return {
opts: {
loading: true,
source: [],
paginator: {total: 0, page: 1}
}
}
},
watch: {
dataOptions(newValue) {
this.opts = newValue;
}
}
}
</script>
<!-- EmptyDataTable Code Block -->
<template>
<tr>
<td class="text-center text-body-sm text-subdued" colspan="100%">
لم يتم العثور على أي سجلات.
</td>
</tr>
</template>
<script>
export default {
name: 'EmptyDataTable',
props: {
dataOptions: {
type: Object,
default(rawProps) {
return {
source: [],
}
},
},
emptyMessage: {
type: String,
default: 'لا توجد نتائج',
},
subeEmptyMessage: {
type: String,
default: 'لا توجد نتائج',
},
hasAddBnt: {
type: Boolean,
default: false,
},
addBtnTitle: {
type: String,
default: 'إضافة جديد',
},
addBtnModalId: {
type: String,
default: '',
},
},
computed: {
// map getters here
},
}
</script>Example #2
View Mode
HTML
<div class="table-wrapper">
<div class="table-header d-flex justify-content-between align-items-center">
<div class="input-group"><span class="tticon-search input-group-text"></span>
<input class="form-control" type="search" placeholder="بحث داخل الحقول..." />
</div>
<div class="d-flex gap-2 align-items-center">
<div class="dropdown">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown"
aria-expanded="false"><span class="tticon-filter-light btn-icon"> </span><span>فلترة</span></button>
<ul class="dropdown-menu dropdown-start">
<li class="dropdown-header"> <span class="dropdown-title">اختر إجراء الفلترة</span></li>
<li>
<button class="dropdown-item dropdown-toggle submenu-open" data-bs-toggle="dropdown">الجنس<span
class="dropdown-end-area"> <span class="dropdown-number">2</span><span
class="dropdown-chevron tticon-chevron-left"></span></span></button>
<ul class="dropdown-menu submenu" style="min-width: 230px">
<li class="dropdown-header">
<button class="submenu-close dropdown-toggle"> <span class="tticon-chevron-right"> </span>رجوع
للفلترة</button>
</li>
<li class="dropdown-search"> <span class="input-group"><span
class="tticon-search input-group-text"></span>
<input class="form-control" type="text" placeholder="بحث في الفلتر.." /></span></li>
<li class="dropdown-checks"><span class="form-check dropdown-check-item">
<label class="form-label">
<input class="form-check-input" type="checkbox" value="" checked="checked" />ذكر
</label></span><span class="form-check dropdown-check-item">
<label class="form-label">
<input class="form-check-input" type="checkbox" value="" />انثى
</label></span></li>
<li class="dropdown-footer">
<button class="btn btn-primary btn-sm">اعتماد</button>
<button class="btn btn-secondary btn-sm">إعادة تعيين</button>
</li>
</ul>
</li>
<li>
<button class="dropdown-item dropdown-toggle submenu-open" data-bs-toggle="dropdown">الحالة<span
class="dropdown-end-area"> <span class="dropdown-number">1</span><span
class="dropdown-chevron tticon-chevron-left"></span></span></button>
<ul class="dropdown-menu submenu" style="min-width: 230px">
<li class="dropdown-header">
<button class="submenu-close dropdown-toggle"> <span class="tticon-chevron-right"> </span>رجوع
للفلترة</button>
</li>
<li class="dropdown-search"> <span class="input-group"><span
class="tticon-search input-group-text"></span>
<input class="form-control" type="text" placeholder="بحث في الفلتر.." /></span></li>
<li class="dropdown-checks"><span class="form-check dropdown-check-item">
<label class="form-label">
<input class="form-check-input" type="checkbox" value="" />مؤكدة
</label></span><span class="form-check dropdown-check-item">
<label class="form-label">
<input class="form-check-input" type="checkbox" value="" checked="checked" />تحت الإجراء
</label></span><span class="form-check dropdown-check-item">
<label class="form-label">
<input class="form-check-input" type="checkbox" value="" />متوقف
</label></span><span class="form-check dropdown-check-item">
<label class="form-label">
<input class="form-check-input" type="checkbox" value="" />تجربة سريعة
</label></span></li>
<li class="dropdown-footer">
<button class="btn btn-primary btn-sm">اعتماد</button>
<button class="btn btn-secondary btn-sm">إعادة تعيين</button>
</li>
</ul>
</li>
<li>
<button class="dropdown-item dropdown-toggle submenu-open" data-bs-toggle="dropdown">النطاق الزمني<span
class="dropdown-end-area"> <span class="dropdown-number d-none">0</span><span
class="dropdown-chevron tticon-chevron-left"></span></span></button>
<ul class="dropdown-menu submenu" style="min-width: 230px">
<li class="dropdown-header">
<button class="submenu-close dropdown-toggle"> <span class="tticon-chevron-right"> </span>رجوع
للفلترة</button>
</li>
<li class="js-stop-propagation">
<input class="js-datepicker" type="hidden" />
</li>
<li class="dropdown-footer">
<button class="btn btn-primary btn-sm">اعتماد</button>
<button class="btn btn-secondary btn-sm">إعادة تعيين</button>
</li>
</ul>
</li>
</ul>
</div>
<button class="btn btn-secondary btn-sm flex-shrink-0"><span class="tticon-download btn-icon"> </span>
<sapn class="d-none d-sm-inline">نسخة CSV</sapn>
</button>
</div>
</div>
<div class="overflow-scrolld">
<table class="table align-middle">
<thead>
<tr>
<th class="d-none d-sm-table-cell text-english" scope="col">#</th>
<th scope="col">المستفيد</th>
<th class="d-none d-md-table-cell" scope="col">عنوان البريد</th>
<th class="d-none d-md-table-cell" scope="col">رقم الجوال</th>
<th scope="col">الحالة</th>
<th class="d-none d-md-table-cell" scope="col">تاريخ الإنشاء</th>
<th scope="col">إدارة الحالة</th>
<th scope="col">العمليات</th>
</tr>
</thead>
<tbody>
<tr>
<td class="d-none d-sm-table-cell text-english text-subdued">1</td>
<td><span class="d-flex align-items-center gap-2"> <span
class="d-none d-sm-flex tticon-user avatar-icon"></span><span class="text-dark">أحمد
الشمري</span></span></td>
<td class="d-none d-md-table-cell text-english">[email protected]</td>
<td class="d-none d-md-table-cell"><span class="d-inline-block dir-ltr text-nowrap text-english">+966 501 876
3215</span></td>
<td> <span class="status status--success">مؤكدة</span></td>
<td class="d-none d-xl-table-cell text-english">24-6-2024 10:04 AM</td>
<td>
<div class="form-check form-switch flex-wrap ps-0">
<input class="form-check-input" type="checkbox" role="switch" checked="checked" />
</div>
</td>
<td>
<div class="dropdown">
<button class="btn btn-sm btn-square dropdown-toggle" type="button" data-bs-toggle="dropdown"
aria-expanded="false" data-boundary="viewport"><span
class="tticon-dots-horizontal-bold btn-icon"></span></button>
<ul class="dropdown-menu dropdown-start">
<li class="dropdown-header"> <span>اختر عملية</span></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-eye dropdown-icon"></span>التفاصيل</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-pen dropdown-icon"></span>تحرير</a></li>
<li><a class="dropdown-item" href="#!" data-bs-toggle="modal" data-bs-target="#suspend-user-modal"><span
class="tticon-off-rectangle dropdown-icon"></span>إيقاف</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-trash dropdown-icon"></span>حذف / إزالة</a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td class="d-none d-sm-table-cell text-english text-subdued">2</td>
<td><span class="d-flex align-items-center gap-2"> <span
class="d-none d-sm-flex tticon-user avatar-icon"></span><span class="text-dark">عبدالله
الوحيدي</span></span></td>
<td class="d-none d-md-table-cell text-english">[email protected]</td>
<td class="d-none d-md-table-cell"><span class="d-inline-block dir-ltr text-nowrap text-english">+966 501 876
6543</span></td>
<td> <span class="status status--warning">تحت الإجراء</span></td>
<td class="d-none d-xl-table-cell text-english">25-6-2024 11:30 AM</td>
<td>
<div class="form-check form-switch flex-wrap ps-0">
<input class="form-check-input" type="checkbox" role="switch" checked="checked" />
</div>
</td>
<td>
<div class="dropdown">
<button class="btn btn-sm btn-square dropdown-toggle" type="button" data-bs-toggle="dropdown"
aria-expanded="false" data-boundary="viewport"><span
class="tticon-dots-horizontal-bold btn-icon"></span></button>
<ul class="dropdown-menu dropdown-start">
<li class="dropdown-header"> <span>اختر عملية</span></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-eye dropdown-icon"></span>التفاصيل</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-pen dropdown-icon"></span>تحرير</a></li>
<li><a class="dropdown-item" href="#!" data-bs-toggle="modal" data-bs-target="#suspend-user-modal"><span
class="tticon-off-rectangle dropdown-icon"></span>إيقاف</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-trash dropdown-icon"></span>حذف / إزالة</a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td class="d-none d-sm-table-cell text-english text-subdued">3</td>
<td><span class="d-flex align-items-center gap-2"> <span
class="d-none d-sm-flex tticon-user avatar-icon"></span><span class="text-dark">علي
الغامدي</span></span></td>
<td class="d-none d-md-table-cell text-english">[email protected]</td>
<td class="d-none d-md-table-cell"><span class="d-inline-block dir-ltr text-nowrap text-english">+966 501 876
9876</span></td>
<td> <span class="status status--danger">متوقف</span></td>
<td class="d-none d-xl-table-cell text-english">26-6-2024 9:15 AM</td>
<td>
<div class="form-check form-switch flex-wrap ps-0">
<input class="form-check-input" type="checkbox" role="switch" />
</div>
</td>
<td>
<div class="dropdown">
<button class="btn btn-sm btn-square dropdown-toggle" type="button" data-bs-toggle="dropdown"
aria-expanded="false" data-boundary="viewport"><span
class="tticon-dots-horizontal-bold btn-icon"></span></button>
<ul class="dropdown-menu dropdown-start">
<li class="dropdown-header"> <span>اختر عملية</span></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-eye dropdown-icon"></span>التفاصيل</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-pen dropdown-icon"></span>تحرير</a></li>
<li><a class="dropdown-item" href="#!" data-bs-toggle="modal" data-bs-target="#suspend-user-modal"><span
class="tticon-off-rectangle dropdown-icon"></span>إيقاف</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-trash dropdown-icon"></span>حذف / إزالة</a>
</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-footer">
<ul class="pagination">
<li class="pagination__item pagination__item--disabled pagination__item--prev"><a class="pagination__item-link"
href="#!"><span class="pagination__item-icon tticon-chevron-right"></span></a></li>
<li class="pagination__item pagination__item--active"><a class="pagination__item-link" href="#!">1</a></li>
<li class="pagination__item"><a class="pagination__item-link" href="#!">2</a></li>
<li class="pagination__item"><a class="pagination__item-link" href="#!">3</a></li>
<li class="pagination__item"><span class="pagination__item-dots">...</span></li>
<li class="pagination__item"><a class="pagination__item-link" href="#!">12</a></li>
<li class="pagination__item pagination__item--next"><a class="pagination__item-link" href="#!"><span
class="pagination__item-icon tticon-chevron-left"></span></a></li>
</ul>
<div class="end-area">
<div class="dropdown">
<button class="dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<svg class="dropdown-img" width="24" height="24" viewBox="0 0 24 24" fill="var(--tt-text-loud)"
xmlns="http://www.w3.org/2000/svg">
<path
d="M10.306 2.55301L6.29113 7.314C5.61613 8.114 6.18913 9.33304 7.23913 9.33304H15.7611C16.8111 9.33304 17.3831 8.114 16.7091 7.314L12.6942 2.55301C12.0712 1.81501 10.929 1.81501 10.306 2.55301Z" />
<path opacity="0.4"
d="M12.694 21.447L16.7089 16.686C17.3839 15.886 16.8109 14.667 15.7609 14.667H7.23893C6.18893 14.667 5.61693 15.886 6.29093 16.686L10.3058 21.447C10.9288 22.185 12.071 22.185 12.694 21.447Z" />
</svg>10
</button>
<ul class="dropdown-menu dropdown-start">
<li><a class="dropdown-item active" href="#!">10</a></li>
<li><a class="dropdown-item" href="#!">20</a></li>
<li><a class="dropdown-item" href="#!">30</a></li>
<li><a class="dropdown-item" href="#!">40</a></li>
<li><a class="dropdown-item" href="#!">50</a></li>
</ul>
</div><span>93</span><span class="d-none d-sm-inline">/</span><span class="d-none d-sm-inline">1-10</span>
</div>
</div>
</div>
<!-- Usage Example -->
<DefaultTable
:data_options="dataOptions"
:total_items="totalItems"
@perPageUpdated="updatePerPage"
@search-filter="onSearch"
@pageChanged="onPageChange"
>
<template #filter>
<!-- Filter here -->
</template>
<template #buttons>
<!-- Buttons here -->
</template>
<template #header>
<!-- Header TR here -->
</template>
<template #body>
<!-- Body TR here -->
</template>
</DefaultTable>
<!-- Vue Component Code Block -->
<template>
<div class="table-wrapper mt-4">
<div class="table-header d-flex justify-content-between align-items-center">
<div class="input-group">
<span class="tticon-search input-group-text"></span>
<input
class="form-control"
@input="emit('search-filter', filter)"
v-model="filter.q"
type="text"
placeholder="بحث داخل الحقول..."
/>
</div>
<div class="d-flex gap-2 align-items-center">
<slot name="filter"></slot>
<slot name="buttons"></slot>
</div>
</div>
<div class="overflow-scrolld">
<table class="table align-middle">
<thead>
<slot name="header"></slot>
</thead>
<tbody>
<slot v-if="data_options?.source?.length" name="body"></slot>
<empty-data-table v-else />
</tbody>
</table>
</div>
<div class="table-footer">
<paginate
:prev-text="'‹'"
:next-text="'›'"
:page-count="Math.ceil(total_items / perPage)"
:click-handler="nextPage"
:container-class="'pagination'"
:page-class="'pagination__item'"
:page-link-class="'pagination__item-link'"
:prev-class="'pagination__item pagination__item--prev'"
:prev-link-class="'pagination__item-link'"
:next-class="'pagination__item pagination__item--next'"
:next-link-class="'pagination__item-link'"
:active-class="'pagination__item--active'"
:disabled-class="'pagination__item--disabled'"
:break-view-class="'pagination__item'"
:break-view-link-class="'pagination__item-dots'"
:value="currentPage"
>
</paginate>
<data-table-counter
@update-per-page="updatePerPage"
:per-page="perPage"
:data-options="data_options"
/>
</div>
</div>
</template>
<script setup>
import { computed, provide, ref } from 'vue'
import Paginate from 'vuejs-paginate-next'
import DataTableCounter from './DataTableCounter.vue'
import { useRoute, useRouter } from 'vue-router'
import EmptyDataTable from './EmptyDataTable.vue'
const route = useRoute()
const router = useRouter()
defineProps(['data_options', 'total_items'])
const emit = defineEmits(['perPageUpdated', 'search-filter', 'pageChanged'])
const perPage = ref(10)
const currentPage = computed(() => {
return route.query.page ? parseInt(route.query.page) : 1
})
const currentPageSeek = computed(() => {
return (currentPage.value - 1) * perPage.value
})
provide('currentPageSeek', currentPageSeek)
const filter = ref({
q: '',
})
function updatePerPage(count) {
perPage.value = count
emit('perPageUpdated', count)
updateRoute()
}
function nextPage(page) {
router.push({ query: { ...route.query, page: page } })
emit('pageChanged', page)
}
function updateRoute() {
router.push({ query: { ...route.query, page: currentPage.value } })
}
</script>
<!-- DataTableCounter Component Code Block -->
<template>
<div class="end-area">
<div class="dropdown">
<button class="dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<svg class="dropdown-img" width="24" height="24" viewBox="0 0 24 24"
fill="var(--tt-text-loud)" xmlns="http://www.w3.org/2000/svg">
<path d="M10.306 2.55301L6.29113 7.314C5.61613 8.114 6.18913 9.33304 7.23913 9.33304H15.7611C16.8111 9.33304 17.3831 8.114 16.7091 7.314L12.6942 2.55301C12.0712 1.81501 10.929 1.81501 10.306 2.55301Z"/>
<path opacity="0.4"
d="M12.694 21.447L16.7089 16.686C17.3839 15.886 16.8109 14.667 15.7609 14.667H7.23893C6.18893 14.667 5.61693 15.886 6.29093 16.686L10.3058 21.447C10.9288 22.185 12.071 22.185 12.694 21.447Z"/>
</svg>
{{ perPage }}
</button>
<ul class="dropdown-menu dropdown-start dropdown-menu--auto-width">
<li><a @click="$emit('updatePerPage', 10)" :class="{'active':perPage===10}" class="dropdown-item"
href="javascript:">10</a>
</li>
<li><a @click="$emit('updatePerPage', 20)" :class="{'active':perPage===20}" class="dropdown-item"
href="javascript:">20</a></li>
<li><a @click="$emit('updatePerPage', 30)" :class="{'active':perPage===30}" class="dropdown-item"
href="javascript:">30</a></li>
<li><a @click="$emit('updatePerPage', 40)" :class="{'active':perPage===40}" class="dropdown-item"
href="javascript:">40</a></li>
<li><a @click="$emit('updatePerPage', 50)" :class="{'active':perPage===50}" class="dropdown-item"
href="javascript:">50</a></li>
</ul>
</div>
<span>{{ opts.paginator.total }}</span>
<span class="d-none d-sm-inline">/</span>
<span class="d-none d-sm-inline">{{ opts.paginator.from }}-{{ opts.paginator.to }}</span>
</div>
</template>
<script>
export default {
name: "DataTableCounter",
emits: ['updatePerPage'],
props: ['dataOptions', 'perPage'],
data() {
return {
opts: {
loading: true,
source: [],
paginator: {total: 0, page: 1}
}
}
},
watch: {
dataOptions(newValue) {
this.opts = newValue;
}
}
}
</script>
<!-- EmptyDataTable Code Block -->
<template>
<tr>
<td class="text-center text-body-sm text-subdued" colspan="100%">
لم يتم العثور على أي سجلات.
</td>
</tr>
</template>
<script>
export default {
name: 'EmptyDataTable',
props: {
dataOptions: {
type: Object,
default(rawProps) {
return {
source: [],
}
},
},
emptyMessage: {
type: String,
default: 'لا توجد نتائج',
},
subeEmptyMessage: {
type: String,
default: 'لا توجد نتائج',
},
hasAddBnt: {
type: Boolean,
default: false,
},
addBtnTitle: {
type: String,
default: 'إضافة جديد',
},
addBtnModalId: {
type: String,
default: '',
},
},
computed: {
// map getters here
},
}
</script>Example #3
View Mode
HTML
<div class="table-wrapper">
<div class="table-header d-flex justify-content-between align-items-center">
<div class="input-group"><span class="tticon-search input-group-text"></span>
<input class="form-control" type="search" placeholder="بحث داخل الحقول..." />
</div>
</div>
<div class="overflow-scrolld">
<table class="table align-middle">
<thead>
<tr>
<th class="text-english" scope="col">#</th>
<th scope="col">الفئة</th>
<th scope="col">تاريخ الإنشاء</th>
<th scope="col">العمليات</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-english">1</td>
<td><span class="category category--warning">ملحقات</span></td>
<td class="text-english">24-6-2024 10:04 AM</td>
<td><span class="d-flex align-items-center">
<button class="btn btn-sm btn-square"><span class="tticon-pen btn-icon"></span></button>
<button class="btn btn-sm btn-square"><span class="tticon-trash btn-icon" type="button"
data-bs-toggle="modal" data-bs-target="#delete-category-modal"></span></button></span></td>
</tr>
<tr>
<td class="text-english">2</td>
<td><span class="category category--success">الجمال</span></td>
<td class="text-english">24-6-2024 10:04 AM</td>
<td><span class="d-flex align-items-center">
<button class="btn btn-sm btn-square"><span class="tticon-pen btn-icon"></span></button>
<button class="btn btn-sm btn-square"><span class="tticon-trash btn-icon"></span></button></span></td>
</tr>
<tr>
<td class="text-english">3</td>
<td><span class="category category--danger">الزراعة</span></td>
<td class="text-english">24-6-2024 10:04 AM</td>
<td><span class="d-flex align-items-center">
<button class="btn btn-sm btn-square"><span class="tticon-pen btn-icon"></span></button>
<button class="btn btn-sm btn-square"><span class="tticon-trash btn-icon"></span></button></span></td>
</tr>
<tr>
<td class="text-english">4</td>
<td><span class="category category--info">الحدائق</span></td>
<td class="text-english">24-6-2024 10:04 AM</td>
<td><span class="d-flex align-items-center">
<button class="btn btn-sm btn-square"><span class="tticon-pen btn-icon"></span></button>
<button class="btn btn-sm btn-square"><span class="tticon-trash btn-icon"></span></button></span></td>
</tr>
</tbody>
</table>
</div>
<div class="table-footer">
<ul class="pagination">
<li class="pagination__item pagination__item--disabled pagination__item--prev"><a class="pagination__item-link"
href="#!"><span class="pagination__item-icon tticon-chevron-right"></span></a></li>
<li class="pagination__item pagination__item--active"><a class="pagination__item-link" href="#!">1</a></li>
<li class="pagination__item"><a class="pagination__item-link" href="#!">2</a></li>
<li class="pagination__item"><a class="pagination__item-link" href="#!">3</a></li>
<li class="pagination__item"><span class="pagination__item-dots">...</span></li>
<li class="pagination__item"><a class="pagination__item-link" href="#!">12</a></li>
<li class="pagination__item pagination__item--next"><a class="pagination__item-link" href="#!"><span
class="pagination__item-icon tticon-chevron-left"></span></a></li>
</ul>
<div class="end-area">
<div class="dropdown">
<button class="dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<svg class="dropdown-img" width="24" height="24" viewBox="0 0 24 24" fill="var(--tt-text-loud)"
xmlns="http://www.w3.org/2000/svg">
<path
d="M10.306 2.55301L6.29113 7.314C5.61613 8.114 6.18913 9.33304 7.23913 9.33304H15.7611C16.8111 9.33304 17.3831 8.114 16.7091 7.314L12.6942 2.55301C12.0712 1.81501 10.929 1.81501 10.306 2.55301Z" />
<path opacity="0.4"
d="M12.694 21.447L16.7089 16.686C17.3839 15.886 16.8109 14.667 15.7609 14.667H7.23893C6.18893 14.667 5.61693 15.886 6.29093 16.686L10.3058 21.447C10.9288 22.185 12.071 22.185 12.694 21.447Z" />
</svg>10
</button>
<ul class="dropdown-menu dropdown-start">
<li><a class="dropdown-item active" href="#!">10</a></li>
<li><a class="dropdown-item" href="#!">20</a></li>
<li><a class="dropdown-item" href="#!">30</a></li>
<li><a class="dropdown-item" href="#!">40</a></li>
<li><a class="dropdown-item" href="#!">50</a></li>
</ul>
</div><span>93</span><span class="d-none d-sm-inline">/</span><span class="d-none d-sm-inline">1-10</span>
</div>
</div>
</div>
<!-- Usage Example -->
<DefaultTable
:data_options="dataOptions"
:total_items="totalItems"
@perPageUpdated="updatePerPage"
@search-filter="onSearch"
@pageChanged="onPageChange"
>
<template #filter>
<!-- Filter here -->
</template>
<template #buttons>
<!-- Buttons here -->
</template>
<template #header>
<!-- Header TR here -->
</template>
<template #body>
<!-- Body TR here -->
</template>
</DefaultTable>
<!-- Vue Component Code Block -->
<template>
<div class="table-wrapper mt-4">
<div class="table-header d-flex justify-content-between align-items-center">
<div class="input-group">
<span class="tticon-search input-group-text"></span>
<input
class="form-control"
@input="emit('search-filter', filter)"
v-model="filter.q"
type="text"
placeholder="بحث داخل الحقول..."
/>
</div>
<div class="d-flex gap-2 align-items-center">
<slot name="filter"></slot>
<slot name="buttons"></slot>
</div>
</div>
<div class="overflow-scrolld">
<table class="table align-middle">
<thead>
<slot name="header"></slot>
</thead>
<tbody>
<slot v-if="data_options?.source?.length" name="body"></slot>
<empty-data-table v-else />
</tbody>
</table>
</div>
<div class="table-footer">
<paginate
:prev-text="'‹'"
:next-text="'›'"
:page-count="Math.ceil(total_items / perPage)"
:click-handler="nextPage"
:container-class="'pagination'"
:page-class="'pagination__item'"
:page-link-class="'pagination__item-link'"
:prev-class="'pagination__item pagination__item--prev'"
:prev-link-class="'pagination__item-link'"
:next-class="'pagination__item pagination__item--next'"
:next-link-class="'pagination__item-link'"
:active-class="'pagination__item--active'"
:disabled-class="'pagination__item--disabled'"
:break-view-class="'pagination__item'"
:break-view-link-class="'pagination__item-dots'"
:value="currentPage"
>
</paginate>
<data-table-counter
@update-per-page="updatePerPage"
:per-page="perPage"
:data-options="data_options"
/>
</div>
</div>
</template>
<script setup>
import { computed, provide, ref } from 'vue'
import Paginate from 'vuejs-paginate-next'
import DataTableCounter from './DataTableCounter.vue'
import { useRoute, useRouter } from 'vue-router'
import EmptyDataTable from './EmptyDataTable.vue'
const route = useRoute()
const router = useRouter()
defineProps(['data_options', 'total_items'])
const emit = defineEmits(['perPageUpdated', 'search-filter', 'pageChanged'])
const perPage = ref(10)
const currentPage = computed(() => {
return route.query.page ? parseInt(route.query.page) : 1
})
const currentPageSeek = computed(() => {
return (currentPage.value - 1) * perPage.value
})
provide('currentPageSeek', currentPageSeek)
const filter = ref({
q: '',
})
function updatePerPage(count) {
perPage.value = count
emit('perPageUpdated', count)
updateRoute()
}
function nextPage(page) {
router.push({ query: { ...route.query, page: page } })
emit('pageChanged', page)
}
function updateRoute() {
router.push({ query: { ...route.query, page: currentPage.value } })
}
</script>
<!-- DataTableCounter Component Code Block -->
<template>
<div class="end-area">
<div class="dropdown">
<button class="dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<svg class="dropdown-img" width="24" height="24" viewBox="0 0 24 24"
fill="var(--tt-text-loud)" xmlns="http://www.w3.org/2000/svg">
<path d="M10.306 2.55301L6.29113 7.314C5.61613 8.114 6.18913 9.33304 7.23913 9.33304H15.7611C16.8111 9.33304 17.3831 8.114 16.7091 7.314L12.6942 2.55301C12.0712 1.81501 10.929 1.81501 10.306 2.55301Z"/>
<path opacity="0.4"
d="M12.694 21.447L16.7089 16.686C17.3839 15.886 16.8109 14.667 15.7609 14.667H7.23893C6.18893 14.667 5.61693 15.886 6.29093 16.686L10.3058 21.447C10.9288 22.185 12.071 22.185 12.694 21.447Z"/>
</svg>
{{ perPage }}
</button>
<ul class="dropdown-menu dropdown-start dropdown-menu--auto-width">
<li><a @click="$emit('updatePerPage', 10)" :class="{'active':perPage===10}" class="dropdown-item"
href="javascript:">10</a>
</li>
<li><a @click="$emit('updatePerPage', 20)" :class="{'active':perPage===20}" class="dropdown-item"
href="javascript:">20</a></li>
<li><a @click="$emit('updatePerPage', 30)" :class="{'active':perPage===30}" class="dropdown-item"
href="javascript:">30</a></li>
<li><a @click="$emit('updatePerPage', 40)" :class="{'active':perPage===40}" class="dropdown-item"
href="javascript:">40</a></li>
<li><a @click="$emit('updatePerPage', 50)" :class="{'active':perPage===50}" class="dropdown-item"
href="javascript:">50</a></li>
</ul>
</div>
<span>{{ opts.paginator.total }}</span>
<span class="d-none d-sm-inline">/</span>
<span class="d-none d-sm-inline">{{ opts.paginator.from }}-{{ opts.paginator.to }}</span>
</div>
</template>
<script>
export default {
name: "DataTableCounter",
emits: ['updatePerPage'],
props: ['dataOptions', 'perPage'],
data() {
return {
opts: {
loading: true,
source: [],
paginator: {total: 0, page: 1}
}
}
},
watch: {
dataOptions(newValue) {
this.opts = newValue;
}
}
}
</script>
<!-- EmptyDataTable Code Block -->
<template>
<tr>
<td class="text-center text-body-sm text-subdued" colspan="100%">
لم يتم العثور على أي سجلات.
</td>
</tr>
</template>
<script>
export default {
name: 'EmptyDataTable',
props: {
dataOptions: {
type: Object,
default(rawProps) {
return {
source: [],
}
},
},
emptyMessage: {
type: String,
default: 'لا توجد نتائج',
},
subeEmptyMessage: {
type: String,
default: 'لا توجد نتائج',
},
hasAddBnt: {
type: Boolean,
default: false,
},
addBtnTitle: {
type: String,
default: 'إضافة جديد',
},
addBtnModalId: {
type: String,
default: '',
},
},
computed: {
// map getters here
},
}
</script> Example #4
View Mode
HTML
<div class="table-wrapper">
<div class="table-header d-flex justify-content-between align-items-center">
<div class="input-group"><span class="tticon-search input-group-text"></span>
<input class="form-control" type="search" placeholder="بحث داخل الحقول..." />
</div>
<div class="d-flex gap-2 align-items-center">
<div class="dropdown">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown"
aria-expanded="false"><span class="tticon-filter-light btn-icon"> </span><span>فلترة</span></button>
<ul class="dropdown-menu dropdown-start">
<li class="dropdown-header"> <span class="dropdown-title">اختر إجراء الفلترة</span></li>
<li>
<button class="dropdown-item dropdown-toggle submenu-open" data-bs-toggle="dropdown">الجنس<span
class="dropdown-end-area"> <span class="dropdown-number">2</span><span
class="dropdown-chevron tticon-chevron-left"></span></span></button>
<ul class="dropdown-menu submenu" style="min-width: 230px">
<li class="dropdown-header">
<button class="submenu-close dropdown-toggle"> <span class="tticon-chevron-right"> </span>رجوع
للفلترة</button>
</li>
<li class="dropdown-search"> <span class="input-group"><span
class="tticon-search input-group-text"></span>
<input class="form-control" type="text" placeholder="بحث في الفلتر.." /></span></li>
<li class="dropdown-checks"><span class="form-check dropdown-check-item">
<label class="form-label">
<input class="form-check-input" type="checkbox" value="" checked="checked" />ذكر
</label></span><span class="form-check dropdown-check-item">
<label class="form-label">
<input class="form-check-input" type="checkbox" value="" />انثى
</label></span></li>
<li class="dropdown-footer">
<button class="btn btn-primary btn-sm">اعتماد</button>
<button class="btn btn-secondary btn-sm">إعادة تعيين</button>
</li>
</ul>
</li>
<li>
<button class="dropdown-item dropdown-toggle submenu-open" data-bs-toggle="dropdown">الحالة<span
class="dropdown-end-area"> <span class="dropdown-number">1</span><span
class="dropdown-chevron tticon-chevron-left"></span></span></button>
<ul class="dropdown-menu submenu" style="min-width: 230px">
<li class="dropdown-header">
<button class="submenu-close dropdown-toggle"> <span class="tticon-chevron-right"> </span>رجوع
للفلترة</button>
</li>
<li class="dropdown-search"> <span class="input-group"><span
class="tticon-search input-group-text"></span>
<input class="form-control" type="text" placeholder="بحث في الفلتر.." /></span></li>
<li class="dropdown-checks"><span class="form-check dropdown-check-item">
<label class="form-label">
<input class="form-check-input" type="checkbox" value="" />مؤكدة
</label></span><span class="form-check dropdown-check-item">
<label class="form-label">
<input class="form-check-input" type="checkbox" value="" checked="checked" />تحت الإجراء
</label></span><span class="form-check dropdown-check-item">
<label class="form-label">
<input class="form-check-input" type="checkbox" value="" />متوقف
</label></span><span class="form-check dropdown-check-item">
<label class="form-label">
<input class="form-check-input" type="checkbox" value="" />تجربة سريعة
</label></span></li>
<li class="dropdown-footer">
<button class="btn btn-primary btn-sm">اعتماد</button>
<button class="btn btn-secondary btn-sm">إعادة تعيين</button>
</li>
</ul>
</li>
<li>
<button class="dropdown-item dropdown-toggle submenu-open" data-bs-toggle="dropdown">النطاق الزمني<span
class="dropdown-end-area"> <span class="dropdown-number d-none">0</span><span
class="dropdown-chevron tticon-chevron-left"></span></span></button>
<ul class="dropdown-menu submenu" style="min-width: 230px">
<li class="dropdown-header">
<button class="submenu-close dropdown-toggle"> <span class="tticon-chevron-right"> </span>رجوع
للفلترة</button>
</li>
<li class="js-stop-propagation">
<input class="js-datepicker" type="hidden" />
</li>
<li class="dropdown-footer">
<button class="btn btn-primary btn-sm">اعتماد</button>
<button class="btn btn-secondary btn-sm">إعادة تعيين</button>
</li>
</ul>
</li>
</ul>
</div>
<button class="btn btn-secondary btn-sm flex-shrink-0"><span class="tticon-download btn-icon"> </span>
<sapn class="d-none d-sm-inline">نسخة CSV</sapn>
</button>
</div>
</div>
<div class="overflow-scrolld">
<table class="table align-middle">
<thead>
<tr>
<th class="d-none d-sm-table-cell text-english" scope="col">#</th>
<th scope="col">المستفيد</th>
<th scope="col">الخدمة</th>
<th class="d-none d-md-table-cell" scope="col">عنوان البريد</th>
<th class="d-none d-xl-table-cell" scope="col">رقم الجوال</th>
<th class="d-none d-xl-table-cell" scope="col">تاريخ الإنشاء</th>
<th scope="col">إدارة الحالة</th>
<th scope="col">العمليات</th>
</tr>
</thead>
<tbody>
<tr>
<td class="d-none d-sm-table-cell text-english text-subdued">1</td>
<td><span class="d-flex align-items-center gap-2"> <span
class="d-none d-sm-flex tticon-user avatar-icon"></span><span class="text-dark">أحمد
الشمري</span></span></td>
<td><span class="category">ادارة المنتجات</span></td>
<td class="d-none d-md-table-cell text-english">[email protected]</td>
<td class="d-none d-xl-table-cell"><span class="d-inline-block dir-ltr text-nowrap text-english">+966 501 876
3215</span></td>
<td class="d-none d-xl-table-cell text-english">24-6-2024 10:04 AM</td>
<td>
<div class="form-check form-switch flex-wrap ps-0">
<input class="form-check-input" type="checkbox" role="switch" checked="checked" />
</div>
</td>
<td>
<div class="dropdown">
<button class="btn btn-sm btn-square dropdown-toggle" type="button" data-bs-toggle="dropdown"
aria-expanded="false" data-boundary="viewport"><span
class="tticon-dots-horizontal-bold btn-icon"></span></button>
<ul class="dropdown-menu dropdown-start">
<li class="dropdown-header"> <span>اختر عملية</span></li>
<li>
<button class="dropdown-item" type="button" data-bs-toggle="modal"
data-bs-target="#admin-details-modal"><span
class="tticon-eye dropdown-icon"></span>التفاصيل</button>
</li>
<li><a class="dropdown-item" href="#!"><span class="tticon-pen dropdown-icon"></span>تحرير</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-trash dropdown-icon"></span>حذف / إزالة</a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td class="d-none d-sm-table-cell text-english text-subdued">2</td>
<td><span class="d-flex align-items-center gap-2"> <span
class="d-none d-sm-flex tticon-user avatar-icon"></span><span class="text-dark">أحمد
الشمري</span></span></td>
<td><span class="category">ادارة مالية</span></td>
<td class="d-none d-md-table-cell text-english">[email protected]</td>
<td class="d-none d-xl-table-cell"><span class="d-inline-block dir-ltr text-nowrap text-english">+966 501 876
3215</span></td>
<td class="d-none d-xl-table-cell text-english">24-6-2024 10:04 AM</td>
<td>
<div class="form-check form-switch flex-wrap ps-0">
<input class="form-check-input" type="checkbox" role="switch" checked="checked" />
</div>
</td>
<td>
<div class="dropdown">
<button class="btn btn-sm btn-square dropdown-toggle" type="button" data-bs-toggle="dropdown"
aria-expanded="false" data-boundary="viewport"><span
class="tticon-dots-horizontal-bold btn-icon"></span></button>
<ul class="dropdown-menu dropdown-start">
<li class="dropdown-header"> <span>اختر عملية</span></li>
<li>
<button class="dropdown-item" type="button" data-bs-toggle="modal"
data-bs-target="#admin-details-modal"><span
class="tticon-eye dropdown-icon"></span>التفاصيل</button>
</li>
<li><a class="dropdown-item" href="#!"><span class="tticon-pen dropdown-icon"></span>تحرير</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-trash dropdown-icon"></span>حذف / إزالة</a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td class="d-none d-sm-table-cell text-english text-subdued">3</td>
<td><span class="d-flex align-items-center gap-2"> <span
class="d-none d-sm-flex tticon-user avatar-icon"></span><span class="text-dark">أحمد
الشمري</span></span></td>
<td><span class="category">تسويق رقمي</span></td>
<td class="d-none d-md-table-cell text-english">[email protected]</td>
<td class="d-none d-xl-table-cell"><span class="d-inline-block dir-ltr text-nowrap text-english">+966 501 876
3215</span></td>
<td class="d-none d-xl-table-cell text-english">24-6-2024 10:04 AM</td>
<td>
<div class="form-check form-switch flex-wrap ps-0">
<input class="form-check-input" type="checkbox" role="switch" checked="checked" />
</div>
</td>
<td>
<div class="dropdown">
<button class="btn btn-sm btn-square dropdown-toggle" type="button" data-bs-toggle="dropdown"
aria-expanded="false" data-boundary="viewport"><span
class="tticon-dots-horizontal-bold btn-icon"></span></button>
<ul class="dropdown-menu dropdown-start">
<li class="dropdown-header"> <span>اختر عملية</span></li>
<li>
<button class="dropdown-item" type="button" data-bs-toggle="modal"
data-bs-target="#admin-details-modal"><span
class="tticon-eye dropdown-icon"></span>التفاصيل</button>
</li>
<li><a class="dropdown-item" href="#!"><span class="tticon-pen dropdown-icon"></span>تحرير</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-trash dropdown-icon"></span>حذف / إزالة</a>
</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-footer">
<ul class="pagination">
<li class="pagination__item pagination__item--disabled pagination__item--prev"><a class="pagination__item-link"
href="#!"><span class="pagination__item-icon tticon-chevron-right"></span></a></li>
<li class="pagination__item pagination__item--active"><a class="pagination__item-link" href="#!">1</a></li>
<li class="pagination__item"><a class="pagination__item-link" href="#!">2</a></li>
<li class="pagination__item"><a class="pagination__item-link" href="#!">3</a></li>
<li class="pagination__item"><span class="pagination__item-dots">...</span></li>
<li class="pagination__item"><a class="pagination__item-link" href="#!">12</a></li>
<li class="pagination__item pagination__item--next"><a class="pagination__item-link" href="#!"><span
class="pagination__item-icon tticon-chevron-left"></span></a></li>
</ul>
<div class="end-area">
<div class="dropdown">
<button class="dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<svg class="dropdown-img" width="24" height="24" viewBox="0 0 24 24" fill="var(--tt-text-loud)"
xmlns="http://www.w3.org/2000/svg">
<path
d="M10.306 2.55301L6.29113 7.314C5.61613 8.114 6.18913 9.33304 7.23913 9.33304H15.7611C16.8111 9.33304 17.3831 8.114 16.7091 7.314L12.6942 2.55301C12.0712 1.81501 10.929 1.81501 10.306 2.55301Z" />
<path opacity="0.4"
d="M12.694 21.447L16.7089 16.686C17.3839 15.886 16.8109 14.667 15.7609 14.667H7.23893C6.18893 14.667 5.61693 15.886 6.29093 16.686L10.3058 21.447C10.9288 22.185 12.071 22.185 12.694 21.447Z" />
</svg>10
</button>
<ul class="dropdown-menu dropdown-start">
<li><a class="dropdown-item active" href="#!">10</a></li>
<li><a class="dropdown-item" href="#!">20</a></li>
<li><a class="dropdown-item" href="#!">30</a></li>
<li><a class="dropdown-item" href="#!">40</a></li>
<li><a class="dropdown-item" href="#!">50</a></li>
</ul>
</div><span>93</span><span class="d-none d-sm-inline">/</span><span class="d-none d-sm-inline">1-10</span>
</div>
</div>
</div>
<!-- Usage Example -->
<DefaultTable
:data_options="dataOptions"
:total_items="totalItems"
@perPageUpdated="updatePerPage"
@search-filter="onSearch"
@pageChanged="onPageChange"
>
<template #filter>
<!-- Filter here -->
</template>
<template #buttons>
<!-- Buttons here -->
</template>
<template #header>
<!-- Header TR here -->
</template>
<template #body>
<!-- Body TR here -->
</template>
</DefaultTable>
<!-- Vue Component Code Block -->
<template>
<div class="table-wrapper mt-4">
<div class="table-header d-flex justify-content-between align-items-center">
<div class="input-group">
<span class="tticon-search input-group-text"></span>
<input
class="form-control"
@input="emit('search-filter', filter)"
v-model="filter.q"
type="text"
placeholder="بحث داخل الحقول..."
/>
</div>
<div class="d-flex gap-2 align-items-center">
<slot name="filter"></slot>
<slot name="buttons"></slot>
</div>
</div>
<div class="overflow-scrolld">
<table class="table align-middle">
<thead>
<slot name="header"></slot>
</thead>
<tbody>
<slot v-if="data_options?.source?.length" name="body"></slot>
<empty-data-table v-else />
</tbody>
</table>
</div>
<div class="table-footer">
<paginate
:prev-text="'‹'"
:next-text="'›'"
:page-count="Math.ceil(total_items / perPage)"
:click-handler="nextPage"
:container-class="'pagination'"
:page-class="'pagination__item'"
:page-link-class="'pagination__item-link'"
:prev-class="'pagination__item pagination__item--prev'"
:prev-link-class="'pagination__item-link'"
:next-class="'pagination__item pagination__item--next'"
:next-link-class="'pagination__item-link'"
:active-class="'pagination__item--active'"
:disabled-class="'pagination__item--disabled'"
:break-view-class="'pagination__item'"
:break-view-link-class="'pagination__item-dots'"
:value="currentPage"
>
</paginate>
<data-table-counter
@update-per-page="updatePerPage"
:per-page="perPage"
:data-options="data_options"
/>
</div>
</div>
</template>
<script setup>
import { computed, provide, ref } from 'vue'
import Paginate from 'vuejs-paginate-next'
import DataTableCounter from './DataTableCounter.vue'
import { useRoute, useRouter } from 'vue-router'
import EmptyDataTable from './EmptyDataTable.vue'
const route = useRoute()
const router = useRouter()
defineProps(['data_options', 'total_items'])
const emit = defineEmits(['perPageUpdated', 'search-filter', 'pageChanged'])
const perPage = ref(10)
const currentPage = computed(() => {
return route.query.page ? parseInt(route.query.page) : 1
})
const currentPageSeek = computed(() => {
return (currentPage.value - 1) * perPage.value
})
provide('currentPageSeek', currentPageSeek)
const filter = ref({
q: '',
})
function updatePerPage(count) {
perPage.value = count
emit('perPageUpdated', count)
updateRoute()
}
function nextPage(page) {
router.push({ query: { ...route.query, page: page } })
emit('pageChanged', page)
}
function updateRoute() {
router.push({ query: { ...route.query, page: currentPage.value } })
}
</script>
<!-- DataTableCounter Component Code Block -->
<template>
<div class="end-area">
<div class="dropdown">
<button class="dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<svg class="dropdown-img" width="24" height="24" viewBox="0 0 24 24"
fill="var(--tt-text-loud)" xmlns="http://www.w3.org/2000/svg">
<path d="M10.306 2.55301L6.29113 7.314C5.61613 8.114 6.18913 9.33304 7.23913 9.33304H15.7611C16.8111 9.33304 17.3831 8.114 16.7091 7.314L12.6942 2.55301C12.0712 1.81501 10.929 1.81501 10.306 2.55301Z"/>
<path opacity="0.4"
d="M12.694 21.447L16.7089 16.686C17.3839 15.886 16.8109 14.667 15.7609 14.667H7.23893C6.18893 14.667 5.61693 15.886 6.29093 16.686L10.3058 21.447C10.9288 22.185 12.071 22.185 12.694 21.447Z"/>
</svg>
{{ perPage }}
</button>
<ul class="dropdown-menu dropdown-start dropdown-menu--auto-width">
<li><a @click="$emit('updatePerPage', 10)" :class="{'active':perPage===10}" class="dropdown-item"
href="javascript:">10</a>
</li>
<li><a @click="$emit('updatePerPage', 20)" :class="{'active':perPage===20}" class="dropdown-item"
href="javascript:">20</a></li>
<li><a @click="$emit('updatePerPage', 30)" :class="{'active':perPage===30}" class="dropdown-item"
href="javascript:">30</a></li>
<li><a @click="$emit('updatePerPage', 40)" :class="{'active':perPage===40}" class="dropdown-item"
href="javascript:">40</a></li>
<li><a @click="$emit('updatePerPage', 50)" :class="{'active':perPage===50}" class="dropdown-item"
href="javascript:">50</a></li>
</ul>
</div>
<span>{{ opts.paginator.total }}</span>
<span class="d-none d-sm-inline">/</span>
<span class="d-none d-sm-inline">{{ opts.paginator.from }}-{{ opts.paginator.to }}</span>
</div>
</template>
<script>
export default {
name: "DataTableCounter",
emits: ['updatePerPage'],
props: ['dataOptions', 'perPage'],
data() {
return {
opts: {
loading: true,
source: [],
paginator: {total: 0, page: 1}
}
}
},
watch: {
dataOptions(newValue) {
this.opts = newValue;
}
}
}
</script>
<!-- EmptyDataTable Code Block -->
<template>
<tr>
<td class="text-center text-body-sm text-subdued" colspan="100%">
لم يتم العثور على أي سجلات.
</td>
</tr>
</template>
<script>
export default {
name: 'EmptyDataTable',
props: {
dataOptions: {
type: Object,
default(rawProps) {
return {
source: [],
}
},
},
emptyMessage: {
type: String,
default: 'لا توجد نتائج',
},
subeEmptyMessage: {
type: String,
default: 'لا توجد نتائج',
},
hasAddBnt: {
type: Boolean,
default: false,
},
addBtnTitle: {
type: String,
default: 'إضافة جديد',
},
addBtnModalId: {
type: String,
default: '',
},
},
computed: {
// map getters here
},
}
</script>