From 072f6632cf05d7981c8c20441dace352312977cd Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 5 Jun 2026 12:05:03 +0000 Subject: [PATCH 1/3] fix(core): support Angular 22 in peer dependency range Add ^22.0.0 to the @angular/common and @angular/core peerDependencies so the package installs on Angular 22 without emitting peer-dependency warnings. https://claude.ai/code/session_01Pki7QYb67QhVAnqeX2fjg4 --- projects/core/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/core/package.json b/projects/core/package.json index e0d1bf1..b252280 100644 --- a/projects/core/package.json +++ b/projects/core/package.json @@ -8,8 +8,8 @@ "url": "https://github.com/hjalmers/angular-generic-table.git" }, "peerDependencies": { - "@angular/common": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0", - "@angular/core": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0", + "@angular/common": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0 || ^22.0.0", + "@angular/core": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0 || ^22.0.0", "rxjs": "^7.0.0" }, "dependencies": { From e09a74e43b1550999575e02357b59a1a10d6c32c Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 5 Jun 2026 12:05:13 +0000 Subject: [PATCH 2/3] docs: refresh README for Angular 22 and standalone usage Drop the 'release candidate'/@rc wording (v5 is stable), replace the GenericTableCoreModule NgModule quick-start with standalone CoreComponent usage, and remove the webpack-era '~' scss import prefix. https://claude.ai/code/session_01Pki7QYb67QhVAnqeX2fjg4 --- README.md | 104 +++++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 75 insertions(+), 29 deletions(-) diff --git a/README.md b/README.md index 92ba040..456deb5 100644 --- a/README.md +++ b/README.md @@ -1,58 +1,96 @@ # Angular Generic Table -Generic table version 5 has been rebuilt to be more efficient and to make it easier to customize and add new features. It still relies on native html tables for layout and rendering. Follow the instructions below to get started with the latest release candidate. +A lightweight, configurable table component for Angular. It renders native HTML +tables and supports sorting, pagination, search with highlighting, row +selection, keyboard navigation, custom cell/header templates and components, and +footer calculations. +Built for modern Angular — standalone components, signals, and `OnPush` change +detection throughout. Compatible with Angular 17 through 22. ## Install +```bash +npm install @angular-generic-table/core --save ``` -npm install @angular-generic-table/core@rc --save -``` -## Import module -We recommend import `GenericTableCoreModule` into a shared module eg. `SharedModule` that can be imported into other, preferably lazy loaded modules when needed. +## Usage + +`CoreComponent` is a standalone component (selector: `angular-generic-table`). +Import it directly into the component where you need it: + ```ts -import { GenericTableCoreModule } from '@angular-generic-table/core'; - -@NgModule({ - declarations: [...], - imports: [ - ... - GenericTableCoreModule - ], - exports: [ - GenericTableCoreModule - ] +import { Component } from '@angular/core'; +import { CoreComponent, TableConfig } from '@angular-generic-table/core'; + +interface Person { + firstName: string; + lastName: string; + favoriteFood: string; +} + +@Component({ + selector: 'app-people', + imports: [CoreComponent], + template: ``, }) -export class SharedModule {} +export class PeopleComponent { + data: Array = [ + { firstName: 'Peter', lastName: 'Parker', favoriteFood: 'Pasta' }, + { firstName: 'Mary Jane', lastName: 'Watson', favoriteFood: 'Pizza' }, + ]; + + config: TableConfig = { + class: 'table table-striped table-bordered', + columns: { + firstName: {}, + lastName: {}, + favoriteFood: {}, + }, + }; +} ``` +> **Using NgModules?** A backward-compatibility `GenericTableCoreModule` is still +> exported. Add it to a module's `imports` (e.g. a shared module) to use the +> table in NgModule-based apps. New apps should prefer importing the standalone +> `CoreComponent` directly. + ## Import styling -We recommend setting up your Angular project to use scss (SASS) for css preprocessing. -Once configured to use scss, it's just a matter of including the scss to your main styles file, typically it would be `styles.scss` located at the root of the `src` folder unless you've changed it. +We recommend setting up your Angular project to use scss (SASS) for css +preprocessing. + +Once configured to use scss, include the library styles in your main styles +file — typically `styles.scss` at the root of the `src` folder. ### Add scss + `{project}/src/styles.scss` ```scss -// import base styles from angular-generic-table/core -@use '~@angular-generic-table/core/scss' as generic-table-styles; +// import base styles from @angular-generic-table/core +@use '@angular-generic-table/core/scss' as generic-table-styles; @include generic-table-styles.styles(); // all styles -// @include generic-table-styles.search-style(); // search (highlight) style -// @include generic-table-styles.mobile-style(); // mobile layout style -// @include generic-table-styles.pagination-style(); // pagination styles +// @include generic-table-styles.search-style(); // search (highlight) style +// @include generic-table-styles.mobile-style(); // mobile layout style +// @include generic-table-styles.pagination-style(); // pagination styles ``` +> **Note:** The webpack-era `~` import prefix is no longer required (or +> supported) with Angular's current build system — import the package path +> directly as shown above. ### Override scss variables -It's possible to override the scss variables used by generic table by passing them when importing the scss. + +It's possible to override the scss variables used by generic table by passing +them when importing the scss. `{project}/src/styles.scss` ```scss -// import base styles from angular-generic-table/core and override scss variables -@use '~@angular-generic-table/core/scss' as generic-table-styles with ( +// import base styles from @angular-generic-table/core and override scss variables +@use '@angular-generic-table/core/scss' as generic-table-styles with ( $highlight-background-color: purple, $mobile-style-max-width: 375px ); @@ -76,8 +114,16 @@ It's possible to override the scss variables used by generic table by passing th |$pagination-active-color: | #000; | |$pagination-justify-content: | center; | -### Have other needs? -More examples and use cases coming soon! In the meantime create an [issue over at github](https://github.com/hjalmers/angular-generic-table/issues) +## Examples + +The repo ships a docs app with runnable examples (simple, sorting, pagination, +custom templates, mobile layout, transpose, footers, and more). Run it locally +with `ng serve docs`, or browse the source under `projects/docs/src/app/examples`. + +## Have other needs? + +Found a bug or have a feature request? Create an +[issue over at github](https://github.com/hjalmers/angular-generic-table/issues). ## Sponsored by From d644530e3a436bebfbe40a9d5a48e432b2bd5ae5 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 5 Jun 2026 12:05:13 +0000 Subject: [PATCH 3/3] docs: add Angular 22 to version compatibility table https://claude.ai/code/session_01Pki7QYb67QhVAnqeX2fjg4 --- projects/docs/src/app/pages/intro/intro.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/docs/src/app/pages/intro/intro.component.ts b/projects/docs/src/app/pages/intro/intro.component.ts index 2fffead..736170f 100644 --- a/projects/docs/src/app/pages/intro/intro.component.ts +++ b/projects/docs/src/app/pages/intro/intro.component.ts @@ -53,7 +53,7 @@ import { RouterLink } from '@angular/router'; }) export class IntroComponent { compatibility = [ - { version: '5.x', angular: '17 – 21' }, + { version: '5.x', angular: '17 – 22' }, { version: '5.0.0-rc', angular: '12 – 15' }, { version: '5.0.0-alpha', angular: '7 – 11' }, { version: '4.x', angular: '4 – 11' },