---
title: Change Row and Column Visibility in a Multi-Select Matrix
product: Form Library
description: With SurveyJS, you can make certain question elements (e.g. choice options in close-ended questions, or rows and columns in a matrix table question) visible or invisible with expression properties. View a free demo for JavaScript to learn how to use properties that affect visibility of question elements with expressions as their values.
framework: Vue 3
source: https://surveyjs.io/form-library/examples/change-visibility-of-rows-in-matrix-table/vue3js
index: https://surveyjs.io/form-library/examples/overview.md
---

# Change Row and Column Visibility in a Multi-Select Matrix (Vue 3)

Matrix questions allow you to dynamically manage the visibility of matrix rows and columns. In this demo, matrix rows list car brands, and matrix columns display different qualities that you can rate. Use the checkboxes below to select the car brands and qualities that should appear in the matrix.

To implement conditional visibility for matrix rows or columns, follow these steps:

1. Prepopulate the matrix's [`columns`](https://surveyjs.io/form-library/documentation/api-reference/matrix-table-with-dropdown-list#columns) and [`rows`](https://surveyjs.io/form-library/documentation/api-reference/matrix-table-with-dropdown-list#rows) arrays with choice options from the main questions.          
In this demo, the `rows` array contains a copy of choice options from the `cars` question, while the `columns` array is populated with all choice options from the `qualities` question.

1. Specify the [`columnsVisibleIf`](https://surveyjs.io/form-library/documentation/api-reference/matrix-table-with-dropdown-list#columnsVisibleIf) and [`rowsVisibleIf`](https://surveyjs.io/form-library/documentation/api-reference/matrix-table-with-dropdown-list#rowsVisibleIf) expressions.          
These expressions are used as a filter for columns and rows. Use the `{item}` placeholder to reference a row or column being evaluated within the expression. As an alternative, you can specify a `visibleIf` expression for individual columns or rows.

Refer to the survey JSON schema for a code example.

## 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));
    });
</script>
```

### `src/index.css`

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

### `src/json.ts`

```ts
export const json = {
  "elements": [
    {
      "type": "checkbox",
      "name": "cars",
      "title": "Which cars have you been driven?",
      "choices": [
        "Audi", "BMW", "Citroen",
        "Ford", "Mercedes-Benz", "Nissan",
        "Peugeot", "Tesla", "Toyota",
        "Vauxhall", "Volkswagen"
      ],
      "defaultValue": [ "Tesla", "Nissan" ],
      "colCount": 3
    },
    {
      "type": "checkbox",
      "name": "qualities",
      "visibleIf": "{cars} notempty",
      "title": "Which qualities of these cars you would like to rate?",
      "choices": [
        "Style", "Performance",
        "Comfort", "Safety",
        "Overall quality"
      ],
      "defaultValue": [ "Comfort", "Safety" ],
      "colCount": 2
    },
    {
      "type": "matrixdropdown",
      "name": "car-ratings",
      "visibleIf": "{cars} notempty and {qualities} notempty",
      "title": "Please rate the selected cars",
      "columnsVisibleIf": "{qualities} contains {item}",
      "rowsVisibleIf": "{cars} contains {item}",
      "cellType": "rating",
      "columns": [
        {
          "name": "Style",
          "rateType": "stars",
          "rateCount": 3,
          "rateMax": 3
        },
        {
          "name": "Performance",
          "rateType": "stars",
          "rateCount": 3,
          "rateMax": 3
        },
        {
          "name": "Comfort",
          "rateType": "stars",
          "rateCount": 3,
          "rateMax": 3
        },
        {
          "name": "Safety",
          "rateType": "stars",
          "rateCount": 3,
          "rateMax": 3
        },
        {
          "name": "Overall quality",
          "rateType": "stars",
          "rateCount": 3,
          "rateMax": 3
        }
      ],
      "rows": [
        "Audi", "BMW", "Citroen",
        "Ford", "Mercedes-Benz", "Nissan",
        "Peugeot", "Tesla", "Toyota",
        "Vauxhall", "Volkswagen"
      ]
    }
  ]
};
```

### `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/change-visibility-of-rows-in-matrix-table/angular.md)
- [React](https://surveyjs.io/form-library/examples/change-visibility-of-rows-in-matrix-table/reactjs.md)
- [jQuery](https://surveyjs.io/form-library/examples/change-visibility-of-rows-in-matrix-table/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/change-visibility-of-rows-in-matrix-table/vanillajs.md)