Jelajahi Sumber

Added paging back for performance.

vtugulan 3 hari lalu
induk
melakukan
cc7e485c29
1 mengubah file dengan 38 tambahan dan 1 penghapusan
  1. 38 1
      app/components/terratech/TerraTechSummaryDialog.tsx

+ 38 - 1
app/components/terratech/TerraTechSummaryDialog.tsx

@@ -5,6 +5,7 @@ import {
     ColumnDef,
     flexRender,
     getCoreRowModel,
+    getPaginationRowModel,
     getSortedRowModel,
     useReactTable,
     SortingState,
@@ -27,7 +28,7 @@ import {
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { getTerraTechFacilitySummary, TerraTechSummaryRow } from "@/app/actions/imports";
-import { Fuel, AlertTriangle, Download } from "lucide-react";
+import { Fuel, AlertTriangle, Download, ChevronLeft, ChevronRight } from "lucide-react";
 
 interface TerraTechSummaryDialogProps {
     open: boolean;
@@ -219,7 +220,13 @@ function SummaryTable({ data, importName }: { data: TerraTechSummaryRow[]; impor
         },
         onSortingChange: setSorting,
         getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
         getSortedRowModel: getSortedRowModel(),
+        initialState: {
+            pagination: {
+                pageSize: 30,
+            },
+        },
     });
 
     function exportToExcel() {
@@ -328,6 +335,36 @@ function SummaryTable({ data, importName }: { data: TerraTechSummaryRow[]; impor
                     </TableBody>
                 </Table>
             </div>
+
+            <div className="flex items-center justify-between">
+                <div className="text-sm text-muted-foreground">
+                    Showing {table.getRowModel().rows.length} of {data.length} records
+                </div>
+                <div className="flex items-center space-x-2">
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => table.previousPage()}
+                        disabled={!table.getCanPreviousPage()}
+                    >
+                        <ChevronLeft className="h-4 w-4 mr-1" />
+                        Previous
+                    </Button>
+                    <div className="text-sm font-medium">
+                        Page {table.getState().pagination.pageIndex + 1} of{" "}
+                        {table.getPageCount()}
+                    </div>
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => table.nextPage()}
+                        disabled={!table.getCanNextPage()}
+                    >
+                        Next
+                        <ChevronRight className="h-4 w-4 ml-1" />
+                    </Button>
+                </div>
+            </div>
         </div>
     );
 }