Skip to content

DataViews: perPageSizes tweaks #71004

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
oandregal merged 6 commits into from
Aug 1, 2025
Merged

DataViews: perPageSizes tweaks #71004

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
baab631
Update perPageSizes type to be an number[]
oandregal Jul 31, 2025
e18be08
Remove custom story and add argument to the Default
oandregal Jul 31, 2025
86ed8f7
Consider the empty case
oandregal Jul 31, 2025
b5d785e
Do not display the toggle if there are less than 2 options
oandregal Aug 1, 2025
f0c3ab4
Cap to 6 numbers max
oandregal Aug 1, 2025
c215591
Changelog
oandregal Aug 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/dataviews/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@

### Bug Fixes

- Set minimum and maximum number of items in `pePageSizes`, so that the UI control is disabled when the list exceeds those limits. [#71004](https://github.com/WordPress/gutenberg/pull/71004)
- Fix `filterSortAndPaginate` to handle searching fields that have a type of `array` ([#70785](https://github.com/WordPress/gutenberg/pull/70785)).
- Fix user-input filters: empty value for text and integer filters means there's no value to search for (so it returns all items). It also fixes a type conversion where empty strings for integer were converted to 0 [#70956](https://github.com/WordPress/gutenberg/pull/70956/).

Expand Down
6 changes: 2 additions & 4 deletions packages/dataviews/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -415,11 +415,9 @@ The component receives the following props:

React component to be rendered next to the view config button.

#### `perPageSizes`: `[ number, number, number, number ]`
#### `perPageSizes`: `number[]`

A list of numbers used to control the available item counts per page.

It's optional. Defaults to `[10, 20, 50, 100]`.
A list of numbers used to control the available item counts per page. It's optional. Defaults to `[10, 20, 50, 100]`. The list needs to have a minimum of 2 items and a maximum of 6, otherwise the UI component won't be displayed.

### Composition modes

Expand Down
3 changes: 2 additions & 1 deletion packages/dataviews/src/components/dataviews-context/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ type DataViewsContextType< Item > = {
filters: NormalizedFilter[];
isShowingFilter: boolean;
setIsShowingFilter: ( value: boolean ) => void;
perPageSizes?: [ number, number, number, number ];
perPageSizes: number[];
Copy link
Member Author

@oandregal oandregal Jul 31, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why did we limit the page sizes to 4 in #70604? Can't it be 3 or 5? This change moves that decision to the consumer level.

Copy link
Contributor

@talldan talldan Aug 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The component might get a bit crammed with a lot of options, but 3 or 5 seems alright. The component could also adapt to a dropdown when there are lots of options.

A min/max might make more sense.

BTW, there's also some docs here to update - https://github.com/WordPress/gutenberg/tree/trunk/packages/dataviews#perpagesizes--number-number-number-number-

Copy link
Contributor

@arthur791004 arthur791004 Aug 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My thought was to align with the existing design. I don't think a randomly generated number set would fit well with the current design. That said, I do agree with using min/max values

Copy link
Contributor

@talldan talldan Aug 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tested adding lots of options in the storybook:
Screenshot 2025-08-01 at 1 05 43 pm

That's definitely a bit of a stretch and I'm not sure many people would actually add that many options. 6 items feels like a good max, you can easily fit three digit numbers without it looking too busy:
Screenshot 2025-08-01 at 1 10 29 pm

Copy link
Member Author

@oandregal oandregal Aug 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've capped it to 2-6, otherwise the control is not displayed 👍

};

const DataViewsContext = createContext< DataViewsContextType< any > >( {
Expand All @@ -80,6 +80,7 @@ const DataViewsContext = createContext< DataViewsContextType< any > >( {
filters: [],
isShowingFilter: false,
setIsShowingFilter: () => {},
perPageSizes: [],
} );

export default DataViewsContext;
8 changes: 5 additions & 3 deletions packages/dataviews/src/components/dataviews-view-config/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,10 +213,12 @@ function SortDirectionControl() {
);
}

const PAGE_SIZE_VALUES = [ 10, 20, 50, 100 ];
function ItemsPerPageControl() {
const { view, perPageSizes, onChangeView } = useContext( DataViewsContext );
const pageSizeValues = perPageSizes ?? PAGE_SIZE_VALUES;
if ( perPageSizes.length < 2 || perPageSizes.length > 6 ) {
return null;
}

return (
<ToggleGroupControl
__nextHasNoMarginBottom
Expand All @@ -238,7 +240,7 @@ function ItemsPerPageControl() {
} );
} }
>
{ pageSizeValues.map( ( value ) => {
{ perPageSizes.map( ( value ) => {
return (
<ToggleGroupControlOption
key={ value }
Expand Down
4 changes: 2 additions & 2 deletions packages/dataviews/src/components/dataviews/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ type DataViewsProps< Item > = {
header?: ReactNode;
getItemLevel?: ( item: Item ) => number;
children?: ReactNode;
perPageSizes?: [ number, number, number, number ];
perPageSizes?: number[];
} & ( Item extends ItemWithId
? { getItemId?: ( item: Item ) => string }
: { getItemId: ( item: Item ) => string } );
Expand Down Expand Up @@ -133,7 +133,7 @@ function DataViews< Item >( {
isItemClickable = defaultIsItemClickable,
header,
children,
perPageSizes,
perPageSizes = [ 10, 20, 50, 100 ],
}: DataViewsProps< Item > ) {
const containerRef = useRef< HTMLDivElement | null >( null );
const [ containerWidth, setContainerWidth ] = useState( 0 );
Expand Down
41 changes: 13 additions & 28 deletions packages/dataviews/src/components/dataviews/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ const defaultLayouts = {
[ LAYOUT_LIST ]: {},
};

export const Default = () => {
export const Default = ( { perPageSizes = [ 10, 25, 50, 100 ] } ) => {
const [ view, setView ] = useState< View >( {
...DEFAULT_VIEW,
fields: [ 'categories' ],
Expand Down Expand Up @@ -86,10 +86,22 @@ export const Default = () => {
) }
isItemClickable={ () => true }
defaultLayouts={ defaultLayouts }
perPageSizes={ perPageSizes }
/>
);
};

Default.args = {
perPageSizes: [ 10, 25, 50, 100 ],
};

Default.argTypes = {
perPageSizes: {
control: 'object',
description: 'Array of available page sizes',
},
};

export const Empty = () => {
const [ view, setView ] = useState< View >( {
...DEFAULT_VIEW,
Expand Down Expand Up @@ -300,33 +312,6 @@ export const WithCard = () => {
);
};

export const CustomPerPageSizes = () => {
const [ view, setView ] = useState< View >( {
...DEFAULT_VIEW,
fields: [ 'categories' ],
titleField: 'title',
descriptionField: 'description',
mediaField: 'image',
perPage: 3,
} );
const { data: shownData, paginationInfo } = useMemo( () => {
return filterSortAndPaginate( data, view, fields );
}, [ view ] );
return (
<DataViews
getItemId={ ( item ) => item.id.toString() }
paginationInfo={ paginationInfo }
data={ shownData }
view={ view }
fields={ fields }
onChangeView={ setView }
actions={ actions.filter( ( action ) => ! action.supportsBulk ) }
defaultLayouts={ defaultLayouts }
perPageSizes={ [ 3, 6, 12, 24 ] }
/>
);
};

export const GroupedGridLayout = () => {
const [ view, setView ] = useState< View >( {
type: LAYOUT_GRID,
Expand Down
Loading