ng-dynamic-datatable 0.0.0 → 0.0.2

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

@@ -1,556 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, EventEmitter, HostListener, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
-import {
-  DataTableAction,
-  DataTableActionEvent,
-  DataTableColumn,
-  DataTableExportEvent,
-  DynamicDataTableConfig
-} from './models';
-import { InternalSortState } from './dynamic-datatable.types';
-
-type RowData = Record<string, unknown>;
-
-interface InternalRow<T extends RowData = RowData> {
-  id: string;
-  data: T;
-}
-
-const DEFAULT_CONFIG: Required<Pick<DynamicDataTableConfig, 'title' | 'rowsPerPageOptions' | 'defaultRowsPerPage'>> & {
-  features: Required<NonNullable<DynamicDataTableConfig['features']>>;
-  exportOptions: Required<NonNullable<DynamicDataTableConfig['exportOptions']>>;
-} = {
-  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']
-  }
-};
-
-@Component({
-  selector: 'lib-dynamic-datatable',
-  standalone: true,
-  imports: [CommonModule],
-  templateUrl: './dynamic-datatable.component.html',
-  styleUrl: './dynamic-datatable.component.scss'
-})
-export class DynamicDatatableComponent implements OnChanges {
-  @Input() config: DynamicDataTableConfig = {};
-  @Input() columns: DataTableColumn<RowData>[] = [];
-  @Input() data: RowData[] = [];
-
-  @Output() readonly actionSelected = new EventEmitter<DataTableActionEvent<RowData>>();
-  @Output() readonly selectionChange = new EventEmitter<RowData[]>();
-  @Output() readonly sortChange = new EventEmitter<InternalSortState>();
-  @Output() readonly pageChange = new EventEmitter<number>();
-  @Output() readonly exportTriggered = new EventEmitter<DataTableExportEvent<RowData>>();
-
-  mergedConfig: DynamicDataTableConfig<RowData> = {
-    title: DEFAULT_CONFIG.title,
-    features: { ...DEFAULT_CONFIG.features },
-    rowsPerPageOptions: [...DEFAULT_CONFIG.rowsPerPageOptions],
-    defaultRowsPerPage: DEFAULT_CONFIG.defaultRowsPerPage,
-    exportOptions: { ...DEFAULT_CONFIG.exportOptions },
-    columns: [],
-    actions: []
-  };
-
-  mergedColumns: DataTableColumn<RowData>[] = [];
-
-  private allRows: InternalRow<RowData>[] = [];
-  filteredRows: InternalRow<RowData>[] = [];
-  pagedRows: InternalRow<RowData>[] = [];
-
-  searchTerm = '';
-  currentPage = 1;
-  rowsPerPage = DEFAULT_CONFIG.defaultRowsPerPage;
-  totalPages = 1;
-  sortState: InternalSortState = { key: null, direction: 'asc' };
-  selectedRows = new Set<string>();
-  openActionMenuRowId: string | null = null;
-
-  ngOnChanges(_changes: SimpleChanges): void {
-    this.refresh();
-  }
-
-  refresh(): void {
-    this.applyConfig();
-    this.normalizeRows();
-    this.applyFiltersSortAndPagination();
-  }
-
-  updateData(newData: RowData[]): void {
-    this.data = Array.isArray(newData) ? [...newData] : [];
-    this.refresh();
-  }
-
-  updateConfig(newConfig: DynamicDataTableConfig<RowData>): void {
-    this.config = { ...this.config, ...newConfig };
-    this.refresh();
-  }
-
-  getSelectedRows(): RowData[] {
-    return this.allRows.filter((row) => this.selectedRows.has(row.id)).map((row) => row.data);
-  }
-
-  clearSelection(): void {
-    this.selectedRows.clear();
-    this.selectionChange.emit([]);
-  }
-
-  isFeatureOn(feature: keyof NonNullable<DynamicDataTableConfig['features']>): boolean {
-    return Boolean(this.mergedConfig.features?.[feature]);
-  }
-
-  isExportFormatEnabled(format: 'csv' | 'excel'): boolean {
-    const formats = this.mergedConfig.exportOptions?.formats ?? [];
-    return formats.includes(format);
-  }
-
-  onSearchInput(event: Event): void {
-    const input = event.target as HTMLInputElement;
-    this.searchTerm = (input.value || '').trim().toLowerCase();
-    this.currentPage = 1;
-    this.applyFiltersSortAndPagination();
-  }
-
-  onRowsPerPageChange(event: Event): void {
-    const select = event.target as HTMLSelectElement;
-    const value = Number(select.value);
-    this.rowsPerPage = Number.isFinite(value) && value > 0 ? value : this.getInitialRowsPerPage();
-    this.currentPage = 1;
-    this.applyFiltersSortAndPagination();
-  }
-
-  toggleSort(column: DataTableColumn<RowData>): void {
-    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: string): string {
-    if (this.sortState.key !== columnKey) {
-      return '↕';
-    }
-
-    return this.sortState.direction === 'asc' ? '↑' : '↓';
-  }
-
-  goToPage(page: number): void {
-    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(): number[] {
-    return Array.from({ length: this.totalPages }, (_, idx) => idx + 1);
-  }
-
-  isRowSelected(rowId: string): boolean {
-    return this.selectedRows.has(rowId);
-  }
-
-  toggleRowSelection(row: InternalRow<RowData>, event: Event): void {
-    const input = event.target as HTMLInputElement;
-    if (input.checked) {
-      this.selectedRows.add(row.id);
-    } else {
-      this.selectedRows.delete(row.id);
-    }
-
-    this.emitSelection();
-  }
-
-  toggleSelectAllCurrentPage(event: Event): void {
-    const input = event.target as HTMLInputElement;
-    this.pagedRows.forEach((row) => {
-      if (input.checked) {
-        this.selectedRows.add(row.id);
-      } else {
-        this.selectedRows.delete(row.id);
-      }
-    });
-
-    this.emitSelection();
-  }
-
-  isCurrentPageFullySelected(): boolean {
-    if (!this.pagedRows.length) {
-      return false;
-    }
-
-    return this.pagedRows.every((row) => this.selectedRows.has(row.id));
-  }
-
-  toggleActionMenu(rowId: string, event: Event): void {
-    event.stopPropagation();
-    this.openActionMenuRowId = this.openActionMenuRowId === rowId ? null : rowId;
-  }
-
-  closeActionMenu(): void {
-    this.openActionMenuRowId = null;
-  }
-
-  isActionMenuOpen(rowId: string): boolean {
-    return this.openActionMenuRowId === rowId;
-  }
-
-  onActionItemClick(actionIndex: number, row: InternalRow<RowData>): void {
-    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();
-  }
-
-  @HostListener('document:click')
-  handleDocumentClick(): void {
-    this.closeActionMenu();
-  }
-
-  exportCSV(): void {
-    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(): void {
-    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: RowData, column: DataTableColumn<RowData>): string {
-    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: string | number | undefined): string {
-    if (typeof width === 'number') {
-      return `${width}px`;
-    }
-
-    if (typeof width === 'string' && width.trim()) {
-      return width.trim();
-    }
-
-    return 'auto';
-  }
-
-  getColumnCount(): number {
-    let count = this.mergedColumns.length;
-    if (this.isFeatureOn('checkboxSelection')) {
-      count += 1;
-    }
-    if (this.isFeatureOn('actions')) {
-      count += 1;
-    }
-    return count;
-  }
-
-  getStartEntry(): number {
-    if (!this.filteredRows.length) {
-      return 0;
-    }
-
-    if (!this.isFeatureOn('pagination')) {
-      return 1;
-    }
-
-    return (this.currentPage - 1) * this.rowsPerPage + 1;
-  }
-
-  getEndEntry(): number {
-    if (!this.filteredRows.length) {
-      return 0;
-    }
-
-    if (!this.isFeatureOn('pagination')) {
-      return this.filteredRows.length;
-    }
-
-    return Math.min(this.currentPage * this.rowsPerPage, this.filteredRows.length);
-  }
-
-  private applyConfig(): void {
-    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();
-  }
-
-  private normalizeRows(): void {
-    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);
-      }
-    }
-  }
-
-  private applyFiltersSortAndPagination(): void {
-    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();
-  }
-
-  private updatePagedRowsOnly(): void {
-    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);
-  }
-
-  private getCellTextValue(row: RowData, column: DataTableColumn<RowData>): string {
-    const key = String(column.key);
-    if (row[key] != null) {
-      return String(row[key]);
-    }
-
-    const rendered = this.getRenderedCell(row, column);
-    return this.stripHtml(rendered);
-  }
-
-  private compareValues(a: string, b: string): number {
-    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' });
-  }
-
-  private parseStrictNumber(value: string): number | null {
-    const normalized = value.replace(/[$,\s]/g, '');
-    if (!/^[-+]?\d*\.?\d+$/.test(normalized)) {
-      return null;
-    }
-
-    const numberValue = Number(normalized);
-    return Number.isNaN(numberValue) ? null : numberValue;
-  }
-
-  private parseDateValue(value: string): number | null {
-    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;
-  }
-
-  private getRowsForExport(): RowData[] {
-    const selected = this.getSelectedRows();
-    if (selected.length) {
-      return selected;
-    }
-
-    return this.filteredRows.map((item) => item.data);
-  }
-
-  private getExportFileName(): string {
-    return this.mergedConfig.exportOptions?.fileName || 'datatable-export';
-  }
-
-  private downloadFile(content: string, fileName: string, mimeType: string): void {
-    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);
-  }
-
-  private escapeCsv(value: string): string {
-    if (/[",\n]/.test(value)) {
-      return `"${value.replace(/"/g, '""')}"`;
-    }
-
-    return value;
-  }
-
-  private stripHtml(input: string): string {
-    if (typeof document === 'undefined') {
-      return input;
-    }
-
-    const temp = document.createElement('div');
-    temp.innerHTML = input;
-    return temp.textContent || temp.innerText || '';
-  }
-
-  private escapeHtml(value: string): string {
-    return String(value)
-      .replace(/&/g, '&amp;')
-      .replace(/</g, '&lt;')
-      .replace(/>/g, '&gt;')
-      .replace(/"/g, '&quot;')
-      .replace(/'/g, '&#039;');
-  }
-
-  private getInitialRowsPerPage(): number {
-    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;
-  }
-
-  private emitSelection(): void {
-    this.selectionChange.emit(this.getSelectedRows());
-  }
-
-}

package/projects/dynamic-datatable/src/lib/dynamic-datatable.service.spec.ts

@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { DynamicDatatableService } from './dynamic-datatable.service';
-
-describe('DynamicDatatableService', () => {
-  let service: DynamicDatatableService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(DynamicDatatableService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

package/projects/dynamic-datatable/src/lib/dynamic-datatable.service.ts

@@ -1,9 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class DynamicDatatableService {
-
-  constructor() { }
-}

package/projects/dynamic-datatable/src/lib/dynamic-datatable.types.ts

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

package/projects/dynamic-datatable/src/lib/models.ts

@@ -1,52 +0,0 @@
-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/projects/dynamic-datatable/tsconfig.lib.json

@@ -1,15 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/lib",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": []
-  },
-  "exclude": [
-    "**/*.spec.ts"
-  ]
-}

package/projects/dynamic-datatable/tsconfig.lib.prod.json

@@ -1,11 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  }
-}

package/projects/dynamic-datatable/tsconfig.spec.json

@@ -1,15 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
-  },
-  "include": [
-    "**/*.spec.ts",
-    "**/*.d.ts"
-  ]
-}