docs: add table pagination example

Author: MuhammadM1998

docs/app/components/content/examples/table/TablePaginationExample.vue

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import type { TableColumn } from '@nuxt/ui'
+
+type Payment = {
+  id: string
+  date: string
+  email: string
+  amount: number
+}
+const data = ref<Payment[]>([{
+  id: '4600',
+  date: '2024-03-11T15:30:00',
+  email: '[email protected]',
+  amount: 594
+}, {
+  id: '4599',
+  date: '2024-03-11T10:10:00',
+  email: '[email protected]',
+  amount: 276
+}, {
+  id: '4598',
+  date: '2024-03-11T08:50:00',
+  email: '[email protected]',
+  amount: 315
+}, {
+  id: '4597',
+  date: '2024-03-10T19:45:00',
+  email: '[email protected]',
+  amount: 529
+}, {
+  id: '4596',
+  date: '2024-03-10T15:55:00',
+  email: '[email protected]',
+  amount: 639
+}, {
+  id: '4595',
+  date: '2024-03-10T13:20:00',
+  email: '[email protected]',
+  amount: 428
+}, {
+  id: '4594',
+  date: '2024-03-10T11:05:00',
+  email: '[email protected]',
+  amount: 673
+}, {
+  id: '4593',
+  date: '2024-03-09T22:15:00',
+  email: '[email protected]',
+  amount: 382
+}, {
+  id: '4592',
+  date: '2024-03-09T20:30:00',
+  email: '[email protected]',
+  amount: 547
+}, {
+  id: '4591',
+  date: '2024-03-09T18:45:00',
+  email: '[email protected]',
+  amount: 291
+}, {
+  id: '4590',
+  date: '2024-03-09T16:20:00',
+  email: '[email protected]',
+  amount: 624
+}, {
+  id: '4589',
+  date: '2024-03-09T14:10:00',
+  email: '[email protected]',
+  amount: 438
+}, {
+  id: '4588',
+  date: '2024-03-09T12:05:00',
+  email: '[email protected]',
+  amount: 583
+}, {
+  id: '4587',
+  date: '2024-03-09T10:30:00',
+  email: '[email protected]',
+  amount: 347
+}, {
+  id: '4586',
+  date: '2024-03-09T08:15:00',
+  email: '[email protected]',
+  amount: 692
+}, {
+  id: '4585',
+  date: '2024-03-08T23:40:00',
+  email: '[email protected]',
+  amount: 419
+}, {
+  id: '4584',
+  date: '2024-03-08T21:25:00',
+  email: '[email protected]',
+  amount: 563
+}, {
+  id: '4583',
+  date: '2024-03-08T19:50:00',
+  email: '[email protected]',
+  amount: 328
+}, {
+  id: '4582',
+  date: '2024-03-08T17:35:00',
+  email: '[email protected]',
+  amount: 647
+}, {
+  id: '4581',
+  date: '2024-03-08T15:20:00',
+  email: '[email protected]',
+  amount: 482
+}])
+const columns: TableColumn<Payment>[] = [{
+  accessorKey: 'id',
+  header: '#',
+  cell: ({ row }) => `#${row.getValue('id')}`
+}, {
+  accessorKey: 'date',
+  header: 'Date',
+  cell: ({ row }) => {
+    return new Date(row.getValue('date')).toLocaleString('en-US', {
+      day: 'numeric',
+      month: 'short',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false
+    })
+  }
+}, {
+  accessorKey: 'email',
+  header: 'Email'
+}, {
+  accessorKey: 'amount',
+  header: () => h('div', { class: 'text-right' }, 'Amount'),
+  cell: ({ row }) => {
+    const amount = Number.parseFloat(row.getValue('amount'))
+    const formatted = new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'EUR'
+    }).format(amount)
+    return h('div', { class: 'text-right font-medium' }, formatted)
+  }
+}]
+const table = useTemplateRef('table')
+</script>
+
+<template>
+  <div class="w-full space-y-4 pb-4">
+    <UTable
+      ref="table"
+      :data="data"
+      :columns="columns"
+      :tanstack-options="{ initialState: { pagination: { pageSize: 7 } } }"
+      class="flex-1"
+    />
+    <UPagination
+      :default-page="(table?.tableApi.getState().pagination.pageIndex || 0) + 1"
+      :items-per-page="table?.tableApi.getState().pagination.pageSize"
+      :total="table?.tableApi.getFilteredRowModel().rows.length"
+      class="w-fit mx-auto"
+      @update:page="(p) => table?.tableApi.setPageIndex(p - 1)"
+    />
+  </div>
+</template>

docs/content/3.components/table.md

@@ -404,6 +404,17 @@ class: '!p-0'
 ---
 ::
 
+### With pagination
+We already pass the `getPaginationRowModel` function to the table so you don't need to pass it again. There are different pagination approaches as explained in [Pagination Guide](https://tanstack.com/table/v8/docs/guide/pagination#pagination-guide). You can implement any of them by passing options to `tanstackOptions` prop. In the example below, we use the `initialState` prop to set the default page size and use `UPagination` component to control the pagination state.
+::component-example
+---
+prettier: true
+collapse: true
+name: 'table-pagination-example'
+class: '!p-0'
+---
+::
+
 ### With slots
 
 You can use slots to customize the header and data cells of the table.