Row Transpose

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.

Key Features:

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:

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

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:

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

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.

1
document.querySelector('revo-grid').additionalData = {
2
  transpose: {
3
    transposedRowHeader: { cellTemplate: () => '', columnTemplate: () => '' }, // defined row/header template
4
    transposedColumnHeader: { columnTemplate: () => '' }, // template for transposed columns
5
  }
6
};

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.