@ng-zi/extensions-ag-grid

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

1. Import the necessary modules in your Angular module:

   import { MtxAgGridModule } from '@ng-zi/extensions/ag-grid';
   // Other imports

2. Use the MtxAgGrid component in your Angular template:

   <mtx-ag-grid [config]="gridConfig"></mtx-ag-grid>

   • gridConfig: Configuration object (MtxAgGridConfig) containing rowData, 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.