From ca6217b4cc5711d1326985ab7116e3f68935fe03 Mon Sep 17 00:00:00 2001
From: Wikzyy <alwi.erdi4@gmail.com>
Date: Fri, 21 Feb 2025 17:50:32 +0700
Subject: [PATCH] feat: add pagination and sorting

---
 src/components/ui/DataTable.tsx | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/src/components/ui/DataTable.tsx b/src/components/ui/DataTable.tsx
index 73ca407..1dd2605 100644
--- a/src/components/ui/DataTable.tsx
+++ b/src/components/ui/DataTable.tsx
@@ -6,6 +6,9 @@ import {
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  SortingState,
   useReactTable
 } from '@tanstack/react-table';
 
@@ -40,13 +43,19 @@ export function DataTable<TData, TValue>({
   createGroup
 }: DataTableProps<TData, TValue> & { createGroup?: () => void }) {
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+  const [sorting, setSorting] = useState<SortingState>([]);
+
   const table = useReactTable({
     data,
     columns,
     getCoreRowModel: getCoreRowModel(),
     onColumnFiltersChange: setColumnFilters,
+    getPaginationRowModel: getPaginationRowModel(),
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
     state: {
+      sorting,
       columnFilters
     }
   });
@@ -105,6 +114,24 @@ export function DataTable<TData, TValue>({
           </TableBody>
         </Table>
       </div>
+      <div className="flex items-center justify-end space-x-2 py-4">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => table.previousPage()}
+          disabled={!table.getCanPreviousPage()}
+        >
+          Previous
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => table.nextPage()}
+          disabled={!table.getCanNextPage()}
+        >
+          Next
+        </Button>
+      </div>
     </div>
   );
 }