diff --git a/src/components/List.tsx b/src/components/List.tsx index 0e76b663..f62e7172 100644 --- a/src/components/List.tsx +++ b/src/components/List.tsx @@ -1,51 +1,77 @@ import {Column, flexRender, getCoreRowModel, getSortedRowModel, useReactTable} from "@tanstack/react-table"; +import {useMemo, useState} from "react"; +import Button from "./Low/Button"; + +const SIZE = 25; export default function List({data, columns}: {data: T[]; columns: any[]}) { + const [page, setPage] = useState(0); + + const items = useMemo(() => data.slice(page * SIZE, (page + 1) * SIZE > data.length ? data.length : (page + 1) * SIZE), [data, page]); + const table = useReactTable({ - data, + data: items, columns: columns, getCoreRowModel: getCoreRowModel(), getSortedRowModel: getSortedRowModel(), }); return ( - - - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => ( - - ))} - - ))} - - - {table.getRowModel().rows.map((row) => ( - - {row.getVisibleCells().map((cell) => ( - - ))} - - ))} - -
- {header.isPlaceholder ? null : ( - <> -
- {flexRender(header.column.columnDef.header, header.getContext())} - {{ - asc: " 🔼", - desc: " 🔽", - }[header.column.getIsSorted() as string] ?? null} -
- - )} -
- {flexRender(cell.column.columnDef.cell, cell.getContext())} -
+
+
+ +
+ + {page * SIZE + 1} - {(page + 1) * SIZE > data.length ? data.length : (page + 1) * SIZE} / {data.length} + + +
+
+ + + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => ( + + ))} + + ))} + + + {table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + ))} + + ))} + +
+ {header.isPlaceholder ? null : ( + <> +
+ {flexRender(header.column.columnDef.header, header.getContext())} + {{ + asc: " 🔼", + desc: " 🔽", + }[header.column.getIsSorted() as string] ?? null} +
+ + )} +
+ {flexRender(cell.column.columnDef.cell, cell.getContext())} +
+
); } diff --git a/src/dashboards/MasterCorporate/MasterStatistical.tsx b/src/dashboards/MasterCorporate/MasterStatistical.tsx index 17d0708c..01baeba9 100644 --- a/src/dashboards/MasterCorporate/MasterStatistical.tsx +++ b/src/dashboards/MasterCorporate/MasterStatistical.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, {useEffect, useMemo, useState} from "react"; import {CorporateUser, User} from "@/interfaces/user"; import {BsFileExcel, BsBank, BsPersonFill} from "react-icons/bs"; import IconCard from "../IconCard"; @@ -44,8 +44,11 @@ interface UserCount { const searchFilters = [["email"], ["user"], ["userId"]]; +const SIZE = 16; + const MasterStatistical = (props: Props) => { const {users, corporateUsers, displaySelection = true} = props; + const [page, setPage] = useState(0); // const corporateRelevantUsers = React.useMemo( // () => corporateUsers.filter((x) => x.type !== "student") as CorporateUser[], @@ -215,8 +218,14 @@ const MasterStatistical = (props: Props) => { const {rows: filteredRows, renderSearch, text: searchText} = useListSearch(searchFilters, tableResults); + useEffect(() => setPage(0), [searchText]); + const rows = useMemo( + () => filteredRows.slice(page * SIZE, (page + 1) * SIZE > filteredRows.length ? filteredRows.length : (page + 1) * SIZE), + [filteredRows, page], + ); + const table = useReactTable({ - data: filteredRows, + data: rows, columns: defaultColumns, getCoreRowModel: getCoreRowModel(), }); @@ -345,7 +354,22 @@ const MasterStatistical = (props: Props) => { -
+
+
+ +
+ + {page * SIZE + 1} - {(page + 1) * SIZE > filteredRows.length ? filteredRows.length : (page + 1) * SIZE} /{" "} + {filteredRows.length} + + +
+
+ {table.getHeaderGroups().map((headerGroup) => ( diff --git a/src/dashboards/MasterCorporate/index.tsx b/src/dashboards/MasterCorporate/index.tsx index 584eaf28..49d7236f 100644 --- a/src/dashboards/MasterCorporate/index.tsx +++ b/src/dashboards/MasterCorporate/index.tsx @@ -131,7 +131,6 @@ export default function MasterCorporateDashboard({user}: Props) { const {users} = useUsers(); - const groupedByNameCorporates = useMemo( () => groupBy( @@ -374,12 +373,18 @@ export default function MasterCorporateDashboard({user}: Props) { color="purple" onClick={() => router.push("/#corporate")} /> - + router.push("/#studentsPerformance")} /> diff --git a/src/pages/(admin)/Lists/UserList.tsx b/src/pages/(admin)/Lists/UserList.tsx index 336a08cb..335e57ba 100644 --- a/src/pages/(admin)/Lists/UserList.tsx +++ b/src/pages/(admin)/Lists/UserList.tsx @@ -642,12 +642,12 @@ export default function UserList({
- {page * 16 + 1} - {(page + 1) * 16 > total ? total : (page + 1) * 16} / {total} + {page * userHash.size + 1} - {(page + 1) * userHash.size > total ? total : (page + 1) * userHash.size} / {total}