0.0.14 • Published 12 months ago
@ng-zi/extensions-ag-grid v0.0.14
MtxAgGrid Component
| Feature | Description |
|---|---|
| Data Binding | Bind data to the grid using Angular's data binding syntax. |
| Column Definitions | Define columns and their properties dynamically or statically. |
| Sorting and Filtering | Enable sorting and filtering of columns effortlessly. |
| Pagination | Implement pagination to handle large datasets efficiently. |
| Row Selection | Support single or multiple row selection with customizable modes. |
| Cell Editing | Enable inline cell editing with customizable editor components. |
| Custom Components | Integrate custom Angular components within cells for advanced functionality. |
| Events | Emit various grid events for interaction and customization. |
Basic Usage
Import the necessary modules in your Angular module:
import { MtxAgGridModule } from '@ng-zi/extensions/ag-grid'; // Other importsUse the
MtxAgGridcomponent in your Angular template:<mtx-ag-grid [config]="gridConfig"></mtx-ag-grid>gridConfig: Configuration object (MtxAgGridConfig) containingrowData,columnDefs, and other grid settings.
Example
import { Component } from '@angular/core';
import { MtxAgGridConfig } from './ag-grid.config';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.html',
styleUrls: ['./my-component.scss']
})
export class MyComponent {
gridConfig: MtxAgGridConfig<any, any> = {
rowData: [
{ make: 'Toyota', model: 'Celica', price: 35000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
// more rows...
],
columnDefs: [
{ headerName: 'Make', field: 'make' },
{ headerName: 'Model', field: 'model' },
{ headerName: 'Price', field: 'price' }
// more columns...
],
// Other configuration options
};
}Customization
- Styling: Customize the appearance using CSS or Angular's style bindings.
- Integration: Integrate with Angular Material themes and components for a consistent UI.
Accessibility
- ARIA Support: Ensure accessibility with proper ARIA roles and attributes for screen readers.