@ng-zi/extensions-ag-grid/README.md

AgGrid Extension for 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:

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

2. Use the `MtxAgGrid` component in your Angular template:

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

   - `gridConfig`: Configuration object (`MtxAgGridConfig`) containing `rowData`, `columnDefs`, and other grid settings.

### Example

```typescript
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.