--- title: Paging in Dynamic Panel product: Form Library description: Learn how to enable paging in a SurveyJS Dynamic Panel to simplify navigation through long lists of entries. This demo for JavaScript shows how to set the maximum number of entries per page, track the current page, and get the total page count. framework: React source: https://surveyjs.io/form-library/examples/paging-in-dynamic-panel/reactjs index: https://surveyjs.io/form-library/examples/overview.md --- # Paging in Dynamic Panel (React) Paging divides [Dynamic Panel](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model) entries into smaller groups so that respondents can work with long lists without scrolling through every panel. This demo displays 30 orders in a Dynamic Panel question. You can expand an order to edit its details. > Paging is available in SurveyJS Form Library v3.2.2 and later. ## Enable Paging You can enable paging by setting the question's [`pageSize`](/form-library/documentation/api-reference/dynamic-panel-model#pageSize) property to the number of panels per data page. The default value, `0`, disables paging. The effective page size is limited by the global [`settings.maxPageSize`](/form-library/documentation/api-reference/settings#maxPageSize) property. If you need to remove this limit, set the property to `0`. In addition, you can use [`pageIndex`](/form-library/documentation/api-reference/dynamic-panel-model#pageIndex) to read or change the current data page index and [`pageCount`](/form-library/documentation/api-reference/dynamic-panel-model#pageCount) to access the total number of data pages. This example displays five panels per page. You can switch between data pages using the navigation controls below the panels. ## See Also [Demo: Paging in Matrices](/form-library/examples/paging-in-matrices/ (linkStyle)) ## Files ### `public/index.html` ```html
``` ### `src/SurveyComponent.jsx` ```js import React from "react"; import { Model } from "survey-core"; import { Survey } from "survey-react-ui"; import "survey-core/survey-core.min.css"; import "./index.css"; import { json } from "./json"; function SurveyComponent() { const survey = new Model(json); survey.onComplete.add((sender, options) => { console.log(JSON.stringify(sender.data, null, 3)); }); const orders = [ { id: 1001, customer: "Bob Brown", product: "Mouse", quantity: 4, price: 39, status: "shipped", orderDate: "2026-06-04" }, { id: 1002, customer: "Grace Smith", product: "Laptop", quantity: 1, price: 1290, status: "delivered", orderDate: "2026-05-13" }, { id: 1003, customer: "Quinn Smith", product: "USB-C cable", quantity: 2, price: 15, status: "shipped", orderDate: "2026-01-21" }, { id: 1004, customer: "Elena Tanaka", product: "Monitor", quantity: 1, price: 340, status: "shipped", orderDate: "2026-06-02" }, { id: 1005, customer: "Bob Rossi", product: "Monitor", quantity: 5, price: 340, status: "shipped", orderDate: "2026-06-16" }, { id: 1006, customer: "Liam Garcia", product: "Laptop", quantity: 5, price: 1290, status: "shipped", orderDate: "2026-09-29" }, { id: 1007, customer: "Sven Chen", product: "USB-C cable", quantity: 5, price: 15, status: "shipped", orderDate: "2026-09-03" }, { id: 1008, customer: "Rosa Larsen", product: "Desk lamp", quantity: 2, price: 45, status: "delivered", orderDate: "2026-07-31" }, { id: 1009, customer: "Noah Novak", product: "Mouse", quantity: 3, price: 39, status: "delivered", orderDate: "2026-01-09" }, { id: 1010, customer: "Olga Petrova", product: "Webcam", quantity: 2, price: 89, status: "processing", orderDate: "2026-01-28" }, { id: 1011, customer: "Ines Tanaka", product: "Laptop", quantity: 2, price: 1290, status: "new", orderDate: "2026-03-21" }, { id: 1012, customer: "Tara Silva", product: "Docking station", quantity: 3, price: 219, status: "cancelled", orderDate: "2026-07-23" }, { id: 1013, customer: "Liam Kowalski", product: "Monitor", quantity: 1, price: 340, status: "cancelled", orderDate: "2026-06-21" }, { id: 1014, customer: "Pablo Ivanova", product: "Keyboard", quantity: 4, price: 79, status: "cancelled", orderDate: "2026-09-07" }, { id: 1015, customer: "Noah Haddad", product: "Docking station", quantity: 1, price: 219, status: "shipped", orderDate: "2026-04-11" }, { id: 1016, customer: "Ann Silva", product: "Monitor", quantity: 2, price: 340, status: "new", orderDate: "2026-05-02" }, { id: 1017, customer: "Grace Müller", product: "Office chair", quantity: 2, price: 410, status: "delivered", orderDate: "2026-06-25" }, { id: 1018, customer: "Elena Silva", product: "Webcam", quantity: 2, price: 89, status: "processing", orderDate: "2026-06-18" }, { id: 1019, customer: "Dmitri Okafor", product: "Office chair", quantity: 3, price: 410, status: "new", orderDate: "2026-09-10" }, { id: 1020, customer: "Mei Brown", product: "USB-C cable", quantity: 3, price: 15, status: "processing", orderDate: "2026-03-25" }, { id: 1021, customer: "Sofia Martin", product: "Headset", quantity: 2, price: 119, status: "new", orderDate: "2026-09-11" }, { id: 1022, customer: "Lucas Chen", product: "Laptop", quantity: 1, price: 1290, status: "processing", orderDate: "2026-09-12" }, { id: 1023, customer: "Amira Hassan", product: "Desk lamp", quantity: 4, price: 45, status: "shipped", orderDate: "2026-09-14" }, { id: 1024, customer: "Oscar Silva", product: "Keyboard", quantity: 3, price: 79, status: "delivered", orderDate: "2026-09-15" }, { id: 1025, customer: "Hana Novak", product: "Monitor", quantity: 2, price: 340, status: "new", orderDate: "2026-09-16" }, { id: 1026, customer: "Leo Rossi", product: "Webcam", quantity: 1, price: 89, status: "processing", orderDate: "2026-09-18" }, { id: 1027, customer: "Maya Garcia", product: "Office chair", quantity: 3, price: 410, status: "shipped", orderDate: "2026-09-21" }, { id: 1028, customer: "Ivan Larsen", product: "Docking station", quantity: 2, price: 219, status: "delivered", orderDate: "2026-09-23" }, { id: 1029, customer: "Nina Tanaka", product: "Mouse", quantity: 5, price: 39, status: "cancelled", orderDate: "2026-09-24" }, { id: 1030, customer: "Adam Kowalski", product: "USB-C cable", quantity: 4, price: 15, status: "processing", orderDate: "2026-09-28" } ]; let nextOrderId = Math.max(...orders.map(order => order.id)) + 1; survey.onDynamicPanelAdded.add((_, options) => { if (options.question.name === "orders") { options.panel.getQuestionByName("id").value = nextOrderId++; } }); survey.data = { orders: orders }; return (); } export default SurveyComponent; ``` ### `src/index.css` ```css /* You can add your custom CSS here. */ ``` ### `src/index.js` ```js import React from "react"; import { createRoot } from "react-dom/client"; import SurveyComponent from "./SurveyComponent"; const root = createRoot(document.getElementById("surveyElement")); root.render(); ``` ### `src/json.js` ```js export const json = { "showNavigationButtons": false, "pages": [ { "name": "ordersPage", "elements": [ { "type": "paneldynamic", "name": "orders", "title": "Orders (Dynamic Panel)", "description": "You can expand an order to edit its details and use the navigation controls below the panels to switch between data pages.", "pageSize": 5, "panelsState": "collapsed", "templateTitle": "Order #{panel.id}: {panel.customer}", "templateDescription": "{panel.product} × {panel.quantity}", "addPanelText": "Add order", "removePanelText": "Remove order", "templateElements": [ { "type": "text", "name": "id", "title": "Order ID", "inputType": "number", "readOnly": true }, { "type": "text", "name": "customer", "title": "Customer", "isRequired": true, "startWithNewLine": false }, { "type": "dropdown", "name": "product", "title": "Product", "choices": [ "Laptop", "Monitor", "Keyboard", "Mouse", "Headset", "Docking station", "Webcam", "Desk lamp", "Office chair", "USB-C cable" ] }, { "type": "text", "name": "quantity", "title": "Quantity", "inputType": "number", "min": 1, "startWithNewLine": false }, { "type": "text", "name": "price", "title": "Price", "inputType": "number", "min": 0 }, { "type": "expression", "name": "total", "title": "Total", "expression": "{panel.quantity} * {panel.price}", "displayStyle": "currency", "startWithNewLine": false }, { "type": "dropdown", "name": "status", "title": "Status", "choices": [ { "value": "new", "text": "New" }, { "value": "processing", "text": "Processing" }, { "value": "shipped", "text": "Shipped" }, { "value": "delivered", "text": "Delivered" }, { "value": "cancelled", "text": "Cancelled" } ] }, { "type": "text", "name": "orderDate", "title": "Order date", "inputType": "date", "startWithNewLine": false } ] } ] } ] } ; ``` ### `src/theme.js` ```js export const themeJson = {}; ``` ### `package.json` ```json { "dependencies": { "react": "latest", "react-dom": "latest", "survey-core": "latest", "survey-react-ui": "latest" }, "devDependencies": { "react-scripts": "latest" } } ``` ## Other Frameworks - [Angular](https://surveyjs.io/form-library/examples/paging-in-dynamic-panel/angular.md) - [Vue 3](https://surveyjs.io/form-library/examples/paging-in-dynamic-panel/vue3js.md) - [jQuery](https://surveyjs.io/form-library/examples/paging-in-dynamic-panel/jquery.md) - [Vanilla JS](https://surveyjs.io/form-library/examples/paging-in-dynamic-panel/vanillajs.md)