[4] Ag-Grid- adding rows, deleting rows, column( groups, sizing, moving, pinning)

If you are a beginner and haven’t checked our previous articles. Checkout
to https://medium.com/codalyze . You can find other Ag-Grid articles which helps you begin your project smoothly.

Ag-Grid [https://www.ag-grid.com/documentation/react/]

I have covered pushing the data into the grid, defining columns and filtering, sorting etc in the previous articles. In this article I am going to explain the topics like adding and deleting a row in the grid, and other column operations like grouping, sizing, moving, pinning etc.

First of all I do wanna mention that ag-grid has its own state, whenever you want to change the data or whenever you want to delete or add rows, don’t change the data that is passed into the grid. The data that is passed into the grid initially, it is kept as it is. We use ag-grid api to change the data in ag-grid state and that data is used or sent to the backend later on.

Adding an empty row:

Adding a row to the grid is very simple. Use the gridApi that we get after gridReady to add a row. This process is called applying transaction. Create a button that takes a onClick funtion, when we click the button add a callBack funtion that does the following operation.gridApi.applyTransaction({add: [{}]}) applyTransaction takes params object. Here, we are adding a single empty row so we use add property with array of rows that we have to add.

Deleting selected rows:

Deleting rows is similar to adding a row but tricky part is that which rows should be deleted. We have to select the rows and delete the selected rows, for this purpose we have to add rowSelection='single' or 'multiple' in AgGridReact. For proper visual purpose I am going to add checkbox also in columnDefs. Create a button with onClick function. When it triggered use the following operation to delete the selected rows.

Column Groups:

Sometime we have to group the data as childrens with headerNames. We use children property in column definations to group the children.

group column defs

group coldefs data

Grouping ag grid

Column Sizing:

Columns can be resized by dragging the top right portion of the column. In order to enable this feature, you have add a propery resizable: true in column def.

column sizing

You can also fit all the columns to the grid width by using the gridApi. Use api.sizeColumnsToFit() when the grid gets ready.

size columns to fit

If you want the width of the column or columns auto set to the width of the content in cell, use autoSizeColumn(colId, skipHeader(boolean)) or autoSizeColumns([colIds], skipHeader(boolean)). colId is same as ‘field’.

auto size columns

Column Moving:

You can move the column or columns from one index to another index by using the moveColumn(colId, index) ColId is the field name and index is to which position the column to be moved.

moving cols

moving cols

There are two other functions to move list of columns to specific index moveColumns([colIds], index) and Move column from fromIndex to toIndex moveColumnByIndex(fromIndex, toIndex

Column Pinning:

You can pin columns by setting the pinned attribute on the column definition to either 'left' or 'right'.

name col is pinned to left

You can also pin cols by dragging and dropping them at the end of the grid.

pinning the cols by drag and drop.

That’s all for today’s article. Hope you understand the topics well.

Written by Harishponna
For any clarification please reach out: www.linkedin.com/in/harish-ponna-b9b885ba

Feel free to share your feedback at mail@codalyze.com