---
title: Columnize Choices of a Matrix Cell
product: Form Library
description: Multi-Select Matrix supports different input types for cells of each matrix column and enables you to efficiently manage choice options within those cells. This demo for JavaScript demonstrates how you can set radio buttons or checkboxes as a column cell type and columnize them so that each option is transposed into the header of an individual column.
framework: jQuery
source: https://surveyjs.io/form-library/examples/columnize-choice-options-of-matrix-cell/jquery
index: https://surveyjs.io/form-library/examples/overview.md
---

# Columnize Choices of a Matrix Cell (jQuery)

A Multi-Select Matrix allows you to select different input types for cells of each matrix column. When you choose Radio Button Group or Checkboxes as a column cell type and assign choice options within a cell, you can then distribute those choice options among multiple columns (columnize) so that each option becomes an individual column header. This way, you avoid duplicating choices within a column and make your multi-select matrix question easier to manage.

To transpose the radio buttons or checkboxes of a column cell and create an individual column for each choice option, enable the column's [`showInMultipleColumns`](https://surveyjs.io/form-library/documentation/api-reference/multi-select-matrix-column-values#showInMultipleColumns) property.  In this demo, you can change this property at runtime using the "Transpose the Rating column" checkbox in the Settings panel.

## 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 $ from "jquery";
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));
});

$("#surveyElement").Survey({ model: survey });
```

### `src/json.js`

```js
export const json = {
  "elements": [
    {
      "type": "matrixdropdown",
      "name": "quality",
      "title": "Please indicate if you agree or disagree with the following statements",
      "columns": [
        {
          "name": "quality-rating",
          "title": "Rating",
          "cellType": "radiogroup",
          "choices": [
            {
              "value": 5,
              "text": "Strongly agree"
            },
            {
              "value": 4,
              "text": "Agree"
            },
            {
              "value": 3,
              "text": "Neutral"
            },
            {
              "value": 2,
              "text": "Disagree"
            },
            {
              "value": 1,
              "text": "Strongly disagree"
            }
          ],
          "showInMultipleColumns": true,
          "colCount": 1
        },
        {
          "name": "comments",
          "title": "Comments",
          "cellType": "comment",
          "maxLength": 250
        }
      ],
      "rows": [
        {
          "value": "affordable",
          "text": "Product is affordable"
        },
        {
          "value": "does what it claims",
          "text": "Product does what it claims"
        },
        {
          "value": "better than others",
          "text": "Product is better than other products on the market"
        },
        {
          "value": "easy to use",
          "text": "Product is easy to use"
        }
      ]
    }
  ]
};
```

### `src/theme.js`

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

### `package.json`

```json
{
  "dependencies": {
    "jquery": "latest",
    "survey-core": "latest",
    "survey-js-ui": "latest"
  }
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/form-library/examples/columnize-choice-options-of-matrix-cell/angular.md)
- [React](https://surveyjs.io/form-library/examples/columnize-choice-options-of-matrix-cell/reactjs.md)
- [Vue 3](https://surveyjs.io/form-library/examples/columnize-choice-options-of-matrix-cell/vue3js.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/columnize-choice-options-of-matrix-cell/vanillajs.md)