Transposing Grid Data

Summary

Transposition in AdapTable allows users to see their Grid Data transposed (in a similar way to Excel)
There are options to configure which data is transposed and where the Transposed View appears

Transposition in AdapTable works in a similar way to the function of the same name in Excel.

AdapTable displays a popup view showing the grid transposed, i.e. with rows and columns switched.

Transposition is available via the showTransposedView function in the Grid API section of Adaptable API.

The function allows developers to configure a number of elements including:

which Column will do the transposition (defaulting to Primary Key if not provided)
which Rows and Columns should be transposed
where the transposed view is displayed

showTransposedView

transposeConfig: TransposeConfig

void

Displays a Transposed View of the gid

Function that transposes the Grid.

The function receives a TransposeConfig object and returns void:

showTransposedView(transposeConfig: TransposeConfig): void;

The TransposeConfig object is defined as follows:

Property	Description	Default
columnsToTranspose	Ids of Columns to Transpose	all Grid Columns
hideTransposedColumn	Hide the Transposed Column	true
rowsToTranspose	Rows to Transpose: All, Visible or via Expression	All
transposedColumnId	Column to use to do Transposition	Primary Key Column

Transposing the Grid

Fork Fork

This demo shows how to transpose the Grid
Clicking the Transpose Grid Button will open a new view that transposes the current grid

Selecting Columns

By default all Grid Columns are transposed.

However, if this is not the required behaviour, AdapTable allows developers to specify which Columns should be transposed, when calling the showTransposedView function.

This is done via the columnsToTranspose property in the TransposeConfig object sent to the function.

Hint

Developers can either provide a list of ColumnIds directly, or a function that returns a list of ColumnIds

Transposing: Configuring Columns

Fork Fork

In this example we have set an implementation for the columnsToTranspose property to limit which Columns are transposed
We provide a function which returns all numeric columns plus the Language column

Selecting Rows

By default all Grid Rows are also transposed.

Again, if this is not the required behaviour, AdapTable allows developers to specify the Rows to transpose.

This is done via the rowsToTranspose property in the TransposeConfig object sent to the function.

Developers can provide 3 options for this property:

All - transposes all rows in the DataSet (default value if nothing provided)
VisibleOnly - transposes only rows currently in the Grid (including in Groups)
AdaptableQl Boolean Expression - only rows that evaluate as true in the provided Expression are transposed

Transposing: Configuring Rows

Fork Fork

In this example we have set an implementation for the rowsToTranspose property
We provide an AdaptableQL Expression: [github_stars] > 60000 AND [language] != "HTML"

Rendering Transposed View

By default the Transposed Grid will be displayed in a popup above AG Grid.

This, too, can be changed in AdapTable if need be.

The solution is to provide a property for the transposedViewContainer property in Container Options.

Find Out More

Read the Tutorial on providing Container Options for full details on how to specify Custom Divs in AdapTable

Transposing the Grid

Fork Fork

This demo displays the Transposed View on the right-hand side of the viewport (50%)
The main grid shrinks to 50% when the transposed view is open
When the transposed view is closed, the main grid takes 100% of the width
A header with a close button (✕) allows you to hide the transposed view

Transposition in AdapTable

(Recorded with AdapTable v18.0)

FAQ

Can we save the Transposed Grid? Not at the moment, but this might become available in a future version

PreviousTechnical Reference NextHighlighting & Jumping

Framework: