├── .eslintrc.js
├── .gitignore
├── LICENSE
├── README.md
├── assets
    ├── tvdatatable.jpg
    ├── tvpagination.jpg
    ├── tvtable_busy_state.jpg
    ├── tvtable_checkbox.jpg
    └── tvtable_row_details.jpg
├── dev
    ├── App.vue
    ├── TableShow.vue
    ├── css
    │   └── app.css
    ├── main.js
    └── router.ts
├── index.html
├── package-lock.json
├── package.json
├── postcss.config.js
├── rollup.config.js
├── src
    ├── components
    │   ├── TTable.vue
    │   ├── TTbody.vue
    │   ├── TTd.vue
    │   ├── TTh.vue
    │   ├── TThead.vue
    │   ├── TTr.vue
    │   ├── TVPagination.vue
    │   └── TVTable.vue
    ├── css
    │   └── app.css
    └── index.js
├── tailwind.config.js
├── test
    └── base.spec.js
├── vite.config.ts
└── vitest.config.ts


/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     extends: [
 3 |         "eslint:recommended",
 4 |         'plugin:vue/vue3-recommended',
 5 |     ],
 6 |     rules: {
 7 |         "indent": [
 8 |             "error",
 9 |             4,
10 |         ],
11 |         "vue/html-indent": 'off',
12 |         "vue/max-attributes-per-line": 'off',
13 |         "vue/html-self-closing": 'off',
14 |         "no-unused-vars": 'off',
15 |     }
16 | } 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Michele L.
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Tailwind Vue Data Table
 2 | 
 3 | ![](https://img.shields.io/badge/Vue3-318534?logo=vuedotjs&logoColor=white&style=flat-square)
 4 | ![](https://img.shields.io/badge/Tailwind-6899C7?logo=tailwindcss&logoColor=white&style=flat-square)
 5 | 
 6 | Simple DataTable with slots, class and style modification for tr and td, sortable by columns (only graphics with click event).
 7 | 
 8 | Contains the TVPaginator component that can be disabled via prop or used in stand-alone mode.
 9 | 
10 | <a href="https://www.npmjs.com/package/@bitthecat/tailwind-vue-data-table"><img alt="Total Downloads" src="https://img.shields.io/npm/dt/@bitthecat/tailwind-vue-data-table"></a>
11 | <a href="https://www.npmjs.com/package/@bitthecat/tailwind-vue-data-table"><img alt="Latest Version" src="https://img.shields.io/npm/v/@bitthecat/tailwind-vue-data-table"></a>
12 | <a href="https://www.npmjs.com/package/@bitthecat/tailwind-vue-data-table"><img alt="License" src="https://img.shields.io/npm/l/@bitthecat/tailwind-vue-data-table"></a>
13 | 
14 | <hr>
15 | 
16 | #### [*__Documentation__* ](https://bitthecat.github.io/tailwind-vue-data-table.html)
17 | 
18 | <hr>
19 | 
20 | ### Install
21 | ```
22 | npm i @bitthecat/tailwind-vue-data-table
23 | ```
24 | 
25 | Add this code inside **tailwind.config.*** to compile the css library
26 | 
27 | ``` js
28 | content: [
29 |     ...
30 |     './node_modules/@bitthecat/tailwind-vue-data-table/dist/*.js',
31 | ],
32 | ```
33 | 
34 | ### Use in Vue
35 | ``` js
36 | import { TVTable } from '@bitthecat/tailwind-vue-data-table' 
37 | ```
38 | 
39 | ### Import default css
40 | ``` css
41 | import "@bitthecat/tailwind-vue-data-table/dist/library.css" 
42 | ```
43 | 
44 | <hr>
45 | 
46 | This project is licensed under the MIT license. See [LICENSE](LICENSE).


--------------------------------------------------------------------------------
/assets/tvdatatable.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BitTheCat/tailwind-vue-data-table/3a56b2002014d1df9fdcaa82e96cc9a8744a6dac/assets/tvdatatable.jpg


--------------------------------------------------------------------------------
/assets/tvpagination.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BitTheCat/tailwind-vue-data-table/3a56b2002014d1df9fdcaa82e96cc9a8744a6dac/assets/tvpagination.jpg


--------------------------------------------------------------------------------
/assets/tvtable_busy_state.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BitTheCat/tailwind-vue-data-table/3a56b2002014d1df9fdcaa82e96cc9a8744a6dac/assets/tvtable_busy_state.jpg


--------------------------------------------------------------------------------
/assets/tvtable_checkbox.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BitTheCat/tailwind-vue-data-table/3a56b2002014d1df9fdcaa82e96cc9a8744a6dac/assets/tvtable_checkbox.jpg


--------------------------------------------------------------------------------
/assets/tvtable_row_details.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BitTheCat/tailwind-vue-data-table/3a56b2002014d1df9fdcaa82e96cc9a8744a6dac/assets/tvtable_row_details.jpg


--------------------------------------------------------------------------------
/dev/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="py-8 px-8">
 3 |         <div class="font-semibold mb-2">
 4 |             Tailwind Vue DataTable v0.2.9
 5 |             <span class="text-xs font-light">by BitTheCat</span>
 6 |         </div>
 7 |         <div>
 8 |             <router-view />
 9 |         </div>
10 |     </div>
11 | </template>
12 | 
13 | <script>
14 | import { defineComponent } from 'vue';
15 | export default defineComponent({
16 |     name: 'App',
17 | });
18 | </script>


--------------------------------------------------------------------------------
/dev/TableShow.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <div class="mb-3">
  4 |             <TVTable />
  5 |         </div>
  6 |         
  7 | 
  8 |         <div class="mb-3">
  9 |             <TVTable
 10 |                 ref="tvtTableSimple"
 11 |                 :items="[]"
 12 |                 :fields="fieldsSimple"
 13 |                 :busy="busy"
 14 |                 :spinner-class="'text-red-500'"
 15 |                 multiple-selection
 16 |                 enable-check
 17 |             >
 18 |                 <template v-if="customText" #no-items>
 19 |                     Overwrite No Item
 20 |                 </template>
 21 |             </TVTable>
 22 | 
 23 | 
 24 |             <input 
 25 |                 class="border mt-2 p-1 rounded bg-gray-300 text-sm" 
 26 |                 type="button" 
 27 |                 :value="`Test custom message: ${customText ? 'on' : 'off' }`" 
 28 |                 @click="customText = !customText" 
 29 |             />
 30 | 
 31 | 
 32 |             <input 
 33 |                 class="border ml-2 mt-2 p-1 rounded bg-gray-300 text-sm" 
 34 |                 type="button" 
 35 |                 :value="`Test busy: ${busy ? 'on' : 'off' }`" 
 36 |                 @click="busy = !busy" 
 37 |             />
 38 |         </div>
 39 |         
 40 |         <div class="mb-3">
 41 |             <span class="text-xs"> Simple </span> 
 42 | 
 43 |             <TVTable
 44 |                 ref="tvtTableSimple"
 45 |                 :items="cloneItems"
 46 |                 :fields="fieldsSimple"
 47 |                 :spinner-class="'text-green-500'"
 48 |                 multiple-selection
 49 |                 enable-check
 50 |                 :busy="busy"
 51 |                 :total-rows="cloneItems.length"
 52 |                 summary-text="Visualizzo da _STR_FROM_ a _STR_TO_ su _STR_TOTAL_ elementi"
 53 |             >
 54 |                 <template #header-row>
 55 |                     <tr>
 56 |                         <td colspan="2" class="bg-red-500" />
 57 |                         <td colspan="2">Header1</td>
 58 |                     </tr>
 59 |                 </template>
 60 | 
 61 | 
 62 |                 <template #footer-row>
 63 |                     <tr>
 64 |                         <td colspan="1" class="bg-red-500" />
 65 |                         <td colspan="1" class="bg-green-500"/>
 66 |                         <td colspan="2">Footer</td>
 67 |                     </tr>
 68 |                 </template>
 69 |             </TVTable>
 70 |         </div>
 71 |         <hr>
 72 |         <div>
 73 |             <span class="text-xs">With Props</span>
 74 |             <TVTable
 75 |                 ref="tvtTableProps"
 76 |                 v-model:currentPage="currentPage"
 77 |                 :items="filterItems"
 78 |                 :fields="fields"
 79 |                 multiple-sortable
 80 |                 multiple-selection
 81 |                 :total-rows="items.length"
 82 |                 :per-page="perPage"
 83 |                 :row-select-class="'bg-red-500'"
 84 |                 enable-check
 85 |                 :busy="busy"
 86 |                 @change-page="changePage"
 87 |                 @check-row="checkRowMultiple"
 88 |                 @row-clicked="checkRowMultiple"
 89 |             >
 90 |                 <template #header-row>
 91 |                     <tr>
 92 |                         <td colspan="2" />
 93 |                         <td colspan="2" class="bg-white text-center">Header1</td>
 94 |                         <td colspan="1" class="bg-red-300 text-center">Header2</td>
 95 |                     </tr>
 96 |                 </template>
 97 | 
 98 |                 <template #footer-row>
 99 |                     <tr>
100 |                         <td colspan="1" />
101 |                         <td colspan="1" class="bg-green-300 text-center"></td>
102 |                         <td colspan="3" class="bg-red-300 text-center">Footer</td>
103 |                     </tr>
104 |                 </template>
105 | 
106 |                 <template #cell:username="row">
107 |                     {{ row.item.emoji }} - {{ row.item.username }}
108 |                 </template>
109 | 
110 |                 <template #row-details>
111 |                     ROW-DETAILS ROW-DETAILS ROW-DETAILS
112 |                 </template>
113 | 
114 |                 <template #cell:details="row">
115 |                     <input id="checkbox" :checked="row.item._showDetails" type="checkbox" @click.stop="row.toggleDetails(row.item)" />
116 |                 </template>
117 |             </TVTable>
118 | 
119 |             <div class="text-left mt-2">
120 |                 Selected: {{ selectRow }}
121 |                 CurrentPage: {{ currentPage }}
122 |             </div>
123 |         </div>
124 |     </div>
125 | </template>
126 | 
127 | <script setup>
128 | import { defineComponent, ref } from 'vue';
129 | import TVTable from '../src/components/TVTable.vue';
130 | 
131 | defineComponent({
132 |     name: 'TableShow',
133 | }) 
134 | 
135 | const fields = ref([
136 |     {
137 |         label: 'id',
138 |         key: 'id',
139 |         thStyle: 'width: 30px',
140 |         sortable: true
141 |     },
142 |     {
143 |         label: 'username',
144 |         key: 'username',
145 |         thStyle: 'background: lightblue',
146 |         thClass: 'text-white',
147 |         tdClass: 'text-center',
148 |         sortable: true,
149 |     },
150 |     {
151 |         label: 'email',
152 |         key: 'email',
153 |         tdClass: 'bg-indigo-300'
154 |     },
155 |     {
156 |         label: 'details',
157 |         key: '',
158 |         thStyle: 'width: 30px',
159 |         tdClass: 'flex text-center',
160 |     },
161 | ])
162 | 
163 | const fieldsSimple = ref([
164 |     {
165 |         label: 'id',
166 |         key: 'id',
167 |         sortable: true
168 |     },
169 |     {
170 |         label: 'username',
171 |         key: 'username',
172 |         sortable: true
173 |     },
174 |     {
175 |         label: 'email',
176 |         key: 'email',
177 |     },
178 | ])
179 | 
180 | 
181 | const items = ref([
182 |     {
183 |         id: '1',
184 |         username: 'cat',
185 |         email: 'cat@tvdatatable.test',
186 |         emoji: '🐈',
187 |     },
188 |     {
189 |         id: '2',
190 |         username: 'dog',
191 |         email: 'dog@tvdatatable.test',
192 |         emoji: '🐕'
193 |     },
194 |     {
195 |         id: '3',
196 |         username: 'bird',
197 |         email: 'bird@tvdatatable.test',
198 |         emoji: '🐦'
199 |     },
200 | ])
201 | 
202 | const busy = ref(false)
203 | const customText = ref(false)
204 | 
205 | const currentPage = ref(1)
206 | 
207 | const perPage = ref(2)
208 | 
209 | const filterItems = ref(items.value.slice(0, 1 * perPage.value))
210 | 
211 | const cloneItems = JSON.parse(JSON.stringify(items.value))
212 | 
213 | const changePage = (values) => {
214 |     filterItems.value = items.value.slice(values.from, values.to)
215 | }
216 | 
217 | const selectRow = ref([])
218 | 
219 | const checkRowMultiple = (value) => {
220 |     if (selectRow.value.includes(value)) {
221 |         let index = selectRow.value.indexOf(value)
222 |         selectRow.value.splice(index, 1)
223 |     } else {
224 |         selectRow.value.push(value)
225 |     }
226 | }
227 | 
228 | const checkRow = (value) => {
229 |     selectRow.value = selectRow.value === value ? null : value
230 | }
231 | 
232 | </script>


--------------------------------------------------------------------------------
/dev/css/app.css:
--------------------------------------------------------------------------------
1 | @import "tailwindcss/base";
2 | @import "tailwindcss/components";
3 | @import "tailwindcss/utilities";
4 | 
5 | @import "../../src/css/app.css"


--------------------------------------------------------------------------------
/dev/main.js:
--------------------------------------------------------------------------------
 1 | import './css/app.css';
 2 | import { createApp } from 'vue';
 3 | 
 4 | import App from './App.vue';
 5 | 
 6 | import router from './router';
 7 | 
 8 | const app = createApp(App);
 9 | 
10 | app.use(router);
11 | 
12 | app.mount('#app');


--------------------------------------------------------------------------------
/dev/router.ts:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHistory } from 'vue-router';
 2 | 
 3 | import TableShow from './TableShow.vue'
 4 | 
 5 | const routes = [
 6 |     { path: '/', component: TableShow },
 7 | ];
 8 | 
 9 | const router = createRouter({
10 |     history: createWebHistory(),
11 |     routes,
12 | });
13 | 
14 | export default router;


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Tailwind Vue DataTable</title>
 7 |   </head>
 8 |   <body>
 9 |     <div id="app"></div>
10 |     <script type="module" src="/dev/main.js"></script>
11 |   </body>
12 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "@bitthecat/tailwind-vue-data-table",
 3 |     "version": "0.3.0",
 4 |     "keywords": [
 5 |         "tailwindcss",
 6 |         "customisable",
 7 |         "css",
 8 |         "vue",
 9 |         "datatable",
10 |         "table",
11 |         "sortable",
12 |         "data",
13 |         "vue3",
14 |         "paginator"
15 |     ],
16 |     "homepage": "https://github.com/BitTheCat/tailwind-vue-data-table",
17 |     "main": "dist/library.js",
18 |     "module": "dist/library.mjs",
19 |     "files": [
20 |         "dist/*"
21 |     ],
22 |     "license": "MIT",
23 |     "contributors": [
24 |         {
25 |             "name": "Michele Lotito",
26 |             "url": "https://github.com/bitthecat"
27 |         }
28 |     ],
29 |     "scripts": {
30 |         "dev": "vite",
31 |         "build": "vite build",
32 |         "preview": "vite preview",
33 |         "build-package": "rollup -c",
34 |         "eslint": "npx eslint  \"src/**.{js,vue}\"",
35 |         "test": "vitest"
36 |     },
37 |     "devDependencies": {
38 |         "@tailwindcss/forms": "^0.4.0",
39 |         "@vitejs/plugin-vue": "^2.0.1",
40 |         "@vue/test-utils": "^2.2.7",
41 |         "autoprefixer": "^10.4.0",
42 |         "eslint": "^8.24.0",
43 |         "eslint-plugin-vue": "^9.5.1",
44 |         "jsdom": "^21.0.0",
45 |         "rollup": "^2.79.2",
46 |         "rollup-plugin-peer-deps-external": "^2.2.4",
47 |         "rollup-plugin-vue": "^6.0.0",
48 |         "tailwindcss": "^3.0.7",
49 |         "vite": "^2.9.18",
50 |         "vitest": "^0.27.2",
51 |         "vue": "^3.2.6",
52 |         "vue-loader": "^16.7.0",
53 |         "vue-router": "^4"
54 |     },
55 |     "peerDependencies": {
56 |         "vue": "^3.2.6"
57 |     },
58 |     "dependencies": {
59 |         "rollup-plugin-import-css": "^3.1.0"
60 |     }
61 | }
62 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     plugins: {
3 |         tailwindcss: {},
4 |         autoprefixer: {},
5 |     },
6 | }


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import vue from 'rollup-plugin-vue'
 2 | import peerDepsExternal from 'rollup-plugin-peer-deps-external'
 3 | import css from "rollup-plugin-import-css";
 4 | 
 5 | export default [
 6 |     {
 7 |         input: './src/index.js',
 8 |         output: [
 9 |             {
10 |                 format: 'esm',
11 |                 file: 'dist/library.mjs'
12 |             },
13 |             {
14 |                 format: 'cjs',
15 |                 file: 'dist/library.js'
16 |             }
17 |         ],
18 |         plugins: [
19 |             vue(), peerDepsExternal(), css()
20 |         ]
21 |     }
22 | ]


