# Row Transpose
URL: https://pro.rv-grid.com/guides/rows/row-transpose/
Source: src/content/docs/guides/rows/row-transpose.mdx
Description: Learn how to use the Row Transpose Plugin in RevoGrid Pro to switch rows and columns dynamically.
The Row Transpose Plugin modifies the grid by transposing its data, meaning that the original rows are converted into columns and vice versa.
This can be especially useful when dealing with datasets that require pivoting or when users need to explore data from different perspectives.

- **Toggle Transpose**: Switch between the original view and the transposed view.
- **Dynamic Headers**: Customizable transposed headers for better data representation.
- **Custom Transpose Configuration**: Define how the columns and rows should be transformed, including whether to transpose column headers into rows.

## How Transposing Works

The plugin offers two primary functionalities:

- **Original View**: Displays rows and columns as defined in your data model.
- **Transposed View**: When activated, this feature converts rows into columns and columns into rows.

The `RowTransposePlugin` listens for the `row-transpose`.
When triggered, it switches between the original view and the transposed view while preserving the original structure, allowing you to revert to the standard view at any time.

Alternatively, you can access the plugin directly using the following JavaScript code:

```javascript
document.querySelector('revo-grid').getPlugins().then(plugins => {
    const plugin = plugins.find(p => p instanceof RowTransposePlugin);
    plugin?.transpose();
});
```

When the rows are transposed, RevoGrid enters a virtual transposed mode. This means that events related to row and column edits will return instances of the `TransposedRow` class, which represent the transposed data model. If you wish to retrieve the original model, you can use the `TransposedRow.getOriginalModels` method. This method takes transposed column properties as input and converts the corresponding transposed cell back to the original model.

For example:

```javascript
document.querySelector('revo-grid').addEventListener('beforeedit', async (e) => {
    const model = e.detail.model;
    console.log('beforeedit', model.getOriginalModels([e.detail.prop])); // returns original row model
});
```

### Customizing the Transpose

The plugin configuration allows you to fine-tune the transposing process. For example, you can choose to transpose the column headers into rows, or leave them unchanged.

```javascript
document.querySelector('revo-grid').additionalData = {
  transpose: {
    transposedRowHeader: { cellTemplate: () => '', columnTemplate: () => '' }, // defined row/header template
    transposedColumnHeader: { columnTemplate: () => '' }, // template for transposed columns
  }
};
```

## Conclusion

The **Row Transpose Plugin** is a powerful tool for displaying data in different formats within RevoGrid.
Whether you're working with complex datasets that require pivoting or simply need to view your data from a different perspective, this plugin provides the flexibility to switch between views seamlessly. With customizable options for how rows and columns are transposed, you can easily tailor the grid to your needs.
