diff --git a/apps/explorer/src/components/activity/EpochsActivityTable.tsx b/apps/explorer/src/components/activity/EpochsActivityTable.tsx index 4974e0c26ac..d3f50c0ad5b 100644 --- a/apps/explorer/src/components/activity/EpochsActivityTable.tsx +++ b/apps/explorer/src/components/activity/EpochsActivityTable.tsx @@ -2,13 +2,13 @@ // Modifications Copyright (c) 2024 IOTA Stiftung // SPDX-License-Identifier: Apache-2.0 -import { InfoBox, InfoBoxStyle, InfoBoxType, Select } from '@iota/apps-ui-kit'; +import { InfoBox, InfoBoxStyle, InfoBoxType, Select, SelectSize } from '@iota/apps-ui-kit'; import { useIotaClientQuery, useIotaClient, useIotaClientInfiniteQuery } from '@iota/dapp-kit'; import { Warning } from '@iota/ui-icons'; import { useQuery } from '@tanstack/react-query'; import { useState } from 'react'; - import { PlaceholderTable, TableCard, useCursorPagination } from '~/components/ui'; +import { PAGE_SIZES_RANGE_20_60 } from '~/lib/constants'; import { generateEpochsTableColumns } from '~/lib/ui'; import { numberSuffix } from '~/lib/utils'; @@ -71,29 +71,26 @@ export function EpochsActivityTable({ data={data.data} columns={tableColumns} totalLabel={count ? `${numberSuffix(Number(count))} Total` : '-'} - viewAll={!disablePagination ? '/recent?tab=epochs' : undefined} + viewAll="/recent?tab=epochs" paginationOptions={!disablePagination ? pagination : undefined} + pageSizeSelector={ + !disablePagination && ( + { - setLimit(Number(e)); - pagination.onFirst(); - }} - /> - )} - - ); } diff --git a/apps/explorer/src/components/activity/TransactionsActivityTable.tsx b/apps/explorer/src/components/activity/TransactionsActivityTable.tsx index 6407314dadc..ac46b7e9dc2 100644 --- a/apps/explorer/src/components/activity/TransactionsActivityTable.tsx +++ b/apps/explorer/src/components/activity/TransactionsActivityTable.tsx @@ -5,16 +5,16 @@ import { useIotaClient } from '@iota/dapp-kit'; import { useQuery } from '@tanstack/react-query'; import { useEffect, useRef, useState } from 'react'; - import { PlaceholderTable, TableCard, useCursorPagination } from '~/components/ui'; import { DEFAULT_TRANSACTIONS_LIMIT, useGetTransactionBlocks, } from '~/hooks/useGetTransactionBlocks'; import { numberSuffix } from '~/lib/utils'; -import { InfoBox, InfoBoxStyle, InfoBoxType, Select } from '@iota/apps-ui-kit'; +import { InfoBox, InfoBoxStyle, InfoBoxType, Select, SelectSize } from '@iota/apps-ui-kit'; import { generateTransactionsTableColumns } from '~/lib/ui'; import { Warning } from '@iota/ui-icons'; +import { PAGE_SIZES_RANGE_20_60 } from '~/lib/constants'; interface TransactionsActivityTableProps { disablePagination?: boolean; @@ -76,27 +76,24 @@ export function TransactionsActivityTable({ totalLabel={count ? `${numberSuffix(Number(count))} Total` : '-'} viewAll="/recent" paginationOptions={!disablePagination ? pagination : undefined} + pageSizeSelector={ + !disablePagination && ( + { - setLimit(Number(e)); - pagination.onFirst(); - }} - /> - )} - - ); diff --git a/apps/explorer/src/components/checkpoints/CheckpointsTable.tsx b/apps/explorer/src/components/checkpoints/CheckpointsTable.tsx index 5f045ddefdc..46baed3dd09 100644 --- a/apps/explorer/src/components/checkpoints/CheckpointsTable.tsx +++ b/apps/explorer/src/components/checkpoints/CheckpointsTable.tsx @@ -2,12 +2,13 @@ // Modifications Copyright (c) 2024 IOTA Stiftung // SPDX-License-Identifier: Apache-2.0 -import { InfoBox, InfoBoxStyle, InfoBoxType, Select } from '@iota/apps-ui-kit'; +import { InfoBox, InfoBoxStyle, InfoBoxType, Select, SelectSize } from '@iota/apps-ui-kit'; import { useIotaClientQuery } from '@iota/dapp-kit'; import { Warning } from '@iota/ui-icons'; import { useMemo, useState } from 'react'; import { PlaceholderTable, TableCard, useCursorPagination } from '~/components/ui'; import { DEFAULT_CHECKPOINTS_LIMIT, useGetCheckpoints } from '~/hooks/useGetCheckpoints'; +import { PAGE_SIZES_RANGE_20_60 } from '~/lib/constants'; import { generateCheckpointsTableColumns } from '~/lib/ui'; import { numberSuffix } from '~/lib/utils'; @@ -81,26 +82,24 @@ export function CheckpointsTable({ } : undefined } + pageSizeSelector={ + !disablePagination && ( + { - setLimit(Number(e)); - pagination.onFirst(); - }} - /> - )} - - ); } diff --git a/apps/explorer/src/components/owned-coins/OwnedCoins.tsx b/apps/explorer/src/components/owned-coins/OwnedCoins.tsx index f84956ee770..0a52ca0d270 100644 --- a/apps/explorer/src/components/owned-coins/OwnedCoins.tsx +++ b/apps/explorer/src/components/owned-coins/OwnedCoins.tsx @@ -25,6 +25,7 @@ import { Title, } from '@iota/apps-ui-kit'; import { Pagination } from '../ui'; +import { PAGE_SIZES_RANGE_20_60 } from '~/lib/constants'; export type CoinBalanceVerified = CoinBalance & { isRecognized?: boolean; @@ -197,11 +198,10 @@ export function OwnedCoins({ id }: OwnerCoinsProps): JSX.Element { ({ + options={PAGE_SIZES_RANGE_10_50.map((size) => ({ label: `${size} / page`, id: size.toString(), }))} diff --git a/apps/explorer/src/components/ui/TableCard.tsx b/apps/explorer/src/components/ui/TableCard.tsx index 372ecc0cb36..0804e7755b8 100644 --- a/apps/explorer/src/components/ui/TableCard.tsx +++ b/apps/explorer/src/components/ui/TableCard.tsx @@ -21,7 +21,7 @@ import { useReactTable, } from '@tanstack/react-table'; import clsx from 'clsx'; -import { Fragment, useState } from 'react'; +import { Fragment, type ReactNode, useState } from 'react'; import { Link } from './Link'; export interface TableCardProps { @@ -34,6 +34,7 @@ export interface TableCardProps { paginationOptions?: TablePaginationOptions; totalLabel?: string; viewAll?: string; + pageSizeSelector?: ReactNode; } export function TableCard({ @@ -46,6 +47,7 @@ export function TableCard({ paginationOptions, totalLabel, viewAll, + pageSizeSelector, }: TableCardProps): JSX.Element { const [sorting, setSorting] = useState(defaultSorting || []); @@ -66,7 +68,7 @@ export function TableCard({ }); return ( -
+
row.index)} paginationOptions={paginationOptions} @@ -78,6 +80,7 @@ export function TableCard({ ) : undefined } + pageSizeSelector={pageSizeSelector} > {table.getHeaderGroups().map((headerGroup) => ( diff --git a/apps/explorer/src/lib/constants/index.ts b/apps/explorer/src/lib/constants/index.ts index 5c33042b10e..99b4cfa783a 100644 --- a/apps/explorer/src/lib/constants/index.ts +++ b/apps/explorer/src/lib/constants/index.ts @@ -3,3 +3,4 @@ export * from './footer.constants'; export * from './validator.constants'; +export * from './pageSize.constants'; diff --git a/apps/explorer/src/lib/constants/pageSize.constants.ts b/apps/explorer/src/lib/constants/pageSize.constants.ts new file mode 100644 index 00000000000..126a9ed0ee2 --- /dev/null +++ b/apps/explorer/src/lib/constants/pageSize.constants.ts @@ -0,0 +1,5 @@ +// Copyright (c) 2024 IOTA Stiftung +// SPDX-License-Identifier: Apache-2.0 + +export const PAGE_SIZES_RANGE_10_50 = [10, 20, 30, 40, 50]; +export const PAGE_SIZES_RANGE_20_60 = [20, 40, 60]; diff --git a/apps/explorer/src/pages/checkpoints/CheckpointTransactionBlocks.tsx b/apps/explorer/src/pages/checkpoints/CheckpointTransactionBlocks.tsx index 029eb40c032..f5370c56255 100644 --- a/apps/explorer/src/pages/checkpoints/CheckpointTransactionBlocks.tsx +++ b/apps/explorer/src/pages/checkpoints/CheckpointTransactionBlocks.tsx @@ -2,13 +2,14 @@ // Modifications Copyright (c) 2024 IOTA Stiftung // SPDX-License-Identifier: Apache-2.0 +import { DropdownPosition, Select, SelectSize } from '@iota/apps-ui-kit'; import { useState } from 'react'; - -import { Pagination, PlaceholderTable, TableCard, useCursorPagination } from '~/components/ui'; +import { PlaceholderTable, TableCard, useCursorPagination } from '~/components/ui'; import { DEFAULT_TRANSACTIONS_LIMIT, useGetTransactionBlocks, } from '~/hooks/useGetTransactionBlocks'; +import { PAGE_SIZES_RANGE_20_60 } from '~/lib/constants'; import { generateTransactionsTableColumns } from '~/lib/ui'; export function CheckpointTransactionBlocks({ id }: { id: string }): JSX.Element { @@ -34,24 +35,28 @@ export function CheckpointTransactionBlocks({ id }: { id: string }): JSX.Element /> ) : (
- + ({ + label: `${size} / page`, + id: size.toString(), + }))} + onValueChange={(value) => { + setLimit(Number(value)); + pagination.onFirst(); + }} + size={SelectSize.Small} + /> + } + />
)} -
- - -
); } diff --git a/apps/ui-kit/src/lib/components/organisms/table/Table.tsx b/apps/ui-kit/src/lib/components/organisms/table/Table.tsx index 36d567330f7..a848b0c9937 100644 --- a/apps/ui-kit/src/lib/components/organisms/table/Table.tsx +++ b/apps/ui-kit/src/lib/components/organisms/table/Table.tsx @@ -56,7 +56,7 @@ export type TableProps = { */ paginationOptions?: TablePaginationOptions; /** - * The action component.. + * The action component. */ action?: ReactNode; /** @@ -71,6 +71,10 @@ export type TableProps = { * Numeric indexes of all the rows. */ rowIndexes: number[]; + /** + * The page size selector component. + */ + pageSizeSelector?: ReactNode; }; export function Table({ @@ -80,6 +84,7 @@ export function Table({ selectedRowIndexes = new Set(), rowIndexes, children, + pageSizeSelector, }: PropsWithChildren): JSX.Element { return ( @@ -88,8 +93,10 @@ export function Table({
{children}
{paginationOptions && ( @@ -122,14 +129,19 @@ export function Table({ disabled={!paginationOptions.hasLast} onClick={paginationOptions.onLast} /> + {action}
)} - {action} - {supportingLabel && ( - - {supportingLabel} - - )} + {supportingLabel || pageSizeSelector ? ( +
+ {supportingLabel && ( + + {supportingLabel} + + )} + {pageSizeSelector &&
{pageSizeSelector}
} +
+ ) : null}