Merge pull request #96 from HC200ok/customize-rowsPerPage

Customize rows per page

Author: HC200ok

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.13",
+  "version": "1.4.14",
   "types": "./types/main.d.ts",
   "license": "MIT",
   "files": [

package.json

@@ -360,6 +360,7 @@ const {
 const {
   rowsItemsComputed,
   rowsPerPageRef,
+  updateRowsPerPage,
 } = useRows(
   isServerSideMode,
   rowsItems,
@@ -498,6 +499,9 @@ defineExpose({
   nextPage,
   prevPage,
   updatePage,
+  rowsPerPageOptions: rowsItemsComputed,
+  rowsPerPageActiveOption: rowsPerPageRef,
+  updateRowsPerPageActiveOption: updateRowsPerPage,
 });
 </script>
 

src/components/DataTable.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 #expand="item">
@@ -61,6 +62,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>
@@ -98,12 +114,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('');
 
@@ -191,6 +210,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
@@ -209,6 +229,24 @@ const prevPage = () => {
 const updatePage = (paginationNumber: number) => {
   dataTable.value.updatePage(paginationNumber);
 };
+
+// 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>