Different Ways To Move Columns In Ag Grid
Posted By : Gaurav Arora | 31-Jan-2018
Hi Guys, as you all know that AG Grid is one of the most popular HTML5 grid, because of its compatibility with all the major Javascript Framework.
In this blog we will cover the Column Moving property of AG Grid.
Columns can be moved in two ways in AG Grid.
- Simply dragging the Column Header
- Using Column API
Simply dragging the Column Header : In this option we can simply move the columns by dragging them with the mouse and also with the touch.
Using Column API : Column API provide us three options with the help of which we can move columns, basically we use columns index in this.
- moveColumn(key, toIndex)
- moveColumns(keys, toIndex)
- moveColumnByIndex(fromIndex, toIndex)
Let's have a brief of all of the above Column API, we will start by defining the basics.
export class AppComponent {
public gridColumnOptionApi;
onGridReady(params) {
this.gridColumnOptionApi = params.columnApi;
}
}
moveColumn(key, toIndex) : This option will move the column to the defined index.
moveToOne() : void{
this.gridColumnOptionApi.moveColumn("Column 5", 0);
}
moveColumns(keys, toIndex) : This option will move the list of column to the defined index.
moveToOneMultipleColumns() : void{
this.gridColumnOptionApi.moveColumns(["Column 5", "Column 6"], 0);
}
moveColumnByIndex(fromIndex, toIndex) : This option works on from to option basic, like to swap two columns position.
swapColumnPosition() : void{
this.gridColumnOptionApi.moveColumnByIndex(0, 1);
}
So, these are the multiple ways with the help of which we can move columns in AG Grid.
For complete reference on AG GRID please visit https://www.ag-grid.com/.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Gaurav Arora
Gaurav is an experienced UI developer with experience and capabilities to build compelling UI's for Web and Mobile Applications.