changes

resources/js/Components/DataTable/DataTablePagination.vue

@@ -1,20 +1,24 @@
 <script setup>
-import { computed } from 'vue';
-import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-vue-next';
-import { Button } from '@/Components/ui/button';
+import { computed } from "vue";
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-vue-next";
+import { Button } from "@/Components/ui/button";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/Components/ui/select';
+} from "@/Components/ui/select";
 
 const props = defineProps({
   table: {
     type: Object,
     required: true,
   },
+  showPerPageSelector: {
+    type: Boolean,
+    default: true,
+  },
 });
 
 const pageSizeOptions = computed(() => [10, 20, 30, 40, 50]);
@@ -27,13 +31,13 @@ const pageSizeOptions = computed(() => [10, 20, 30, 40, 50]);
       {{ table.getFilteredRowModel().rows.length }} row(s) selected.
     </div>
     <div class="flex items-center space-x-6 lg:space-x-8">
-      <div class="flex items-center space-x-2">
+      <div v-if="showPerPageSelector" class="flex items-center space-x-2">
         <p class="text-sm font-medium">Rows per page</p>
         <Select
           :model-value="`${table.getState().pagination.pageSize}`"
           @update:model-value="(value) => table.setPageSize(Number(value))"
         >
-          <SelectTrigger class="h-8 w-[70px]">
+          <SelectTrigger class="h-8 w-17.5">
             <SelectValue :placeholder="`${table.getState().pagination.pageSize}`" />
           </SelectTrigger>
           <SelectContent side="top">
@@ -47,7 +51,7 @@ const pageSizeOptions = computed(() => [10, 20, 30, 40, 50]);
           </SelectContent>
         </Select>
       </div>
-      <div class="flex w-[100px] items-center justify-center text-sm font-medium">
+      <div class="flex w-25 items-center justify-center text-sm font-medium">
         Page {{ table.getState().pagination.pageIndex + 1 }} of
         {{ table.getPageCount() }}
       </div>
@@ -92,4 +96,3 @@ const pageSizeOptions = computed(() => [10, 20, 30, 40, 50]);
     </div>
   </div>
 </template>
-