ng-dynamic-datatable 0.0.0 → 0.0.1

package/README.md

@@ -1,59 +1,134 @@
-# NgDynamicDatatable
+# dynamic-datatable
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.27.
+Config-driven Angular DataTable library that accepts columns, JSON data, and feature configuration.
 
-## Development server
+## Features
 
-To start a local development server, run:
+- 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
-ng serve
+npm install dynamic-datatable
 ```
 
-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
+## 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);
+   }
+}
 ```
 
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+## Component API
 
-```bash
-ng generate --help
-```
+Inputs:
 
-## Building
+- `config: DynamicDataTableConfig`
+- `columns: DataTableColumn[]`
+- `data: Record<string, unknown>[]`
 
-To build the project run:
+Outputs:
 
-```bash
-ng build
-```
+- `actionSelected`
+- `selectionChange`
+- `sortChange`
+- `pageChange`
+- `exportTriggered`
 
-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.
+Public methods:
 
-## Running unit tests
+- `refresh()`
+- `updateData(newData)`
+- `updateConfig(newConfig)`
+- `getSelectedRows()`
+- `clearSelection()`
 
-To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+## Build
 
 ```bash
-ng test
+ng build dynamic-datatable
 ```
 
-## Running end-to-end tests
+Artifacts are generated in `dist/dynamic-datatable`.
 
-For end-to-end (e2e) testing, run:
+## Publish to npm
 
 ```bash
-ng e2e
+cd dist/dynamic-datatable
+npm publish --access public
 ```
 
-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.
+Before publishing, ensure the package name in `projects/dynamic-datatable/package.json` is unique on npm.

package/fesm2022/ng-dynamic-datatable.mjs