--------------------------------------------------------------------------------
/src/components/TTable.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <table ref="TVTABLE" class="tv-table">
 3 |         <slot></slot>
 4 |     </table>
 5 | </template>
 6 | 
 7 | <script setup>
 8 | import {defineComponent} from 'vue';
 9 | 
10 | defineComponent({
11 |     name: 'TTable',
12 | })
13 | 
14 | </script>


--------------------------------------------------------------------------------
/src/components/TTbody.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <tbody class="tv-tbody">
 3 |         <slot></slot>
 4 |     </tbody>
 5 | </template>
 6 | 
 7 | <script setup>
 8 | import {defineComponent} from 'vue';
 9 | 
10 | defineComponent({
11 |     name: 'TTbody',
12 | })
13 | 
14 | </script>


--------------------------------------------------------------------------------
/src/components/TTd.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <td class="tv-td">
 3 |         <slot></slot>
 4 |     </td>
 5 | </template>
 6 | 
 7 | <script setup>
 8 | import {defineComponent} from 'vue';
 9 | 
10 | defineComponent({
11 |     name: 'TTd',
12 | })
13 | 
14 | </script>


--------------------------------------------------------------------------------
/src/components/TTh.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <th class="tv-th">
 3 |         <slot></slot>
 4 |     </th>
 5 | </template>
 6 | 
 7 | <script setup>
 8 | import {defineComponent} from 'vue';
 9 | 
