---
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: React
source: https://surveyjs.io/form-library/examples/change-visibility-of-rows-in-matrix-table/reactjs
index: https://surveyjs.io/form-library/examples/overview.md
---

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

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="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));
    });
    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": "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/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/change-visibility-of-rows-in-matrix-table/angular.md)
- [Vue 3](https://surveyjs.io/form-library/examples/change-visibility-of-rows-in-matrix-table/vue3js.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)