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