adding pagination.

src/components/wrappers/table/data-table-with-pagination.tsx

@@ -0,0 +1,38 @@
+"use client"
+
+import {useState} from "react";
+
+import {
+    ColumnDef, getCoreRowModel, getPaginationRowModel, getSortedRowModel, SortingState, useReactTable
+} from "@tanstack/react-table"
+import {DataTable} from "@/components/wrappers/table/data-table";
+import {TablePagination} from "@/components/wrappers/table/table-pagination";
+
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[]
+    data: TData[]
+}
+
+export function DataTableWithPagination<TData, TValue>({columns, data}: DataTableProps<TData, TValue>) {
+
+    const [sorting, setSorting] = useState<SortingState>([])
+
+    const table = useReactTable({
+        data,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        onSortingChange: setSorting,
+        getSortedRowModel: getSortedRowModel(),
+        state: {
+            sorting,
+        },
+    })
+
+    return (
+        <div>
+            <DataTable table={table}/>
+            <TablePagination table={table}/>
+        </div>
+    )
+}

src/components/wrappers/table/data-table.tsx

@@ -0,0 +1,54 @@
+import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table";
+import {flexRender} from "@tanstack/react-table";
+
+export type dataTableProps = {
+    table: any
+}
+
+export const DataTable = ({table}: dataTableProps) => {
+
+    return (
+        <Table>
+            <TableHeader>
+                {table.getHeaderGroups().map((headerGroup) => (
+                    <TableRow key={headerGroup.id}>
+                        {headerGroup.headers.map((header) => {
+                            return (
+                                <TableHead key={header.id}>
+                                    {header.isPlaceholder
+                                        ? null
+                                        : flexRender(
+                                            header.column.columnDef.header,
+                                            header.getContext()
+                                        )}
+                                </TableHead>
+                            )
+                        })}
+                    </TableRow>
+                ))}
+            </TableHeader>
+            <TableBody>
+                {table.getRowModel().rows?.length ? (
+                    table.getRowModel().rows.map((row) => (
+                        <TableRow
+                            key={row.id}
+                            data-state={row.getIsSelected() && "selected"}
+                        >
+                            {row.getVisibleCells().map((cell) => (
+                                <TableCell key={cell.id}>
+                                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                </TableCell>
+                            ))}
+                        </TableRow>
+                    ))
+                ) : (
+                    <TableRow>
+                        <TableCell colSpan={table.columns.length} className="h-24 text-center">
+                            No results.
+                        </TableCell>
+                    </TableRow>
+                )}
+            </TableBody>
+        </Table>
+    )
+}

src/components/wrappers/table/table-pagination-navigation.tsx

@@ -0,0 +1,41 @@
+import {PaginationNavigation} from "@/components/wrappers/pagination/pagination-navigation";
+
+
+export type paginationNavigationProps = {
+    className?: string
+    table: any
+    maxVisiblePages?: number
+}
+
+
+export const TablePaginationNavigation = (props: paginationNavigationProps) => {
+
+    const {className, table, maxVisiblePages = 3} = props
+
+
+    const totalPages = table.getPageCount()
+    const currentPage = table.getState().pagination.pageIndex + 1
+
+    const goToPage = (page: number) => {
+        table.setPageIndex(page - 1)
+    }
+
+    const goToPrevPage = () => {
+        if (table.getCanPreviousPage()) table.previousPage()
+    }
+
+    const goToNextPage = () => {
+        if (table.getCanNextPage()) table.nextPage()
+    }
+
+    return (
+        <PaginationNavigation
+            className={className}
+            totalPages={totalPages}
+            currentPage={currentPage}
+            goToPage={goToPage}
+            goToPrevPage={goToPrevPage}
+            goToNextPage={goToNextPage}
+            maxVisiblePages={maxVisiblePages}/>
+    )
+}

src/components/wrappers/table/table-pagination-size.tsx

@@ -0,0 +1,38 @@
+import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select";
+import {cn} from "@/lib/utils";
+
+export type tablePaginationSizeProps = {
+    className?: string
+    table: any
+    pageSizeOptions?: number[]
+}
+
+
+export const TablePaginationSize = (props: tablePaginationSizeProps) => {
+
+    const {className, table, pageSizeOptions = [10, 20, 30, 40, 50]} = props
+
+    return (
+        <div className={cn("flex items-center space-x-2", className)}>
+            <p className="whitespace-nowrap text-sm font-medium">Rows per page</p>
+            <Select
+                value={`${table.getState().pagination.pageSize}`}
+                onValueChange={(value) => {
+                    table.setPageSize(Number(value))
+                }}
+            >
+                <SelectTrigger className="h-8 w-[4.5rem]">
+                    <SelectValue placeholder={table.getState().pagination.pageSize}/>
+                </SelectTrigger>
+                <SelectContent side="top">
+                    {pageSizeOptions.map((pageSize) => (
+                        <SelectItem key={pageSize} value={`${pageSize}`}>
+                            {pageSize}
+                        </SelectItem>
+                    ))}
+                </SelectContent>
+            </Select>
+        </div>
+    )
+
+}

src/components/wrappers/table/table-pagination.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import {TablePaginationNavigation} from "@/components/wrappers/table/table-pagination-navigation";
+import {TablePaginationSize} from "@/components/wrappers/table/table-pagination-size";
+import {cn} from "@/lib/utils";
+
+interface tablePaginationProps {
+    className?: string
+    table: any
+    maxVisiblePages?: number
+}
+
+export function TablePagination(props: tablePaginationProps) {
+
+    const {className, table, maxVisiblePages = 3} = props
+
+    return (
+        <div className={cn("flex justify-between mt-8", className)}>
+            <TablePaginationSize table={table}/>
+            <TablePaginationNavigation table={table} maxVisiblePages={maxVisiblePages}/>
+        </div>
+    )
+}