AvDataTable Component (AvoraUI)

AvDataTable is a powerful, customizable standalone Angular component that provides a feature-rich data table interface with advanced pagination, dynamic column rendering, and interactive row actions. It offers a flexible solution for displaying and managing tabular data with support for nested object properties, custom styling, and seamless integration with Angular Reactive Forms.

Features

• ✅ Advanced Pagination - Configurable page sizes and options.
• ✅ Dynamic Grid Layout - Automatic grid template generation based on column count.
• ✅ Nested Property Access - Support for dot notation (e.g., user.address.city).
• ✅ Array Handling - Automatic formatting and joining of array values.
• ✅ Interactive Actions - Configurable modify and delete buttons with customizable event handlers.
• ✅ Action Control - Individual control over button visibility and disabled states.
• ✅ Customizable Alignment - Left, center, or right alignment for headers and data.
• ✅ Dynamic Styling - Custom color support for table cells.
• ✅ Event-Driven Architecture - Emits events for modify, add, and remove operations.
• ✅ Auto-Adjustment - Automatic page recalculation when data changes or items are removed.
• ✅ Bidirectional Data Sync - Intelligent synchronization between internal and external data sources.
• ✅ Form Integration - Implements ControlValueAccessor for Reactive Forms compatibility.
• ✅ Material Premium UI - Integration with Angular Material components for a professional look.
• ✅ Change Detection Optimized - Efficient data reference updates to prevent unnecessary re-rendering.
• ✅ Null Safety - Graceful handling of null or undefined values with fallback display.

Dependencies

The component requires Angular Material. Ensure the following are available in your environment:

• @angular/material/card
• @angular/material/button
• @angular/material/icon
• @angular/material/paginator
• @angular/material/menu

Installation

1. Copy the component files into your project.
2. Import AvDataTable in your standalone component or module.
3. Add Angular Material if not already present:

   ng add @angular/material

API Reference

Input Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | TableHeaders | Headers[] | [] | Array of header configurations with labels and alignment. | | TableColumns | Columns[] | [] | Array of column definitions with fields, alignment, and colors. | | Data | any[] | [] | Data source for the table. | | PageSize | number | 5 | Initial number of rows per page. | | PageSizeOptions | number[] | [] | Available page size choices for the paginator. | | currentPage | number | 0 | Active page index. | | EnableActionColumn | boolean | false | Toggles the visibility of the action column. | | EnableButtonDelete | boolean | false | Toggles the delete action button. | | EnableButtonModify | boolean | false | Toggles the modify action button. | | DisableRemove | boolean | false | Prevents local item removal while still emitting events. | | DisableModify | boolean | false | Disables the modify button while still emitting events. |

Output Events

| Event | Payload Type | Description | |-------|--------------|-------------| | onModify | {index: number, modifiedItem: any, disabled: boolean} | Emits when the modify button is clicked. | | onItemRemoved | {index: number, dataSize: number, removedItem: any, disabled: boolean} | Emits when an item is removed via the delete button. | | onNewItemAdded | {index: number, dataSize: number} | Emitted when internal data size changes (e.g., via sync). |

Technical Implementation

• CSS Grid: Uses a dynamically calculated grid-template-columns for responsive row structure.
• Nested Property Resolution: Recursively traverses objects using dot notation for display.
• Data Sync: Uses efficient reference and length verification for performance and stability.
• Form Control: Implements NG_VALUE_ACCESSOR for seamless integration with ngModel and [formControl].

Usage Example

// Component
headers: Headers[] = [
  { label: 'Name', align: 'left' },
  { label: 'Role', align: 'center' }
];

columns: Columns[] = [
  { field: 'profile.name', align: 'left', color: '#4361ee' },
  { field: 'role', align: 'center' }
];

data = [
  { profile: { name: 'Dileesha' }, role: 'Developer' }
];

// Template
<av-data-table 
  [TableHeaders]="headers" 
  [TableColumns]="columns" 
  [Data]="data"
  [EnableActionColumn]="true"
  (onModify)="handleModify($event)">
</av-data-table>

Authorship

• Author: Dileesha Ekanayake
• Email: [email protected]
• Created: 2024
• Version: 0.0.7
• Responsibility: Design, implementation, and documentation of the data table component with Angular Material integration.

License

This project is licensed under the MIT License.