---
title: Paginate Matrix Rows
product: Form Library
description: Learn how to enable paging in a SurveyJS Dynamic Matrix and Multi-Select Matrix to simplify navigation through long lists of rows. This demo for JavaScript shows how to set the maximum number of rows per page, track the current page, and get the total page count.
framework: React
source: https://surveyjs.io/form-library/examples/paging-in-matrices/reactjs
index: https://surveyjs.io/form-library/examples/overview.md
---

# Paginate Matrix Rows (React)

Paging divides matrix rows into smaller sections so that respondents can work with long lists without scrolling through the entire table. This demo displays 30 orders in a [Dynamic Matrix](https://surveyjs.io/form-library/documentation/api-reference/dynamic-matrix-table-question-model) or [Multi-Select Matrix](https://surveyjs.io/form-library/documentation/api-reference/matrix-table-with-dropdown-list). You can switch between the matrices using the **Switch to Multi-Select Matrix** or **Switch to Dynamic Matrix** action in the matrix title.

> Paging is available in SurveyJS Form Library v3.2.2 and later.

## Enable Paging

You can enable paging by setting the matrix's [`pageSize`](/form-library/documentation/api-reference/dynamic-matrix-table-question-model#pageSize) property to the number of rows 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-matrix-table-question-model#pageIndex) to read or change the current data page index and [`pageCount`](/form-library/documentation/api-reference/dynamic-matrix-table-question-model#pageCount) to access the total number of data pages.

Both matrices in this example display five rows per page. You can switch between data pages using the navigation controls below each matrix.

## See Also

[Demo: Paging in Dynamic Panel](/form-library/examples/paging-in-dynamic-panel/ (linkStyle))

## Files

### `public/index.html`

```html
<link href="https://fonts.googleapis.com/css?family=Open%20Sans:400,600&display=swap" rel="stylesheet">
<div id="surveyElement" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; min-height: 100%; height:100%"></div>
```

### `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 },
      { id: 1002, customer: "Grace Smith", product: "Laptop", quantity: 1, price: 1290 },
      { id: 1003, customer: "Quinn Smith", product: "USB-C cable", quantity: 2, price: 15 },
      { id: 1004, customer: "Elena Tanaka", product: "Monitor", quantity: 1, price: 340 },
      { id: 1005, customer: "Bob Rossi", product: "Monitor", quantity: 5, price: 340 },
      { id: 1006, customer: "Liam Garcia", product: "Laptop", quantity: 5, price: 1290 },
      { id: 1007, customer: "Sven Chen", product: "USB-C cable", quantity: 5, price: 15 },
      { id: 1008, customer: "Rosa Larsen", product: "Desk lamp", quantity: 2, price: 45 },
      { id: 1009, customer: "Noah Novak", product: "Mouse", quantity: 3, price: 39 },
      { id: 1010, customer: "Olga Petrova", product: "Webcam", quantity: 2, price: 89 },
      { id: 1011, customer: "Ines Tanaka", product: "Laptop", quantity: 2, price: 1290 },
      { id: 1012, customer: "Tara Silva", product: "Docking station", quantity: 3, price: 219 },
      { id: 1013, customer: "Liam Kowalski", product: "Monitor", quantity: 1, price: 340 },
      { id: 1014, customer: "Pablo Ivanova", product: "Keyboard", quantity: 4, price: 79 },
      { id: 1015, customer: "Noah Haddad", product: "Docking station", quantity: 1, price: 219 },
      { id: 1016, customer: "Ann Silva", product: "Monitor", quantity: 2, price: 340 },
      { id: 1017, customer: "Grace Müller", product: "Office chair", quantity: 2, price: 410 },
      { id: 1018, customer: "Elena Silva", product: "Webcam", quantity: 2, price: 89 },
      { id: 1019, customer: "Dmitri Okafor", product: "Office chair", quantity: 3, price: 410 },
      { id: 1020, customer: "Mei Brown", product: "USB-C cable", quantity: 3, price: 15 },
      { id: 1021, customer: "Sofia Martin", product: "Headset", quantity: 2, price: 119 },
      { id: 1022, customer: "Lucas Chen", product: "Laptop", quantity: 1, price: 1290 },
      { id: 1023, customer: "Amira Hassan", product: "Desk lamp", quantity: 4, price: 45 },
      { id: 1024, customer: "Oscar Silva", product: "Keyboard", quantity: 3, price: 79 },
      { id: 1025, customer: "Hana Novak", product: "Monitor", quantity: 2, price: 340 },
      { id: 1026, customer: "Leo Rossi", product: "Webcam", quantity: 1, price: 89 },
      { id: 1027, customer: "Maya Garcia", product: "Office chair", quantity: 3, price: 410 },
      { id: 1028, customer: "Ivan Larsen", product: "Docking station", quantity: 2, price: 219 },
      { id: 1029, customer: "Nina Tanaka", product: "Mouse", quantity: 5, price: 39 },
      { id: 1030, customer: "Adam Kowalski", product: "USB-C cable", quantity: 4, price: 15 }
    ];
    
    let nextOrderId = Math.max(...orders.map(order => order.id)) + 1;
    survey.onMatrixRowAdded.add((_, options) => {
      if (options.question.name === "dynamicOrders") {
        options.row.getQuestionByColumnName("id").value = nextOrderId++;
      }
    });
    survey.onGetQuestionTitleActions.add((_, options) => {
      const name = options.question.name;
      if (name !== "dynamicOrders" && name !== "fixedOrders") return;
    
      const isDynamic = name === "dynamicOrders";
      options.actions.push({
        id: "switch-matrix-type",
        title: isDynamic ? "Switch to Multi-Select Matrix" : "Switch to Dynamic Matrix",
        action: () => {
          survey.currentPageNo = isDynamic ? 1 : 0;
        }
      });
    });
    
    survey.getQuestionByName("fixedOrders").rows = orders.map(order => String(order.id));
    
    const fixedOrders = {};
    orders.forEach(order => {
      fixedOrders[order.id] = {
        customer: order.customer,
        product: order.product,
        quantity: order.quantity,
        price: order.price
      };
    });
    
    survey.data = {
      dynamicOrders: orders,
      fixedOrders: fixedOrders
    };
    
    return (<Survey model={survey} />);
}

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(<SurveyComponent />);
```

### `src/json.js`

```js
export const json = {
  "showNavigationButtons": false,
  "pages": [
    {
      "name": "dynamic-matrix",
      "elements": [
        {
          "type": "matrixdynamic",
          "name": "dynamicOrders",
          "title": "Orders (Dynamic Matrix)",
          "description": "You can edit orders in the matrix and use the navigation controls below it to switch between data pages.",
          "pageSize": 5,
          "addRowText": "Add order",
          "columns": [
            {
              "name": "id",
              "title": "Order #",
              "cellType": "text",
              "inputType": "number",
              "readOnly": true,
              "width": "70px"
            },
            {
              "name": "customer",
              "title": "Customer",
              "cellType": "text",
              "isRequired": true
            },
            {
              "name": "product",
              "title": "Product",
              "choices": [
                "Laptop",
                "Monitor",
                "Keyboard",
                "Mouse",
                "Headset",
                "Docking station",
                "Webcam",
                "Desk lamp",
                "Office chair",
                "USB-C cable"
              ]
            },
            {
              "name": "quantity",
              "title": "Qty",
              "cellType": "text",
              "inputType": "number",
              "min": 1,
              "width": "80px"
            },
            {
              "name": "price",
              "title": "Unit price ($)",
              "cellType": "text",
              "inputType": "number",
              "min": 0,
              "width": "110px"
            },
            {
              "name": "total",
              "title": "Total",
              "cellType": "expression",
              "expression": "{row.quantity} * {row.price}",
              "displayStyle": "currency"
            }
          ]
        }
      ]
    },
    {
      "name": "multi-select-matrix",
      "elements": [
        {
          "type": "matrixdropdown",
          "name": "fixedOrders",
          "title": "Orders (Multi-Select Matrix)",
          "description": "You can edit orders in the matrix and use the navigation controls below it to switch between data pages.",
          "pageSize": 5,
          "columns": [
            {
              "name": "customer",
              "title": "Customer",
              "cellType": "text",
              "isRequired": true
            },
            {
              "name": "product",
              "title": "Product",
              "choices": [
                "Laptop",
                "Monitor",
                "Keyboard",
                "Mouse",
                "Headset",
                "Docking station",
                "Webcam",
                "Desk lamp",
                "Office chair",
                "USB-C cable"
              ]
            },
            {
              "name": "quantity",
              "title": "Qty",
              "cellType": "text",
              "inputType": "number",
              "min": 1,
              "width": "80px"
            },
            {
              "name": "price",
              "title": "Unit price ($)",
              "cellType": "text",
              "inputType": "number",
              "min": 0,
              "width": "110px"
            },
            {
              "name": "total",
              "title": "Total",
              "cellType": "expression",
              "expression": "{row.quantity} * {row.price}",
              "displayStyle": "currency"
            }
          ]
        }
      ]
    }
  ]
}
;
```

### `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-matrices/angular.md)
- [Vue 3](https://surveyjs.io/form-library/examples/paging-in-matrices/vue3js.md)
- [jQuery](https://surveyjs.io/form-library/examples/paging-in-matrices/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/paging-in-matrices/vanillajs.md)