feat(intial auth): intial auth setup for the scanner

frontend/src/lib/tableStuff/LstTable.tsx

@@ -11,6 +11,15 @@ import {
 import React, { useState } from "react";
 import { Button } from "../../components/ui/button";
 import { ScrollArea, ScrollBar } from "../../components/ui/scroll-area";
+import {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectTrigger,
+	SelectValue,
+} from "../../components/ui/select";
 import {
 	Table,
 	TableBody,
@@ -26,15 +35,23 @@ type LstTableType = {
 	tableClassName?: string;
 	data: any;
 	columns: any;
+	height?: string;
+	pageSize?: number;
 };
 export default function LstTable({
 	className = "",
 	tableClassName = "",
 	data,
 	columns,
+	height = "h-full",
+	pageSize = 5,
 }: LstTableType) {
 	const [sorting, setSorting] = useState<SortingState>([]);
 	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+	const [pagination, setPagination] = useState({
+		pageIndex: 0, //initial page index
+		pageSize: pageSize, //default page size
+	});
 	//console.log(data);
 
 	const table = useReactTable({
@@ -46,24 +63,33 @@ export default function LstTable({
 		getSortedRowModel: getSortedRowModel(),
 		onColumnFiltersChange: setColumnFilters,
 		getFilteredRowModel: getFilteredRowModel(),
+		onPaginationChange: setPagination,
 		//renderSubComponent: ({ row }: { row: any }) => <ExpandedRow row={row} />,
 		//getRowCanExpand: () => true,
+		// columnResizeMode: "onChange",
 		filterFns: {},
 		state: {
 			sorting,
+			pagination,
 			columnFilters,
 		},
 	});
 	return (
 		<div className={className}>
-			<ScrollArea className="w-full rounded-md border whitespace-nowrap">
+			<div>{/* TODO: Add table header in here like title */}</div>
+			<ScrollArea
+				className={`w-full rounded-md border whitespace-nowrap ${height}`}
+			>
 				<Table className={cn("w-full", tableClassName)}>
 					<TableHeader>
 						{table.getHeaderGroups().map((headerGroup) => (
 							<TableRow key={headerGroup.id}>
 								{headerGroup.headers.map((header) => {
 									return (
-										<TableHead key={header.id}>
+										<TableHead
+											key={header.id}
+											className="sticky top-0 z-20 bg-background"
+										>
 											{header.isPlaceholder
 												? null
 												: flexRender(
@@ -76,6 +102,7 @@ export default function LstTable({
 							</TableRow>
 						))}
 					</TableHeader>
+
 					<TableBody>
 						{table.getRowModel().rows.length ? (
 							table.getRowModel().rows.map((row) => (
@@ -107,14 +134,23 @@ export default function LstTable({
 				<ScrollBar orientation="horizontal" />
 				<ScrollBar orientation="vertical" />
 			</ScrollArea>
+
 			<div className="flex items-center justify-end space-x-2 py-4">
+				<Button
+					variant="outline"
+					size="sm"
+					onClick={() => table.firstPage()}
+					disabled={!table.getCanPreviousPage()}
+				>
+					{"<<"}
+				</Button>
 				<Button
 					variant="outline"
 					size="sm"
 					onClick={() => table.previousPage()}
 					disabled={!table.getCanPreviousPage()}
 				>
-					Previous
+					{"<"}
 				</Button>
 				<Button
 					variant="outline"
@@ -122,8 +158,42 @@ export default function LstTable({
 					onClick={() => table.nextPage()}
 					disabled={!table.getCanNextPage()}
 				>
-					Next
+					{">"}
 				</Button>
+				<Button
+					variant="outline"
+					size="sm"
+					onClick={() => table.lastPage()}
+					disabled={!table.getCanNextPage()}
+				>
+					{">>"}
+				</Button>
+				<Select
+					value={pagination.pageSize.toString()}
+					onValueChange={(e) =>
+						setPagination({
+							...pagination,
+							pageSize: e === "all" ? data.length : parseInt(e, 10),
+						})
+					}
+				>
+					<SelectTrigger className="w-16">
+						<SelectValue
+							//id={field.name}
+							placeholder="Select Page"
+						/>
+					</SelectTrigger>
+					<SelectContent>
+						<SelectGroup>
+							<SelectLabel>Page Size</SelectLabel>
+							<SelectItem value="5">5</SelectItem>
+							<SelectItem value="10">10</SelectItem>
+							<SelectItem value="50">50</SelectItem>
+							<SelectItem value="100">100</SelectItem>
+							<SelectItem value="all">All</SelectItem>
+						</SelectGroup>
+					</SelectContent>
+				</Select>
 			</div>
 		</div>
 	);