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