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.