@avoraui/av-data-table 0.0.4 → 0.0.6

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+## [0.0.4] - 2025-07-24
+### Changed
+- Component selector updated from `aur-data-table` to `av-data-table`
+
+### ⚠️ BREAKING CHANGES
+- Please update your component usage:
+  ```html
+  <!-- OLD -->
+  <aur-data-table></aur-data-table>
+
+  <!-- NEW -->
+  <av-data-table></av-data-table>

package/README.md

@@ -1,125 +1,42 @@
 # AvDataTable Component (AvoraUI)
 
-A powerful, customizable Angular data table component with built-in pagination, event-driven actions, and reactive forms support. This component provides flexibility for users to implement custom business logic through event handlers rather than predefined CRUD operations.
+`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
 
-- ✅ **Pagination** - Built-in pagination with customizable page sizes
-- ✅ **Event-Driven Actions** - Customizable add, modify, and delete event handlers
-- ✅ **Reactive Forms Integration** - Implements `ControlValueAccessor`
-- ✅ **Flexible Column Configuration** - Support for nested object properties
-- ✅ **Customizable Styling** - Configurable alignment and colors
-- ✅ **Action Events** - Optional action buttons with customizable event handlers
-- ✅ **User-Controlled Operations** - Flexible event system for custom business logic
-- ✅ **Responsive Grid Layout** - CSS Grid-based responsive design
-- ✅ **Data Synchronization** - Automatic sync between internal and external data sources
+- ✅ **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
 
-This component requires the following Angular Material modules:
-
-```typescript
-import { MatCard } from "@angular/material/card";
-import { MatButton } from "@angular/material/button";
-import { MatIcon } from '@angular/material/icon';
-```
-```markdown
-🚨 Version 0.0.4 introduces a breaking change:
-Component selector has changed from `aur-data-table` to `av-data-table`.  
-Please update your templates accordingly.
-```
+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 to your Angular project
-2. Import the component in your module or standalone component
-3. Ensure you have Angular Material (for pagination) installed:
-
-```bash
-ng add @angular/material
-```
-
-## Basic Usage
-
-### 1. Import and Configure
-
-```typescript
-import { AvDataTable } from './path/to/av-data-table';
-
-@Component({
-  selector: 'app-example',
-  template: `
-    <av-data-table
-      [TableHeaders]="headers"
-      [TableColumns]="columns"
-      [Data]="tableData"
-      [PageSize]="10"
-      [PageSizeOptions]="[5, 10, 25, 50]"
-      [EnableActionColumn]="true"
-      [EnableButtonDelete]="true"
-      [EnableButtonModify]="true"
-      (onModify)="handleModify($event)"
-      (onItemRemoved)="handleRemove($event)"
-      (onNewItemAdded)="handleAdd($event)">
-    </av-data-table>
-  `
-})
-export class ExampleComponent {
-  // Component implementation
-}
-```
-
-### 2. Define Headers and Columns
-
-```typescript
-export interface Headers {
-  label: string;
-  align?: 'left' | 'center' | 'right';
-}
-
-export interface Columns {
-  field: string;
-  align?: 'left' | 'center' | 'right';
-  color?: string;
-}
-export class ExampleComponent {
-  headers: Headers[] = [
-    { label: 'Name', align: 'left' },
-    { label: 'Email', align: 'left' },
-    { label: 'Department', align: 'left' },
-    { label: 'Action', align: 'center' }
-  ];
-
-  columns: Columns[] = [
-    { field: 'name', align: 'left', color: '#3182ce' },
-    { field: 'email', align: 'left' },
-    { field: 'department.name', align: 'left' }, // Nested property
-  ];
-
-  tableData = [
-    { 
-      name: 'Kasun Perera', 
-      email: 'kasun.perera@company.lk', 
-      department: { name: 'Information Technology', code: 'IT' } 
-    },
-    { 
-      name: 'Nimali Fernando', 
-      email: 'nimali.fernando@company.lk', 
-      department: { name: 'Human Resources', code: 'HR' } 
-    },
-    { 
-      name: 'Rajitha Silva', 
-      email: 'rajitha.silva@company.lk', 
-      department: { name: 'Finance & Accounting', code: 'FIN' } 
-    },
-    { 
-      name: 'Chaminda Jayawardena', 
-      email: 'chaminda.j@company.lk', 
-      department: { name: 'Marketing & Sales', code: 'MKT' } 
-    }
-  ];
-}
-```
+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:
+   ```bash
+   ng add @angular/material
+   ```
 
 ## API Reference
 
