up

nuxt-ui-pro · Feb 18, 2025 · a357a17 · a357a17
1 parent 020e1a5
commit a357a17
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 7 deletions.
diff --git a/app/components/AddCustomer.vue b/app/components/AddCustomer.vue
@@ -18,6 +18,7 @@ const state = reactive<Partial<Schema>>({
 const toast = useToast()
 async function onSubmit(event: FormSubmitEvent<Schema>) {
   toast.add({ title: 'Success', description: `New customer ${event.data.name} added`, color: 'success' })
+  open.value = false
 }
 </script>
 

diff --git a/app/pages/customers.vue b/app/pages/customers.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { TableColumn } from '@nuxt/ui'
 import { upperFirst } from 'scule'
-import type { Row } from '@tanstack/table-core'
+import { getPaginationRowModel, type Row } from '@tanstack/table-core'
 import type { User } from '~/types'
 
 const UAvatar = resolveComponent('UAvatar')
@@ -105,6 +105,11 @@ const columns: TableColumn<User>[] = [
       })
     }
   },
+  {
+    accessorKey: 'location',
+    header: 'Location',
+    cell: ({ row }) => row.original.location
+  },
   {
     accessorKey: 'status',
     header: 'Status',
@@ -121,11 +126,6 @@ const columns: TableColumn<User>[] = [
       )
     }
   },
-  {
-    accessorKey: 'location',
-    header: 'Location',
-    cell: ({ row }) => row.original.location
-  },
   {
     id: 'actions',
     cell: ({ row }) => {
@@ -166,10 +166,15 @@ watch(() => statusFilter.value, (newVal) => {
     statusColumn.setFilterValue(newVal)
   }
 })
+
+const pagination = ref({
+  pageIndex: 0,
+  pageSize: 10
+})
 </script>
 
 <template>
-  <UDashboardPanel id="customers" :ui="{ body: 'sm:p-4' }">
+  <UDashboardPanel id="customers" :ui="{ body: 'sm:p-4 sm:gap-4' }">
     <template #header>
       <UDashboardNavbar title="Customers">
         <template #leading>
@@ -199,6 +204,7 @@ watch(() => statusFilter.value, (newVal) => {
               { label: 'Unsubscribed', value: 'unsubscribed' },
               { label: 'Bounced', value: 'bounced' }
             ]"
+            :ui="{ trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
             placeholder="Filter status"
           />
           <UDropdownMenu
@@ -234,6 +240,10 @@ watch(() => statusFilter.value, (newVal) => {
         ref="table"
         v-model:column-filters="columnFilters"
         v-model:column-visibility="columnVisibility"
+        v-model:pagination="pagination"
+        :pagination-options="{
+          getPaginationRowModel: getPaginationRowModel()
+        }"
         class="shrink-0"
         :data="data"
         :columns="columns"
@@ -246,6 +256,14 @@ watch(() => statusFilter.value, (newVal) => {
           td: 'border-b border-(--ui-border)'
         }"
       />
+      <div class="flex justify-center border-t border-(--ui-border) pt-4">
+        <UPagination
+          :default-page="(table?.tableApi?.getState().pagination.pageIndex || 0) + 1"
+          :items-per-page="table?.tableApi?.getState().pagination.pageSize"
+          :total="table?.tableApi?.getFilteredRowModel().rows.length"
+          @update:page="(p) => table?.tableApi?.setPageIndex(p - 1)"
+        />
+      </div>
     </template>
   </UDashboardPanel>
 </template>