10 | defineComponent({
11 |     name: 'TTh',
12 | })
13 | 
14 | </script>


--------------------------------------------------------------------------------
/src/components/TThead.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <thead class="tv-thead">
 3 |         <slot></slot>
 4 |     </thead>
 5 | </template>
 6 | 
 7 | <script setup>
 8 | import {defineComponent} from 'vue';
 9 | 
10 | defineComponent({
11 |     name: 'TThead',
12 | })
13 | 
14 | </script>


--------------------------------------------------------------------------------
/src/components/TTr.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <tr class="tv-tr">
 3 |         <slot></slot>
 4 |     </tr>
 5 | </template>
 6 | 
 7 | <script setup>
 8 | import {defineComponent} from 'vue';
 9 | 
10 | defineComponent({
11 |     name: 'TTr',
12 | })
13 | 
14 | </script>


--------------------------------------------------------------------------------
/src/components/TVPagination.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="flex items-center justify-end mr-2 mt-2">
  3 |         <div v-if="currentPage !== 1" class="flex items-center cursor-pointer">
  4 |             <svg
  5 |                 xmlns="http://www.w3.org/2000/svg"
  6 |                 fill="none"
  7 |                 viewBox="0 0 24 24"
  8 |                 stroke-width="1.5"
  9 |                 stroke="currentColor"
 10 |                 class="tv-paginator-size" 
 11 |                 @click="changePage(1)"
 12 |             >
 13 |                 <path stroke-linecap="round" stroke-linejoin="round" d="M18.75 19.5l-7.5-7.5 7.5-7.5m-6 15L5.25 12l7.5-7.5" />
 14 |             </svg>
 15 |         </div>
 16 |         <div v-if="currentPage !== 1" class="flex items-center cursor-pointer">
 17 |             <svg
 18 |                 xmlns="http://www.w3.org/2000/svg"
 19 |                 fill="none"
 20 |                 viewBox="0 0 24 24"
 21 |                 stroke-width="1.5"
 22 |                 stroke="currentColor"
 23 |                 class="tv-paginator-size" 
 24 |                 @click="changePage(undefined, true)"
 25 |             >
 26 |                 <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
 27 |             </svg>
 28 |         </div>
 29 |         <div class="sm:flex hidden">
 30 |             <template v-for="page of pages" :key="`page_${page}`">
 31 |                 <p 
 32 |                     class="font-medium leading-none cursor-pointer link px-2" 
 33 |                     :class="`${paginationClass(page)} tv-paginator-text`" 
 34 |                     @click="changePage(page)"
 35 |                 >
 36 |                     {{ page }}
 37 |                 </p>
 38 |             </template>
 39 |         </div>
 40 |         <div v-if="currentPage !== totPages" class="flex items-center cursor-pointer">
 41 |             <svg
 42 |                 xmlns="http://www.w3.org/2000/svg"
 43 |                 fill="none"
 44 |                 viewBox="0 0 24 24"
 45 |                 stroke-width="1.5"
 46 |                 stroke="currentColor"
 47 |                 class="tv-paginator-size" 
 48 |                 @click="changePage(undefined)"
 49 |             >
 50 |                 <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
 51 |             </svg>
 52 |         </div>
 53 |         <div v-if="currentPage !== totPages" class="flex items-center cursor-pointer">
 54 |             <svg
 55 |                 xmlns="http://www.w3.org/2000/svg"
 56 |                 fill="none"
 57 |                 viewBox="0 0 24 24"
 58 |                 stroke-width="1.5"
 59 |                 stroke="currentColor"
 60 |                 class="tv-paginator-size" 
 61 |                 @click="changePage(totPages)"
 62 |             >
 63 |                 <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5" />
 64 |             </svg>
 65 |         </div>
 66 |     </div>
 67 | </template>
 68 | 
 69 | <script setup>
 70 | 
 71 | import {computed, defineComponent, ref, watch} from 'vue';
 72 | 
 73 | defineComponent({
 74 |     name: 'TVPaginate'
 75 | })
 76 | 
 77 | const props = defineProps({
 78 |     totalRows: {
 79 |         type: Number,
 80 |         default: 0
 81 |     },
 82 |     perPage: {
 83 |         type: Number,
 84 |         default: 15
 85 |     },
 86 |     currentPage: {
 87 |         type: Number,
 88 |         default: 1
 89 |     },
 90 | })
 91 | const emit = defineEmits(['update:currentPage'])
 92 | 
 93 | const totPages = ref(Math.ceil(props.totalRows/props.perPage))
 94 | 
 95 | const pages = computed(() => {
 96 |     if (totPages.value === 1) {
 97 |         return [props.currentPage.value]
 98 |     }
 99 | 
100 |     let pages = []
101 | 
102 |     if (totPages.value > 1 && totPages.value <= 5 ) {
103 |         for (let i = 1; i <= totPages.value; i++) {
104 |             pages.push(i)
105 |         }
106 | 
107 |         return pages
108 |     }
109 | 
110 |     if (totPages.value >= 6 ) {
111 |         let isGtThree = props.currentPage > 1
112 |         const baseValue = isGtThree ? props.currentPage - 1 : props.currentPage
113 |         for (let i = 0; i < 5; i++) {
114 |             if (totPages.value - props.currentPage < 4) {
115 |                 pages.push(totPages.value - (4 - i))
116 |             } else {
117 |                 pages.push(baseValue + i)
118 |             }
119 |         }
120 | 
121 |         return pages
122 |     }
123 | 
124 |     return pages
125 | })
126 | 
127 | const paginationClass = (page) => {
128 |     let classes = []
129 |     if (page === props.currentPage) {
130 |         classes.push('rounded-xl bg-gray-400 text-white')
131 |     }
132 | 
133 |     return classes
134 | }
135 | 
136 | const changePage = (page = null, previous = false) => {
137 |     let increment = 0
138 |     if (page === null) {
139 |         increment = previous ? -1 : 1
140 |         page = props.currentPage
141 |     }
142 |     emit('update:currentPage', page + increment)
143 | }
144 | 
145 | watch(() => props.totalRows, (value) => {
146 |     totPages.value = Math.ceil(value/props.perPage)
147 | })
148 | 
149 | </script>


