0.0.14 • Published 12 months ago

@ng-zi/extensions-ag-grid v0.0.14

Weekly downloads
-
License
MIT
Repository
-
Last release
12 months ago

MtxAgGrid Component

FeatureDescription
Data BindingBind data to the grid using Angular's data binding syntax.
Column DefinitionsDefine columns and their properties dynamically or statically.
Sorting and FilteringEnable sorting and filtering of columns effortlessly.
PaginationImplement pagination to handle large datasets efficiently.
Row SelectionSupport single or multiple row selection with customizable modes.
Cell EditingEnable inline cell editing with customizable editor components.
Custom ComponentsIntegrate custom Angular components within cells for advanced functionality.
EventsEmit 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.