ng-dynamic-datatable 0.0.0 → 0.0.2

package/lib/dynamic-datatable.component.d.ts

@@ -0,0 +1,83 @@
+import { EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import { DataTableActionEvent, DataTableColumn, DataTableExportEvent, DynamicDataTableConfig } from './models';
+import { InternalSortState } from './dynamic-datatable.types';
+import * as i0 from "@angular/core";
+type RowData = Record<string, unknown>;
+interface InternalRow<T extends RowData = RowData> {
+    id: string;
+    data: T;
+}
+export declare class DynamicDatatableComponent implements OnChanges {
+    config: DynamicDataTableConfig;
+    columns: DataTableColumn<RowData>[];
+    data: RowData[];
+    readonly actionSelected: EventEmitter<DataTableActionEvent<RowData>>;
+    readonly selectionChange: EventEmitter<RowData[]>;
+    readonly sortChange: EventEmitter<InternalSortState>;
+    readonly pageChange: EventEmitter<number>;
+    readonly exportTriggered: EventEmitter<DataTableExportEvent<RowData>>;
+    mergedConfig: DynamicDataTableConfig<RowData>;
+    mergedColumns: DataTableColumn<RowData>[];
+    private allRows;
+    filteredRows: InternalRow<RowData>[];
+    pagedRows: InternalRow<RowData>[];
+    searchTerm: string;
+    currentPage: number;
+    rowsPerPage: number;
+    totalPages: number;
+    sortState: InternalSortState;
+    selectedRows: Set<string>;
+    openActionMenuRowId: string | null;
+    isExportMenuOpen: boolean;
+    ngOnChanges(_changes: SimpleChanges): void;
+    refresh(): void;
+    updateData(newData: RowData[]): void;
+    updateConfig(newConfig: DynamicDataTableConfig<RowData>): void;
+    getSelectedRows(): RowData[];
+    clearSelection(): void;
+    isFeatureOn(feature: keyof NonNullable<DynamicDataTableConfig['features']>): boolean;
+    isExportFormatEnabled(format: 'csv' | 'excel'): boolean;
+    onSearchInput(event: Event): void;
+    onRowsPerPageChange(event: Event): void;
+    toggleSort(column: DataTableColumn<RowData>): void;
+    getSortIconClass(columnKey: string): string;
+    isSortColumn(columnKey: string): boolean;
+    goToPage(page: number): void;
+    getPaginationPages(): number[];
+    isRowSelected(rowId: string): boolean;
+    toggleRowSelection(row: InternalRow<RowData>, event: Event): void;
+    toggleSelectAllCurrentPage(event: Event): void;
+    isCurrentPageFullySelected(): boolean;
+    toggleActionMenu(rowId: string, event: Event): void;
+    closeActionMenu(): void;
+    toggleExportMenu(event: Event): void;
+    isActionMenuOpen(rowId: string): boolean;
+    onActionItemClick(actionIndex: number, row: InternalRow<RowData>): void;
+    exportCSV(): void;
+    exportExcel(): void;
+    getRenderedCell(row: RowData, column: DataTableColumn<RowData>): string;
+    toColumnWidth(width: string | number | undefined): string;
+    getColumnCount(): number;
+    getStartEntry(): number;
+    getEndEntry(): number;
+    private applyConfig;
+    private normalizeRows;
+    private applyFiltersSortAndPagination;
+    private updatePagedRowsOnly;
+    private getCellTextValue;
+    private compareValues;
+    private parseStrictNumber;
+    private parseDateValue;
+    private getRowsForExport;
+    private getExportFileName;
+    private downloadFile;
+    private escapeCsv;
+    private stripHtml;
+    private escapeHtml;
+    private getInitialRowsPerPage;
+    private emitSelection;
+    closeMenus(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DynamicDatatableComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DynamicDatatableComponent, "lib-dynamic-datatable", never, { "config": { "alias": "config"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "data": { "alias": "data"; "required": false; }; }, { "actionSelected": "actionSelected"; "selectionChange": "selectionChange"; "sortChange": "sortChange"; "pageChange": "pageChange"; "exportTriggered": "exportTriggered"; }, never, never, true, never>;
+}
+export {};

package/lib/dynamic-datatable.types.d.ts

@@ -0,0 +1,4 @@
+export interface InternalSortState {
+    key: string | null;
+    direction: 'asc' | 'desc';
+}

package/lib/models.d.ts

@@ -0,0 +1,45 @@
+export type DataTableExportFormat = 'csv' | 'excel';
+export interface DataTableFeatureConfig {
+    export?: boolean;
+    sorting?: boolean;
+    searching?: boolean;
+    pagination?: boolean;
+    rowsPerPage?: boolean;
+    actions?: boolean;
+    checkboxSelection?: boolean;
+}
+export interface DataTableExportOptions {
+    fileName?: string;
+    formats?: DataTableExportFormat[];
+}
+export interface DataTableColumn<T extends Record<string, unknown> = Record<string, unknown>> {
+    key: keyof T | string;
+    label: string;
+    sortable?: boolean;
+    width?: string | number;
+    render?: (row: T) => string;
+}
+export interface DataTableAction<T extends Record<string, unknown> = Record<string, unknown>> {
+    label: string;
+    icon?: string;
+    danger?: boolean;
+    id?: string;
+}
+export interface DynamicDataTableConfig<T extends Record<string, unknown> = Record<string, unknown>> {
+    title?: string;
+    features?: DataTableFeatureConfig;
+    rowsPerPageOptions?: number[];
+    defaultRowsPerPage?: number;
+    exportOptions?: DataTableExportOptions;
+    columns?: DataTableColumn<T>[];
+    actions?: DataTableAction<T>[];
+}
+export interface DataTableActionEvent<T extends Record<string, unknown> = Record<string, unknown>> {
+    action: DataTableAction<T>;
+    row: T;
+    rowIndex: number;
+}
+export interface DataTableExportEvent<T extends Record<string, unknown> = Record<string, unknown>> {
+    format: DataTableExportFormat;
+    rows: T[];
+}

package/package.json

@@ -1,38 +1,35 @@
-{
-  "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"
-  }
-}
+{
+  "name": "ng-dynamic-datatable",
+  "version": "0.0.2",
+  "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,
+  "module": "fesm2022/ng-dynamic-datatable.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/ng-dynamic-datatable.mjs"
+    }
+  }
+}

package/{projects/dynamic-datatable/src/public-api.ts → public-api.d.ts}

@@ -1,6 +1,2 @@
-/*
- * Public API Surface of dynamic-datatable
- */
-
-export * from './lib/dynamic-datatable.component';
-export * from './lib/models';
+export * from './lib/dynamic-datatable.component';
+export * from './lib/models';

package/.editorconfig

@@ -1,17 +0,0 @@
-# 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

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

package/.vscode/launch.json

@@ -1,20 +0,0 @@
-{
-  // 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

@@ -1,42 +0,0 @@
-{
-  // 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/angular.json

@@ -1,44 +0,0 @@
-{
-  "$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/projects/dynamic-datatable/README.md

@@ -1,134 +0,0 @@
-# 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

@@ -1,7 +0,0 @@
-{
-  "$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

@@ -1,24 +0,0 @@
-{
-  "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

@@ -1,137 +0,0 @@
-<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>