@@ -127,191 +44,69 @@ export class ExampleComponent {
 
 | Property | Type | Default | Description |
 |----------|------|---------|-------------|
-| `TableHeaders` | `Headers[]` | `[]` | Array of header configurations |
-| `TableColumns` | `Columns[]` | `[]` | Array of column configurations |
-| `Data` | `any[]` | `[]` | Data source for the table |
-| `PageSize` | `number` | `5` | Number of items per page |
-| `PageSizeOptions` | `number[]` | `[]` | Available page size options |
-| `currentPage` | `number` | `0` | Current active page index |
-| `EnableActionColumn` | `boolean` | `false` | Show/hide action column |
-| `EnableButtonDelete` | `boolean` | `false` | Enable delete button in actions |
-| `EnableButtonModify` | `boolean` | `false` | Enable modify button in actions |
-| `DisableRemove` | `boolean` | `false` | Disable remove functionality |
-| `DisableModify` | `boolean` | `false` | Disable modify functionality |
+| `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 | Type | Description |
-|-------|------|-------------|
-| `onModify` | `EventEmitter<{index: number, modifiedItem: any, disabled: boolean}>` | Emitted when modify button is clicked - allows custom handling like opening edit forms, viewing details, etc. |
-| `onItemRemoved` | `EventEmitter<{index: number, dataSize: number, removedItem: any, disabled: boolean}>` | Emitted when delete button is clicked - allows custom removal logic, confirmations, API calls, etc. |
-| `onNewItemAdded` | `EventEmitter<{index: number, dataSize: number, removedItem: any}>` | Emitted when new item events occur - allows custom add item logic |
+| 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). |
 
-### Interfaces
+## Technical Implementation
 
-```typescript
-interface Headers {
-  label: string;
-  align?: 'left' | 'center' | 'right';
-}
+- **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]`.
 
-interface Columns {
-  field: string;
-  align?: 'left' | 'center' | 'right';
-  color?: string;
-}
-```
-
-## Advanced Usage
-
-### Nested Object Properties
-
-The component supports accessing nested object properties using dot notation:
+## Usage Example
 
 ```typescript
-columns: Columns[] = [
-  { field: 'employee.profile.firstName' },
-  { field: 'employee.contact.address.city' },
-  { field: 'employee.roles.name' }, // Will join array values with commas
-  { field: 'department.name' } // Access nested department name
+// Component
+headers: Headers[] = [
+  { label: 'Name', align: 'left' },
+  { label: 'Role', align: 'center' }
 ];
-```
 
