https://github.com/johnnny333/data-table-angular
Modern, signal-based generic data table built with Angular 20
https://github.com/johnnny333/data-table-angular
angular javascript mockserviceworker signals typescript
Last synced: about 2 months ago
JSON representation
Modern, signal-based generic data table built with Angular 20
- Host: GitHub
- URL: https://github.com/johnnny333/data-table-angular
- Owner: johnnny333
- Created: 2025-07-10T08:37:59.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-07-10T10:58:12.000Z (12 months ago)
- Last Synced: 2025-07-10T17:12:34.168Z (12 months ago)
- Topics: angular, javascript, mockserviceworker, signals, typescript
- Language: TypeScript
- Homepage:
- Size: 155 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular Data Table Component
A modern, signal-based data table built with Angular 20.
## Key Features
### Core Architecture
- Built with **Angular 20** using standalone components
- **Zoneless** change detection (experimental)
- **Signal-based** state management (`signal`, `computed`, `effect`, `model`)
### Data Handling
- **Generic type support** for any data structure
- Dynamic column detection from data keys
- Optional pagination and sorting
### Technical Highlights
- Uses experimental [HttpResourceRef](https://angular.dev/guide/http/http-resource) for data loading
- Pure signals for reactivity (no RxJS operators)
- Minimal change detection through zoneless mode
- [Mock Service Worker (msw)](https://mswjs.io/) used for API mocking
## Usage
```typescript
@Component({
imports: [DataTable],
template: ``,
})
export class UserComponent {
usersResource = inject(ResourceHttp).usersResource;
}
```
## Implementation Notes
- Column headers are generated automatically from data keys
- Sorting is handled via clickable headers
- All state managed through Angular signals
---
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.0.4.