feat: add page size selector to data table pagination controls

resources/js/components/data-table.tsx

@@ -45,6 +45,13 @@ import {
     EmptyMedia,
     EmptyTitle,
 } from "@/components/ui/empty"
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select"
 
 interface DataTableFilterOption {
     columnId: string;
@@ -332,6 +339,26 @@ export function DataTable<TData, TValue>({
                     {table.getFilteredRowModel().rows.length} baris dipilih.
                 </div>
                 <div className="flex items-center space-x-6 lg:space-x-8">
+                    <div className="flex items-center space-x-2">
+                        <p className="text-sm font-medium">Baris per halaman</p>
+                        <Select
+                            value={`${table.getState().pagination.pageSize}`}
+                            onValueChange={(value) => {
+                                table.setPageSize(Number(value))
+                            }}
+                        >
+                            <SelectTrigger className="h-8 w-[70px]">
+                                <SelectValue placeholder={table.getState().pagination.pageSize} />
+                            </SelectTrigger>
+                            <SelectContent side="top">
+                                {[10, 20, 30, 40, 50].map((pageSize) => (
+                                    <SelectItem key={pageSize} value={`${pageSize}`}>
+                                        {pageSize}
+                                    </SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                    </div>
                     <div className="flex items-center justify-center text-sm font-medium">
                         {table.getFilteredRowModel().rows.length > 0 ? (
                             <>