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 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": { 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' },