From cd1ccb7bdc3a4fa3aac81fb983521b1d9d043e67 Mon Sep 17 00:00:00 2001 From: "Rintu Raj.c" Date: Sat, 30 Aug 2025 19:01:29 +0530 Subject: [PATCH 1/4] [refactor] package name change --- .github/workflows/npm-publish.yml | 2 +- README.md | 24 +++++++-------- angular.json | 14 ++++----- package-lock.json | 4 +-- package.json | 6 ++-- .../example-app/src/app/app.component.html | 4 +-- projects/example-app/src/app/app.component.ts | 6 ++-- .../ngx-simple-datatable.component.spec.ts | 23 -------------- .../lib/ngx-simple-datatable.service.spec.ts | 16 ---------- .../src/lib/ngx-simple-datatable.service.ts | 9 ------ .../ngx-simple-datatable/src/public-api.ts | 6 ---- .../README.md | 28 ++++++++---------- .../assets/image.png | Bin .../ng-package.json | 4 +-- .../package.json | 6 ++-- .../src/interfaces/column-config.interface.ts | 0 .../lib/ngx-simple-datatables.component.html} | 0 .../lib/ngx-simple-datatables.component.scss} | 0 .../ngx-simple-datatables.component.spec.ts | 21 +++++++++++++ .../lib/ngx-simple-datatables.component.ts} | 14 ++++----- .../lib/ngx-simple-datatables.service.spec.ts | 15 ++++++++++ .../src/lib/ngx-simple-datatables.service.ts | 8 +++++ .../ngx-simple-datatables/src/public-api.ts | 6 ++++ .../tsconfig.lib.json | 0 .../tsconfig.lib.prod.json | 0 .../tsconfig.spec.json | 0 tsconfig.json | 9 ++---- 27 files changed, 106 insertions(+), 119 deletions(-) delete mode 100644 projects/ngx-simple-datatable/src/lib/ngx-simple-datatable.component.spec.ts delete mode 100644 projects/ngx-simple-datatable/src/lib/ngx-simple-datatable.service.spec.ts delete mode 100644 projects/ngx-simple-datatable/src/lib/ngx-simple-datatable.service.ts delete mode 100644 projects/ngx-simple-datatable/src/public-api.ts rename projects/{ngx-simple-datatable => ngx-simple-datatables}/README.md (89%) rename projects/{ngx-simple-datatable => ngx-simple-datatables}/assets/image.png (100%) rename projects/{ngx-simple-datatable => ngx-simple-datatables}/ng-package.json (71%) rename projects/{ngx-simple-datatable => ngx-simple-datatables}/package.json (77%) rename projects/{ngx-simple-datatable => ngx-simple-datatables}/src/interfaces/column-config.interface.ts (100%) rename projects/{ngx-simple-datatable/src/lib/ngx-simple-datatable.component.html => ngx-simple-datatables/src/lib/ngx-simple-datatables.component.html} (100%) rename projects/{ngx-simple-datatable/src/lib/ngx-simple-datatable.component.scss => ngx-simple-datatables/src/lib/ngx-simple-datatables.component.scss} (100%) create mode 100644 projects/ngx-simple-datatables/src/lib/ngx-simple-datatables.component.spec.ts rename projects/{ngx-simple-datatable/src/lib/ngx-simple-datatable.component.ts => ngx-simple-datatables/src/lib/ngx-simple-datatables.component.ts} (97%) create mode 100644 projects/ngx-simple-datatables/src/lib/ngx-simple-datatables.service.spec.ts create mode 100644 projects/ngx-simple-datatables/src/lib/ngx-simple-datatables.service.ts create mode 100644 projects/ngx-simple-datatables/src/public-api.ts rename projects/{ngx-simple-datatable => ngx-simple-datatables}/tsconfig.lib.json (100%) rename projects/{ngx-simple-datatable => ngx-simple-datatables}/tsconfig.lib.prod.json (100%) rename projects/{ngx-simple-datatable => ngx-simple-datatables}/tsconfig.spec.json (100%) diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml index 6279521..b7ff622 100644 --- a/.github/workflows/npm-publish.yml +++ b/.github/workflows/npm-publish.yml @@ -30,7 +30,7 @@ jobs: - name: Publish to NPM run: | - cd dist/ngx-simple-datatable + cd dist/ngx-simple-datatables npm publish --access public env: NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}} diff --git a/README.md b/README.md index 26ddf55..1f6eb7e 100644 --- a/README.md +++ b/README.md @@ -2,9 +2,7 @@ A lightweight, high-performance Angular data table component with features like virtual scrolling, column freezing, and customizable templates. - - -![NgxSimpleDatatable Screenshot](projects/ngx-simple-datatable/assets/image.png) +![NgxSimpleDatatable Screenshot](projects/ngx-simple-datatables/assets/image.png) ## Features @@ -41,13 +39,13 @@ export class AppModule {} 2. Use the component in your template: ```html - - + ``` 3. Define your columns and data in your component: @@ -136,7 +134,7 @@ columns: ColumnConfig[] = [ Use Angular templates to customize cell content: ```html - + @@ -152,7 +150,7 @@ Use Angular templates to customize cell content: {{ row[column.field] }} - + ``` ### Custom Header Templates @@ -160,7 +158,7 @@ Use Angular templates to customize cell content: Customize header appearance and behavior: ```html - +
@@ -168,7 +166,7 @@ Customize header appearance and behavior:
- + ``` ### Theming @@ -265,17 +263,17 @@ You can customize the table appearance by overriding the following CSS custom pr ## Development -Run `ng build ngx-simple-datatable` to build the library. The build artifacts will be stored in the `dist/` directory. +Run `ng build ngx-simple-datatables` to build the library. The build artifacts will be stored in the `dist/` directory. ## Publishing -After building your library with `ng build ngx-simple-datatable`, go to the dist folder `cd dist/ngx-simple-datatable` and run `npm publish`. +After building your library with `ng build ngx-simple-datatables`, go to the dist folder `cd dist/ngx-simple-datatables` and run `npm publish`. -After building your library with `ng build ngx-simple-datatable`, go to the dist folder `cd dist/ngx-simple-datatable` and run `npm publish`. +After building your library with `ng build ngx-simple-datatables`, go to the dist folder `cd dist/ngx-simple-datatables` and run `npm publish`. ## Running unit tests -Run `ng test ngx-simple-datatable` to execute the unit tests via [Karma](https://karma-runner.github.io). +Run `ng test ngx-simple-datatables` to execute the unit tests via [Karma](https://karma-runner.github.io). ## Further help diff --git a/angular.json b/angular.json index f424bf6..bc83daf 100644 --- a/angular.json +++ b/angular.json @@ -3,23 +3,23 @@ "version": 1, "newProjectRoot": "projects", "projects": { - "ngx-simple-datatable": { + "ngx-simple-datatables": { "projectType": "library", - "root": "projects/ngx-simple-datatable", - "sourceRoot": "projects/ngx-simple-datatable/src", + "root": "projects/ngx-simple-datatables", + "sourceRoot": "projects/ngx-simple-datatables/src", "prefix": "lib", "architect": { "build": { "builder": "@angular-devkit/build-angular:ng-packagr", "options": { - "project": "projects/ngx-simple-datatable/ng-package.json" + "project": "projects/ngx-simple-datatables/ng-package.json" }, "configurations": { "production": { - "tsConfig": "projects/ngx-simple-datatable/tsconfig.lib.prod.json" + "tsConfig": "projects/ngx-simple-datatables/tsconfig.lib.prod.json" }, "development": { - "tsConfig": "projects/ngx-simple-datatable/tsconfig.lib.json" + "tsConfig": "projects/ngx-simple-datatables/tsconfig.lib.json" } }, "defaultConfiguration": "production" @@ -27,7 +27,7 @@ "test": { "builder": "@angular-devkit/build-angular:karma", "options": { - "tsConfig": "projects/ngx-simple-datatable/tsconfig.spec.json", + "tsConfig": "projects/ngx-simple-datatables/tsconfig.spec.json", "polyfills": [ "zone.js", "zone.js/testing" diff --git a/package-lock.json b/package-lock.json index 61d4300..ad887ee 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,11 +1,11 @@ { - "name": "ngx-simple-datatable-workspace", + "name": "ngx-simple-datatables-workspace", "version": "1.17.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "ngx-simple-datatable-workspace", + "name": "ngx-simple-datatables-workspace", "version": "1.17.0", "dependencies": { "@angular/animations": "^17.1.0", diff --git a/package.json b/package.json index a476e36..ac9e9d8 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,11 @@ { - "name": "ngx-simple-datatable-workspace", + "name": "ngx-simple-datatables-workspace", "version": "1.17.0", "scripts": { "ng": "ng", "start": "ng serve", - "start:lib": "ng build ngx-simple-datatable --watch", - "build:lib": "ng build ngx-simple-datatable", + "start:lib": "ng build ngx-simple-datatables --watch", + "build:lib": "ng build ngx-simple-datatables", "build": "ng build", "watch": "ng build --watch --configuration development", "test": "ng test", diff --git a/projects/example-app/src/app/app.component.html b/projects/example-app/src/app/app.component.html index 31f937d..55537ab 100644 --- a/projects/example-app/src/app/app.component.html +++ b/projects/example-app/src/app/app.component.html @@ -1,7 +1,7 @@

Dynamic Table Example

- + {{ column?.header }} @@ -22,7 +22,7 @@

Dynamic Table Example

- +
\ No newline at end of file diff --git a/projects/example-app/src/app/app.component.ts b/projects/example-app/src/app/app.component.ts index 2a5c50e..be49f30 100644 --- a/projects/example-app/src/app/app.component.ts +++ b/projects/example-app/src/app/app.component.ts @@ -1,13 +1,13 @@ import { Component } from "@angular/core"; import { RouterOutlet } from "@angular/router"; -import { NgxSimpleDatatableComponent } from "ngx-simple-datatable"; -import { ColumnConfig } from "../../../ngx-simple-datatable/src/interfaces/column-config.interface"; +import { ColumnConfig } from "../../../ngx-simple-datatables/src/interfaces/column-config.interface"; import { CommonModule } from "@angular/common"; +import { NgxSimpleDatatablesComponent } from "../../../ngx-simple-datatables/src/public-api"; @Component({ selector: "app-root", standalone: true, - imports: [NgxSimpleDatatableComponent, CommonModule], + imports: [NgxSimpleDatatablesComponent, CommonModule], templateUrl: "./app.component.html", styleUrl: "./app.component.css", }) diff --git a/projects/ngx-simple-datatable/src/lib/ngx-simple-datatable.component.spec.ts b/projects/ngx-simple-datatable/src/lib/ngx-simple-datatable.component.spec.ts deleted file mode 100644 index 3856877..0000000 --- a/projects/ngx-simple-datatable/src/lib/ngx-simple-datatable.component.spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { NgxSimpleDatatableComponent } from './ngx-simple-datatable.component'; - -describe('NgxSimpleDatatableComponent', () => { - let component: NgxSimpleDatatableComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [NgxSimpleDatatableComponent] - }) - .compileComponents(); - - fixture = TestBed.createComponent(NgxSimpleDatatableComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/projects/ngx-simple-datatable/src/lib/ngx-simple-datatable.service.spec.ts b/projects/ngx-simple-datatable/src/lib/ngx-simple-datatable.service.spec.ts deleted file mode 100644 index f688f47..0000000 --- a/projects/ngx-simple-datatable/src/lib/ngx-simple-datatable.service.spec.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { TestBed } from '@angular/core/testing'; - -import { NgxSimpleDatatableService } from './ngx-simple-datatable.service'; - -describe('NgxSimpleDatatableService', () => { - let service: NgxSimpleDatatableService; - - beforeEach(() => { - TestBed.configureTestingModule({}); - service = TestBed.inject(NgxSimpleDatatableService); - }); - - it('should be created', () => { - expect(service).toBeTruthy(); - }); -}); diff --git a/projects/ngx-simple-datatable/src/lib/ngx-simple-datatable.service.ts b/projects/ngx-simple-datatable/src/lib/ngx-simple-datatable.service.ts deleted file mode 100644 index ec1f6a1..0000000 --- a/projects/ngx-simple-datatable/src/lib/ngx-simple-datatable.service.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { Injectable } from '@angular/core'; - -@Injectable({ - providedIn: 'root' -}) -export class NgxSimpleDatatableService { - - constructor() { } -} diff --git a/projects/ngx-simple-datatable/src/public-api.ts b/projects/ngx-simple-datatable/src/public-api.ts deleted file mode 100644 index a04c12c..0000000 --- a/projects/ngx-simple-datatable/src/public-api.ts +++ /dev/null @@ -1,6 +0,0 @@ -/* - * Public API Surface of ngx-simple-datatable - */ - -export * from './lib/ngx-simple-datatable.service'; -export * from './lib/ngx-simple-datatable.component'; diff --git a/projects/ngx-simple-datatable/README.md b/projects/ngx-simple-datatables/README.md similarity index 89% rename from projects/ngx-simple-datatable/README.md rename to projects/ngx-simple-datatables/README.md index 4b2ab8e..5f96986 100644 --- a/projects/ngx-simple-datatable/README.md +++ b/projects/ngx-simple-datatables/README.md @@ -2,9 +2,7 @@ A lightweight, high-performance Angular data table component with features like virtual scrolling, column freezing, and customizable templates. - - -![NgxSimpleDatatable Screenshot](projects/ngx-simple-datatable/assets/image.png) +![NgxSimpleDatatables Screenshot](projects/ngx-simple-datatables/assets/image.png) ## Features @@ -27,12 +25,12 @@ npm install ngx-simple-datatables --save 1. Import the module in your `app.module.ts`: ```typescript -import { NgxSimpleDatatableModule } from "ngx-simple-datatables"; +import { NgxSimpleDatatablesModule } from "ngx-simple-datatables"; @NgModule({ imports: [ // ... other imports - NgxSimpleDatatableModule, + NgxSimpleDatatablesModule, ], }) export class AppModule {} @@ -41,13 +39,13 @@ export class AppModule {} 2. Use the component in your template: ```html - - + ``` 3. Define your columns and data in your component: @@ -136,7 +134,7 @@ columns: ColumnConfig[] = [ Use Angular templates to customize cell content: ```html - + @@ -152,7 +150,7 @@ Use Angular templates to customize cell content: {{ row[column.field] }} - + ``` ### Custom Header Templates @@ -160,7 +158,7 @@ Use Angular templates to customize cell content: Customize header appearance and behavior: ```html - +
@@ -168,7 +166,7 @@ Customize header appearance and behavior:
- + ``` ### Theming @@ -265,17 +263,17 @@ You can customize the table appearance by overriding the following CSS custom pr ## Development -Run `ng build ngx-simple-datatable` to build the library. The build artifacts will be stored in the `dist/` directory. +Run `ng build ngx-simple-datatables` to build the library. The build artifacts will be stored in the `dist/` directory. ## Publishing -After building your library with `ng build ngx-simple-datatable`, go to the dist folder `cd dist/ngx-simple-datatable` and run `npm publish`. +After building your library with `ng build ngx-simple-datatables`, go to the dist folder `cd dist/ngx-simple-datatables` and run `npm publish`. -After building your library with `ng build ngx-simple-datatable`, go to the dist folder `cd dist/ngx-simple-datatable` and run `npm publish`. +After building your library with `ng build ngx-simple-datatables`, go to the dist folder `cd dist/ngx-simple-datatables` and run `npm publish`. ## Running unit tests -Run `ng test ngx-simple-datatable` to execute the unit tests via [Karma](https://karma-runner.github.io). +Run `ng test ngx-simple-datatables` to execute the unit tests via [Karma](https://karma-runner.github.io). ## Further help diff --git a/projects/ngx-simple-datatable/assets/image.png b/projects/ngx-simple-datatables/assets/image.png similarity index 100% rename from projects/ngx-simple-datatable/assets/image.png rename to projects/ngx-simple-datatables/assets/image.png diff --git a/projects/ngx-simple-datatable/ng-package.json b/projects/ngx-simple-datatables/ng-package.json similarity index 71% rename from projects/ngx-simple-datatable/ng-package.json rename to projects/ngx-simple-datatables/ng-package.json index a2cf63a..e3cd190 100644 --- a/projects/ngx-simple-datatable/ng-package.json +++ b/projects/ngx-simple-datatables/ng-package.json @@ -1,7 +1,7 @@ { "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../dist/ngx-simple-datatable", + "dest": "../../dist/ngx-simple-datatables", "lib": { "entryFile": "src/public-api.ts" } -} \ No newline at end of file +} diff --git a/projects/ngx-simple-datatable/package.json b/projects/ngx-simple-datatables/package.json similarity index 77% rename from projects/ngx-simple-datatable/package.json rename to projects/ngx-simple-datatables/package.json index 81cbfa4..5dd5ea9 100644 --- a/projects/ngx-simple-datatable/package.json +++ b/projects/ngx-simple-datatables/package.json @@ -6,7 +6,7 @@ "license": "MIT", "repository": { "type": "git", - "url": "https://github.com/rinturaj/ngx-simple-datatable.git" + "url": "https://github.com/rinturaj/ngx-simple-datatables.git" }, "keywords": [ "angular", @@ -29,8 +29,8 @@ "tslib": "^2.3.0" }, "sideEffects": false, - "homepage": "https://github.com/rinturaj/ngx-simple-datatable#readme", + "homepage": "https://github.com/rinturaj/ngx-simple-datatables#readme", "bugs": { - "url": "https://github.com/rinturaj/ngx-simple-datatable/issues" + "url": "https://github.com/rinturaj/ngx-simple-datatables/issues" } } diff --git a/projects/ngx-simple-datatable/src/interfaces/column-config.interface.ts b/projects/ngx-simple-datatables/src/interfaces/column-config.interface.ts similarity index 100% rename from projects/ngx-simple-datatable/src/interfaces/column-config.interface.ts rename to projects/ngx-simple-datatables/src/interfaces/column-config.interface.ts diff --git a/projects/ngx-simple-datatable/src/lib/ngx-simple-datatable.component.html b/projects/ngx-simple-datatables/src/lib/ngx-simple-datatables.component.html similarity index 100% rename from projects/ngx-simple-datatable/src/lib/ngx-simple-datatable.component.html rename to projects/ngx-simple-datatables/src/lib/ngx-simple-datatables.component.html diff --git a/projects/ngx-simple-datatable/src/lib/ngx-simple-datatable.component.scss b/projects/ngx-simple-datatables/src/lib/ngx-simple-datatables.component.scss similarity index 100% rename from projects/ngx-simple-datatable/src/lib/ngx-simple-datatable.component.scss rename to projects/ngx-simple-datatables/src/lib/ngx-simple-datatables.component.scss diff --git a/projects/ngx-simple-datatables/src/lib/ngx-simple-datatables.component.spec.ts b/projects/ngx-simple-datatables/src/lib/ngx-simple-datatables.component.spec.ts new file mode 100644 index 0000000..b5fa797 --- /dev/null +++ b/projects/ngx-simple-datatables/src/lib/ngx-simple-datatables.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from "@angular/core/testing"; +import { NgxSimpleDatatablesComponent } from "./ngx-simple-datatables.component"; + +describe("NgxSimpleDatatableComponent", () => { + let component: NgxSimpleDatatablesComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [NgxSimpleDatatablesComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(NgxSimpleDatatablesComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it("should create", () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/ngx-simple-datatable/src/lib/ngx-simple-datatable.component.ts b/projects/ngx-simple-datatables/src/lib/ngx-simple-datatables.component.ts similarity index 97% rename from projects/ngx-simple-datatable/src/lib/ngx-simple-datatable.component.ts rename to projects/ngx-simple-datatables/src/lib/ngx-simple-datatables.component.ts index a58ee6c..b5b2690 100644 --- a/projects/ngx-simple-datatable/src/lib/ngx-simple-datatable.component.ts +++ b/projects/ngx-simple-datatables/src/lib/ngx-simple-datatables.component.ts @@ -20,14 +20,14 @@ import { import { ColumnConfig, SortState } from "../interfaces/column-config.interface"; @Component({ - selector: "ngx-simple-datatable", + selector: "ngx-simple-datatables", standalone: true, imports: [CommonModule], - templateUrl: "./ngx-simple-datatable.component.html", - styleUrls: ["./ngx-simple-datatable.component.scss"], + templateUrl: "./ngx-simple-datatables.component.html", + styleUrls: ["./ngx-simple-datatables.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class NgxSimpleDatatableComponent +export class NgxSimpleDatatablesComponent implements OnInit, OnDestroy, AfterContentInit { @Input() columns: ColumnConfig[] = []; @@ -77,7 +77,7 @@ export class NgxSimpleDatatableComponent private scrollListener: ((event: Event) => void) | null = null; private resizeListener: ((event: Event) => void) | null = null; private isBrowser: boolean; - private storageKey = "ngx-simple-datatable-column-widths"; + private storageKey = "ngx-simple-datatables-column-widths"; private scrollRequestId: number | null = null; private resizeTimer: ReturnType | null = null; private mouseMoveHandler: ((e: MouseEvent) => void) | null = null; @@ -116,10 +116,10 @@ export class NgxSimpleDatatableComponent ngAfterContentInit() { // if (!this.headerTemplate) { - // throw new Error("ngx-simple-datatable requires a headerTemplate."); + // throw new Error("ngx-simple-datatables requires a headerTemplate."); // } // if (!this.cellTemplate) { - // throw new Error("ngx-simple-datatable requires a cellTemplate."); + // throw new Error("ngx-simple-datatables requires a cellTemplate."); // } } diff --git a/projects/ngx-simple-datatables/src/lib/ngx-simple-datatables.service.spec.ts b/projects/ngx-simple-datatables/src/lib/ngx-simple-datatables.service.spec.ts new file mode 100644 index 0000000..93fab06 --- /dev/null +++ b/projects/ngx-simple-datatables/src/lib/ngx-simple-datatables.service.spec.ts @@ -0,0 +1,15 @@ +import { TestBed } from "@angular/core/testing"; +import { NgxSimpleDatatablesService } from "./ngx-simple-datatables.service"; + +describe("NgxSimpleDatatableService", () => { + let service: NgxSimpleDatatablesService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(NgxSimpleDatatablesService); + }); + + it("should be created", () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/projects/ngx-simple-datatables/src/lib/ngx-simple-datatables.service.ts b/projects/ngx-simple-datatables/src/lib/ngx-simple-datatables.service.ts new file mode 100644 index 0000000..388c8ad --- /dev/null +++ b/projects/ngx-simple-datatables/src/lib/ngx-simple-datatables.service.ts @@ -0,0 +1,8 @@ +import { Injectable } from "@angular/core"; + +@Injectable({ + providedIn: "root", +}) +export class NgxSimpleDatatablesService { + constructor() {} +} diff --git a/projects/ngx-simple-datatables/src/public-api.ts b/projects/ngx-simple-datatables/src/public-api.ts new file mode 100644 index 0000000..2cd15d4 --- /dev/null +++ b/projects/ngx-simple-datatables/src/public-api.ts @@ -0,0 +1,6 @@ +/* + * Public API Surface of ngx-simple-datatables + */ + +export * from "./lib/ngx-simple-datatables.service"; +export * from "./lib/ngx-simple-datatables.component"; diff --git a/projects/ngx-simple-datatable/tsconfig.lib.json b/projects/ngx-simple-datatables/tsconfig.lib.json similarity index 100% rename from projects/ngx-simple-datatable/tsconfig.lib.json rename to projects/ngx-simple-datatables/tsconfig.lib.json diff --git a/projects/ngx-simple-datatable/tsconfig.lib.prod.json b/projects/ngx-simple-datatables/tsconfig.lib.prod.json similarity index 100% rename from projects/ngx-simple-datatable/tsconfig.lib.prod.json rename to projects/ngx-simple-datatables/tsconfig.lib.prod.json diff --git a/projects/ngx-simple-datatable/tsconfig.spec.json b/projects/ngx-simple-datatables/tsconfig.spec.json similarity index 100% rename from projects/ngx-simple-datatable/tsconfig.spec.json rename to projects/ngx-simple-datatables/tsconfig.spec.json diff --git a/tsconfig.json b/tsconfig.json index 18d0add..db01b6e 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -11,9 +11,7 @@ "noFallthroughCasesInSwitch": true, "skipLibCheck": true, "paths": { - "ngx-simple-datatable": [ - "./dist/ngx-simple-datatable" - ] + "ngx-simple-datatables": ["./dist/ngx-simple-datatables"] }, "esModuleInterop": true, "sourceMap": true, @@ -24,10 +22,7 @@ "target": "ES2022", "module": "ES2022", "useDefineForClassFields": false, - "lib": [ - "ES2022", - "dom" - ] + "lib": ["ES2022", "dom"] }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, From 9cd1930b2d7057f85d82c98d0314373ac84bcea4 Mon Sep 17 00:00:00 2001 From: "Rintu Raj.c" Date: Sat, 30 Aug 2025 19:41:39 +0530 Subject: [PATCH 2/4] [refactor] readme updated --- README.md | 52 +++++-------------- angular.json | 22 ++------ .../example-app/src/app/app.component.html | 3 -- projects/ngx-simple-datatables/README.md | 46 ++++------------ 4 files changed, 30 insertions(+), 93 deletions(-) diff --git a/README.md b/README.md index 1f6eb7e..75ce8fd 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ -# NgxSimpleDatatable +# NgxSimpleDatatables A lightweight, high-performance Angular data table component with features like virtual scrolling, column freezing, and customizable templates. -![NgxSimpleDatatable Screenshot](projects/ngx-simple-datatables/assets/image.png) +![NgxSimpleDatatables Screenshot](/projects/ngx-simple-datatables/assets/image.png) ## Features @@ -25,12 +25,12 @@ npm install ngx-simple-datatables --save 1. Import the module in your `app.module.ts`: ```typescript -import { NgxSimpleDatatableModule } from "ngx-simple-datatables"; +import { NgxSimpleDatatablesModule } from "ngx-simple-datatables"; @NgModule({ imports: [ // ... other imports - NgxSimpleDatatableModule, + NgxSimpleDatatablesModule, ], }) export class AppModule {} @@ -42,8 +42,8 @@ export class AppModule {} ``` @@ -228,38 +228,14 @@ Customize the table appearance using CSS custom properties: ### Column Configuration -| Property | Type | Description | -| ---------- | ---------------------------- | -------------------------------- | ---------------------- | -| `field` | `string` | Property name in the data object | -| `header` | `string` | Column header text | -| `width` | `string | number` | Column width (px or %) | -| `freeze` | `'left' | 'right'` | Freeze column position | -| `sortable` | `boolean` | Whether the column is sortable | -| `sortFn` | `(a: any, b: any) => number` | Custom sort function | - -## Styling - -You can customize the table appearance by overriding the following CSS custom properties: - -```css -.dynamic-table-container { - --ngx-simple-dt-bg: #ffffff; - --ngx-simple-dt-border: 1px solid #e0e0e0; - --ngx-simple-dt-border-radius: 8px; - --ngx-simple-dt-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); - --ngx-simple-dt-transition: all 0.2s ease-in-out; -} - -.table-header { - --ngx-simple-dt-header-bg: #f8f9fa; - --ngx-simple-dt-header-hover-bg: #e9ecef; - --ngx-simple-dt-header-border: 1px solid #e0e0e0; - --ngx-simple-dt-header-text: #495057; - --ngx-simple-dt-header-height: 48px; - --ngx-simple-dt-header-font-weight: 600; - --ngx-simple-dt-header-padding: 0 16px; -} -``` +| Property | Type | Description | details | +| ---------- | ---------------------------- | -------------------------------- | ------------ | +| `field` | `string` | Property name in the data object | string | +| `header` | `string` | Column header text | string | +| `width` | `string \| number` | Column width (px or %) | | +| `freeze` | `'left' \| 'right'` | Freeze column position | | +| `sortable` | `boolean` | Whether the column is sortable | true / false | +| `sortFn` | `(a: any, b: any) => number` | Custom sort function | function | ## Development diff --git a/angular.json b/angular.json index bc83daf..cfc8ac2 100644 --- a/angular.json +++ b/angular.json @@ -28,10 +28,7 @@ "builder": "@angular-devkit/build-angular:karma", "options": { "tsConfig": "projects/ngx-simple-datatables/tsconfig.spec.json", - "polyfills": [ - "zone.js", - "zone.js/testing" - ] + "polyfills": ["zone.js", "zone.js/testing"] } } } @@ -49,17 +46,13 @@ "outputPath": "dist/example-app", "index": "projects/example-app/src/index.html", "browser": "projects/example-app/src/main.ts", - "polyfills": [ - "zone.js" - ], + "polyfills": ["zone.js"], "tsConfig": "projects/example-app/tsconfig.app.json", "assets": [ "projects/example-app/src/favicon.ico", "projects/example-app/src/assets" ], - "styles": [ - "projects/example-app/src/styles.css" - ], + "styles": ["projects/example-app/src/styles.css"], "scripts": [], "server": "projects/example-app/src/main.server.ts", "prerender": true, @@ -112,18 +105,13 @@ "test": { "builder": "@angular-devkit/build-angular:karma", "options": { - "polyfills": [ - "zone.js", - "zone.js/testing" - ], + "polyfills": ["zone.js", "zone.js/testing"], "tsConfig": "projects/example-app/tsconfig.spec.json", "assets": [ "projects/example-app/src/favicon.ico", "projects/example-app/src/assets" ], - "styles": [ - "projects/example-app/src/styles.css" - ], + "styles": ["projects/example-app/src/styles.css"], "scripts": [] } } diff --git a/projects/example-app/src/app/app.component.html b/projects/example-app/src/app/app.component.html index 55537ab..f9f23df 100644 --- a/projects/example-app/src/app/app.component.html +++ b/projects/example-app/src/app/app.component.html @@ -3,10 +3,7 @@

Dynamic Table Example

- {{ column?.header }} - -
diff --git a/projects/ngx-simple-datatables/README.md b/projects/ngx-simple-datatables/README.md index 5f96986..fd77656 100644 --- a/projects/ngx-simple-datatables/README.md +++ b/projects/ngx-simple-datatables/README.md @@ -2,7 +2,7 @@ A lightweight, high-performance Angular data table component with features like virtual scrolling, column freezing, and customizable templates. -![NgxSimpleDatatables Screenshot](projects/ngx-simple-datatables/assets/image.png) +![NgxSimpleDatatables Screenshot](../ngx-simple-datatables/assets/image.png) ## Features @@ -42,8 +42,8 @@ export class AppModule {} ``` @@ -228,38 +228,14 @@ Customize the table appearance using CSS custom properties: ### Column Configuration -| Property | Type | Description | -| ---------- | ---------------------------- | -------------------------------- | ---------------------- | -| `field` | `string` | Property name in the data object | -| `header` | `string` | Column header text | -| `width` | `string | number` | Column width (px or %) | -| `freeze` | `'left' | 'right'` | Freeze column position | -| `sortable` | `boolean` | Whether the column is sortable | -| `sortFn` | `(a: any, b: any) => number` | Custom sort function | - -## Styling - -You can customize the table appearance by overriding the following CSS custom properties: - -```css -.dynamic-table-container { - --ngx-simple-dt-bg: #ffffff; - --ngx-simple-dt-border: 1px solid #e0e0e0; - --ngx-simple-dt-border-radius: 8px; - --ngx-simple-dt-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); - --ngx-simple-dt-transition: all 0.2s ease-in-out; -} - -.table-header { - --ngx-simple-dt-header-bg: #f8f9fa; - --ngx-simple-dt-header-hover-bg: #e9ecef; - --ngx-simple-dt-header-border: 1px solid #e0e0e0; - --ngx-simple-dt-header-text: #495057; - --ngx-simple-dt-header-height: 48px; - --ngx-simple-dt-header-font-weight: 600; - --ngx-simple-dt-header-padding: 0 16px; -} -``` +| Property | Type | Description | details | +| ---------- | ---------------------------- | -------------------------------- | ------------ | +| `field` | `string` | Property name in the data object | string | +| `header` | `string` | Column header text | string | +| `width` | `string \| number` | Column width (px or %) | | +| `freeze` | `'left' \| 'right'` | Freeze column position | | +| `sortable` | `boolean` | Whether the column is sortable | true / false | +| `sortFn` | `(a: any, b: any) => number` | Custom sort function | function | ## Development From ec4865d51c2ec7f300a569d588590fa954417143 Mon Sep 17 00:00:00 2001 From: "Rintu Raj.c" Date: Sat, 30 Aug 2025 19:52:17 +0530 Subject: [PATCH 3/4] =?UTF-8?q?feat(compat):=20support=20Angular=2013?= =?UTF-8?q?=E2=80=9317,=20add=20NgModule=20wrapper=20and=20refactor=20comp?= =?UTF-8?q?onent?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Relax peerDependencies to ">=13.0.0 <18" - Convert [NgxSimpleDatatablesComponent] to non-standalone for Angular <=13 compatibility - Add [NgxSimpleDatatablesModule] declaring/exports the component - Export the module from [src/public-api.ts] - Update example app to import [NgxSimpleDatatablesModule] instead of the component - Build verified for the library BREAKING CHANGE: The component is no longer standalone. Consumers should import [NgxSimpleDatatablesModule](NgModule) instead of importing the component directly. --- projects/example-app/src/app/app.component.ts | 4 ++-- projects/ngx-simple-datatables/package.json | 4 ++-- .../src/lib/ngx-simple-datatables.component.ts | 2 -- .../src/lib/ngx-simple-datatables.module.ts | 12 ++++++++++++ projects/ngx-simple-datatables/src/public-api.ts | 1 + 5 files changed, 17 insertions(+), 6 deletions(-) create mode 100644 projects/ngx-simple-datatables/src/lib/ngx-simple-datatables.module.ts diff --git a/projects/example-app/src/app/app.component.ts b/projects/example-app/src/app/app.component.ts index be49f30..e48dc42 100644 --- a/projects/example-app/src/app/app.component.ts +++ b/projects/example-app/src/app/app.component.ts @@ -2,12 +2,12 @@ import { Component } from "@angular/core"; import { RouterOutlet } from "@angular/router"; import { ColumnConfig } from "../../../ngx-simple-datatables/src/interfaces/column-config.interface"; import { CommonModule } from "@angular/common"; -import { NgxSimpleDatatablesComponent } from "../../../ngx-simple-datatables/src/public-api"; +import { NgxSimpleDatatablesModule } from "../../../ngx-simple-datatables/src/public-api"; @Component({ selector: "app-root", standalone: true, - imports: [NgxSimpleDatatablesComponent, CommonModule], + imports: [NgxSimpleDatatablesModule, CommonModule], templateUrl: "./app.component.html", styleUrl: "./app.component.css", }) diff --git a/projects/ngx-simple-datatables/package.json b/projects/ngx-simple-datatables/package.json index 5dd5ea9..cec5859 100644 --- a/projects/ngx-simple-datatables/package.json +++ b/projects/ngx-simple-datatables/package.json @@ -22,8 +22,8 @@ "angular17" ], "peerDependencies": { - "@angular/common": "^17.3.0", - "@angular/core": "^17.3.0" + "@angular/common": ">=13.0.0 <18", + "@angular/core": ">=13.0.0 <18" }, "dependencies": { "tslib": "^2.3.0" diff --git a/projects/ngx-simple-datatables/src/lib/ngx-simple-datatables.component.ts b/projects/ngx-simple-datatables/src/lib/ngx-simple-datatables.component.ts index b5b2690..7b497a9 100644 --- a/projects/ngx-simple-datatables/src/lib/ngx-simple-datatables.component.ts +++ b/projects/ngx-simple-datatables/src/lib/ngx-simple-datatables.component.ts @@ -21,8 +21,6 @@ import { ColumnConfig, SortState } from "../interfaces/column-config.interface"; @Component({ selector: "ngx-simple-datatables", - standalone: true, - imports: [CommonModule], templateUrl: "./ngx-simple-datatables.component.html", styleUrls: ["./ngx-simple-datatables.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/projects/ngx-simple-datatables/src/lib/ngx-simple-datatables.module.ts b/projects/ngx-simple-datatables/src/lib/ngx-simple-datatables.module.ts new file mode 100644 index 0000000..7a4c7ce --- /dev/null +++ b/projects/ngx-simple-datatables/src/lib/ngx-simple-datatables.module.ts @@ -0,0 +1,12 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { NgxSimpleDatatablesComponent } from './ngx-simple-datatables.component'; + +// NgModule wrapper to support Angular 14+ NgModule-based apps +// This keeps the component standalone while enabling module-style imports. +@NgModule({ + declarations: [NgxSimpleDatatablesComponent], + imports: [CommonModule], + exports: [NgxSimpleDatatablesComponent], +}) +export class NgxSimpleDatatablesModule {} diff --git a/projects/ngx-simple-datatables/src/public-api.ts b/projects/ngx-simple-datatables/src/public-api.ts index 2cd15d4..edf586e 100644 --- a/projects/ngx-simple-datatables/src/public-api.ts +++ b/projects/ngx-simple-datatables/src/public-api.ts @@ -4,3 +4,4 @@ export * from "./lib/ngx-simple-datatables.service"; export * from "./lib/ngx-simple-datatables.component"; +export * from "./lib/ngx-simple-datatables.module"; From f0eaaf6318b4452b4946904666b8544591fe6362 Mon Sep 17 00:00:00 2001 From: "Rintu Raj.c" Date: Sat, 30 Aug 2025 19:54:09 +0530 Subject: [PATCH 4/4] [update] Version bumped to 2.0.0 across workspace and library. --- package.json | 2 +- projects/ngx-simple-datatables/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index ac9e9d8..bbb0ebf 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ngx-simple-datatables-workspace", - "version": "1.17.0", + "version": "2.0.0", "scripts": { "ng": "ng", "start": "ng serve", diff --git a/projects/ngx-simple-datatables/package.json b/projects/ngx-simple-datatables/package.json index cec5859..589998f 100644 --- a/projects/ngx-simple-datatables/package.json +++ b/projects/ngx-simple-datatables/package.json @@ -1,6 +1,6 @@ { "name": "ngx-simple-datatables", - "version": "1.17.0", + "version": "2.0.0", "description": "🚀 High-performance Angular Data Table Component with Virtual Scrolling, Sorting, Filtering, and Customizable Templates. Perfect for enterprise applications.", "author": "Rintu raj C", "license": "MIT",