--------------------------------------------------------------------------------
/src/components/TVTable.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div v-if="!hidePagination && totalRows != 0 && !hideSummary && !busy" class="flex items-center justify-end mr-2 mb-2 text-body">
  3 |         <span class="tv-summary-size">{{ getSummary }}</span>
  4 |     </div>
  5 |     
  6 |     <div class="overflow-auto">
  7 |         <TTable ref="TVTABLE">
  8 |             <!-- No fields set -->
  9 |             <TThead v-if="fields.length == 0">
 10 |                 <TTr class="divide-x divide-y">
 11 |                     <TTh />
 12 |                 </TTr>
 13 |             </TThead>
 14 | 
 15 |             <TThead v-if="fields.length !== 0">
 16 |                 <slot v-if="slots['header-row']" name="header-row" />
 17 |                 <TTr class="divide-x divide-y">
 18 |                     <TTh 
 19 |                         v-if="enableCheck"
 20 |                         style="width: 30px" 
 21 |                     />
 22 | 
 23 |                     <TTh
 24 |                         v-for="field in fields"
 25 |                         :key="field.label"
 26 |                         class="font-medium uppercase"
 27 |                         :class="field.thClass"
 28 |                         :style="field.thStyle"
 29 |                     >
 30 |                         <div class="flex justify-between items-center">
 31 |                             <span>
 32 |                                 {{ field.label }}
 33 |                             </span>
 34 |                             <div v-if="field.sortable" class="ml-2">
 35 |                                 <svg
 36 |                                     xmlns="http://www.w3.org/2000/svg"
 37 |                                     fill="none"
 38 |                                     viewBox="0 0 24 24"
 39 |                                     :stroke-width="sortable[field.key] === 'asc' ? 4 : 2"
 40 |                                     stroke="currentColor"
 41 |                                     class="w-2.5 h-2.5 cursor-pointer"
 42 |                                     @click="updateSortable(field.key, 'asc')"
 43 |                                 >
 44 |                                     <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
 45 |                                 </svg>
 46 |                                 <svg
 47 |                                     xmlns="http://www.w3.org/2000/svg"
 48 |                                     fill="none"
 49 |                                     viewBox="0 0 24 24"
 50 |                                     :stroke-width="sortable[field.key] === 'desc' ? 4 : 2"
 51 |                                     stroke="currentColor"
 52 |                                     class="w-2.5 h-2.5 cursor-pointer"
 53 |                                     @click="updateSortable(field.key, 'desc')"
 54 |                                 >
 55 |                                     <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
 56 |                                 </svg>
 57 |                             </div>
 58 |                         </div>
 59 |                     </TTh>
 60 |                 </TTr>
 61 |             </TThead>
 62 |             <!-- No fields set -->
 63 |             <TTbody v-if="fields.length == 0 || busy">
 64 |                 <TTr class="divide-x divide-y">
 65 |                     <TTd v-if="fields.length == 0">
 66 |                         <span class="font-light flex justify-center mb-3 mt-3">No fields set</span>
 67 |                     </TTd>
 68 |                      <!-- Spinner -->
 69 |                      <TTd v-if="busy" :colspan="enableCheck ? fields.length + 1 : fields.length">
 70 |                         <div class="flex justify-center mb-3 mt-3">
 71 |                             <slot name="busy">
 72 |                                 <svg class="animate-spin -ml-1 mr-3 h-6 w-6 text-black" :class="spinnerClass" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
 73 |                                     <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
 74 |                                     <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
 75 |                                 </svg>
 76 |                             </slot>
 77 |                         </div>
 78 |                     </TTd>
 79 |                 </TTr>
 80 |             </TTbody>
 81 |             <TTbody v-else>
 82 |                 <!-- No Item -->
 83 |                 <template v-if="items.length === 0 && !busy">
 84 |                     <TTr>
 85 |                         <TTd :colspan="fields.length + 1">
 86 |                             <slot v-if="slots['no-items']" name="no-items" />
 87 |                             <span v-else class="font-light flex justify-center mb-3 mt-3">{{ noItemText }}</span>
 88 |                         </TTd>
 89 |                     </TTr>
 90 |                 </template>
 91 | 
 92 |                 <template v-for="(item, index) in items" v-else :key="item.id">
 93 |                     <!-- Table Body -->
 94 |                     <TTr 
 95 |                         :id="`TVTABLE_row_${index}_${item.id}`"  
 96 |                         class="divide-x divide-y last:border-b-0 px-2 py-1.5 text-left border hover:bg-gray-400/50"
 97 |                         :class="`${index % 2 ? 'bg-gray-300/50' : 'bg-gray-100/50'}`"
 98 |                         @click="rowClicked(item)"
 99 |                     >
