feat: add pagination in user table

src/views/user/ListUserView.vue

@@ -1,6 +1,5 @@
 <template>
-  <div>
-
+  <div style="height: 100%; display: flex; flex-direction: column">
     <div style="display: flex; justify-content: space-between;">
       <div style="display: flex; align-items: center"></div>
       <div style="display: flex; align-items: center; gap:10px">
@@ -13,11 +12,12 @@
     </div>
 
     <el-divider />
-    <el-table ref="usersTableRef" v-loading="loading" :data="filterUsers" row-key="_id" style="width: 100%">
+    <el-table ref="usersTableRef" v-loading="loading" :data="paginatedData" row-key="_id"
+      style="width: 100%; flex: 1; margin-bottom: 20px;">
       <el-table-column type="index" label="No" />
       <el-table-column label="Nama" sortable prop="name" />
       <el-table-column label="NIP" prop="nip" />
-      <el-table-column label="Tim" prop="team" />
+      <el-table-column label="Tim" prop="team" :formatter="teamFormatter" />
       <el-table-column label="Posisi" prop="position" />
 
       <el-table-column align="right">
@@ -26,7 +26,11 @@
         </template>
       </el-table-column>
     </el-table>
-    <div style="margin-top: 20px"></div>
+    <div style="display: flex;  gap: 20px;">
+      <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="total"
+        :page-sizes="[10, 25, 50, 100]" v-model:page-size="pageSize" :current-page="currentPage"
+        @current-change="handlePageChange" class="pagination" />
+    </div>
   </div>
 </template>
 
@@ -51,6 +55,25 @@ const headers = ref({
   Authorization: `Bearer ${auth.token}`,
 });
 const uploadUrl = ref(`${BASE_URL}/v1/users/upload`);
+const pageSize = ref(10)
+const currentPage = ref(1);
+
+const total = computed(() => filterUsers.value.length);
+
+const paginatedData = computed(() => {
+  const start = (currentPage.value - 1) * pageSize.value;
+  const end = start + pageSize.value;
+  return filterUsers.value.slice(start, end);
+});
+
+const handlePageChange = (page: number) => {
+  currentPage.value = page;
+};
+
+const teamFormatter = (row: any) => {
+  if (row.team == null) return "-";
+  return row.team;
+};
 
 const handleError = (
   error: Error,