diff --git a/src/components/Table.tsx b/src/components/Table.tsx index 7c0d692..d9dc80a 100644 --- a/src/components/Table.tsx +++ b/src/components/Table.tsx @@ -95,7 +95,10 @@ export type ElementProps void; slotEmpty?: React.ReactNode; - initialNumRowsToShow?: number; + viewMoreConfig?: { + initialNumRowsToShow: number; + numRowsPerPage?: number; + }; // collection: TableCollection; // children: React.ReactNode; }; @@ -125,7 +128,7 @@ export const Table = ({ selectionMode = 'single', selectionBehavior = 'toggle', slotEmpty, - initialNumRowsToShow, + viewMoreConfig, // shouldRowRender, // collection, @@ -141,8 +144,18 @@ export const Table = ({ style, }: ElementProps & StyleProps) => { const [selectedKeys, setSelectedKeys] = useState(new Set()); - const [numRowsToShow, setNumRowsToShow] = useState(initialNumRowsToShow); - const enableViewMore = numRowsToShow !== undefined; + const [numRowsToShow, setNumRowsToShow] = useState(viewMoreConfig?.initialNumRowsToShow); + const enableViewMore = viewMoreConfig !== undefined; + + const onViewMoreClick = () => { + if (!viewMoreConfig) return; + const { numRowsPerPage } = viewMoreConfig; + if (numRowsPerPage) { + setNumRowsToShow((prev) => (prev ?? 0) + numRowsPerPage); + } else { + setNumRowsToShow(data.length); + } + }; const currentBreakpoints = useBreakpoints(); const shownColumns = columns.filter( @@ -218,9 +231,7 @@ export const Table = ({ } numColumns={shownColumns.length} onViewMoreClick={ - enableViewMore && numRowsToShow < data.length - ? () => setNumRowsToShow(data.length) - : undefined + enableViewMore && numRowsToShow! < data.length ? onViewMoreClick : undefined } // shouldRowRender={shouldRowRender} hideHeader={hideHeader} diff --git a/src/views/tables/TradingRewardHistoryTable.tsx b/src/views/tables/TradingRewardHistoryTable.tsx index fd27bae..f856ed7 100644 --- a/src/views/tables/TradingRewardHistoryTable.tsx +++ b/src/views/tables/TradingRewardHistoryTable.tsx @@ -121,7 +121,7 @@ export const TradingRewardHistoryTable = ({ selectionBehavior="replace" withOuterBorder={withOuterBorder} withInnerBorders={withInnerBorders} - initialNumRowsToShow={5} + viewMoreConfig={{ initialNumRowsToShow: 5, numRowsPerPage: 10 }} withScrollSnapColumns withScrollSnapRows />