ng-dynamic-datatable 0.0.0

package/.editorconfig

@@ -0,0 +1,17 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+ij_typescript_use_double_quotes = false
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

package/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}

package/.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}

package/.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}

package/README.md

@@ -0,0 +1,59 @@
+# NgDynamicDatatable
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.27.
+
+## Development server
+
+To start a local development server, run:
+
+```bash
+ng serve
+```
+
+Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the project run:
+
+```bash
+ng build
+```
+
+This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/angular.json

@@ -0,0 +1,44 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "cli": {
+    "packageManager": "npm",
+    "analytics": "b83209c5-de58-447d-b95e-ff75c77b7196"
+  },
+  "newProjectRoot": "projects",
+  "projects": {
+    "dynamic-datatable": {
+      "projectType": "library",
+      "root": "projects/dynamic-datatable",
+      "sourceRoot": "projects/dynamic-datatable/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "projects/dynamic-datatable/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/dynamic-datatable/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/dynamic-datatable/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "tsConfig": "projects/dynamic-datatable/tsconfig.spec.json",
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ]
+          }
+        }
+      }
+    }
+  }
+}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "ng-dynamic-datatable",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": false,
+  "dependencies": {
+    "@angular/common": "^19.2.0",
+    "@angular/compiler": "^19.2.0",
+    "@angular/core": "^19.2.0",
+    "@angular/forms": "^19.2.0",
+    "@angular/platform-browser": "^19.2.0",
+    "@angular/platform-browser-dynamic": "^19.2.0",
+    "@angular/router": "^19.2.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.15.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^19.2.27",
+    "@angular/cli": "^19.2.27",
+    "@angular/compiler-cli": "^19.2.0",
+    "@types/jasmine": "~5.1.0",
+    "jasmine-core": "~5.6.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "ng-packagr": "^19.2.0",
+    "typescript": "~5.7.2"
+  }
+}

package/projects/dynamic-datatable/README.md

@@ -0,0 +1,134 @@
+# dynamic-datatable
+
+Config-driven Angular DataTable library that accepts columns, JSON data, and feature configuration.
+
+## Features
+
+- Dynamic columns and data inputs
+- Sorting (column-wise)
+- Searching across visible columns
+- Pagination and rows-per-page selection
+- Row selection and select-all
+- Row action events
+- CSV and Excel export
+
+## Install
+
+```bash
+npm install dynamic-datatable
+```
+
+## Usage
+
+Import the standalone component directly in your consuming component:
+
+```ts
+import { Component } from '@angular/core';
+import {
+   DynamicDatatableComponent,
+   DynamicDataTableConfig,
+   DataTableColumn
+} from 'dynamic-datatable';
+
+@Component({
+   selector: 'app-users',
+   standalone: true,
+   imports: [DynamicDatatableComponent],
+   template: `
+      <lib-dynamic-datatable
+         [config]="config"
+         [columns]="columns"
+         [data]="rows"
+         (actionSelected)="onAction($event)"
+         (selectionChange)="onSelection($event)"
+      />
+   `
+})
+export class UsersComponent {
+   rows = [
+      { id: 1, name: 'Aarav Sharma', email: 'aarav.sharma@company.in', salary: '19366.53', status: 'Resigned' },
+      { id: 2, name: 'Ananya Patel', email: 'ananya.patel@company.in', salary: '10745.32', status: 'Applied' }
+   ];
+
+   columns: DataTableColumn[] = [
+      { key: 'name', label: 'Name', sortable: true, width: '220px' },
+      { key: 'email', label: 'Email', sortable: true, width: '260px' },
+      { key: 'salary', label: 'Salary', sortable: true, width: '120px' },
+      {
+         key: 'status',
+         label: 'Status',
+         sortable: true,
+         render: (row) => `<span>${row['status']}</span>`
+      }
+   ];
+
+   config: DynamicDataTableConfig = {
+      title: 'Users',
+      features: {
+         export: true,
+         sorting: true,
+         searching: true,
+         pagination: true,
+         rowsPerPage: true,
+         actions: true,
+         checkboxSelection: true
+      },
+      rowsPerPageOptions: [5, 10, 25],
+      defaultRowsPerPage: 10,
+      exportOptions: { fileName: 'users-export', formats: ['csv', 'excel'] },
+      actions: [
+         { label: 'Details', id: 'details' },
+         { label: 'Delete', id: 'delete', danger: true }
+      ]
+   };
+
+   onAction(event: unknown): void {
+      console.log(event);
+   }
+
+   onSelection(rows: unknown[]): void {
+      console.log(rows);
+   }
+}
+```
+
+## Component API
+
+Inputs:
+
+- `config: DynamicDataTableConfig`
+- `columns: DataTableColumn[]`
+- `data: Record<string, unknown>[]`
+
+Outputs:
+
+- `actionSelected`
+- `selectionChange`
+- `sortChange`
+- `pageChange`
+- `exportTriggered`
+
+Public methods:
+
+- `refresh()`
+- `updateData(newData)`
+- `updateConfig(newConfig)`
+- `getSelectedRows()`
+- `clearSelection()`
+
+## Build
+
+```bash
+ng build dynamic-datatable
+```
+
+Artifacts are generated in `dist/dynamic-datatable`.
+
+## Publish to npm
+
+```bash
+cd dist/dynamic-datatable
+npm publish --access public
+```
+
+Before publishing, ensure the package name in `projects/dynamic-datatable/package.json` is unique on npm.