100 |                         <TTd
101 |                             v-if="enableCheck"
102 |                             :key="`check_${item.label}`"
103 |                             :class="`${checkSelectedForRow(item) ? rowSelectClass || 'bg-gray-400/50' : ''}`"
104 |                         >
105 |                             <input id="checkbox" :checked="selectedRows.includes(item)" :value="item" type="checkbox" @click.stop="rowClicked(item)" />
106 |                         </TTd>
107 | 
108 |                         <TTd
109 |                             v-for="field in fields"
110 |                             :key="field.key"
111 |                             :class="`${field.tdClass ?? ''} ${checkSelectedForRow(item) ? rowSelectClass || 'bg-gray-400/50' : ''}`"
112 |                             :style="field.tdStyle"
113 |                         >
114 |                             <slot 
115 |                                 :name="`cell:${field.key || field.label}`"
116 |                                 :item="item" 
117 |                                 :data="getField(item, field.key)"
118 |                                 :toggle-details="toggleDetails"
119 |                             >
120 |                                 {{ getField(item, field.key, '') }}
121 |                             </slot>
122 |                         </TTd>
123 |                     </TTr>
124 |                     <TTr 
125 |                         v-if="item._showDetails" 
126 |                         :class="index % 2 ? 'bg-gray-300/50' : 'bg-gray-100/50'"
127 |                     >
128 |                         <TTd :colspan="enableCheck ? fields.length + 1 : fields.length">
129 |                             <slot name="row-details" :item="item" />
130 |                         </TTd>
131 |                     </TTr>
132 |                 </template>
133 |             </TTbody>
134 |             <tfoot 
135 |                 class="tv-tfoot"
136 |             >
137 |                 <slot v-if="slots['footer-row']" name="footer-row" />
138 |             </tfoot>
139 |         </TTable>
140 |     </div>
141 | 
142 |     <TVPagination
143 |         v-if="localTotalRows > perPage && !hidePagination && !busy"
144 |         v-model:currentPage="localCurrentPage"
145 |         :total-rows="localTotalRows"
146 |         :per-page="perPage"
147 |     />
148 | </template>
149 | 
150 | <script setup>
151 | import {computed, defineComponent, ref, useSlots, watch} from 'vue';
152 | import TVPagination from './TVPagination.vue';
153 | import TTable from './TTable.vue';
154 | import TThead from './TThead.vue';
155 | import TTr from './TTr.vue';
156 | import TTh from './TTh.vue';
157 | import TTbody from './TTbody.vue';
158 | import TTd from './TTd.vue';
159 | 
160 | defineComponent({
161 |     name: 'TVTable',
162 |     inheritAttrs: false
163 | })
164 | 
165 | const slots = useSlots();
166 | 
167 | const props = defineProps({
168 |     items: {
169 |         type: [Object, Array],
170 |         default: () => []
171 |     },
172 |     fields: {
173 |         type: Array,
174 |         default: () => []
175 |     },
176 |     currentPage: {
177 |         type: Number,
178 |         default: 1
179 |     },
180 |     totalRows: {
181 |         type: Number,
182 |         default: 0
183 |     },
184 |     perPage: {
185 |         type: Number,
186 |         default: 15
187 |     },
188 |     spinnerClass: {
189 |         type: String,
190 |         default: ''
191 |     },
192 |     rowSelectClass: {
193 |         type: String,
194 |         default: ''
195 |     },
196 |     hidePagination: Boolean,
197 |     hideSummary: Boolean,
198 |     multipleSortable: Boolean,
199 |     multipleSelection: Boolean,
200 |     enableCheck: Boolean,
201 |     busy: Boolean,
202 |     noItemText: {
203 |         type: String,
204 |         default: 'No data to display'
205 |     },
206 |     summaryText: {
207 |         type: String,
208 |         default: 'Displaying _STR_FROM_ to _STR_TO_ of _STR_TOTAL_ items'
209 |     },
210 | })
211 | 
212 | const emit = defineEmits([
213 |     'update:currentPage',
214 |     'updateSortable', 
215 |     'changePage', 
216 |     'checkRow', 
217 |     'rowClicked',
218 | ])
219 | 
220 | 
221 | const localTotalRows = computed(() => {
222 |     return props.totalRows || props.items.length || 0
223 | })
224 | 
225 | const fromRow = ref(0)
226 | const toRow = ref(0)
227 | const localCurrentPage = ref(props.currentPage)
228 | 
229 | const getField = (item, field, def) => {
230 |     return item[field] || def
231 | }
232 | 
233 | const toggleDetails = (value) => {
234 |     return value._showDetails = !value._showDetails
235 | }
236 | 
237 | const sortable = ref({})
238 | const selectedRows = ref([])
239 | 
240 | const rowClicked = (item) => {
241 |     if (props.multipleSelection) {
242 |         
243 |         if (selectedRows.value.includes(item)) {
244 |             let index = selectedRows.value.indexOf(item)
245 |             selectedRows.value.splice(index, 1)
246 |         } else {
247 |             selectedRows.value.push(item)
248 |         }
249 |     
250 |     } else {
251 |         selectedRows.value = selectedRows.value.includes(item) ? [] : [item]
252 |     }
253 | 
254 |     emit('rowClicked', item)
255 | } 
256 | 
257 | const updateSortable = (key, sort) => {
258 |     props.multipleSortable 
259 |         ? sortable.value[key] = sort
260 |         : sortable.value = {[key] : sort}
261 | 
262 |     emit('updateSortable', sortable.value)
263 | }
264 | 
265 | const refreshCounter = () => {
266 |     if (localCurrentPage.value === 0) {
267 |         return
268 |     }
269 |     let from = (localTotalRows.value > 0) ? 1 : 0
270 |     if (localCurrentPage.value > 1) {
271 |         from = from + (localCurrentPage.value - 1) * props.perPage
272 |     }
273 |     let to = Math.min(from + props.perPage - 1, localTotalRows.value)
274 |     fromRow.value = from - 1
275 |     toRow.value = to
276 | }
277 | 
278 | const checkSelectedForRow = (item) => {
279 |     return props.multipleSelection ? selectedRows.value.includes(item) : selectedRows.value === item
280 | }
281 | 
282 | const getSummary = computed(() => {
283 |     let text = props.summaryText.replace(/_STR_FROM_/, fromRow.value + 1)
284 |     text = text.replace(/_STR_TO_/, toRow.value)
285 |     text = text.replace(/_STR_TOTAL_/, localTotalRows.value)
286 |     return text
287 | })
288 | 
289 | watch(() => localCurrentPage.value, (value) => {
290 |     refreshCounter()
291 |     emit('changePage', {page: value, from: fromRow.value, to: toRow.value})
292 |     emit('update:currentPage', value)
293 | }, {immediate: true})
294 | 
295 | watch(() => localTotalRows.value, (value) => {
296 |     refreshCounter()
297 | })
298 | 
299 | </script>


