---
title: Transpose Rows to Columns in Dynamic Matrix
product: Form Library
description: Learn how to change the layout of a matrix table by converting dynamic rows to columns. Utilize the 'Transpose Rows to Columns' property of the dynamic matrix table to enable respondent to dynamically add columns to the matrix grid. For a detailed walkthrough and code snippets for JavaScript, check out this interactive demo.
framework: React
source: https://surveyjs.io/form-library/examples/transpose-dynamic-rows-to-columns-in-matrix/reactjs
index: https://surveyjs.io/form-library/examples/overview.md
---

# Transpose Rows to Columns in Dynamic Matrix (React)

A Dynamic Matrix Table enables users to add new matrix entries at runtime. In the default layout, these entries are added as dynamic matrix rows. If you prefer to create dynamic columns instead, you can adjust the form layout by transposing matrix rows to columns. To rotate the layout in a Dynamic Matrix, enable the [`transposeData`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-matrix-table-question-model#transposeData) property.

## 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 = {
        "functioningLevel": [
            {
                "date": "2024-01-19",
                "ambDistance": "34",
                "ambAssistance": "No",
                "standingTolerance": "Good",
                "ueStrength": "Fair",
                "cognitiveFunction": "No function"
            },
            {
                "date": "2024-01-26",
                "ambDistance": "23",
                "ambAssistance": "Full",
                "standingTolerance": "Fair",
                "ueStrength": "Poor"
            }
        ]
    };
    
    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": "functioningLevel",
      "title": "Current level of functioning",
      "transposeData": true,
      "minRowCount": 1,
      "rowCount": 3,
      "columns": [        
        {
          "name": "date",
          "title": "Date",
          "cellType": "text",
          "inputType": "date"
        },        
        {
          "name": "ambDistance",
          "title": "Ambulatory distance",
          "cellType": "text",
          "inputType": "number"
        },        
        {
          "name": "ambAssistance",
          "title": "Ambulatory assistance",
          "choices": [ "Full", "Moderate", "Minimal", "No" ]
        },        
        {
          "name": "standingTolerance",
          "title": "Standing tolerance",
          "choices": [ "Good", "Fair", "Poor" ]
        },        
        {
          "name": "ueStrength",
          "title": "Upper extremity strength",
          "choices": [ "Good", "Fair", "Poor" ]
        },        
        {
          "name": "cognitiveFunction",
          "title": "Cognitive function",
          "cellType": "comment"
        }
      ],
      "confirmDelete": true,
      "addRowText": "Add Date + "
    }
  ]
};
```

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