10 AG-Grid Interview Questions and Answers
Prepare for your next interview with this guide on AG-Grid, covering key concepts and practical insights to enhance your understanding.
AG-Grid is a powerful and highly customizable JavaScript data grid that is widely used in enterprise applications. Known for its performance and flexibility, AG-Grid supports a variety of features such as sorting, filtering, and pagination, making it an essential tool for handling large datasets efficiently. Its compatibility with frameworks like Angular, React, and Vue.js further enhances its appeal among developers.
This article aims to prepare you for interviews by providing a curated list of AG-Grid-related questions and answers. By familiarizing yourself with these questions, you will gain a deeper understanding of AG-Grid’s capabilities and be better equipped to demonstrate your expertise during technical interviews.
AG-Grid Interview Questions and Answers
1. Write the code to set up a basic AG-Grid component in a JavaScript application.
AG-Grid is a versatile data grid component for JavaScript applications, often used for handling large datasets with features like sorting, filtering, and pagination. To set up a basic AG-Grid component, include the AG-Grid library and configure the grid options.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AG-Grid Example</title>
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/styles/ag-grid.css">
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/styles/ag-theme-alpine.css">
</head>
<body>
<div id="myGrid" class="ag-theme-alpine" style="height: 400px; width: 600px;"></div>
<script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.noStyle.js"></script>
<script>
const columnDefs = [
{ headerName: "Make", field: "make" },
{ headerName: "Model", field: "model" },
{ headerName: "Price", field: "price" }
];
const rowData = [
{ make: "Toyota", model: "Celica", price: 35000 },
{ make: "Ford", model: "Mondeo", price: 32000 },
{ make: "Porsche", model: "Boxster", price: 72000 }
];
const gridOptions = {
columnDefs: columnDefs,
rowData: rowData
};
document.addEventListener('DOMContentLoaded', function() {
const gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
});
</script>
</body>
</html>
2. Describe how you would update the row data dynamically. Provide a code snippet.
To update row data dynamically, use the grid’s API methods like setRowData, updateRowData, or applyTransaction. These methods modify the data without a full reload, maintaining the grid’s state.
Example using updateRowData:
const gridOptions = {
columnDefs: [
{ field: 'make' },
{ field: 'model' },
{ field: 'price' }
],
rowData: [
{ make: 'Toyota', model: 'Celica', price: 35000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Porsche', model: 'Boxster', price: 72000 }
]
};
function updateRowData() {
const updatedItems = [
{ make: 'Toyota', model: 'Celica', price: 37000 },
{ make: 'Ford', model: 'Mondeo', price: 33000 }
];
gridOptions.api.updateRowData({ update: updatedItems });
}
updateRowData();
3. Implement a custom cell renderer that displays a button in each cell. When clicked, the button should alert the value of the cell.
A custom cell renderer can display a button in each cell, which alerts the cell’s value when clicked. This enhances interactivity.
Example:
function CustomCellRenderer() {}
CustomCellRenderer.prototype.init = function(params) {
this.eGui = document.createElement('button');
this.eGui.innerHTML = 'Click Me';
this.eGui.addEventListener('click', function() {
alert(params.value);
});
};
CustomCellRenderer.prototype.getGui = function() {
return this.eGui;
};
var columnDefs = [
{ headerName: 'Value', field: 'value', cellRenderer: CustomCellRenderer }
];
var gridOptions = {
columnDefs: columnDefs,
rowData: [
{ value: 'Cell 1' },
{ value: 'Cell 2' },
{ value: 'Cell 3' }
]
};
document.addEventListener('DOMContentLoaded', function() {
var gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
});
4. Write the code to implement pagination for a dataset of 1000 rows, displaying 100 rows per page.
To implement pagination for 1000 rows, displaying 100 rows per page, configure the grid options accordingly.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/styles/ag-grid.css">
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/styles/ag-theme-alpine.css">
</head>
<body>
<div id="myGrid" class="ag-theme-alpine" style="height: 400px; width: 600px;"></div>
<script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.noStyle.js"></script>
<script>
var columnDefs = [
{ headerName: "ID", field: "id" },
{ headerName: "Value", field: "value" }
];
var rowData = [];
for (var i = 1; i <= 1000; i++) {
rowData.push({ id: i, value: "Value " + i });
}
var gridOptions = {
columnDefs: columnDefs,
rowData: rowData,
pagination: true,
paginationPageSize: 100
};
var eGridDiv = document.querySelector('#myGrid');
new agGrid.Grid(eGridDiv, gridOptions);
</script>
</body>
</html>
5. How would you handle a row click event? Provide a code example.
To handle a row click event, use the onRowClicked property in the grid options. The event object provides information about the clicked row.
Example:
var gridOptions = {
columnDefs: [
{ headerName: "Make", field: "make" },
{ headerName: "Model", field: "model" },
{ headerName: "Price", field: "price" }
],
rowData: [
{ make: "Toyota", model: "Celica", price: 35000 },
{ make: "Ford", model: "Mondeo", price: 32000 },
{ make: "Porsche", model: "Boxster", price: 72000 }
],
onRowClicked: function(event) {
console.log('Row clicked: ', event.data);
}
};
var eGridDiv = document.querySelector('#myGrid');
new agGrid.Grid(eGridDiv, gridOptions);
6. Write the code to add export functionality, allowing users to export the grid data to a CSV file.
AG-Grid’s built-in export functionality allows users to export grid data to a CSV file. This can be triggered by a button click.
Example:
const gridOptions = {
columnDefs: [
{ headerName: "Make", field: "make" },
{ headerName: "Model", field: "model" },
{ headerName: "Price", field: "price" }
],
rowData: [
{ make: "Toyota", model: "Celica", price: 35000 },
{ make: "Ford", model: "Mondeo", price: 32000 },
{ make: "Porsche", model: "Boxster", price: 72000 }
]
};
function onBtnExport() {
gridOptions.api.exportDataAsCsv();
}
// HTML button to trigger export
<button onclick="onBtnExport()">Export to CSV</button>
7. Explain how you would enable and customize cell editing. Provide a code example.
To enable and customize cell editing, configure the grid options and column definitions. AG-Grid offers various built-in cell editors, and you can create custom ones if needed.
Example:
const columnDefs = [
{ headerName: "Name", field: "name", editable: true },
{ headerName: "Age", field: "age", editable: true, cellEditor: 'agSelectCellEditor', cellEditorParams: { values: [18, 19, 20, 21, 22] } },
{ headerName: "Date of Birth", field: "dob", editable: true, cellEditor: 'agDateCellEditor' }
];
const gridOptions = {
columnDefs: columnDefs,
rowData: [
{ name: "John Doe", age: 20, dob: "2001-01-01" },
{ name: "Jane Smith", age: 21, dob: "2000-02-02" }
]
};
const eGridDiv = document.querySelector('#myGrid');
new agGrid.Grid(eGridDiv, gridOptions);
In this example, the Name column is editable with the default text editor. The Age column uses a select editor with predefined values, and the Date of Birth column uses a date picker editor.
8. Explain how you would apply conditional formatting to cells. Provide a code example.
Conditional formatting changes the appearance of cells based on conditions. Use cellClassRules to apply CSS classes or cellStyle for direct styling.
Example using cellClassRules:
const columnDefs = [
{
headerName: "Age",
field: "age",
cellClassRules: {
'cell-green': 'x < 25',
'cell-red': 'x >= 25'
}
}
];
const gridOptions = {
columnDefs: columnDefs,
rowData: [
{ age: 24 },
{ age: 30 }
]
};
// CSS classes
.cell-green {
background-color: green;
}
.cell-red {
background-color: red;
}
Example using cellStyle:
const columnDefs = [
{
headerName: "Age",
field: "age",
cellStyle: params => {
if (params.value < 25) {
return { backgroundColor: 'green' };
} else {
return { backgroundColor: 'red' };
}
}
}
];
const gridOptions = {
columnDefs: columnDefs,
rowData: [
{ age: 24 },
{ age: 30 }
]
};
9. List and describe at least three different grid events and how you would handle them.
AG-Grid provides a range of events for interaction and customization. Here are three events and how to handle them:
1. Cell Value Changed Event (cellValueChanged)
- Triggered when a cell’s value changes.
- Use it to update the backend or trigger UI changes.
onCellValueChanged(event) {
console.log('Cell value changed:', event);
}
const gridOptions = {
onCellValueChanged: onCellValueChanged,
};
2. Row Selected Event (rowSelected)
- Triggered when a row is selected or deselected.
- Use it to update the selection state or trigger UI changes.
onRowSelected(event) {
console.log('Row selected:', event.node.selected);
}
const gridOptions = {
onRowSelected: onRowSelected,
};
3. Grid Ready Event (gridReady)
- Triggered when the grid finishes initializing.
- Use it to fetch data or configure the grid.
onGridReady(event) {
console.log('Grid is ready');
}
const gridOptions = {
onGridReady: onGridReady,
};
10. What strategies would you use to optimize performance when dealing with large datasets?
To optimize performance with large datasets, consider these strategies:
- Virtual Scrolling: Render only visible rows to reduce DOM elements.
- Pagination: Load and display a subset of data at a time.
- Lazy Loading: Fetch data on demand as the user scrolls.
- Row and Column Virtualization: Render only visible rows and columns.
- Efficient Data Structures: Use immutable data structures to minimize re-renders.
- Debouncing and Throttling: Limit the frequency of expensive operations.
- Custom Cell Renderers: Use lightweight renderers to improve performance.
- Server-Side Operations: Offload heavy operations to the server-side.