--------------------------------------------------------------------------------
/src/css/app.css:
--------------------------------------------------------------------------------
 1 | .tv-table {
 2 |     @apply overflow-hidden min-w-full
 3 | }
 4 | 
 5 | .tv-thead {
 6 |    @apply bg-gray-300 text-xs border divide-x divide-y
 7 | }
 8 | 
 9 | .tv-th {
10 |     @apply px-2 py-1.5
11 | }
12 | 
13 | .tv-tbody {
14 |     @apply border bg-gray-100
15 | }
16 | 
17 | .tv-tr {
18 |     /*  */
19 | }
20 | 
21 | .tv-td {
22 |     @apply px-2 py-3.5 align-top table-cell last:border-b-0 text-2xl md:text-sm
23 | }
24 | 
25 | .tv-tfoot {
26 |     @apply text-xs bg-gray-300 border divide-x divide-y
27 | }
28 | 
29 | .tv-summary-size {
30 |     @apply text-lg md:text-sm
31 | }
32 | 
33 | .tv-paginator-size {
34 |     @apply w-6 h-6 md:w-4 md:h-4
35 | }
36 | 
37 | .tv-paginator-text {
38 |     @apply text-lg md:text-sm
39 | }
40 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import TVTable from'./components/TVTable.vue'
2 | import TVPagination from'./components/TVPagination.vue'
3 | import './css/app.css';
4 | 
5 | export { TVTable, TVPagination }


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     content: [
3 |         './index.html',
4 |         './dev/**/*.{html,js,vue,ts}',
5 |         './src/**/*.{html,js,vue,ts}',
6 |     ],
7 | }


