Merge branch 'main' of https://github.com/HC200ok/vue3-easy-data-table into feature/bodyslots

Author: NovalisTheMagician

package-lock.json

@@ -3,7 +3,7 @@
   "author": "HC200ok",
   "description": "A customizable and easy-to-use data table component made with Vue.js 3.x.",
   "private": false,
-  "version": "1.4.12",
+  "version": "1.4.14",
   "types": "./types/main.d.ts",
   "license": "MIT",
   "files": [

package.json

@@ -384,12 +384,13 @@ const {
   sortBy,
   sortType,
   updateServerOptionsSort,
-  emits
+  emits,
 );
 
 const {
   rowsItemsComputed,
   rowsPerPageRef,
+  updateRowsPerPage,
 } = useRows(
   isServerSideMode,
   rowsItems,
@@ -528,6 +529,9 @@ defineExpose({
   nextPage,
   prevPage,
   updatePage,
+  rowsPerPageOptions: rowsItemsComputed,
+  rowsPerPageActiveOption: rowsPerPageRef,
+  updateRowsPerPageActiveOption: updateRowsPerPage,
 });
 </script>
 
@@ -563,6 +567,9 @@ defineExpose({
     --easy-table-footer-font-size: 12px;
     --easy-table-footer-padding: 0px 5px;
     --easy-table-footer-height: 36px;
+    /**footer-rowsPerPage**/
+    --easy-table-rows-per-page-selector-width: auto;
+    --easy-table-rows-per-page-selector-option-padding: 5px;
     /*message*/
     --easy-table-message-font-color: #212121;
     --easy-table-message-font-size: 12px;
@@ -587,4 +594,3 @@ defineExpose({
   height: v-bind(tableHeightPx);
 }
 </style>
-

src/components/DataTable.vue

@@ -103,6 +103,7 @@ const themeColor = inject('themeColor');
   min-width: 45px;
   position: relative;
   margin: 0px 10px;
+  width: var(--easy-table-rows-per-page-selector-width);
   .rows-input__wrapper {
     height: 20px;
     border-bottom: 1px solid var(--easy-table-footer-font-color);
@@ -141,7 +142,7 @@ const themeColor = inject('themeColor');
     box-shadow: 0 5px 5px -3px rgb(0 0 0 / 20%), 0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%);
     li {
       cursor: pointer;
-      padding: 5px;
+      padding: var(--easy-table-rows-per-page-selector-option-padding);
       background-color: var(--easy-table-footer-background-color);
 
       &.selected {

src/components/RowsSelector.vue

@@ -16,8 +16,13 @@ export default function useRows(
 
   const rowsPerPageRef = ref(serverOptions.value ? serverOptions.value.rowsPerPage : rowsPerPage.value);
 
+  const updateRowsPerPage = (option: number) => {
+    rowsPerPageRef.value = option;
+  };
+
   return {
     rowsItemsComputed,
     rowsPerPageRef,
+    updateRowsPerPage,
   };
 }

src/hooks/useRows.ts

@@ -33,6 +33,7 @@
       :body-item-class-name="bodyItemClassNameFunction"
       @click-row="showItem"
       @update-sort="updateSort"
+      hide-footer
     >
       <template #body.prepend="body">
         <tr>
@@ -75,6 +76,21 @@
     </DataTable>
 
     <div class="customize-footer">
+      <div class="customize-rows-per-page">
+        <select
+          class="select-items"
+          @change="updateRowsPerPageSelect"
+        >
+          <option
+            v-for="item in rowsPerPageOptions"
+            :key="item"
+            :selected="item === rowsPerPageActiveOption"
+            :value="item"
+          >
+            {{ item }} rows per page
+          </option>
+        </select>
+      </div>
       <div class="customize-index">
         Now displaying: {{ currentPageFirstIndex }} ~ {{ currentPageLastIndex }} of {{ totalItemsLength }}
       </div>
@@ -112,12 +128,15 @@
 import {
   computed, ref, reactive, toRefs,
 } from 'vue';
+// import { useRowsPerPage } from 'use-vue3-easy-data-table';
+// import type { UseRowsPerPageReturn } from 'use-vue3-easy-data-table';
 import type {
   Header, Item, FilterOption, ClickRowArgument, UpdateSortArgument, HeaderItemClassNameFunction, BodyItemClassNameFunction, BodyRowClassNameFunction,
 } from '../types/main';
 import DataTable from '../components/DataTable.vue';
 import { mockClientNestedItems, mockClientItems, mockDuplicateClientNestedItems } from '../mock';
 
+
 const searchField = ref('name');
 const searchValue = ref('');
 
@@ -205,6 +224,7 @@ const dataTable = ref();
 // index related
 const currentPageFirstIndex = computed(() => dataTable.value?.currentPageFirstIndex);
 const currentPageLastIndex = computed(() => dataTable.value?.currentPageLastIndex);
+
 const totalItemsLength = computed(() => dataTable.value?.totalItemsLength);
 
 // paginations related
@@ -226,6 +246,24 @@ const updatePage = (paginationNumber: number) => {
 const isDataHeader = (header: Header) => {
   return !(header.value === 'checkbox' || header.value === 'index' || header.value === 'expand')
 }
+
+// rows per page
+const rowsPerPageOptions = computed(() => dataTable.value?.rowsPerPageOptions);
+const rowsPerPageActiveOption = computed(() => dataTable.value?.rowsPerPageActiveOption);
+
+const updateRowsPerPageSelect = (e: Event) => {
+  dataTable.value.updateRowsPerPageActiveOption(Number((e.target as HTMLInputElement).value));
+};
+
+// const {
+//   rowsPerPageOptions,
+//   rowsPerPageActiveOption,
+//   updateRowsPerPageActiveOption,
+// }: UseRowsPerPageReturn = useRowsPerPage(dataTable);
+
+// const updateRowsPerPageSelect = (e: Event) => {
+//   updateRowsPerPageActiveOption(Number((e.target as HTMLInputElement).value));
+// };
 </script>
 
 <style scoped>
@@ -296,6 +334,9 @@ const isDataHeader = (header: Header) => {
   --easy-table-footer-padding: 0px 10px;
   --easy-table-footer-height: 40px;
 
+  --easy-table-rows-per-page-selector-width: 70px;
+  --easy-table-rows-per-page-selector-option-padding: 10px;
+
   --easy-table-scrollbar-track-color: #4c5d7a;
   --easy-table-scrollbar-color: #4c5d7a;
   --easy-table-scrollbar-corner-color: #4c5d7a;