package/projects/dynamic-datatable/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/dynamic-datatable",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/projects/dynamic-datatable/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "dynamic-datatable",
+  "version": "0.0.1",
+  "description": "Config-driven Angular DataTable library with sorting, searching, pagination, selection, and export.",
+  "keywords": [
+    "angular",
+    "datatable",
+    "table",
+    "grid",
+    "sorting",
+    "pagination",
+    "search"
+  ],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "@angular/common": "^19.2.0",
+    "@angular/core": "^19.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

package/projects/dynamic-datatable/src/lib/dynamic-datatable.component.html

@@ -0,0 +1,137 @@
+<div class="ndt-card">
+  <div class="ndt-header">
+    <h3 class="ndt-title">{{ mergedConfig.title }}</h3>
+  </div>
+
+  <div class="ndt-toolbar">
+    <div class="ndt-left-tools">
+      <ng-container *ngIf="isFeatureOn('export')">
+        <button class="ndt-btn" type="button" (click)="exportCSV()" *ngIf="isExportFormatEnabled('csv')">
+          Export CSV
+        </button>
+        <button class="ndt-btn" type="button" (click)="exportExcel()" *ngIf="isExportFormatEnabled('excel')">
+          Export Excel
+        </button>
+      </ng-container>
+
+      <label class="ndt-inline-label" *ngIf="isFeatureOn('rowsPerPage') && isFeatureOn('pagination')">
+        Rows per page:
+        <select [value]="rowsPerPage" (change)="onRowsPerPageChange($event)">
+          <option *ngFor="let option of mergedConfig.rowsPerPageOptions || []" [value]="option">{{ option }}</option>
+        </select>
+      </label>
+    </div>
+
+    <div class="ndt-right-tools" *ngIf="isFeatureOn('searching')">
+      <input
+        type="search"
+        placeholder="Search records"
+        [value]="searchTerm"
+        (input)="onSearchInput($event)"
+      />
+    </div>
+  </div>
+
+  <div class="ndt-table-wrap">
+    <table class="ndt-table">
+      <colgroup>
+        <col *ngIf="isFeatureOn('checkboxSelection')" style="width: 44px" />
+        <col *ngFor="let column of mergedColumns" [style.width]="toColumnWidth(column.width)" />
+        <col *ngIf="isFeatureOn('actions')" style="width: 78px" />
+      </colgroup>
+
+      <thead>
+        <tr>
+          <th *ngIf="isFeatureOn('checkboxSelection')">
+            <input
+              type="checkbox"
+              [checked]="isCurrentPageFullySelected()"
+              (change)="toggleSelectAllCurrentPage($event)"
+            />
+          </th>
+          <th
+            *ngFor="let column of mergedColumns"
+            [class.ndt-sortable]="isFeatureOn('sorting') && !!column.sortable"
+            (click)="toggleSort(column)"
+          >
+            <span class="ndt-th-content">
+              <span class="ndt-th-label">{{ column.label }}</span>
+              <span class="ndt-sort-indicator" *ngIf="isFeatureOn('sorting') && column.sortable">
+                {{ getSortIndicator(column.key.toString()) }}
+              </span>
+            </span>
+          </th>
+          <th *ngIf="isFeatureOn('actions')">Actions</th>
+        </tr>
+      </thead>
+
+      <tbody>
+        <tr *ngIf="!pagedRows.length">
+          <td [attr.colspan]="getColumnCount()" class="ndt-empty">No records found.</td>
+        </tr>
+
+        <tr *ngFor="let row of pagedRows; let rowIndex = index" [class.ndt-selected]="isRowSelected(row.id)">
+          <td *ngIf="isFeatureOn('checkboxSelection')">
+            <input
+              type="checkbox"
+              [checked]="isRowSelected(row.id)"
+              (change)="toggleRowSelection(row, $event)"
+            />
+          </td>
+
+          <td *ngFor="let column of mergedColumns" [innerHTML]="getRenderedCell(row.data, column)"></td>
+
+          <td *ngIf="isFeatureOn('actions')" class="ndt-actions-cell">
+            <div class="ndt-dropdown" (click)="$event.stopPropagation()">
+              <button
+                type="button"
+                class="ndt-actions-btn"
+                (click)="toggleActionMenu(row.id, $event)"
+                [attr.aria-expanded]="isActionMenuOpen(row.id)"
+              >
+                <span class="ndt-dots">...</span>
+              </button>
+
+              <ul class="ndt-dropdown-menu" *ngIf="isActionMenuOpen(row.id)">
+                <li *ngFor="let action of mergedConfig.actions || []; let i = index">
+                  <button
+                    type="button"
+                    class="ndt-dropdown-item"
+                    [class.ndt-danger]="!!action.danger"
+                    (click)="onActionItemClick(i, row)"
+                  >
+                    <i *ngIf="action.icon" [class]="action.icon"></i>
+                    <span>{{ action.label }}</span>
+                  </button>
+                </li>
+              </ul>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <div class="ndt-footer">
+    <div>
+      {{ selectedRows.size }} selected
+    </div>
+
+    <div>
+      Showing {{ getStartEntry() }} to {{ getEndEntry() }} of {{ filteredRows.length }} entries
+    </div>
+
+    <div class="ndt-pagination" *ngIf="isFeatureOn('pagination') && totalPages > 1">
+      <button type="button" (click)="goToPage(currentPage - 1)" [disabled]="currentPage <= 1">Prev</button>
+      <button
+        type="button"
+        *ngFor="let page of getPaginationPages()"
+        [class.active]="page === currentPage"
+        (click)="goToPage(page)"
+      >
+        {{ page }}
+      </button>
+      <button type="button" (click)="goToPage(currentPage + 1)" [disabled]="currentPage >= totalPages">Next</button>
+    </div>
+  </div>
+</div>