Angular.
See demo.
See the code below and note that the ag-grid-angular component has its columnDefs bound to a property in our component of the same name.
<ag-grid-angular
#agGrid
style="width: 100%; height: 300px;"
id="myGrid"
class="ag-theme-alpine"
[columnDefs]="columnDefs"
Any updates to the columnDefs property in app.component will be reflected on our ag-Grid instance. For example, see how we set the initial column definitions in the app.component's constructor function:
constructor() {
this.columnDefs = colDefsAthleteExcluded;
}
We can add or remove columns in our ag-Grid instance, simply by updating the columnDefs bound property, passing in a new set of column definitions.
Please see the code for this below in the event handlers for the "Include Athlete Column" and "Exclude Athlete Column" buttons:
// removes the athlete column
onBtExcludeAthleteColumn() {
this.columnDefs = colDefsAthleteExcluded;
}
// adds the athlete column
onBtIncludeAthleteColumn() {
this.columnDefs = colDefsAthleteIncluded;
}
To update existing column definitions, we first call the ag-Grid API method getColumnDefs() to get a reference to the grid's current columns. We then map over the columns, changing any desired properties before updating our columnDefs bound property.
ag-Grid will then match existing columns with those in our ag-Grid instance and update the columns that have changed.
Please see the code for this below in the event handlers for the "Set HeaderNames" and "Remove HeaderNames" buttons:
// sets each columns headerName property
setHeaderNames() {
var columnDefs = this.gridApi.getColumnDefs();
columnDefs.forEach(function(colDef, index) {
colDef.headerName = "C" + index;
});
this.columnDefs = columnDefs;
}
// clears each columns headerName property
removeHeaderNames() {
var columnDefs = this.gridApi.getColumnDefs();
columnDefs.forEach(function(colDef, index) {
colDef.headerName = undefined;
});
this.columnDefs = columnDefs;
}
React.
See demo.
When using React we have the option of declaring ag-Grid columns declaratively. In the example above you'll see that we're creating ag-Grid Columns by mapping over a state variable columns and returning a agGridColumn React component for each column definition, spreading props while doing so:
const App = () => {
const [columns, setColumns] = useState(colDefsAthleteExcluded);
return (
{columns.map(column => (
<AgGridColumn {...column} key={column.field} />
))}
To add or remove columns, we simply have to call the setColumns setState method, passing in a new set of column definitions.
- Columns that didn't exist previously will be added to the ag-Grid instance.
- Columns that are not included in the new set will be removed from the ag-Grid instance.
Please see the code for this below in the event handlers for the "Include Athlete Column" and "Exclude Athlete Column" buttons:
// removes the athlete column
const onBtExcludeAthleteColumn = () => {
setColumns(colDefsAthleteExcluded);
};
// adds the athlete column
const onBtIncludeAthleteColumn = () => {
setColumns(colDefsAthleteIncluded);
};
To update existing column definitions, we first call the ag-Grid API method getColumnDefs() to get a reference to the grid's current columns. We then map over the columns, changing any desired properties before calling setColumns and updating our columns state variable.
ag-Grid will then match existing columns with those in our ag-Grid instance and update the columns that have changed.
Please see the code for this below in the event handlers for the "Set HeaderNames" and "Remove HeaderNames" buttons:
// sets each columns headerName property
const setHeaderNames = () => {
const newColumns = gridApi.getColumnDefs();
newColumns.forEach((newColumn, index) => {
newColumn.headerName = "C" + index;
});
setColumns(newColumns);
};
// clears each columns headerName property
const removeHeaderNames = () => {
const newColumns = gridApi.getColumnDefs();
newColumns.forEach((newColumn, index) => {
newColumn.headerName = undefined;
});
setColumns(newColumns);
};
Vue.
See demo.
Below you'll see that our ag-grid-vue component has its columnDefs bound to a property in our component of the same name.
<ag-grid-vue
style="width: 100%; height: 300px;"
class="ag-theme-alpine"
id="myGrid"
:columnDefs="columnDefs"
Any updates to the columnDefs property in Vue component will be reflected in our ag-Grid instance. For example, see how we set the initial column definitions in the beforeMount lifecycle method:
beforeMount() {
this.columnDefs = colDefsAthleteExcluded;
}
To add or remove columns to our ag-Grid instance, we update the columnDefs bound property, passing in a new set of column definitions.
- Columns that didn't exist previously will be added to the ag-Grid instance.
- Columns that are not included in the new set will be removed from the ag-Grid instance.
Please see the code for this below in the event handlers for the "Include Athlete Column" and "Exclude Athlete Column" buttons:
// removes the athlete column
btnExcludeAthleteColumn() {
this.columnDefs = colDefsAthleteExcluded;
},
// adds the athlete column
btnIncludeAthleteColumn() {
this.columnDefs = colDefsAthleteIncluded;
}
To update existing column definitions, we first call the ag-Grid API method getColumnDefs() to get a reference to the grid's current columns. We then map over the columns, changing any desired properties before updating our columnDefs bound property.
ag-Grid will then match existing columns with those in our ag-Grid instance and update the columns that have changed.
Please see the code for this below in the event handlers for the "Set HeaderNames" and "Remove HeaderNames" buttons:
// sets each columns headerName property
setHeaderNames() {
var columnDefs = this.gridApi.getColumnDefs();
columnDefs.forEach(function(colDef, index) {
colDef.headerName = "C" + index;
});
this.columnDefs = columnDefs;
}
// clears each columns headerName property
removeHeaderNames() {
var columnDefs = this.gridApi.getColumnDefs();
columnDefs.forEach(function(colDef, index) {
colDef.headerName = undefined;
});
this.columnDefs = columnDefs;
}
Vanilla JS.
See demo.
When using vanilla JS, column definitions cannot be bound to a property within our application as JavaScript does not have a built-in mechanism for reactive data. Instead we use the ag-Grid API method setColumnDefs() to set and update our columns.
To add or remove columns to our ag-Grid instance, we call the setColumnDefs API, passing in a new set of column definitions.
- Columns that didn't exist previously will be added to the ag-Grid instance.
- Columns that are not included in the new set will be removed from the ag-Grid instance.
Please see the code for this below in the event handlers for the "Include Athlete Column" and "Exclude Athlete Column" buttons:
// removes athlete column
function onBtExcludeAthleteColumn() {
gridOptions.api.setColumnDefs(colDefsAthleteExcluded);
}
// adds athlete column
function onBtIncludeAthleteColumn() {
gridOptions.api.setColumnDefs(colDefsAthleteIncluded);
}
To update existing column definitions, we first call the ag-Grid API method getColumnDefs() to get a reference to the grid's current columns. We then map over the columns, changing any desired properties before calling setColumnDefs(colDefs) and passing in the updated columns.
ag-Grid will then match existing columns with those in our ag-Grid instance and update the columns that have changed.
Please see the code for this below in the event handlers for the "Set HeaderNames" and "Remove HeaderNames" buttons:
// sets each columns headerName property
function setHeaderNames() {
var columnDefs = gridOptions.api.getColumnDefs();
columnDefs.forEach(function(colDef, index) {
colDef.headerName = "C" + index;
});
gridOptions.api.setColumnDefs(columnDefs);
}
// clears each columns headerName property
function removeHeaderNames() {
var columnDefs = gridOptions.api.getColumnDefs();
columnDefs.forEach(function(colDef, index) {
colDef.headerName = undefined;
});
gridOptions.api.setColumnDefs(columnDefs);
}
Read the full blog post on our website or check out our documentation for a great variety of scenarios you can implement with ag-Grid.
Ahmed Gadir | Developer @ ag-Grid
