diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml
index c4b316d..3d89ab7 100644
--- a/.github/workflows/npm-publish.yml
+++ b/.github/workflows/npm-publish.yml
@@ -2,32 +2,32 @@ name: Publish to NPM
on:
push:
- branches: [release]
+ branches: [master]
# Only trigger on changes to library files
paths:
- - 'projects/ngx-simple-datatable/**'
- - 'package.json'
- - 'ng-package.json'
- - 'tsconfig.lib.json'
+ - "projects/**"
+ - "package.json"
+ - "ng-package.json"
+ - "tsconfig.lib.json"
jobs:
build-and-publish:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
-
+
- name: Use Node.js
uses: actions/setup-node@v4
with:
- node-version: '20.x'
- registry-url: 'https://registry.npmjs.org'
-
+ node-version: "20.x"
+ registry-url: "https://registry.npmjs.org"
+
- name: Install dependencies
run: npm ci
-
+
- name: Build library
run: npm run build:lib
-
+
- name: Publish to NPM
run: |
cd dist/ngx-simple-datatable
diff --git a/README.md b/README.md
index 5c220d7..76e1702 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,8 @@
A lightweight, high-performance Angular data table component with features like virtual scrolling, column freezing, and customizable templates.
+## Demo [NgxSimpleDatatable](https://ngx-simple-datatable.stackblitz.io/)
+

## Features
diff --git a/projects/ngx-simple-datatable/README.md b/projects/ngx-simple-datatable/README.md
index 96ee28c..531edd0 100644
--- a/projects/ngx-simple-datatable/README.md
+++ b/projects/ngx-simple-datatable/README.md
@@ -1,6 +1,7 @@
# NgxSimpleDatatable
A lightweight, high-performance Angular data table component with features like virtual scrolling, column freezing, and customizable templates.
+.
## Features
@@ -23,33 +24,34 @@ npm install ngx-simple-datatable --save
1. Import the module in your `app.module.ts`:
```typescript
-import { NgxSimpleDatatableModule } from 'ngx-simple-datatable';
+import { NgxSimpleDatatableModule } from "ngx-simple-datatable";
@NgModule({
imports: [
// ... other imports
- NgxSimpleDatatableModule
- ]
+ NgxSimpleDatatableModule,
+ ],
})
-export class AppModule { }
+export class AppModule {}
```
2. Use the component in your template:
```html
-
+ [headerHeight]="50"
+>
```
3. Define your columns and data in your component:
```typescript
-import { Component } from '@angular/core';
-import { ColumnConfig } from 'ngx-simple-datatable';
+import { Component } from "@angular/core";
+import { ColumnConfig } from "ngx-simple-datatable";
interface UserData {
id: number;
@@ -59,21 +61,26 @@ interface UserData {
}
@Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
+ selector: "app-root",
+ templateUrl: "./app.component.html",
+ styleUrls: ["./app.component.css"],
})
export class AppComponent {
columns: ColumnConfig[] = [
- { field: 'id', header: 'ID', width: '80px', freeze: 'left' },
- { field: 'name', header: 'Name', width: '200px', sortable: true },
- { field: 'email', header: 'Email', width: '250px' },
- { field: 'status', header: 'Status', width: '120px' }
+ { field: "id", header: "ID", width: "80px", freeze: "left" },
+ { field: "name", header: "Name", width: "200px", sortable: true },
+ { field: "email", header: "Email", width: "250px" },
+ { field: "status", header: "Status", width: "120px" },
];
data: UserData[] = [
- { id: 1, name: 'John Doe', email: 'john@example.com', status: 'Active' },
- { id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'Inactive' },
+ { id: 1, name: "John Doe", email: "john@example.com", status: "Active" },
+ {
+ id: 2,
+ name: "Jane Smith",
+ email: "jane@example.com",
+ status: "Inactive",
+ },
// ... more data
];
}
@@ -103,16 +110,16 @@ Use Angular templates to customize cell content:
-
+ }"
+ >
{{ row[column.field] }}
-
- {{ row[column.field] }}
-
+ {{ row[column.field] }}
@@ -154,24 +161,24 @@ Customize the table appearance using CSS custom properties:
### Inputs
-| Input | Type | Description |
-|-------|------|-------------|
-| `[columns]` | `ColumnConfig[]` | Array of column configurations |
-| `[data]` | `any[]` | Array of data to display |
-| `[rowHeight]` | `number` | Height of each row in pixels |
-| `[headerHeight]` | `number` | Height of the header row in pixels |
-| `[bufferSize]` | `number` | Number of rows to render outside viewport for smooth scrolling |
+| Input | Type | Description |
+| ---------------- | ---------------- | -------------------------------------------------------------- |
+| `[columns]` | `ColumnConfig[]` | Array of column configurations |
+| `[data]` | `any[]` | Array of data to display |
+| `[rowHeight]` | `number` | Height of each row in pixels |
+| `[headerHeight]` | `number` | Height of the header row in pixels |
+| `[bufferSize]` | `number` | Number of rows to render outside viewport for smooth scrolling |
### 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 |
+| 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