Columns can be moved in the grid in the following ways:
The column API methods for moving columns are as follows:
Moves a column to
The example below demonstrates simple moving via mouse dragging and the API. The following can be noted:
moveColumns(keys, toIndex)to place the medals columns at the start or at the end respectively.
moveColumn(key, toIndex)to place the Country column first.
moveColumnByIndex(fromIndex, toIndex)to swap the first two columns.
getAllGridColumns()to print to the dev console the current column order.
Column animations happen when you move a column. The default is for animations to be turned on. It is recommended that you leave the column move animations on unless your target platform (browser and hardware) is too slow to manage the animations. To turn OFF column animations, set the grid property
The move column animation transitions the column's position only, so when you move a column, it animates to the new position. No other attribute apart from position is animated.
The grid property
suppressDragLeaveHidesColumns will stop columns getting removed from the grid if they are dragged outside of the grid. This is handy if the user moves a column outside of the grid by accident while moving a column but doesn't intend to make it hidden.
The column property
suppressMovable changes whether the column can be dragged. The column header cannot be dragged by the user to move the columns when
suppressMovable=true. However the column can be inadvertently moved by placing other columns around it thus only making it practical if all columns have this property.
The column property
lockPosition locks columns to one side of the grid. When
lockPosition is set as either
"right", the column will always be locked to that position, cannot be dragged by the user, and cannot be moved out of position by dragging other columns.
The example below demonstrates these properties as follows:
"left"as the first column in the scrollable area of the grid. It is not possible to move this column, or have other columns moved over it to impact its position. As a result the Age column marks the beginning of the scrollable area regardless of its position within the column definitions.
"right"and likewise its position can not be impacted by moving other columns.
trueso columns dragged outside of the grid are not hidden (normally dragging a column out of the grid will hide the column).
trueso it is not possible to pin columns to the left or right of the locked columns.
suppress-movable-colCSS classes applied to them respectively to change the background colour.
Below is a more real-world example of where locked columns would be used. The first column is a row number, similar to the row column in Excel. The second column is a buttons column - an application could have buttons for actions e.g. 'Delete', 'Buy', 'Sell' etc.
From the example the following can be noted:
colDef.lockPosition='left'. This means they cannot be moved out of place, and other columns cannot be moved around them.
locked-colCSS class applied to them to change the background colour.
When you move columns around it is possible to change their visibility as follows:
The column property
lockVisible will stop individual columns from being made visible or hidden via the UI. When
lockVisible=true, the column will not hide when it is dragged out of the grid, and columns dragged from the tool panel onto the grid will not become visible.
There is a slight overlap with the property
suppressDragLeaveHidesColumns=true all columns remain visible if they are dragged outside of the grid. This is a good way to block all columns from hiding as the user reorders the columns via dragging. The
lockVisible property is at the column level and blocks all UI functions that change a column's visibility.
The example below shows lock visible. The following can be noted: