---
title: Matrix Rows with Expandable Details Sections
product: Form Library
description: Learn how to implement expandable details sections nested under each row of Multi-Select or Dynamic Matrix. These sections can contain any number of sub-questions displayed collapsed. When users are ready to interact with a particular matrix row, they can utilize on-question UI controls to expand its details. View the demo for JavaScript to see code snippets and configuration steps.
framework: React
source: https://surveyjs.io/form-library/examples/add-expandable-details-section-under-matrix-rows/reactjs
index: https://surveyjs.io/form-library/examples/overview.md
---

# Matrix Rows with Expandable Details Sections (React)

An expandable/collapsible details section within a matrix question allows form creators to include additional information or sub-questions beneath each main row of the matrix. This type of data representation enables you to keep the form concise and optimizes the space the question takes up on a page. Users can click the + and - icons placed next to each main row to view or hide these details sections as needed. This helps organize complex multi-row data or sub-questions and enhance the overall structure and clarity of the matrix table. The following example demonstrates how to add and configure an expandable details section within a Dynamic Matrix using the SurveyJS Form Library.

## Add a Detail Row

Detail rows are supported by the [Multi-Select Matrix](https://surveyjs.io/form-library/documentation/api-reference/matrix-table-with-dropdown-list) and [Dynamic Matrix](https://surveyjs.io/form-library/documentation/api-reference/dynamic-matrix-table-question-model) question types. To specify the detail row content, populate a matrix's [`detailElements`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-matrix-table-question-model#detailElements) array with objects that configure individual form fields. These form fields will be displayed in all detail rows within this matrix.

To display buttons that expand detail rows, set the matrix's [`detailPanelMode`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-matrix-table-question-model#detailPanelMode) property to one of the following values:

- `"underRowSingle"` - Expands a detail row while collapsing other detail rows, as shown in this demo. 
- `"underRow"` - Expands a detail row without collapsing other detail rows. 

## Expand a Detail Row for New Records

In a Dynamic Matrix, respondents can add new records at runtime. Enable the [`detailPanelShowOnAdding`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-matrix-table-question-model#detailPanelShowOnAdding) property if you want to expand the detail row of a new record immediately after the record is added. This property is enabled in the demo you are viewing.

## Files

### `public/index.html`

```html
<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));
    });
    survey.data = {
        "contacts": [
            { "first-name": "John", "last-name": "Doe", "email": 'john@example.com', "phone": "555-1234" },
            { "first-name": "Jane", "last-name": "Doe", "email": 'jane@example.com', "phone": "555-5678" }
        ]
    };
    const contacts = survey.getQuestionByName("contacts");
    // Exapnd the last detail row
    contacts.visibleRows[contacts.visibleRows.length - 1].showDetailPanel();
    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 = {
  "elements": [
    {
      "type": "matrixdynamic",
      "name": "contacts",
      "title": "Contact list",
      "columns": [
        {
          "name": "first-name",
          "title": "First name",
          "cellType": "text",
          "isRequired": true,
          "maxLength": 25
        },
        {
          "name": "last-name",
          "title": "Last name",
          "cellType": "text",
          "isRequired": true,
          "maxLength": 25
        }
      ],
      "detailElements": [
        {
          "type": "text",
          "name": "phone",
          "title": "Phone",
          "isRequired": true,
          "inputType": "tel"
        },
        {
          "type": "text",
          "name": "email",
          "startWithNewLine": false,
          "title": "Email",
          "isRequired": true,
          "inputType": "email"
        }
      ],
      "detailPanelMode": "underRowSingle",
      "detailPanelShowOnAdding": true,
      "rowCount": 1,
      "confirmDelete": true,
      "confirmDeleteText": "Are you sure you want to delete this contact?",
      "addRowText": "Add a contact",
      "removeRowText": "Delete the contact"
    }
  ],
  "checkErrorsMode": "onValueChanged"
};
```

### `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/add-expandable-details-section-under-matrix-rows/angular.md)
- [Vue 3](https://surveyjs.io/form-library/examples/add-expandable-details-section-under-matrix-rows/vue3js.md)
- [jQuery](https://surveyjs.io/form-library/examples/add-expandable-details-section-under-matrix-rows/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/add-expandable-details-section-under-matrix-rows/vanillajs.md)