PageableQueryDataTable.tsx (1128B)
1 import { UseQueryResult } from "@tanstack/react-query"; 2 import { Page, Pageable, PAGEABLE_DEFAULT } from "../../api/types/Page"; 3 import DataTablePage from "./DataTablePage"; 4 import { ColumnDef, RowDef } from "./ColumnDef"; 5 import { useState } from "react"; 6 7 type Props<T> = { 8 query: (pageable: Pageable) => UseQueryResult<Page<T>, string>, 9 columns: ColumnDef<T>[], 10 rows: RowDef<T>, 11 }; 12 13 export default function PageableQueryDataTable<T>({ query, columns, rows }: Props<T>) { 14 const [pageable, setPageable] = useState<Pageable>(PAGEABLE_DEFAULT); 15 const { data, isFetching, isError, error } = query(pageable); 16 17 return ( 18 <div style={{ position: "relative" }}> 19 {isFetching && ( 20 <div style={{ position: "absolute", backgroundColor: "black", color: "white" }}>loading...</div> 21 )} 22 {isError && ( 23 <div style={{ position: "absolute", backgroundColor: "red", color: "white" }}>{error}</div> 24 )} 25 <DataTablePage 26 page={data ?? { content: [], number: 0, size: 0, totalPages: 0, totalElements: 0 }} 27 columns={columns} 28 rows={rows} 29 pageable={pageable} onPageableChange={setPageable} 30 /> 31 </div> 32 ) 33 };