---
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: Vanilla JS
source: https://surveyjs.io/form-library/examples/transpose-dynamic-rows-to-columns-in-matrix/vanillajs
index: https://surveyjs.io/form-library/examples/overview.md
---

# Transpose Rows to Columns in Dynamic Matrix (Vanilla JS)

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/index.css`

```css
/* You can add your custom CSS here. */
```

### `src/index.js`

```js
import { Model } from "survey-core";
import "survey-js-ui";
import "survey-core/survey-core.min.css";
import "./index.css";
import { json } from "./json";

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"
        }
    ]
};


survey.render(document.getElementById("surveyElement"));
```

### `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": {
    "survey-core": "latest",
    "survey-js-ui": "latest"
  }
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/form-library/examples/transpose-dynamic-rows-to-columns-in-matrix/angular.md)
- [React](https://surveyjs.io/form-library/examples/transpose-dynamic-rows-to-columns-in-matrix/reactjs.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)