-### Reactive Forms Integration
-
-The component implements `ControlValueAccessor`, making it compatible with Angular Reactive Forms:
-
-```typescript
-import { FormBuilder, FormGroup } from '@angular/forms';
-
-export class ExampleComponent {
-  form: FormGroup;
-
-  constructor(private fb: FormBuilder) {
-    this.form = this.fb.group({
-      tableData: [[]] // Initial empty array
-    });
-  }
-}
-```
-
-```html
-<form [formGroup]="form">
-  <av-data-table 
-    formControlName="tableData"
-    [TableHeaders]="headers"
-    [TableColumns]="columns">
-  </av-data-table>
-</form>
-```
-
-### Event Handling
-
-The component provides flexible event handlers that allow you to implement custom business logic:
-
-```typescript
-handleModify(event: {index: number, modifiedItem: any, disabled: boolean}) {
-  if (event.disabled) {
-    console.log('Modify action is disabled');
-    return;
-  }
-  
-  // Example: Open edit dialog with the selected row data
-  console.log('Modifying employee:', event.modifiedItem.name);
-  console.log('Employee data:', event.modifiedItem);
-  
-  // You can:
-  // - Open a modal/dialog for editing
-  // - Navigate to an edit page
-  // - Show detailed view
-  // - Perform any custom logic with the row data
-  this.openEditDialog(event.modifiedItem, event.index);
-}
-
-handleRemove(event: {index: number, dataSize: number, removedItem: any, disabled: boolean}) {
-  if (event.disabled) {
-    console.log('Remove action is disabled');
-    return;
-  }
-  
-  // Example: Custom confirmation and API call
-  const employee = event.removedItem;
-  const confirmed = confirm(`Are you sure you want to remove ${employee.name}?`);
-  
-  if (confirmed) {
-    // You can:
-    // - Make API calls to delete from server
-    // - Update other related data
-    // - Show success/error messages
-    // - Perform cleanup operations
-    console.log(`${employee.name} removed from ${employee.department.name}`);
-    console.log('Remaining employees:', event.dataSize);
-    
-    // Example API call
-    this.employeeService.deleteEmployee(employee.id).subscribe({
-      next: () => console.log('Successfully deleted from server'),
-      error: (err) => console.error('Deletion failed:', err)
-    });
-  }
-}
-
-handleAdd(event: {index: number, dataSize: number}) {
-  // Example: Trigger add new employee flow
-  console.log('Adding new employee...');
-  
-  // You can:
-  // - Open add employee dialog
-  // - Navigate to create page  
-  // - Show form modal
-  // - Perform any custom add logic
-  this.openAddEmployeeDialog();
-}
-```
-
-### Custom Styling
-
-The component uses CSS classes that you can override:
-
-```css
-/* Header alignment */
-.header-text-left { text-align: left; }
-.header-text-center { text-align: center; }
-.header-text-right { text-align: right; }
+columns: Columns[] = [
+  { field: 'profile.name', align: 'left', color: '#4361ee' },
+  { field: 'role', align: 'center' }
+];
 
-/* Data cell alignment */
-.text-left { text-align: left; }
-.text-center { text-align: center; }
-.text-right { text-align: right; }
+data = [
+  { profile: { name: 'Dileesha' }, role: 'Developer' }
+];
 
-/* Grid layout customization */
-.table-grid {
-  display: grid;
-  gap: 1rem;
-  /* grid-template-columns is set dynamically */
-}
+// Template
+<av-data-table 
+  [TableHeaders]="headers" 
+  [TableColumns]="columns" 
+  [Data]="data"
+  [EnableActionColumn]="true"
+  (onModify)="handleModify($event)">
+</av-data-table>
 ```
 
-## Requirements
-
-- Angular 17+
-- Angular Material (for pagination component)
-- Modern browser with CSS Grid support
+## Authorship
 
-## Browser Support
-
-- Chrome/Edge 57+
-- Firefox 52+
-- Safari 10.1+
+- **Author**: Dileesha Ekanayake
+- **Email**: dileesha.r.ekanayake@gmail.com
+- **Created**: 2024
+- **Version**: 0.0.6
+- **Responsibility**: Design, implementation, and documentation of the data table component with Angular Material integration.
 
 ## License
 
-This project is licensed under the MIT License - see the LICENSE file for details.
-
-## Changelog
-
-### v0.0.4
-- Initial release
-- Basic table functionality with pagination
-- CRUD operations support
-- Reactive forms integration
-- Nested object property access
+This project is licensed under the MIT License.

package/ng-package.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/av-data-table",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "allowedNonPeerDependencies": [
+    "@angular/material"
+  ]
+}

package/package.json

@@ -1,35 +1,23 @@
-{
-  "name": "@avoraui/av-data-table",
-  "version": "0.0.4",
-  "description": "A customizable Angular Data Table component",
-  "keywords": [
-    "angular",
-    "table",
-    "data-table"
-  ],
-  "author": "Dileesha Ekanayake",
-  "license": "MIT",
-  "peerDependencies": {
-    "@angular/common": "^20.1.0",
-    "@angular/core": "^20.1.0"
-  },
-  "dependencies": {
-    "@angular/material": "^20.1.2",
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false,
-  "publishConfig": {
-    "access": "public"
-  },
-  "module": "fesm2022/avoraui-av-data-table.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "default": "./fesm2022/avoraui-av-data-table.mjs"
-    }
-  }
+{
+  "name": "@avoraui/av-data-table",
+  "version": "0.0.6",
+  "description": "A customizable Angular Data Table component",
+  "keywords": [
+    "angular",
+    "table",
+    "data-table"
+  ],
+  "author": "Dileesha Ekanayake",
+  "license": "MIT",
+  "peerDependencies": {
+    "@angular/common": "^20.1.0",
+    "@angular/core": "^20.1.0"
+  },
+  "dependencies": {
+    "@angular/material": "^20.1.2"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  }
 }