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>
+    )
+}