@@ -0,0 +1,469 @@
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { EventEmitter, Output, Input, Component } from '@angular/core';
+
+const DEFAULT_CONFIG = {
+    title: 'Dynamic DataTable',
+    features: {
+        export: true,
+        sorting: true,
+        searching: true,
+        pagination: true,
+        rowsPerPage: true,
+        actions: true,
+        checkboxSelection: true
+    },
+    rowsPerPageOptions: [5, 10, 25, 50],
+    defaultRowsPerPage: 10,
+    exportOptions: {
+        fileName: 'datatable-export',
+        formats: ['csv', 'excel']
+    }
+};
+class DynamicDatatableComponent {
+    config = {};
+    columns = [];
+    data = [];
+    actionSelected = new EventEmitter();
+    selectionChange = new EventEmitter();
+    sortChange = new EventEmitter();
+    pageChange = new EventEmitter();
+    exportTriggered = new EventEmitter();
+    mergedConfig = {
+        title: DEFAULT_CONFIG.title,
+        features: { ...DEFAULT_CONFIG.features },
+        rowsPerPageOptions: [...DEFAULT_CONFIG.rowsPerPageOptions],
+        defaultRowsPerPage: DEFAULT_CONFIG.defaultRowsPerPage,
+        exportOptions: { ...DEFAULT_CONFIG.exportOptions },
+        columns: [],
+        actions: []
+    };
+    mergedColumns = [];
+    allRows = [];
+    filteredRows = [];
+    pagedRows = [];
+    searchTerm = '';
+    currentPage = 1;
+    rowsPerPage = DEFAULT_CONFIG.defaultRowsPerPage;
+    totalPages = 1;
+    sortState = { key: null, direction: 'asc' };
+    selectedRows = new Set();
+    openActionMenuRowId = null;
+    ngOnChanges(_changes) {
+        this.refresh();
+    }
+    refresh() {
+        this.applyConfig();
+        this.normalizeRows();
+        this.applyFiltersSortAndPagination();
+    }
+    updateData(newData) {
+        this.data = Array.isArray(newData) ? [...newData] : [];
+        this.refresh();
+    }
+    updateConfig(newConfig) {
+        this.config = { ...this.config, ...newConfig };
+        this.refresh();
+    }
+    getSelectedRows() {
+        return this.allRows.filter((row) => this.selectedRows.has(row.id)).map((row) => row.data);
+    }
+    clearSelection() {
+        this.selectedRows.clear();
+        this.selectionChange.emit([]);
+    }
+    isFeatureOn(feature) {
+        return Boolean(this.mergedConfig.features?.[feature]);
+    }
+    isExportFormatEnabled(format) {
+        const formats = this.mergedConfig.exportOptions?.formats ?? [];
+        return formats.includes(format);
+    }
+    onSearchInput(event) {
+        const input = event.target;
+        this.searchTerm = (input.value || '').trim().toLowerCase();
+        this.currentPage = 1;
+        this.applyFiltersSortAndPagination();
+    }
+    onRowsPerPageChange(event) {
+        const select = event.target;
+        const value = Number(select.value);
+        this.rowsPerPage = Number.isFinite(value) && value > 0 ? value : this.getInitialRowsPerPage();
+        this.currentPage = 1;
+        this.applyFiltersSortAndPagination();
+    }
+    toggleSort(column) {
+        if (!this.isFeatureOn('sorting') || !column.sortable) {
+            return;
+        }
+        const key = String(column.key);
+        if (this.sortState.key === key) {
+            this.sortState.direction = this.sortState.direction === 'asc' ? 'desc' : 'asc';
+        }
+        else {
+            this.sortState = { key, direction: 'asc' };
+        }
+        this.currentPage = 1;
+        this.sortChange.emit({ ...this.sortState });
+        this.applyFiltersSortAndPagination();
+    }
+    getSortIndicator(columnKey) {
+        if (this.sortState.key !== columnKey) {
+            return '↕';
+        }
+        return this.sortState.direction === 'asc' ? '↑' : '↓';
+    }
+    goToPage(page) {
+        if (!this.isFeatureOn('pagination')) {
+            return;
+        }
+        const bounded = Math.min(Math.max(page, 1), this.totalPages);
+        if (bounded === this.currentPage) {
+            return;
+        }
+        this.currentPage = bounded;
+        this.pageChange.emit(this.currentPage);
+        this.updatePagedRowsOnly();
+    }
+    getPaginationPages() {
+        return Array.from({ length: this.totalPages }, (_, idx) => idx + 1);
+    }
+    isRowSelected(rowId) {
+        return this.selectedRows.has(rowId);
+    }
+    toggleRowSelection(row, event) {
+        const input = event.target;
+        if (input.checked) {
+            this.selectedRows.add(row.id);
+        }
+        else {
+            this.selectedRows.delete(row.id);
+        }
+        this.emitSelection();
+    }
+    toggleSelectAllCurrentPage(event) {
+        const input = event.target;
+        this.pagedRows.forEach((row) => {
+            if (input.checked) {
+                this.selectedRows.add(row.id);
+            }
+            else {
+                this.selectedRows.delete(row.id);
+            }
+        });
+        this.emitSelection();
+    }
+    isCurrentPageFullySelected() {
+        if (!this.pagedRows.length) {
+            return false;
+        }
+        return this.pagedRows.every((row) => this.selectedRows.has(row.id));
+    }
+    toggleActionMenu(rowId, event) {
+        event.stopPropagation();
+        this.openActionMenuRowId = this.openActionMenuRowId === rowId ? null : rowId;
+    }
+    closeActionMenu() {
+        this.openActionMenuRowId = null;
+    }
+    isActionMenuOpen(rowId) {
+        return this.openActionMenuRowId === rowId;
+    }
+    onActionItemClick(actionIndex, row) {
+        if (!Number.isInteger(actionIndex) || actionIndex < 0) {
+            return;
+        }
+        const action = this.mergedConfig.actions?.[actionIndex];
+        if (!action) {
+            return;
+        }
+        const rowIndex = this.filteredRows.findIndex((item) => item.id === row.id);
+        this.actionSelected.emit({ action, row: row.data, rowIndex });
+        this.closeActionMenu();
+    }
+    exportCSV() {
+        const rows = this.getRowsForExport();
+        this.exportTriggered.emit({ format: 'csv', rows });
+        const headers = this.mergedColumns.map((column) => this.escapeCsv(column.label));
+        const lines = rows.map((row) => {
+            return this.mergedColumns
+                .map((column) => this.escapeCsv(this.getCellTextValue(row, column)))
+                .join(',');
+        });
+        const csv = [headers.join(','), ...lines].join('\n');
+        this.downloadFile(csv, `${this.getExportFileName()}.csv`, 'text/csv;charset=utf-8;');
+    }
+    exportExcel() {
+        const rows = this.getRowsForExport();
+        this.exportTriggered.emit({ format: 'excel', rows });
+        const headerCells = this.mergedColumns.map((column) => `<th>${this.escapeHtml(column.label)}</th>`).join('');
+        const bodyRows = rows
+            .map((row) => {
+            const cells = this.mergedColumns
+                .map((column) => `<td>${this.escapeHtml(this.getCellTextValue(row, column))}</td>`)
+                .join('');
+            return `<tr>${cells}</tr>`;
+        })
+            .join('');
+        const html = `<html><head><meta charset="UTF-8"></head><body><table border="1"><thead><tr>${headerCells}</tr></thead><tbody>${bodyRows}</tbody></table></body></html>`;
+        this.downloadFile(html, `${this.getExportFileName()}.xls`, 'application/vnd.ms-excel;charset=utf-8;');
+    }
+    getRenderedCell(row, column) {
+        if (typeof column.render === 'function') {
+            return column.render(row);
+        }
+        const key = String(column.key);
+        const value = row[key];
+        return this.escapeHtml(value == null ? '' : String(value));
+    }
+    toColumnWidth(width) {
+        if (typeof width === 'number') {
+            return `${width}px`;
+        }
+        if (typeof width === 'string' && width.trim()) {
+            return width.trim();
+        }
+        return 'auto';
+    }
+    getColumnCount() {
+        let count = this.mergedColumns.length;
+        if (this.isFeatureOn('checkboxSelection')) {
+            count += 1;
+        }
+        if (this.isFeatureOn('actions')) {
+            count += 1;
+        }
+        return count;
+    }
+    getStartEntry() {
+        if (!this.filteredRows.length) {
+            return 0;
+        }
+        if (!this.isFeatureOn('pagination')) {
+            return 1;
+        }
+        return (this.currentPage - 1) * this.rowsPerPage + 1;
+    }
+    getEndEntry() {
+        if (!this.filteredRows.length) {
+            return 0;
+        }
+        if (!this.isFeatureOn('pagination')) {
+            return this.filteredRows.length;
+        }
+        return Math.min(this.currentPage * this.rowsPerPage, this.filteredRows.length);
+    }
+    applyConfig() {
+        const features = {
+            ...DEFAULT_CONFIG.features,
+            ...(this.config.features ?? {})
+        };
+        const exportOptions = {
+            ...DEFAULT_CONFIG.exportOptions,
+            ...(this.config.exportOptions ?? {})
+        };
+        const rowsPerPageOptions = (this.config.rowsPerPageOptions ?? DEFAULT_CONFIG.rowsPerPageOptions).filter((item) => Number.isFinite(item) && item > 0);
+        this.mergedConfig = {
+            title: this.config.title ?? DEFAULT_CONFIG.title,
+            features,
+            rowsPerPageOptions: rowsPerPageOptions.length ? rowsPerPageOptions : [...DEFAULT_CONFIG.rowsPerPageOptions],
+            defaultRowsPerPage: this.config.defaultRowsPerPage ?? DEFAULT_CONFIG.defaultRowsPerPage,
+            exportOptions,
+            actions: [...(this.config.actions ?? [])],
+            columns: []
+        };
+        this.mergedColumns = [...(this.columns.length ? this.columns : (this.config.columns ?? []))];
+        this.rowsPerPage = this.getInitialRowsPerPage();
+    }
+    normalizeRows() {
+        this.allRows = (Array.isArray(this.data) ? this.data : []).map((row, index) => {
+            const rowId = row['id'];
+            const id = rowId == null ? `row-${index + 1}` : String(rowId);
+            return { id, data: row };
+        });
+        const validIds = new Set(this.allRows.map((row) => row.id));
+        for (const selectedId of Array.from(this.selectedRows)) {
+            if (!validIds.has(selectedId)) {
+                this.selectedRows.delete(selectedId);
+            }
+        }
+    }
+    applyFiltersSortAndPagination() {
+        if (!this.isFeatureOn('searching') || !this.searchTerm) {
+            this.filteredRows = [...this.allRows];
+        }
+        else {
+            this.filteredRows = this.allRows.filter((row) => {
+                const searchSpace = this.mergedColumns
+                    .map((column) => this.getCellTextValue(row.data, column).toLowerCase())
+                    .join(' ');
+                return searchSpace.includes(this.searchTerm);
+            });
+        }
+        if (this.isFeatureOn('sorting') && this.sortState.key) {
+            const column = this.mergedColumns.find((item) => String(item.key) === this.sortState.key);
+            if (column?.sortable) {
+                this.filteredRows.sort((a, b) => {
+                    const aVal = this.getCellTextValue(a.data, column);
+                    const bVal = this.getCellTextValue(b.data, column);
+                    const compare = this.compareValues(aVal, bVal);
+                    return this.sortState.direction === 'asc' ? compare : -compare;
+                });
+            }
+        }
+        this.totalPages = this.isFeatureOn('pagination')
+            ? Math.max(1, Math.ceil(this.filteredRows.length / this.rowsPerPage))
+            : 1;
+        if (this.currentPage > this.totalPages) {
+            this.currentPage = this.totalPages;
+        }
+        this.updatePagedRowsOnly();
+        this.emitSelection();
+    }
+    updatePagedRowsOnly() {
+        if (!this.isFeatureOn('pagination')) {
+            this.pagedRows = [...this.filteredRows];
+            return;
+        }
+        const start = (this.currentPage - 1) * this.rowsPerPage;
+        this.pagedRows = this.filteredRows.slice(start, start + this.rowsPerPage);
+    }
+    getCellTextValue(row, column) {
+        const key = String(column.key);
+        if (row[key] != null) {
+            return String(row[key]);
+        }
+        const rendered = this.getRenderedCell(row, column);
+        return this.stripHtml(rendered);
+    }
+    compareValues(a, b) {
+        const aText = a.trim();
+        const bText = b.trim();
+        const aNum = this.parseStrictNumber(aText);
+        const bNum = this.parseStrictNumber(bText);
+        if (aNum !== null && bNum !== null) {
+            return aNum - bNum;
+        }
+        const aDate = this.parseDateValue(aText);
+        const bDate = this.parseDateValue(bText);
+        if (aDate !== null && bDate !== null) {
+            return aDate - bDate;
+        }
+        return aText.localeCompare(bText, undefined, { numeric: true, sensitivity: 'base' });
+    }
+    parseStrictNumber(value) {
+        const normalized = value.replace(/[$,\s]/g, '');
+        if (!/^[-+]?\d*\.?\d+$/.test(normalized)) {
+            return null;
+        }
+        const numberValue = Number(normalized);
+        return Number.isNaN(numberValue) ? null : numberValue;
+    }
+    parseDateValue(value) {
+        const usDate = value.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
+        if (usDate) {
+            const month = Number(usDate[1]);
+            const day = Number(usDate[2]);
+            const year = Number(usDate[3]);
+            const utc = Date.UTC(year, month - 1, day);
+            return Number.isNaN(utc) ? null : utc;
+        }
+        const isoDate = value.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/);
+        if (isoDate) {
+            const year = Number(isoDate[1]);
+            const month = Number(isoDate[2]);
+            const day = Number(isoDate[3]);
+            const utc = Date.UTC(year, month - 1, day);
+            return Number.isNaN(utc) ? null : utc;
+        }
+        return null;
+    }
+    getRowsForExport() {
+        const selected = this.getSelectedRows();
+        if (selected.length) {
+            return selected;
+        }
+        return this.filteredRows.map((item) => item.data);
+    }
+    getExportFileName() {
+        return this.mergedConfig.exportOptions?.fileName || 'datatable-export';
+    }
+    downloadFile(content, fileName, mimeType) {
+        if (typeof document === 'undefined') {
+            return;
+        }
+        const blob = new Blob([content], { type: mimeType });
+        const url = URL.createObjectURL(blob);
+        const anchor = document.createElement('a');
+        anchor.href = url;
+        anchor.download = fileName;
+        document.body.appendChild(anchor);
+        anchor.click();
+        document.body.removeChild(anchor);
+        URL.revokeObjectURL(url);
+    }
+    escapeCsv(value) {
+        if (/[",\n]/.test(value)) {
+            return `"${value.replace(/"/g, '""')}"`;
+        }
+        return value;
+    }
+    stripHtml(input) {
+        if (typeof document === 'undefined') {
+            return input;
+        }
+        const temp = document.createElement('div');
+        temp.innerHTML = input;
+        return temp.textContent || temp.innerText || '';
+    }
+    escapeHtml(value) {
+        return String(value)
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&#039;');
+    }
+    getInitialRowsPerPage() {
+        const options = this.mergedConfig.rowsPerPageOptions ?? DEFAULT_CONFIG.rowsPerPageOptions;
+        const preferred = Number(this.mergedConfig.defaultRowsPerPage ?? DEFAULT_CONFIG.defaultRowsPerPage);
+        return options.includes(preferred) ? preferred : options[0] ?? DEFAULT_CONFIG.defaultRowsPerPage;
+    }
+    emitSelection() {
+        this.selectionChange.emit(this.getSelectedRows());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DynamicDatatableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: DynamicDatatableComponent, isStandalone: true, selector: "lib-dynamic-datatable", inputs: { config: "config", columns: "columns", data: "data" }, outputs: { actionSelected: "actionSelected", selectionChange: "selectionChange", sortChange: "sortChange", pageChange: "pageChange", exportTriggered: "exportTriggered" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ndt-card\" (click)=\"closeActionMenu()\">\r\n  <div class=\"ndt-header\">\r\n    <h3 class=\"ndt-title\">{{ mergedConfig.title }}</h3>\r\n  </div>\r\n\r\n  <div class=\"ndt-toolbar\">\r\n    <div class=\"ndt-left-tools\">\r\n      <ng-container *ngIf=\"isFeatureOn('export')\">\r\n        <button class=\"ndt-btn\" type=\"button\" (click)=\"exportCSV()\" *ngIf=\"isExportFormatEnabled('csv')\">\r\n          Export CSV\r\n        </button>\r\n        <button class=\"ndt-btn\" type=\"button\" (click)=\"exportExcel()\" *ngIf=\"isExportFormatEnabled('excel')\">\r\n          Export Excel\r\n        </button>\r\n      </ng-container>\r\n\r\n      <label class=\"ndt-inline-label\" *ngIf=\"isFeatureOn('rowsPerPage') && isFeatureOn('pagination')\">\r\n        Rows per page:\r\n        <select [value]=\"rowsPerPage\" (change)=\"onRowsPerPageChange($event)\">\r\n          <option *ngFor=\"let option of mergedConfig.rowsPerPageOptions || []\" [value]=\"option\">{{ option }}</option>\r\n        </select>\r\n      </label>\r\n    </div>\r\n\r\n    <div class=\"ndt-right-tools\" *ngIf=\"isFeatureOn('searching')\">\r\n      <input\r\n        type=\"search\"\r\n        placeholder=\"Search records\"\r\n        [value]=\"searchTerm\"\r\n        (input)=\"onSearchInput($event)\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"ndt-table-wrap\">\r\n    <table class=\"ndt-table\">\r\n      <colgroup>\r\n        <col *ngIf=\"isFeatureOn('checkboxSelection')\" style=\"width: 44px\" />\r\n        <col *ngFor=\"let column of mergedColumns\" [style.width]=\"toColumnWidth(column.width)\" />\r\n        <col *ngIf=\"isFeatureOn('actions')\" style=\"width: 78px\" />\r\n      </colgroup>\r\n\r\n      <thead>\r\n        <tr>\r\n          <th *ngIf=\"isFeatureOn('checkboxSelection')\">\r\n            <input\r\n              type=\"checkbox\"\r\n              [checked]=\"isCurrentPageFullySelected()\"\r\n              (change)=\"toggleSelectAllCurrentPage($event)\"\r\n            />\r\n          </th>\r\n          <th\r\n            *ngFor=\"let column of mergedColumns\"\r\n            [class.ndt-sortable]=\"isFeatureOn('sorting') && !!column.sortable\"\r\n            (click)=\"toggleSort(column)\"\r\n          >\r\n            <span class=\"ndt-th-content\">\r\n              <span class=\"ndt-th-label\">{{ column.label }}</span>\r\n              <span class=\"ndt-sort-indicator\" *ngIf=\"isFeatureOn('sorting') && column.sortable\">\r\n                {{ getSortIndicator(column.key.toString()) }}\r\n              </span>\r\n            </span>\r\n          </th>\r\n          <th *ngIf=\"isFeatureOn('actions')\">Actions</th>\r\n        </tr>\r\n      </thead>\r\n\r\n      <tbody>\r\n        <tr *ngIf=\"!pagedRows.length\">\r\n          <td [attr.colspan]=\"getColumnCount()\" class=\"ndt-empty\">No records found.</td>\r\n        </tr>\r\n\r\n        <tr *ngFor=\"let row of pagedRows; let rowIndex = index\" [class.ndt-selected]=\"isRowSelected(row.id)\">\r\n          <td *ngIf=\"isFeatureOn('checkboxSelection')\">\r\n            <input\r\n              type=\"checkbox\"\r\n              [checked]=\"isRowSelected(row.id)\"\r\n              (change)=\"toggleRowSelection(row, $event)\"\r\n            />\r\n          </td>\r\n\r\n          <td *ngFor=\"let column of mergedColumns\" [innerHTML]=\"getRenderedCell(row.data, column)\"></td>\r\n\r\n          <td *ngIf=\"isFeatureOn('actions')\" class=\"ndt-actions-cell\">\r\n            <div class=\"ndt-dropdown\" (click)=\"$event.stopPropagation()\">\r\n              <button\r\n                type=\"button\"\r\n                class=\"ndt-actions-btn\"\r\n                (click)=\"toggleActionMenu(row.id, $event)\"\r\n                [attr.aria-expanded]=\"isActionMenuOpen(row.id)\"\r\n              >\r\n                <span class=\"ndt-dots\">...</span>\r\n              </button>\r\n\r\n              <ul class=\"ndt-dropdown-menu\" *ngIf=\"isActionMenuOpen(row.id)\">\r\n                <li *ngFor=\"let action of mergedConfig.actions || []; let i = index\">\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"ndt-dropdown-item\"\r\n                    [class.ndt-danger]=\"!!action.danger\"\r\n                    (click)=\"onActionItemClick(i, row)\"\r\n                  >\r\n                    <i *ngIf=\"action.icon\" [class]=\"action.icon\"></i>\r\n                    <span>{{ action.label }}</span>\r\n                  </button>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n\r\n  <div class=\"ndt-footer\">\r\n    <div>\r\n      {{ selectedRows.size }} selected\r\n    </div>\r\n\r\n    <div>\r\n      Showing {{ getStartEntry() }} to {{ getEndEntry() }} of {{ filteredRows.length }} entries\r\n    </div>\r\n\r\n    <div class=\"ndt-pagination\" *ngIf=\"isFeatureOn('pagination') && totalPages > 1\">\r\n      <button type=\"button\" (click)=\"goToPage(currentPage - 1)\" [disabled]=\"currentPage <= 1\">Prev</button>\r\n      <button\r\n        type=\"button\"\r\n        *ngFor=\"let page of getPaginationPages()\"\r\n        [class.active]=\"page === currentPage\"\r\n        (click)=\"goToPage(page)\"\r\n      >\r\n        {{ page }}\r\n      </button>\r\n      <button type=\"button\" (click)=\"goToPage(currentPage + 1)\" [disabled]=\"currentPage >= totalPages\">Next</button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;--ndt-primary: #4f46e5;--ndt-primary-soft: #eef2ff;--ndt-border: #dbe4ff;--ndt-text: #1f2a44;--ndt-muted: #6d7895}.ndt-card{border:1px solid var(--ndt-border);border-radius:14px;background:#fff;box-shadow:0 10px 30px #2d489114;overflow:hidden;color:var(--ndt-text);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.ndt-header,.ndt-toolbar,.ndt-footer{padding:.9rem 1rem}.ndt-header{border-bottom:1px solid #edf1ff}.ndt-title{margin:0;font-size:1.1rem}.ndt-toolbar{display:flex;justify-content:space-between;gap:.75rem;flex-wrap:wrap}.ndt-left-tools,.ndt-right-tools{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.ndt-btn,.ndt-pagination button,.ndt-actions-cell select,.ndt-toolbar select,.ndt-toolbar input{border:1px solid #cfd9fb;background:#fff;color:#33446e;border-radius:8px;padding:.35rem .6rem;font-size:.85rem}.ndt-btn:hover,.ndt-pagination button:hover,.ndt-pagination button.active{border-color:var(--ndt-primary);background:var(--ndt-primary-soft);color:var(--ndt-primary)}.ndt-inline-label{display:inline-flex;align-items:center;gap:.4rem;color:var(--ndt-muted);font-size:.85rem}.ndt-table-wrap{overflow-x:auto;border-top:1px solid #edf1ff;border-bottom:1px solid #edf1ff}.ndt-table{width:100%;min-width:860px;border-collapse:collapse;table-layout:fixed}.ndt-table th,.ndt-table td{padding:.72rem;text-align:left;border-bottom:1px solid #edf1ff}.ndt-table th{color:#4a577f;font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;background:#f8faff}.ndt-th-content{display:flex;align-items:center;justify-content:space-between;gap:.4rem}.ndt-th-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ndt-sortable{cursor:pointer}.ndt-sort-indicator{font-size:.75rem;color:#8a98c2}.ndt-table tbody tr:hover{background:#f5f8ff}.ndt-selected{background:#ebf1ff}.ndt-actions-cell{text-align:center;position:relative}.ndt-dropdown{position:relative;display:inline-block}.ndt-actions-btn{border:1px solid #cfd9fb;background:#fff;color:#33446e;border-radius:8px;width:34px;height:30px;padding:0;cursor:pointer}.ndt-actions-btn:hover{border-color:var(--ndt-primary);color:var(--ndt-primary);background:var(--ndt-primary-soft)}.ndt-dots{font-size:1rem;line-height:1}.ndt-dropdown-menu{position:absolute;right:0;top:calc(100% + .35rem);list-style:none;margin:0;padding:.35rem 0;min-width:150px;border:1px solid #dbe4ff;border-radius:10px;background:#fff;box-shadow:0 12px 24px #2d489124;z-index:20}.ndt-dropdown-item{width:100%;border:0;background:#fff;color:#33446e;display:flex;align-items:center;gap:.45rem;text-align:left;padding:.42rem .72rem;font-size:.84rem;cursor:pointer}.ndt-dropdown-item:hover{background:#f5f8ff;color:var(--ndt-primary)}.ndt-dropdown-item.ndt-danger{color:#dc3545}.ndt-dropdown-item.ndt-danger:hover{background:#fff1f3}.ndt-empty{text-align:center;color:var(--ndt-muted)}.ndt-footer{display:flex;justify-content:space-between;gap:.75rem;flex-wrap:wrap;color:#55658f;font-size:.86rem}.ndt-pagination{display:flex;align-items:center;gap:.35rem}@media(max-width:900px){.ndt-toolbar,.ndt-footer{flex-direction:column;align-items:flex-start}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DynamicDatatableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-dynamic-datatable', standalone: true, imports: [CommonModule], template: "<div class=\"ndt-card\" (click)=\"closeActionMenu()\">\r\n  <div class=\"ndt-header\">\r\n    <h3 class=\"ndt-title\">{{ mergedConfig.title }}</h3>\r\n  </div>\r\n\r\n  <div class=\"ndt-toolbar\">\r\n    <div class=\"ndt-left-tools\">\r\n      <ng-container *ngIf=\"isFeatureOn('export')\">\r\n        <button class=\"ndt-btn\" type=\"button\" (click)=\"exportCSV()\" *ngIf=\"isExportFormatEnabled('csv')\">\r\n          Export CSV\r\n        </button>\r\n        <button class=\"ndt-btn\" type=\"button\" (click)=\"exportExcel()\" *ngIf=\"isExportFormatEnabled('excel')\">\r\n          Export Excel\r\n        </button>\r\n      </ng-container>\r\n\r\n      <label class=\"ndt-inline-label\" *ngIf=\"isFeatureOn('rowsPerPage') && isFeatureOn('pagination')\">\r\n        Rows per page:\r\n        <select [value]=\"rowsPerPage\" (change)=\"onRowsPerPageChange($event)\">\r\n          <option *ngFor=\"let option of mergedConfig.rowsPerPageOptions || []\" [value]=\"option\">{{ option }}</option>\r\n        </select>\r\n      </label>\r\n    </div>\r\n\r\n    <div class=\"ndt-right-tools\" *ngIf=\"isFeatureOn('searching')\">\r\n      <input\r\n        type=\"search\"\r\n        placeholder=\"Search records\"\r\n        [value]=\"searchTerm\"\r\n        (input)=\"onSearchInput($event)\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"ndt-table-wrap\">\r\n    <table class=\"ndt-table\">\r\n      <colgroup>\r\n        <col *ngIf=\"isFeatureOn('checkboxSelection')\" style=\"width: 44px\" />\r\n        <col *ngFor=\"let column of mergedColumns\" [style.width]=\"toColumnWidth(column.width)\" />\r\n        <col *ngIf=\"isFeatureOn('actions')\" style=\"width: 78px\" />\r\n      </colgroup>\r\n\r\n      <thead>\r\n        <tr>\r\n          <th *ngIf=\"isFeatureOn('checkboxSelection')\">\r\n            <input\r\n              type=\"checkbox\"\r\n              [checked]=\"isCurrentPageFullySelected()\"\r\n              (change)=\"toggleSelectAllCurrentPage($event)\"\r\n            />\r\n          </th>\r\n          <th\r\n            *ngFor=\"let column of mergedColumns\"\r\n            [class.ndt-sortable]=\"isFeatureOn('sorting') && !!column.sortable\"\r\n            (click)=\"toggleSort(column)\"\r\n          >\r\n            <span class=\"ndt-th-content\">\r\n              <span class=\"ndt-th-label\">{{ column.label }}</span>\r\n              <span class=\"ndt-sort-indicator\" *ngIf=\"isFeatureOn('sorting') && column.sortable\">\r\n                {{ getSortIndicator(column.key.toString()) }}\r\n              </span>\r\n            </span>\r\n          </th>\r\n          <th *ngIf=\"isFeatureOn('actions')\">Actions</th>\r\n        </tr>\r\n      </thead>\r\n\r\n      <tbody>\r\n        <tr *ngIf=\"!pagedRows.length\">\r\n          <td [attr.colspan]=\"getColumnCount()\" class=\"ndt-empty\">No records found.</td>\r\n        </tr>\r\n\r\n        <tr *ngFor=\"let row of pagedRows; let rowIndex = index\" [class.ndt-selected]=\"isRowSelected(row.id)\">\r\n          <td *ngIf=\"isFeatureOn('checkboxSelection')\">\r\n            <input\r\n              type=\"checkbox\"\r\n              [checked]=\"isRowSelected(row.id)\"\r\n              (change)=\"toggleRowSelection(row, $event)\"\r\n            />\r\n          </td>\r\n\r\n          <td *ngFor=\"let column of mergedColumns\" [innerHTML]=\"getRenderedCell(row.data, column)\"></td>\r\n\r\n          <td *ngIf=\"isFeatureOn('actions')\" class=\"ndt-actions-cell\">\r\n            <div class=\"ndt-dropdown\" (click)=\"$event.stopPropagation()\">\r\n              <button\r\n                type=\"button\"\r\n                class=\"ndt-actions-btn\"\r\n                (click)=\"toggleActionMenu(row.id, $event)\"\r\n                [attr.aria-expanded]=\"isActionMenuOpen(row.id)\"\r\n              >\r\n                <span class=\"ndt-dots\">...</span>\r\n              </button>\r\n\r\n              <ul class=\"ndt-dropdown-menu\" *ngIf=\"isActionMenuOpen(row.id)\">\r\n                <li *ngFor=\"let action of mergedConfig.actions || []; let i = index\">\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"ndt-dropdown-item\"\r\n                    [class.ndt-danger]=\"!!action.danger\"\r\n                    (click)=\"onActionItemClick(i, row)\"\r\n                  >\r\n                    <i *ngIf=\"action.icon\" [class]=\"action.icon\"></i>\r\n                    <span>{{ action.label }}</span>\r\n                  </button>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n\r\n  <div class=\"ndt-footer\">\r\n    <div>\r\n      {{ selectedRows.size }} selected\r\n    </div>\r\n\r\n    <div>\r\n      Showing {{ getStartEntry() }} to {{ getEndEntry() }} of {{ filteredRows.length }} entries\r\n    </div>\r\n\r\n    <div class=\"ndt-pagination\" *ngIf=\"isFeatureOn('pagination') && totalPages > 1\">\r\n      <button type=\"button\" (click)=\"goToPage(currentPage - 1)\" [disabled]=\"currentPage <= 1\">Prev</button>\r\n      <button\r\n        type=\"button\"\r\n        *ngFor=\"let page of getPaginationPages()\"\r\n        [class.active]=\"page === currentPage\"\r\n        (click)=\"goToPage(page)\"\r\n      >\r\n        {{ page }}\r\n      </button>\r\n      <button type=\"button\" (click)=\"goToPage(currentPage + 1)\" [disabled]=\"currentPage >= totalPages\">Next</button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;--ndt-primary: #4f46e5;--ndt-primary-soft: #eef2ff;--ndt-border: #dbe4ff;--ndt-text: #1f2a44;--ndt-muted: #6d7895}.ndt-card{border:1px solid var(--ndt-border);border-radius:14px;background:#fff;box-shadow:0 10px 30px #2d489114;overflow:hidden;color:var(--ndt-text);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.ndt-header,.ndt-toolbar,.ndt-footer{padding:.9rem 1rem}.ndt-header{border-bottom:1px solid #edf1ff}.ndt-title{margin:0;font-size:1.1rem}.ndt-toolbar{display:flex;justify-content:space-between;gap:.75rem;flex-wrap:wrap}.ndt-left-tools,.ndt-right-tools{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.ndt-btn,.ndt-pagination button,.ndt-actions-cell select,.ndt-toolbar select,.ndt-toolbar input{border:1px solid #cfd9fb;background:#fff;color:#33446e;border-radius:8px;padding:.35rem .6rem;font-size:.85rem}.ndt-btn:hover,.ndt-pagination button:hover,.ndt-pagination button.active{border-color:var(--ndt-primary);background:var(--ndt-primary-soft);color:var(--ndt-primary)}.ndt-inline-label{display:inline-flex;align-items:center;gap:.4rem;color:var(--ndt-muted);font-size:.85rem}.ndt-table-wrap{overflow-x:auto;border-top:1px solid #edf1ff;border-bottom:1px solid #edf1ff}.ndt-table{width:100%;min-width:860px;border-collapse:collapse;table-layout:fixed}.ndt-table th,.ndt-table td{padding:.72rem;text-align:left;border-bottom:1px solid #edf1ff}.ndt-table th{color:#4a577f;font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;background:#f8faff}.ndt-th-content{display:flex;align-items:center;justify-content:space-between;gap:.4rem}.ndt-th-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ndt-sortable{cursor:pointer}.ndt-sort-indicator{font-size:.75rem;color:#8a98c2}.ndt-table tbody tr:hover{background:#f5f8ff}.ndt-selected{background:#ebf1ff}.ndt-actions-cell{text-align:center;position:relative}.ndt-dropdown{position:relative;display:inline-block}.ndt-actions-btn{border:1px solid #cfd9fb;background:#fff;color:#33446e;border-radius:8px;width:34px;height:30px;padding:0;cursor:pointer}.ndt-actions-btn:hover{border-color:var(--ndt-primary);color:var(--ndt-primary);background:var(--ndt-primary-soft)}.ndt-dots{font-size:1rem;line-height:1}.ndt-dropdown-menu{position:absolute;right:0;top:calc(100% + .35rem);list-style:none;margin:0;padding:.35rem 0;min-width:150px;border:1px solid #dbe4ff;border-radius:10px;background:#fff;box-shadow:0 12px 24px #2d489124;z-index:20}.ndt-dropdown-item{width:100%;border:0;background:#fff;color:#33446e;display:flex;align-items:center;gap:.45rem;text-align:left;padding:.42rem .72rem;font-size:.84rem;cursor:pointer}.ndt-dropdown-item:hover{background:#f5f8ff;color:var(--ndt-primary)}.ndt-dropdown-item.ndt-danger{color:#dc3545}.ndt-dropdown-item.ndt-danger:hover{background:#fff1f3}.ndt-empty{text-align:center;color:var(--ndt-muted)}.ndt-footer{display:flex;justify-content:space-between;gap:.75rem;flex-wrap:wrap;color:#55658f;font-size:.86rem}.ndt-pagination{display:flex;align-items:center;gap:.35rem}@media(max-width:900px){.ndt-toolbar,.ndt-footer{flex-direction:column;align-items:flex-start}}\n"] }]
+        }], propDecorators: { config: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], actionSelected: [{
+                type: Output
+            }], selectionChange: [{
+                type: Output
+            }], sortChange: [{
+                type: Output
+            }], pageChange: [{
+                type: Output
+            }], exportTriggered: [{
+                type: Output
+            }] } });
+
+/*
+ * Public API Surface of dynamic-datatable
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DynamicDatatableComponent };
+//# sourceMappingURL=ng-dynamic-datatable.mjs.map