--------------------------------------------------------------------------------
/test/base.spec.js:
--------------------------------------------------------------------------------
 1 | import { describe, expect, it } from 'vitest'
 2 | 
 3 | import { mount } from "@vue/test-utils";
 4 | import TVTable from "../src/components/TVTable.vue"
 5 | 
 6 | describe("Base Test", async() => {
 7 | 
 8 |     it("should render with no field set text", () => {
 9 |         
10 |         const wrapper = mount(TVTable);
11 | 
12 |         expect(wrapper.find('.tv-td').text()).toBe('No fields set')
13 |     });
14 |     
15 |     it("should render with no data to display", () => {
16 |         
17 |         const wrapper = mount(TVTable, {
18 |             props: {
19 |                 fields: [
20 |                     {
21 |                         label: 'id',
22 |                         key: 'id',
23 |                     },
24 |                 ]
25 |             }
26 |         });
27 | 
28 |         expect(wrapper.find('.tv-td').text()).toBe('No data to display')
29 |     });
30 | 
31 |     it("should render with some data", () => {
32 |         
33 |         const wrapper = mount(TVTable, {
34 |             props: {
35 |                 items: [
36 |                     {
37 |                         id: 1
38 |                     },
39 |                 ],
40 |                 fields: [
41 |                     {
42 |                         label: 'id',
43 |                         key: 'id',
44 |                     },
45 |                 ]
46 |             }
47 |         });
48 | 
49 |         expect(wrapper.find('.tv-th').text()).toBe('id')
50 |         expect(wrapper.find('.tv-td').text()).toBe('1')
51 |     });
52 | 
53 | });


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import vue from '@vitejs/plugin-vue'
 3 | 
 4 | export default defineConfig({
 5 |     plugins: [
 6 |         vue()
 7 |     ],
 8 |     build: {
 9 |         minify: false,
10 |         sourcemap: true,
11 |     }
12 | })


--------------------------------------------------------------------------------
/vitest.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vitest/config'
 2 | import vue from '@vitejs/plugin-vue'
 3 | 
 4 | export default defineConfig({
 5 |     plugins: [
 6 |         vue()
 7 |     ],
 8 |     test: {
 9 |         globals: true,
10 |         environment: "jsdom",
11 |     },
12 | })


--------------------------------------------------------------------------------