feat: add refresh button on SubmissionTable
This commit is contained in:
parent
d62ae02b24
commit
ab995acf00
@ -93,7 +93,11 @@ export default function SubmissionTable(props: SubmissionTableProps) {
|
||||
pageIndex: 0,
|
||||
pageSize: 10,
|
||||
});
|
||||
const { data: info, isFetching } = useListQuery({
|
||||
const {
|
||||
data: info,
|
||||
isFetching,
|
||||
refetch,
|
||||
} = useListQuery({
|
||||
pid: props.pid || 0,
|
||||
uid: props.uid || 0,
|
||||
offset: paging.pageIndex * paging.pageSize,
|
||||
@ -110,6 +114,7 @@ export default function SubmissionTable(props: SubmissionTableProps) {
|
||||
paging={paging}
|
||||
setPaging={setPaging}
|
||||
isLoading={isFetching}
|
||||
refetch={refetch}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
@ -18,7 +18,13 @@ import {
|
||||
} from "@chakra-ui/react";
|
||||
import type { ColumnDef, PaginationState } from "@tanstack/react-table";
|
||||
import { flexRender, getCoreRowModel, getFilteredRowModel, useReactTable } from "@tanstack/react-table";
|
||||
import { HiChevronDoubleLeft, HiChevronDoubleRight, HiChevronLeft, HiChevronRight } from "react-icons/hi";
|
||||
import {
|
||||
HiChevronDoubleLeft,
|
||||
HiChevronDoubleRight,
|
||||
HiChevronLeft,
|
||||
HiChevronRight,
|
||||
HiOutlineRefresh,
|
||||
} from "react-icons/hi";
|
||||
|
||||
interface TableProps<T> {
|
||||
header?: React.ReactNode;
|
||||
@ -28,6 +34,7 @@ interface TableProps<T> {
|
||||
paging: PaginationState;
|
||||
setPaging: (state: PaginationState | ((old: PaginationState) => PaginationState)) => void;
|
||||
isLoading: boolean;
|
||||
refetch?: () => unknown;
|
||||
}
|
||||
|
||||
export default function Table<T>(props: TableProps<T>) {
|
||||
@ -117,13 +124,28 @@ export default function Table<T>(props: TableProps<T>) {
|
||||
<Text mr={4}>
|
||||
Page {pageIndex + 1} of {pageCount}
|
||||
</Text>
|
||||
<Select w={28} value={pageSize} onChange={(e) => table.setPageSize(Number(e.target.value))}>
|
||||
<Select
|
||||
w={28}
|
||||
mr={4}
|
||||
value={pageSize}
|
||||
onChange={(e) => table.setPageSize(Number(e.target.value))}
|
||||
>
|
||||
{[5, 10, 15, 20].map((pageSize) => (
|
||||
<option key={pageSize} value={pageSize}>
|
||||
Show {pageSize}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
{props.refetch && (
|
||||
<IconButton
|
||||
aria-label="Refresh"
|
||||
size="sm"
|
||||
isRound={true}
|
||||
variant="outline"
|
||||
icon={<HiOutlineRefresh size={18} />}
|
||||
onClick={props.refetch}
|
||||
/>
|
||||
)}
|
||||
</Flex>
|
||||
<Flex flexDirection="row">
|
||||
<IconButton
|
||||
|
Loading…
Reference in New Issue
Block a user