Поиск, работа над query в js

resources/js/Pages/Home/DataTable/Index.vue

@@ -1,12 +1,18 @@
 <script setup>
 import {NDataTable, NEllipsis} from "naive-ui"
-import {h, ref} from "vue"
+import {h, reactive, ref} from "vue"
+import {useMedicalHistory} from "../../../Composables/useMedicalHistory.js";
 
+const { navigate } = useMedicalHistory('/')
 const props = defineProps({
     data: {
         type: Array,
         default: []
     },
+    meta: {
+        type: Object,
+        default: {}
+    },
     maxHeight: {
         type: String,
         default: null
@@ -67,10 +73,28 @@ const columns = ref([
         render: (row) => h(NEllipsis, null, { default: () => row.status || '-' })
     }
 ])
+
+const paginationReactive = reactive({
+    page: props.meta.current_page,
+    pageCount: props.meta.last_page,
+    pageSize: props.meta.per_page,
+    itemCount: props.meta.total,
+    pageSizes: [15, 50, 100],
+    showSizePicker: true,
+    prefix({ itemCount }) {
+        return `Всего карт ${itemCount}.`
+    },
+    onUpdatePage(page) {
+        navigate(undefined, page)
+    },
+    onUpdatePageSize(pageSize) {
+        navigate(undefined, 1, pageSize)
+    }
+})
 </script>
 
 <template>
-    <NDataTable remote striped :columns="columns" :max-height="maxHeight" size="small" :min-height="minHeight" :data="data" />
+    <NDataTable remote striped :columns="columns" :pagination="paginationReactive" :max-height="maxHeight" size="small" :min-height="minHeight" :data="data" />
 </template>
 
 <style scoped>