# Row Transpose
URL: https://pro.rv-grid.com/api/row-transpose/
Source: src/content/docs/api/row-transpose.md
## Module Extensions

### `HTMLRevoGridElement` (Extended from `global`)

```ts
interface HTMLRevoGridElement {
  rowTranspose?: TransposeConfig;
  'row-transpose'?: TransposeConfig
}
```

---

### `AdditionalData` (Extended from `@revolist/revogrid`)

```ts
interface AdditionalData {
  /**
         * Additional data property transpose
         * @deprecated Use the direct `grid.rowTranspose` property instead.
         */
        transpose?: TransposeConfig
}
```

---

### `HTMLRevoGridElementEventMap` (Extended from `global`)

```ts
interface HTMLRevoGridElementEventMap {
  [ROW_TRANSPOSE_EVENT]: undefined
}
```

## Plugin API

### `RowTransposePlugin`

The `RowTransposePlugin` is a plugin for the RevoGrid that enables transposing
grid data, switching rows and columns while preserving data integrity. This plugin
enhances the grid's versatility by allowing users to view and manipulate data
from different perspectives. It supports customizable transposed row and column
headers and ensures seamless toggling between original and transposed views.

**Key Features**:
- Transposing functionality: Toggles between original and transposed grid views.
- Configurable headers: Customize transposed row and column headers.
- Event-driven: Listens for `ROW_TRANSPOSE_EVENT` to trigger the transpose action.
- Data integrity: Preserves original data and column configurations for easy restoration.

**Usage**:
- Integrate the `RowTransposePlugin` with your RevoGrid instance to enable transposing.
- Configure transposed headers using `TransposeConfig` if needed.
- Trigger the transposition via `ROW_TRANSPOSE_EVENT`.

### Example
```typescript
import { RowTransposePlugin, ROW_TRANSPOSE_EVENT } from '@revolist/revogrid-pro';

const grid = document.createElement('revo-grid');
grid.plugins = [RowTransposePlugin];

// Trigger transpose event
const event = new CustomEvent(ROW_TRANSPOSE_EVENT);
grid.dispatchEvent(event);
```

This plugin is ideal for applications requiring flexible data presentation,
offering users a dynamic method to interact with complex datasets.

#### Dependencies

- **Event integration** `ROW_TRANSPOSE_EVENT`: Listens to row transpose events to toggle between original and transposed grid state.
- **Config integration** `additionalData.transpose`: Reads legacy transpose configuration from additionalData.transpose.

```ts
class RowTransposePlugin {
  transpose();
}
```

---

### `TransposedRow`

The `TransposedRow` class is a utility class for transposing a grid. It is
used internally by the `RowTransposePlugin`.

When an instance of `TransposedRow` is created, it dynamically defines
properties on itself for each row in the original source. The property
names are in the format `colX`, where `X` is the index of the row in the
original source. The property values are the values of the field in the
original source that the `TransposedRow` was created with.

The `defineProperties` method is used to define the properties on the
`TransposedRow` instance. It is called automatically by the constructor.

```ts
class TransposedRow {
  getOriginalModels(props: ColumnProp[]);
}
```

---

### `TransposeConfig`

```ts
export type TransposeConfig = {
  // By default, it will transpose column header to additional column
  transposedRowHeader?: Partial<ColumnRegular> | false;
  // By default, it will transpose row header to additional row
  transposedColumnHeader?: Partial<ColumnRegular>;
  // By default, it will show row header
  hideRowHeader?: boolean;
  // By default, it will show column header
  hideColumnHeader?: boolean;
};
```
