From b606a4a793544f52c835486b3c2778952dd1472d Mon Sep 17 00:00:00 2001 From: "Rintu Raj.c" Date: Sat, 16 Aug 2025 12:42:42 +0530 Subject: [PATCH 1/3] [demo] --- README.md | 2 ++ 1 file changed, 2 insertions(+) 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/) + ![NgxSimpleDatatable Screenshot](projects/ngx-simple-datatable/assets/image.png) ## Features From c153e33fe9bba9387a3f6e821f6f73635700ab28 Mon Sep 17 00:00:00 2001 From: "Rintu Raj.c" Date: Sat, 16 Aug 2025 12:47:21 +0530 Subject: [PATCH 2/3] [fix] --- .github/workflows/npm-publish.yml | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml index c4b316d..0019d00 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/ngx-simple-datatable/**" + - "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 From 5584935bc9cb6c4d83dcaaf98813af47dabd5bfc Mon Sep 17 00:00:00 2001 From: "Rintu Raj.c" Date: Sat, 16 Aug 2025 12:55:52 +0530 Subject: [PATCH 3/3] [checking] --- .github/workflows/npm-publish.yml | 2 +- projects/ngx-simple-datatable/README.md | 83 ++++++++++++++----------- 2 files changed, 46 insertions(+), 39 deletions(-) diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml index 0019d00..3d89ab7 100644 --- a/.github/workflows/npm-publish.yml +++ b/.github/workflows/npm-publish.yml @@ -5,7 +5,7 @@ on: branches: [master] # Only trigger on changes to library files paths: - - "projects/ngx-simple-datatable/**" + - "projects/**" - "package.json" - "ng-package.json" - "tsconfig.lib.json" 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