DataViews: Introduce perPageSizes to control the available sizes of the items per page

packages/dataviews/CHANGELOG.md

@@ -27,6 +27,7 @@
 - Add `label-position-side` classes to labels in the form field layouts. Ensure that labels in the panel view do not align center, and that all side labels are center aligned.
 - Allow readonly fields in DataForm when `readOnly` is set to `true`.
 - Adjust the padding when the component is placed inside a `Card`.
+- Introduce `perPageSizes` to control the available sizes of the items per page
 
 ### Breaking Changes
 

packages/dataviews/README.md

@@ -414,6 +414,12 @@ The component receives the following props:
 
 React component to be rendered next to the view config button.
 
+#### `perPageSizes`: `[ number, number, number, number ]`
+
+A list of numbers used to control the available item counts per page.
+
+It's optional. Defaults to `[10, 20, 50, 100]`.
+
 ### Composition modes
 
 The `DataViews` component supports two composition modes:

packages/dataviews/src/components/dataviews-context/index.ts

@@ -51,6 +51,7 @@ type DataViewsContextType< Item > = {
 	filters: NormalizedFilter[];
 	isShowingFilter: boolean;
 	setIsShowingFilter: ( value: boolean ) => void;
+	perPageSizes?: [ number, number, number, number ];
 };
 
 const DataViewsContext = createContext< DataViewsContextType< any > >( {

packages/dataviews/src/components/dataviews-view-config/index.tsx

@@ -215,7 +215,8 @@ function SortDirectionControl() {
 
 const PAGE_SIZE_VALUES = [ 10, 20, 50, 100 ];
 function ItemsPerPageControl() {
-	const { view, onChangeView } = useContext( DataViewsContext );
+	const { view, perPageSizes, onChangeView } = useContext( DataViewsContext );
+	const pageSizeValues = perPageSizes ?? PAGE_SIZE_VALUES;
 	return (
 		<ToggleGroupControl
 			__nextHasNoMarginBottom
@@ -237,7 +238,7 @@ function ItemsPerPageControl() {
 				} );
 			} }
 		>
-			{ PAGE_SIZE_VALUES.map( ( value ) => {
+			{ pageSizeValues.map( ( value ) => {
 				return (
 					<ToggleGroupControlOption
 						key={ value }

packages/dataviews/src/components/dataviews/index.tsx

@@ -59,6 +59,7 @@ type DataViewsProps< Item > = {
 	header?: ReactNode;
 	getItemLevel?: ( item: Item ) => number;
 	children?: ReactNode;
+	perPageSizes?: [ number, number, number, number ];
 } & ( Item extends ItemWithId
 	? { getItemId?: ( item: Item ) => string }
 	: { getItemId: ( item: Item ) => string } );
@@ -132,6 +133,7 @@ function DataViews< Item >( {
 	isItemClickable = defaultIsItemClickable,
 	header,
 	children,
+	perPageSizes,
 }: DataViewsProps< Item > ) {
 	const containerRef = useRef< HTMLDivElement | null >( null );
 	const [ containerWidth, setContainerWidth ] = useState( 0 );
@@ -195,6 +197,7 @@ function DataViews< Item >( {
 				filters,
 				isShowingFilter,
 				setIsShowingFilter,
+				perPageSizes,
 			} }
 		>
 			<div

packages/dataviews/src/components/dataviews/stories/index.story.tsx

@@ -299,3 +299,30 @@ export const WithCard = () => {
 		</Card>
 	);
 };
+
+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 ] }
+		/>
+	);
+};