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

# Transpose Rows to Columns in Dynamic Matrix (Vue 3)

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="app" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; height:100%"></div>
```

### `src/App.vue`

```html
<template>
    <SurveyComponent :model="survey" />
</template>
<script setup lang="ts">
    import { Model } from "survey-core";
    import { SurveyComponent } from "survey-vue3-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"
            }
        ]
    };
    
</script>
```

### `src/index.css`

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

### `src/json.ts`

```ts
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/main.ts`

```ts
import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);
app.mount("#app");
```

### `src/shims-vue.d.ts`

```ts
/* eslint-disable */
declare module "*.vue" {
    import type { DefineComponent } from "vue"
    const component: DefineComponent<{}, {}, any>
    export default component
}
```

### `src/theme.ts`

```ts
export const themeJson = {};
```

### `.eslintrc.js`

```js
module.exports = {
    root: true,
    env: {
        node: true
    },
    extends: [
        "plugin:vue/vue3-essential",
        "eslint:recommended",
        "@vue/typescript/recommended",
        "@vue/prettier",
        "@vue/prettier/@typescript-eslint"
    ],
    parserOptions: {
        ecmaVersion: 2020
    },
    rules: {
        "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
        "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
    },
    overrides: [
        {
            files: [
                "**/__tests__/*.{j,t}s?(x)",
                "**/tests/unit/**/*.spec.{j,t}s?(x)"
            ],
            env: {
                jest: true
            }
        }
    ]
};
```

### `babel.config.js`

```js
module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"]
};
```

### `package.json`

```json
{
  "name": "surveyjs-library-vue3",
  "version": "0.1.0",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "tslib": "2.6.1",
    "vue": "^3.4.1",
    "survey-core": "latest",
    "survey-vue3-ui": "latest",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-pwa": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "@vue/test-utils": "^2.0.0-0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^7.0.0-0",
    "node-sass": "^4.12.0",
    "prettier": "^1.19.1",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3"
  }
}
```

### `tsconfig.json`

```json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}
```

## 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)
- [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)