https://github.com/adamczykjac/ngx-paginated
Components and utilities for handling pagination in Angular projects.
https://github.com/adamczykjac/ngx-paginated
angular angular-material data-source dropdown pagination ui
Last synced: 8 months ago
JSON representation
Components and utilities for handling pagination in Angular projects.
- Host: GitHub
- URL: https://github.com/adamczykjac/ngx-paginated
- Owner: adamczykjac
- License: mit
- Created: 2025-10-07T08:38:30.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-10-07T11:43:54.000Z (8 months ago)
- Last Synced: 2025-10-07T13:25:35.438Z (8 months ago)
- Topics: angular, angular-material, data-source, dropdown, pagination, ui
- Language: TypeScript
- Homepage:
- Size: 258 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# NGX Paginated
A collection of Angular libraries and utilities for building efficient, paginated data experiences with infinite scroll, search capabilities, and Material Design integration.
## 📦 Packages
This monorepo contains the following packages:
### [@ngx-paginated/data-source](./libs/paginated-data-source)
Core data source implementation with built-in pagination, search, and loading states. Works with Angular CDK's `DataSource` interface.
```bash
npm install @ngx-paginated/data-source
```
### [@ngx-paginated/material-autocomplete](./libs/ui/paginated-autocomplete)
Material Design autocomplete component with virtual scrolling, infinite scroll, and search capabilities. Built on top of Angular Material.
```bash
npm install @ngx-paginated/material-autocomplete
```
## ✨ Features
- 🚀 **Infinite Scroll** - Load data progressively as users scroll
- 🔍 **Search Integration** - Built-in debounced search functionality
- ⚡ **Virtual Scrolling** - Efficient rendering of large lists using Angular CDK
- 🎨 **Material Design** - Seamless integration with Angular Material
- 📱 **Responsive** - Works great on mobile and desktop
- ♿ **Accessible** - ARIA attributes and keyboard navigation support
- 🔧 **Reactive Forms** - Full integration with Angular's reactive forms
- 💪 **Type Safe** - Written in TypeScript with full type definitions
## 🎯 Quick Start
### 1. Install Dependencies
```bash
npm install @ngx-paginated/data-source @ngx-paginated/material-autocomplete
npm install @angular/material @angular/cdk @angular/forms
```
### 2. Basic Usage
```typescript
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { PaginatedDataSource } from '@ngx-paginated/data-source';
import { PaginatedAutocompleteComponent } from '@ngx-paginated/material-autocomplete';
interface Item {
id: string;
label: string;
}
@Component({
selector: 'app-example',
template: `
`
})
export class ExampleComponent {
control = new FormControl();
dataSource = new PaginatedDataSource({
fetchFn: (params) => this.fetchItems(params),
pageSize: 10,
concatData: true,
triggerInitialFetch: true
});
selectableItems = computed(() =>
this.dataSource.items().map(item => ({
...item,
isSelected: false,
disabled: false
}))
);
fetchItems(params) {
// Your API call here
return this.http.get('/api/items', { params });
}
}
```
## 🛠️ Development
This project uses [Nx](https://nx.dev) for monorepo management and [pnpm](https://pnpm.io) for package management.
### Prerequisites
- Node.js 18+
- pnpm 8+
### Setup
```bash
# Install dependencies
pnpm install
# Build all libraries
npx nx run-many -t build
# Run demo app
npx nx serve demo-app
# Run tests
npx nx run-many -t test
```
### Project Structure
```
├── apps/
│ ├── demo-app/ # Demo application
│ └── demo-app-e2e/ # E2E tests
├── libs/
│ ├── paginated-data-source/ # Core data source library
│ └── ui/
│ └── paginated-autocomplete/ # Autocomplete component library
└── dist/ # Build output
```
## 📚 Documentation
- [Data Source Documentation](./libs/paginated-data-source/README.md)
- [Autocomplete Component Documentation](./libs/ui/paginated-autocomplete/README.md)
## 🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## 📄 License
MIT License - see LICENSE file for details
## 🔗 Links
- [Report Issues](https://github.com/yourusername/paginated-data-source/issues)
- [Demo](https://yourusername.github.io/paginated-data-source)