Row Transpose

Module Extensions

AdditionalData (Extended from @revolist/revogrid)

interface AdditionalData {
  /**
         * Additional data property transpose
         */
        transpose?: TransposeConfig
}

---

HTMLRevoGridElementEventMap (Extended from global)

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

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.

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.

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

---

TransposeConfig

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;
};