ngx-simple-datatables 1.17.0 → 2.0.0

package/README.md

@@ -1,7 +1,9 @@
-# NgxSimpleDatatable
+# NgxSimpleDatatables
 
 A lightweight, high-performance Angular data table component with features like virtual scrolling, column freezing, and customizable templates.
 
+![NgxSimpleDatatables Screenshot](../ngx-simple-datatables/assets/image.png)
+
 ## Features
 
 - 📊 Virtual scrolling for smooth performance with large datasets
@@ -15,7 +17,7 @@ A lightweight, high-performance Angular data table component with features like
 ## Installation
 
 ```bash
-npm install ngx-simple-datatable --save
+npm install ngx-simple-datatables --save
 ```
 
 ## Basic Usage
@@ -23,12 +25,12 @@ npm install ngx-simple-datatable --save
 1. Import the module in your `app.module.ts`:
 
 ```typescript
-import { NgxSimpleDatatableModule } from "ngx-simple-datatable";
+import { NgxSimpleDatatablesModule } from "ngx-simple-datatables";
 
 @NgModule({
   imports: [
     // ... other imports
-    NgxSimpleDatatableModule,
+    NgxSimpleDatatablesModule,
   ],
 })
 export class AppModule {}
@@ -37,20 +39,20 @@ 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:
 
 ```typescript
 import { Component } from "@angular/core";
-import { ColumnConfig } from "ngx-simple-datatable";
+import { ColumnConfig } from "ngx-simple-datatables";
 
 interface UserData {
   id: number;
@@ -85,6 +87,33 @@ export class AppComponent {
 }
 ```
 
+4. add styles in your `styles.css`:
+
+```css
+:root {
+  --ngx-simple-dt-bg: #efefef;
+  --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;
+
+  --ngx-simple-dt-header-bg: #98ccff;
+  --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;
+
+  --ngx-simple-dt-cell-padding: 0 16px;
+  --ngx-simple-dt-cell-border: 1px solid #e9ecef;
+  --ngx-simple-dt-cell-hover-bg: #f1f3f5;
+  --ngx-simple-dt-cell-active-bg: #e9ecef;
+  --ngx-simple-dt-cell-font-size: 0.875rem;
+  --ngx-simple-dt-cell-line-height: 1.5;
+}
+```
+
 ## Advanced Features
 
 ### Column Freezing
@@ -105,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'">
@@ -121,7 +150,7 @@ 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
@@ -129,7 +158,7 @@ Use Angular templates to customize cell content:
 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>
@@ -137,7 +166,7 @@ Customize header appearance and behavior:
       <i class="fas fa-sort" *ngIf="column.sortable"></i>
     </div>
   </ng-template>
-</ngx-simple-datatable>
+</ngx-simple-datatables>
 ```
 
 ### Theming
@@ -147,12 +176,41 @@ Customize the table appearance using CSS custom properties:
 ```css
 /* styles.css */
 :root {
-  --ngx-simple-dt-header-bg: #f8f9fa;
-  --ngx-simple-dt-header-text: #2c3e50;
-  --ngx-simple-dt-row-hover-bg: #f1f3f5;
+  --ngx-simple-dt-bg: #efefef;
+  --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;
+
+  --ngx-simple-dt-header-bg: #98ccff;
+  --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;
+
+  --ngx-simple-dt-cell-padding: 0 16px;
+  --ngx-simple-dt-cell-border: 1px solid #e9ecef;
+  --ngx-simple-dt-cell-hover-bg: #f1f3f5;
+  --ngx-simple-dt-cell-active-bg: #e9ecef;
+  --ngx-simple-dt-cell-font-size: 0.875rem;
+  --ngx-simple-dt-cell-line-height: 1.5;
+
+  --ngx-simple-dt-row-height: 48px;
+  --ngx-simple-dt-row-hover-bg: #f8f9fa;
   --ngx-simple-dt-row-stripe-bg: #f8f9fa;
+  --ngx-simple-dt-row-active-bg: #e9ecef;
   --ngx-simple-dt-cell-padding: 0 16px;
   --ngx-simple-dt-cell-border: 1px solid #e9ecef;
+  --ngx-simple-dt-cell-font-size: 0.875rem;
+  --ngx-simple-dt-cell-line-height: 1.5;
+
+  --ngx-simple-dt-row-bg: #ffffff;
+  --ngx-simple-dt-row-hover-bg: #f8f9fa;
+  --ngx-simple-dt-row-stripe-bg: #f8f9fa;
+  --ngx-simple-dt-row-active-bg: #e9ecef;
+  --ngx-simple-dt-row-border: 1px solid #e9ecef;
 }
 ```
 
@@ -170,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
 

package/esm2022/interfaces/column-config.interface.mjs

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sdW1uLWNvbmZpZy5pbnRlcmZhY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2ltcGxlLWRhdGF0YWJsZS9zcmMvaW50ZXJmYWNlcy9jb2x1bW4tY29uZmlnLmludGVyZmFjZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGludGVyZmFjZSBDb2x1bW5Db25maWcge1xuICBmaWVsZDogc3RyaW5nO1xuICBoZWFkZXI6IHN0cmluZztcbiAgd2lkdGg/OiBzdHJpbmc7XG4gIGZyZWV6ZT86IFwibGVmdFwiIHwgXCJyaWdodFwiO1xuICBzb3J0YWJsZT86IGJvb2xlYW47XG4gIGZvcm1hdHRlcj86ICh2YWx1ZTogYW55LCByb3c6IGFueSkgPT4gc3RyaW5nO1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIFNvcnRTdGF0ZSB7XG4gIGZpZWxkOiBzdHJpbmc7XG4gIGRpcmVjdGlvbjogXCJhc2NcIiB8IFwiZGVzY1wiIHwgbnVsbDtcbn1cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sdW1uLWNvbmZpZy5pbnRlcmZhY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2ltcGxlLWRhdGF0YWJsZXMvc3JjL2ludGVyZmFjZXMvY29sdW1uLWNvbmZpZy5pbnRlcmZhY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBpbnRlcmZhY2UgQ29sdW1uQ29uZmlnIHtcbiAgZmllbGQ6IHN0cmluZztcbiAgaGVhZGVyOiBzdHJpbmc7XG4gIHdpZHRoPzogc3RyaW5nO1xuICBmcmVlemU/OiBcImxlZnRcIiB8IFwicmlnaHRcIjtcbiAgc29ydGFibGU/OiBib29sZWFuO1xuICBmb3JtYXR0ZXI/OiAodmFsdWU6IGFueSwgcm93OiBhbnkpID0+IHN0cmluZztcbn1cblxuZXhwb3J0IGludGVyZmFjZSBTb3J0U3RhdGUge1xuICBmaWVsZDogc3RyaW5nO1xuICBkaXJlY3Rpb246IFwiYXNjXCIgfCBcImRlc2NcIiB8IG51bGw7XG59XG4iXX0=