Merge pull request #5 from rinturaj/development

[Version Update]  2.0.0

Author: rinturaj

.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}}

README.md

@@ -1,10 +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-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
-<ngx-simple-datatable
+<ngx-simple-datatables
   [columns]="columns"
   [data]="data"
-  [rowHeight]="40"
-  [headerHeight]="50"
+  [rowHeight]="26"
+  [headerHeight]="26"
 >
-</ngx-simple-datatable>
+</ngx-simple-datatables>
 ```
 
 3. Define your columns and data in your component:
@@ -136,7 +134,7 @@ columns: ColumnConfig[] = [
 Use Angular templates to customize cell content:
 
 ```html
-<ngx-simple-datatable [columns]="columns" [data]="data">
+<ngx-simple-datatables [columns]="columns" [data]="data">
   <ng-template #cellTemplate let-row="row" let-column="column">
     <ng-container [ngSwitch]="column.field">
       <ng-container *ngSwitchCase="'status'">
@@ -152,23 +150,23 @@ Use Angular templates to customize cell content:
       <ng-container *ngSwitchDefault> {{ row[column.field] }} </ng-container>
     </ng-container>
   </ng-template>
-</ngx-simple-datatable>
+</ngx-simple-datatables>
 ```
 
 ### Custom Header Templates
 
 Customize header appearance and behavior:
 
 ```html
-<ngx-simple-datatable [columns]="columns" [data]="data">
+<ngx-simple-datatables [columns]="columns" [data]="data">
   <ng-template #headerTemplate let-column="column">
     <div class="custom-header">
       <i class="fas fa-info-circle" [title]="column.header"></i>
       <span>{{ column.header }}</span>
       <i class="fas fa-sort" *ngIf="column.sortable"></i>
     </div>
   </ng-template>
-</ngx-simple-datatable>
+</ngx-simple-datatables>
 ```
 
 ### Theming
@@ -230,52 +228,28 @@ 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
 
-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
 

angular.json

@@ -3,35 +3,32 @@
   "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"
         },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "tsConfig": "projects/ngx-simple-datatable/tsconfig.spec.json",
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ]
+            "tsConfig": "projects/ngx-simple-datatables/tsconfig.spec.json",
+            "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": []
           }
         }

package-lock.json

@@ -1,11 +1,11 @@
 {
-  "name": "ngx-simple-datatable-workspace",
-  "version": "1.17.0",
+  "name": "ngx-simple-datatables-workspace",
+  "version": "2.0.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",

package.json

@@ -1,12 +1,9 @@
 <div class="app-container">
   <h1>Dynamic Table Example</h1>
   <div class="table-wrapper">
-    <ngx-simple-datatable [columns]="columns" [data]="data" [rowHeight]="26" [headerHeight]="26">
+    <ngx-simple-datatables [columns]="columns" [data]="data" [rowHeight]="26" [headerHeight]="26">
       <ng-template #headerTemplate let-column="column">
-
         <span class="custom-header">{{ column?.header }}</span>
-
-
       </ng-template>
       <ng-template #cellTemplate let-row="row" let-column="column">
         <div [ngSwitch]="column.field">
@@ -22,7 +19,7 @@ <h1>Dynamic Table Example</h1>
         </div>
 
       </ng-template>
-    </ngx-simple-datatable>
+    </ngx-simple-datatables>
 
   </div>
 </div>

projects/example-app/src/app/app.component.html

@@ -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 { NgxSimpleDatatablesModule } from "../../../ngx-simple-datatables/src/public-api";
 
 @Component({
   selector: "app-root",
   standalone: true,
-  imports: [NgxSimpleDatatableComponent, CommonModule],
+  imports: [NgxSimpleDatatablesModule, CommonModule],
   templateUrl: "./app.component.html",
   styleUrl: "./app.component.css",
 })