Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 75 additions & 29 deletions README.md
Original file line number Diff line number Diff line change
@@ -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: `<angular-generic-table [data]="data" [config]="config" />`,
})
export class SharedModule {}
export class PeopleComponent {
data: Array<Person> = [
{ firstName: 'Peter', lastName: 'Parker', favoriteFood: 'Pasta' },
{ firstName: 'Mary Jane', lastName: 'Watson', favoriteFood: 'Pizza' },
];

config: TableConfig<Person> = {
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
);
Expand All @@ -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

Expand Down
Loading
Loading