diff --git a/README.md b/README.md index 4d2dc3d..2b071bd 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ Contains the TVPaginator component that can be disabled via prop or used in stan
#### ❗️ *__Documentation soon available__* -##### For now, check under dev/TableShow.vue to see the table in action +##### For now, check under dev/TableShow.vue to see the table in action or [here](https://bitthecat.github.io/tailwind-vue-data-table.html)
@@ -32,107 +32,6 @@ content: [ import { TVTable } from '@bitthecat/tailwind-vue-data-table' ``` -### Next additions -- Pagination (can be disabled) ✔️ - - - -- Select row column (with checkbox) ✔️ - - - -- Row detail ✔️ - - - -- Row Clicked event ✔️ - -- Busy state ✔️ - - -- Additional rows up the header ✔️ - -- Select rows (visual) ✔️ - -- Footer ✔️ - -- Provide item from api url - -- ... - -
- -## Table -### Props - -| Props | Default | Description | -| --- | --- | --- | -| currentPage | 1 | current displayed page (used by the paginator) | -| totalRows | 0 | total number of rows (used by the paginator) | -| perPage | 15 | number of rows displayed for page (used by the paginator) | -| hidePagination | false | enables for hide paginator | -| multipleSortable | false | enables multiple sortable for table header | -| enableCheck | false | enables checkbox for table row | -| busy | false | enables spinner for loading data | - -### Slots - -| Props | Description | -| --- | --- | -| items | table data | -| fields | data fields | -| #cell:FIELD_NAME | used for overwrite | -| #row-details | row details, you need to use row.toggleDetails(row.item) within a template that contains an icon/button to toggle it | -| #header-row | used for additional row up the header | -| #footer-row | used for show table footer row | - -slot 'cell:' has item or data props - -item retrieves the row value - -``` html - -``` - -data retrieves the field value - -``` html - -``` - -### Events - -| Event | Description | -| --- | --- | -| updateSortable | emit the sortable field/fields | -| changePage | emit the page change | -| checkRow | emit the row item when user click on row checkbox | -| rowClicked | emit the row item when user click on row | - -##### Notes - -##### Any __@click__ event of elements within the row triggers the rowClicked event, to get around this we need to __use @click.stop to prevent the propagation of the event__ - -
- -## Fields -### Props - -| Props | Description | -| --- | --- | -| key | th Title | -| label | index of value | -| sortable | the default setting is false, if set to true a symbol appears for sorting | -| thStyle | used for overwrite the th style | -| tdStyle | used for overwrite the td style | -| thClass | used for overwrite the th class | -| tdClass | used for overwrite the td class | -| _showDetails | used for show row details (default false) | -
This project is licensed under the MIT license. See [LICENSE](LICENSE). \ No newline at end of file diff --git a/dev/App.vue b/dev/App.vue index 1696200..5c538d4 100644 --- a/dev/App.vue +++ b/dev/App.vue @@ -3,7 +3,7 @@
- Tailwind Vue DataTable + Tailwind Vue DataTable v2 by BitTheCat
diff --git a/dev/TableShow.vue b/dev/TableShow.vue index ae51c15..22973e4 100644 --- a/dev/TableShow.vue +++ b/dev/TableShow.vue @@ -7,6 +7,10 @@ :items="cloneItems" :fields="fieldsSimple" :busy="busy" + :body-class="'text-lg'" + :spinner-class="'text-green-500'" + :table-class="'overflow-hidden shadow ring-1 ring-gray-100 md:rounded-lg'" + :head-class="'bg-yellow-600'" @check-row="checkRow" @row-clicked="checkRow" /> @@ -60,6 +64,7 @@
Selected: {{ selectRow }} + CurrentPage: {{ currentPage }}
diff --git a/package.json b/package.json index d0b6ba1..de86612 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@bitthecat/tailwind-vue-data-table", - "version": "0.1.8", + "version": "0.2.0", "keywords": [ "tailwindcss", "vue", diff --git a/src/components/TVTable.vue b/src/components/TVTable.vue index 9ad3bb7..7a96797 100644 --- a/src/components/TVTable.vue +++ b/src/components/TVTable.vue @@ -3,8 +3,8 @@ Displaying {{ fromRow + 1 }} to {{ toRow }} of {{ totalRows }} items
- - +
+ - + - +
@@ -52,12 +52,12 @@
- + @@ -68,7 +68,7 @@
@@ -125,7 +125,8 @@ import {computed, defineComponent, ref, useAttrs, useSlots, watch} from 'vue'; import TVPagination from './TVPagination.vue'; defineComponent({ - name: 'TVTable' + name: 'TVTable', + inheritAttrs: false }) const slots = useSlots(); @@ -152,6 +153,26 @@ const props = defineProps({ type: Number, default: 15 }, + tableClass: { + type: String, + default: '' + }, + headClass: { + type: String, + default: '' + }, + bodyClass: { + type: String, + default: '' + }, + footerClass: { + type: String, + default: '' + }, + spinnerClass: { + type: String, + default: '' + }, hidePagination: Boolean, multipleSortable: Boolean, enableCheck: Boolean, @@ -159,10 +180,11 @@ const props = defineProps({ }) const emit = defineEmits([ + 'update:currentPage', 'updateSortable', 'changePage', 'checkRow', - 'rowClicked' + 'rowClicked', ]) @@ -223,6 +245,7 @@ const checkSelectedForRow = (item) => { watch(() => localCurrentPage.value, (value) => { refreshCounter() emit('changePage', {page: value, from: fromRow.value, to: toRow.value}) + emit('update:currentPage', value) }, {immediate: true}) \ No newline at end of file