{"_id":"@avoraui/av-data-table","_rev":"12-8db0a4b98c90ccd48a68e009059af8be","name":"@avoraui/av-data-table","dist-tags":{"latest":"0.0.7"},"versions":{"0.0.2":{"name":"@avoraui/av-data-table","version":"0.0.2","keywords":["angular","table","data-table"],"author":{"name":"Dileesha Ekanayake"},"license":"MIT","_id":"@avoraui/av-data-table@0.0.2","maintainers":[{"name":"avoraui","email":"dileesha65@gmail.com"}],"dist":{"shasum":"fca326240b2fc2e745efcd530ad28287404f7771","tarball":"https://registry.npmjs.org/@avoraui/av-data-table/-/av-data-table-0.0.2.tgz","fileCount":6,"integrity":"sha512-4JPtqqA2Dk1oP6RkPLesv7hNYdAntCKoiDZgMcodINxF2vEj5FOSPSMCXTuZw8FX1B/9MT6eiHGv+1ysTeG78Q==","signatures":[{"sig":"MEUCIQCKh6S71yE84yVh1UEzVLapW7OkyS1o1dtSGbT0MDOFgwIgXiZh6nxlrRFI8pmD6OwiyLd9I7H0GAShZnp80nHpPJE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":99226},"module":"fesm2022/avoraui-av-data-table.mjs","exports":{".":{"types":"./index.d.ts","default":"./fesm2022/avoraui-av-data-table.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"580cd1a8bbb253d89d483fab183305e9412ff78a","typings":"index.d.ts","_npmUser":{"name":"avoraui","email":"dileesha65@gmail.com"},"_npmVersion":"10.9.0","description":"A customizable Angular Data Table component","directories":{},"sideEffects":false,"_nodeVersion":"22.12.0","dependencies":{"tslib":"^2.3.0","@angular/material":"^20.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^20.1.0","@angular/common":"^20.1.0"},"_npmOperationalInternal":{"tmp":"tmp/av-data-table_0.0.2_1753277620921_0.7135090248160372","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@avoraui/av-data-table","version":"0.0.3","keywords":["angular","table","data-table"],"author":{"name":"Dileesha Ekanayake"},"license":"MIT","_id":"@avoraui/av-data-table@0.0.3","maintainers":[{"name":"avoraui","email":"dileesha65@gmail.com"}],"dist":{"shasum":"55982d0e4537297aa23f4c405627e9f52c289dbb","tarball":"https://registry.npmjs.org/@avoraui/av-data-table/-/av-data-table-0.0.3.tgz","fileCount":6,"integrity":"sha512-j1GNn4lbhg6bnu1SS5psOEsq+ohj4ai9Wqpq/oXb7+XFlAz/A/MNv5rui+EHKhZPrP1E99YapFjo+inh9vwysA==","signatures":[{"sig":"MEQCIDrf014epctSHRQgYoHQxLSKa6Lia9ysvJ1gRSvSe4mjAiArovLGW9G41daq3RP3Bjs1dROv93K2+vO9GspTY2zTsw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":99212},"module":"fesm2022/avoraui-av-data-table.mjs","exports":{".":{"types":"./index.d.ts","default":"./fesm2022/avoraui-av-data-table.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"ea5720c3abda5c26d28852b2e8dd1d85902d3314","typings":"index.d.ts","_npmUser":{"name":"avoraui","email":"dileesha65@gmail.com"},"_npmVersion":"10.9.0","description":"A customizable Angular Data Table component","directories":{},"sideEffects":false,"_nodeVersion":"22.12.0","dependencies":{"tslib":"^2.3.0","@angular/material":"^20.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^20.1.0","@angular/common":"^20.1.0"},"_npmOperationalInternal":{"tmp":"tmp/av-data-table_0.0.3_1753341835039_0.45811421994411217","host":"s3://npm-registry-packages-npm-production"}},"0.0.4":{"name":"@avoraui/av-data-table","version":"0.0.4","keywords":["angular","table","data-table"],"author":{"name":"Dileesha Ekanayake"},"license":"MIT","_id":"@avoraui/av-data-table@0.0.4","maintainers":[{"name":"avoraui","email":"dileesha65@gmail.com"}],"dist":{"shasum":"017f332e7c191eaafe0a303d93dad2afc4372162","tarball":"https://registry.npmjs.org/@avoraui/av-data-table/-/av-data-table-0.0.4.tgz","fileCount":7,"integrity":"sha512-Y4u+x/9fjKXjfr8Pxwo99Gv6Yxnk5FVYFIt89f4H7L1EVUKp8Hbx+ib337dFQbXum3YiO5wh6gISNhOpnn/xGA==","signatures":[{"sig":"MEUCIQDKZzg/bg83SrRIZw+QfkYq/FVNmD9iuHttPtdWpkjYcwIgNhBZ3iyk9nUjlbotAP+xRSaMBkGd9vb3g87llvFbnVE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":226979},"module":"fesm2022/avoraui-av-data-table.mjs","exports":{".":{"types":"./index.d.ts","default":"./fesm2022/avoraui-av-data-table.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"ea5720c3abda5c26d28852b2e8dd1d85902d3314","typings":"index.d.ts","_npmUser":{"name":"avoraui","email":"dileesha65@gmail.com"},"_npmVersion":"10.9.0","description":"A customizable Angular Data Table component","directories":{},"sideEffects":false,"_nodeVersion":"22.12.0","dependencies":{"tslib":"^2.3.0","@angular/material":"^20.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^20.1.0","@angular/common":"^20.1.0"},"_npmOperationalInternal":{"tmp":"tmp/av-data-table_0.0.4_1753342805854_0.4552258408662475","host":"s3://npm-registry-packages-npm-production"}},"0.0.5":{"name":"@avoraui/av-data-table","version":"0.0.5","keywords":["angular","table","data-table"],"author":{"name":"Dileesha Ekanayake"},"license":"MIT","_id":"@avoraui/av-data-table@0.0.5","maintainers":[{"name":"avoraui","email":"dileesha65@gmail.com"}],"dist":{"shasum":"42447e6c09b5e954b3cc8ee25b9be6506d24f4a3","tarball":"https://registry.npmjs.org/@avoraui/av-data-table/-/av-data-table-0.0.5.tgz","fileCount":6,"integrity":"sha512-L8bCdIFm2lCK14oPSj6IxVsefeGSdx55VUuk2PO7JPfMyd6tzENbteqAnA+Kjs7TuFVUVNvCFddQ/ndxYlcLiQ==","signatures":[{"sig":"MEQCIFinmjhS+mujy12CWIvPAnILjH/cu0ac9DUF8xteDDAyAiBhB0SuMQ7SM8SisuW2f6TC0o8iCTgfqTSNO1Sas0GYoQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":99498},"module":"fesm2022/avoraui-av-data-table.mjs","exports":{".":{"types":"./index.d.ts","default":"./fesm2022/avoraui-av-data-table.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"fa5b28e4453e891f9295a417d65fe917753f837f","typings":"index.d.ts","_npmUser":{"name":"avoraui","email":"dileesha65@gmail.com"},"_npmVersion":"10.9.0","description":"A customizable Angular Data Table component","directories":{},"sideEffects":false,"_nodeVersion":"22.12.0","dependencies":{"tslib":"^2.3.0","@angular/material":"^20.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^20.1.0","@angular/common":"^20.1.0"},"_npmOperationalInternal":{"tmp":"tmp/av-data-table_0.0.5_1753430618446_0.9734476778328822","host":"s3://npm-registry-packages-npm-production"}},"0.0.6":{"name":"@avoraui/av-data-table","version":"0.0.6","keywords":["angular","table","data-table"],"author":{"name":"Dileesha Ekanayake"},"license":"MIT","_id":"@avoraui/av-data-table@0.0.6","maintainers":[{"name":"avoraui","email":"dileesha65@gmail.com"}],"dist":{"shasum":"35dfb044b65b2ce0ac83a2ca063cefb449d16564","tarball":"https://registry.npmjs.org/@avoraui/av-data-table/-/av-data-table-0.0.6.tgz","fileCount":13,"integrity":"sha512-OMvsLLyyWAiIew7PHX5C+8HIBOw/RJ1eINHoGvuJrOogl4dzgsHKTROW9aIFFSRCH5mpvPlOLZ9L7D6L90ZtRA==","signatures":[{"sig":"MEUCIQCjaTpU/uNhjtXn/2Q1osImnKImCVG/CORGPl5UJTnjVAIgJNdqFQvygO/7IUPaRxMcZQ1kEF+is5ouE+jrQoep2vE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":55547},"gitHead":"eb92148b8907cb2bd1513bb699f611304cc0bce6","_npmUser":{"name":"avoraui","email":"dileesha65@gmail.com"},"_npmVersion":"11.5.2","description":"A customizable Angular Data Table component","directories":{},"sideEffects":false,"_nodeVersion":"22.12.0","dependencies":{"@angular/material":"^20.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^20.1.0","@angular/common":"^20.1.0"},"_npmOperationalInternal":{"tmp":"tmp/av-data-table_0.0.6_1771174736152_0.04251522206061087","host":"s3://npm-registry-packages-npm-production"}},"0.0.7":{"name":"@avoraui/av-data-table","version":"0.0.7","description":"A customizable Angular Data Table component","keywords":["angular","table","data-table"],"author":{"name":"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"}},"_id":"@avoraui/av-data-table@0.0.7","gitHead":"eb92148b8907cb2bd1513bb699f611304cc0bce6","_nodeVersion":"22.12.0","_npmVersion":"11.5.2","dist":{"integrity":"sha512-zRnR5rQudS+Y4DMGSdq76dCtSz16DVejGdjkoy6Nb7x0diG3bTLEPfxiFUbkC8bP6J25rG18SzXCQ3jzDS3Ahw==","shasum":"925bd29db6627e9dcc73e4a4fac1b214db64ff74","tarball":"https://registry.npmjs.org/@avoraui/av-data-table/-/av-data-table-0.0.7.tgz","fileCount":6,"unpackedSize":167440,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIHtTBgtE1M4bOMZIyd7JyOBC9z/qWDndGGZsPE7RqqXPAiEA6qbJecEuXewTXxzqSBZafXnQGOmByD+8rG9+L10sXG0="}]},"_npmUser":{"name":"avoraui","email":"dileesha65@gmail.com"},"directories":{},"maintainers":[{"name":"avoraui","email":"dileesha65@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/av-data-table_0.0.7_1771178064998_0.29676146844509654"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-23T13:33:40.837Z","modified":"2026-02-15T17:54:25.291Z","0.0.1":"2025-07-23T13:09:00.364Z","0.1.0":"2025-07-23T13:14:59.978Z","0.0.2":"2025-07-23T13:33:41.123Z","0.0.3":"2025-07-24T07:23:55.233Z","0.0.4":"2025-07-24T07:40:06.041Z","0.0.5":"2025-07-25T08:03:38.604Z","0.0.6":"2026-02-15T16:58:56.307Z","0.0.7":"2026-02-15T17:54:25.166Z"},"author":{"name":"Dileesha Ekanayake"},"license":"MIT","keywords":["angular","table","data-table"],"description":"A customizable Angular Data Table component","maintainers":[{"name":"avoraui","email":"dileesha65@gmail.com"}],"readme":"# AvDataTable Component (AvoraUI)\r\n\r\n`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.\r\n\r\n## Features\r\n\r\n- ✅ **Advanced Pagination** - Configurable page sizes and options.\r\n- ✅ **Dynamic Grid Layout** - Automatic grid template generation based on column count.\r\n- ✅ **Nested Property Access** - Support for dot notation (e.g., `user.address.city`).\r\n- ✅ **Array Handling** - Automatic formatting and joining of array values.\r\n- ✅ **Interactive Actions** - Configurable modify and delete buttons with customizable event handlers.\r\n- ✅ **Action Control** - Individual control over button visibility and disabled states.\r\n- ✅ **Customizable Alignment** - Left, center, or right alignment for headers and data.\r\n- ✅ **Dynamic Styling** - Custom color support for table cells.\r\n- ✅ **Event-Driven Architecture** - Emits events for modify, add, and remove operations.\r\n- ✅ **Auto-Adjustment** - Automatic page recalculation when data changes or items are removed.\r\n- ✅ **Bidirectional Data Sync** - Intelligent synchronization between internal and external data sources.\r\n- ✅ **Form Integration** - Implements `ControlValueAccessor` for Reactive Forms compatibility.\r\n- ✅ **Material Premium UI** - Integration with Angular Material components for a professional look.\r\n- ✅ **Change Detection Optimized** - Efficient data reference updates to prevent unnecessary re-rendering.\r\n- ✅ **Null Safety** - Graceful handling of null or undefined values with fallback display.\r\n\r\n## Dependencies\r\n\r\nThe component requires Angular Material. Ensure the following are available in your environment:\r\n- `@angular/material/card`\r\n- `@angular/material/button`\r\n- `@angular/material/icon`\r\n- `@angular/material/paginator`\r\n- `@angular/material/menu`\r\n\r\n## Installation\r\n\r\n1. Copy the component files into your project.\r\n2. Import `AvDataTable` in your standalone component or module.\r\n3. Add Angular Material if not already present:\r\n ```bash\r\n ng add @angular/material\r\n ```\r\n\r\n## API Reference\r\n\r\n### Input Properties\r\n\r\n| Property | Type | Default | Description |\r\n|----------|------|---------|-------------|\r\n| `TableHeaders` | `Headers[]` | `[]` | Array of header configurations with labels and alignment. |\r\n| `TableColumns` | `Columns[]` | `[]` | Array of column definitions with fields, alignment, and colors. |\r\n| `Data` | `any[]` | `[]` | Data source for the table. |\r\n| `PageSize` | `number` | `5` | Initial number of rows per page. |\r\n| `PageSizeOptions` | `number[]` | `[]` | Available page size choices for the paginator. |\r\n| `currentPage` | `number` | `0` | Active page index. |\r\n| `EnableActionColumn` | `boolean` | `false` | Toggles the visibility of the action column. |\r\n| `EnableButtonDelete` | `boolean` | `false` | Toggles the delete action button. |\r\n| `EnableButtonModify` | `boolean` | `false` | Toggles the modify action button. |\r\n| `DisableRemove` | `boolean` | `false` | Prevents local item removal while still emitting events. |\r\n| `DisableModify` | `boolean` | `false` | Disables the modify button while still emitting events. |\r\n\r\n### Output Events\r\n\r\n| Event | Payload Type | Description |\r\n|-------|--------------|-------------|\r\n| `onModify` | `{index: number, modifiedItem: any, disabled: boolean}` | Emits when the modify button is clicked. |\r\n| `onItemRemoved` | `{index: number, dataSize: number, removedItem: any, disabled: boolean}` | Emits when an item is removed via the delete button. |\r\n| `onNewItemAdded` | `{index: number, dataSize: number}` | Emitted when internal data size changes (e.g., via sync). |\r\n\r\n## Technical Implementation\r\n\r\n- **CSS Grid:** Uses a dynamically calculated `grid-template-columns` for responsive row structure.\r\n- **Nested Property Resolution:** Recursively traverses objects using dot notation for display.\r\n- **Data Sync:** Uses efficient reference and length verification for performance and stability.\r\n- **Form Control:** Implements `NG_VALUE_ACCESSOR` for seamless integration with `ngModel` and `[formControl]`.\r\n\r\n## Usage Example\r\n\r\n```typescript\r\n// Component\r\nheaders: Headers[] = [\r\n { label: 'Name', align: 'left' },\r\n { label: 'Role', align: 'center' }\r\n];\r\n\r\ncolumns: Columns[] = [\r\n { field: 'profile.name', align: 'left', color: '#4361ee' },\r\n { field: 'role', align: 'center' }\r\n];\r\n\r\ndata = [\r\n { profile: { name: 'Dileesha' }, role: 'Developer' }\r\n];\r\n\r\n// Template\r\n\r\n\r\n```\r\n\r\n## Authorship\r\n\r\n- **Author**: Dileesha Ekanayake\r\n- **Email**: dileesha.r.ekanayake@gmail.com\r\n- **Created**: 2024\r\n- **Version**: 0.0.7\r\n- **Responsibility**: Design, implementation, and documentation of the data table component with Angular Material integration.\r\n\r\n## License\r\n\r\nThis project is licensed under the MIT License.\r\n","readmeFilename":"README.md"}