--- title: Dynamic Matrix product: Form Library description: Learn how to create a dynamic matrix in a form to enable respondents to add or remove matrix rows as they interact with the question. This interactive demo contains code snippets for JavaScript and step-by-step setup guide. framework: React source: https://surveyjs.io/form-library/examples/dynamic-matrix-add-new-rows/reactjs index: https://surveyjs.io/form-library/examples/overview.md --- # Dynamic Matrix (React) A Dynamic Matrix is an extendable input field that enables respondents to provide multiple answers within a single question in a format of a table. It organizes a set of questions or statements along dynamic rows and displays various response options along columns. On-question buttons allow users to manage the matrix content by adding or removing additional copies of dynamic rows. This demo will guide you through the process of setting up a Dynamic Matrix question using the SurveyJS Form Library. ## Create a Dynamic Matrix Question To add a Dynamic Matrix question to your survey or form, create an object with the `type` property set to `"matrixdynamic"` and add the object to the [`elements`](https://surveyjs.io/form-library/documentation/api-reference/page-model#elements) array. Within this object, specify the question's [`title`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-matrix-table-question-model#title) and a unique [`name`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-matrix-table-question-model#name) that identifies the matrix question. Optionally, you can specify a [`description`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-matrix-table-question-model#description) to place under the title. ## Configure Matrix Columns To configure matrix columns, populate the [`columns`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-matrix-table-question-model#columns) array. Each object in it specifies settings of a single column. For each column, define its unique [`name`](https://surveyjs.io/form-library/documentation/api-reference/multi-select-matrix-column-values#name), which will be used to access the column in code, and its [`title`](https://surveyjs.io/form-library/documentation/api-reference/multi-select-matrix-column-values#title), which will be visible to respondents. Column cells can contain editors of different types: single- or multi-line inputs, drop-down menus, checkboxes, etc. Use the `cellType` property to specify the editor type. Define this property in an [individual column's configuration object](https://surveyjs.io/form-library/documentation/api-reference/multi-select-matrix-column-values#cellType) to apply the editor type to that particular column, or set the same property within the [matrix configuration object](https://surveyjs.io/form-library/documentation/api-reference/dynamic-matrix-table-question-model#cellType) to specify one editor type for all columns. Column-level settings override the matrix-level settings. Column editor types are based upon standalone question types. Depending on the selected editor type, the matrix column can have additional configuration properties inherited from the corresponding question type. For instance, Dropdown, Checkboxes, Radio Button Group, and Tag Box columns can specify the [`choices`](https://surveyjs.io/form-library/documentation/api-reference/radio-button-question-model#choices) array, similar to the question types upon which they are based. Refer to the [`MatrixDropdownColumn`](https://surveyjs.io/form-library/documentation/api-reference/matrix-table-with-dropdown-list) API Reference section for a full list of matrix column properties. ## Limit the Row Count A Dynamic Matrix renders two initial rows by default. If you want to change this number, set the [`rowCount`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-matrix-table-question-model#rowCount) property. You can also limit the minimum and maximum number of matrix table rows. Assign these numbers to the [`minRowCount`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-matrix-table-question-model#minRowCount) and [`maxRowCount`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-matrix-table-question-model#maxRowCount) properties. In this demo, a Dynamic Matrix initially displays one row, which is also the minimum row count, and allows users to add up to 10 rows. ## 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)); }); 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 = { "elements": [ { "type": "matrixdynamic", "name": "teacher-performance", "title": "Teacher evaluation", "description": "Select a subject and indicate whether the following statements are true for the subject teacher", "addRowText": "Add Subject", "columnMinWidth": "130px", "cellType": "radiogroup", "choices": [ { "text": "Yes", "value": 1 }, { "text": "No", "value": -1 }, { "text": "I don't know", "value": 0 } ], "columns": [ { "name": "subject", "cellType": "dropdown", "title": "Subject", "isRequired": true, "minWidth": "300px", "choices": [ "English: American Literature", "English: British and World Literature", "Math: Consumer Math", "Math: Practical Math", "Math: Developmental Algebra", "Math: Continuing Algebra", "Math: Pre-Algebra", "Math: Algebra", "Math: Geometry", "Math: Integrated Mathematics", "Science: Physical Science", "Science: Earth Science", "Science: Biology", "Science: Chemistry", "History: World History", "History: Modern World Studies", "History: U.S. History", "History: Modern U.S. History", "Social Sciences: U.S. Government and Politics", "Social Sciences: U.S. and Global Economics", "World Languages: Spanish", "World Languages: French", "World Languages: German", "World Languages: Latin", "World Languages: Chinese", "World Languages: Japanese" ] }, { "name": "explains-objectives", "title": "Clearly explains the objectives" }, { "name": "makes-class-interesting", "title": "Makes class interesting" }, { "name": "uses-class-time-effectively", "title": "Uses class time effectively" }, { "name": "knows-subject-matter", "title": "Knows the subject matter" }, { "name": "recognizes-effort", "title": "Recognizes and acknowledges effort" }, { "name": "informs-about-progress", "title": "Keeps me informed of my progress" }, { "name": "encourages-different-opinions", "title": "Encourages and accepts different opinions" }, { "name": "respects-students", "title": "Respects the students" }, { "name": "encourages-cooperation", "title": "Encourages cooperation and participation" }, { "name": "communicates-with-parents", "title": "Communicates with my parents" }, { "name": "encourages-self-thinking", "title": "Encourages me to think for myself" }, { "name": "negative-feedback", "cellType": "comment", "title": "Is there anything about this class that frustrates you?", "minWidth": "250px" }, { "name": "positive-feedback", "cellType": "comment", "title": "What do you like best about this class and/or teacher?", "minWidth": "250px" }, { "name": "improvement-feedback", "cellType": "comment", "title": "What do you wish this teacher would do differently that would improve this class?", "minWidth": "250px" } ], "rowCount": 1, "minRowCount": 1, "maxRowCount": 10 } ] }; ``` ### `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/dynamic-matrix-add-new-rows/angular.md) - [Vue 3](https://surveyjs.io/form-library/examples/dynamic-matrix-add-new-rows/vue3js.md) - [jQuery](https://surveyjs.io/form-library/examples/dynamic-matrix-add-new-rows/jquery.md) - [Vanilla JS](https://surveyjs.io/form-library/examples/dynamic-matrix-add-new-rows/vanillajs.md)