A powerful, feature-rich Angular datatable component with virtual scrolling, built for Angular 17+
npm install ngxsmk-datatablebash
npm install ngxsmk-datatable
`
$3
`typescript
import { Component } from '@angular/core';
import { NgxsmkDatatableComponent, NgxsmkColumn, NgxsmkRow } from 'ngxsmk-datatable';
// Define your data model for full type safety
interface User {
id: number;
name: string;
email: string;
}
@Component({
standalone: true,
imports: [NgxsmkDatatableComponent],
template:
})
export class AppComponent {
// Strongly-typed columns with IntelliSense support
columns: NgxsmkColumn[] = [
{ id: 'name', name: 'Name', prop: 'name', sortable: true },
{ id: 'email', name: 'Email', prop: 'email', sortable: true }
];
// Strongly-typed rows with compile-time validation
rows: NgxsmkRow[] = [
{ id: 1, name: 'Alice', email: 'alice@example.com' },
{ id: 2, name: 'Bob', email: 'bob@example.com' }
];
}
`
---
āØ Key Features
ā
šÆ Strongly-typed rows - Full type safety in templates
ā
Lightning fast rendering with optimized virtual scrolling
ā
Small bundle size using modern Angular patterns
ā
Zero memory leaks with proper cleanup and OnDestroy
ā
Modern Angular (standalone components, OnPush strategy)
ā
5 built-in themes with instant switching
ā
100% customizable via CSS variables, classes, and templates
ā
Real-time theme updates - CSS variables work at runtime
ā
TypeScript strict mode with full type safety
ā
Production ready and battle-tested
ā
Comprehensive documentation with live examples
ā
Active development with regular updates
---
š¦ What's Included
$3
- šÆ Strongly-typed rows with compile-time safety
- ā” Virtual scrolling (10,000+ rows at 60fps)
- š Client & server-side sorting
- š Client & server-side pagination
- ā
Multiple selection modes
- š Expandable row details
- āļø Frozen columns & rows
- šØ Custom cell templates
$3
- šļø Column visibility control
- š Refresh button
- š Interactive column resizing
- šØ Theme system with dark mode
- āļø Inline editing with validation & undo/redo
- š Search and filtering
- š¤ Data export (CSV, Excel, JSON)
- š Headless facade with OnPush (3x faster!)
- āļø Column reordering (drag-and-drop)
- š± Responsive card view (auto-switches on mobile!) (NEW!)
---
š Documentation
For full documentation, see the main README.
$3
- šÆ Type Safety Guide - Strongly-typed rows (NEW!)
- š¦ Installation Guide - Setup and configuration
- š API Reference - Complete API documentation
- šØ Customization Guide - Styling and theming
- ā” Performance Tips - Optimization strategies
- šÆ Examples - Practical code examples
---
š§ Development
This library is part of an Angular workspace.
$3
`bash
Build once
npx ng build ngxsmk-datatable
Build and watch for changes
npm run build:lib:watch
`
$3
`bash
Start the demo application
npm start
Or specifically
npm run demo
`
$3
`bash
Run tests
npm test
Run library tests only
npm run test:lib
`
$3
`bash
Build library for production
npx ng build ngxsmk-datatable --configuration production
Pack for npm
npm run pack
Publish to npm (after building)
npm run publish:lib
`
---
š Project Structure
`
projects/ngxsmk-datatable/
āāā src/
ā āāā lib/
ā ā āāā components/
ā ā ā āāā ngxsmk-datatable/
ā ā ā ā āāā ngxsmk-datatable.component.ts
ā ā ā ā āāā ngxsmk-datatable.component.html
ā ā ā ā āāā ngxsmk-datatable.component.scss
ā ā ā āāā ngxsmk-pager/
ā ā ā āāā ngxsmk-pager.component.ts
ā ā ā āāā ngxsmk-pager.component.html
ā ā ā āāā ngxsmk-pager.component.scss
ā ā āāā directives/
ā ā ā āāā column-template.directive.ts
ā ā ā āāā header-template.directive.ts
ā ā ā āāā row-detail-template.directive.ts
ā ā āāā interfaces/
ā ā ā āāā column.interface.ts
ā ā ā āāā pagination.interface.ts
ā ā ā āāā row.interface.ts
ā ā ā āāā selection.interface.ts
ā ā ā āāā sorting.interface.ts
ā ā āāā pipes/
ā ā ā āāā safe-html.pipe.ts
ā ā āāā services/
ā ā ā āāā column-resize.service.ts
ā ā ā āāā selection.service.ts
ā ā ā āāā virtual-scroll.service.ts
ā ā āāā themes/
ā ā ā āāā material-theme.scss
ā ā āāā ngxsmk-datatable.module.ts
ā āāā public-api.ts
āāā ng-package.json
āāā package.json
āāā tsconfig.lib.json
āāā README.md (this file)
`
---
š Exports
The library exports the following:
$3
- NgxsmkDatatableComponent - Main datatable component
- NgxsmkPagerComponent - Pagination component
- NgxsmkDatatableModule - NgModule (for non-standalone usage)
$3
- ColumnTemplateDirective - Column template directive
- HeaderTemplateDirective - Header template directive
- RowDetailTemplateDirective - Row detail template directive
$3
- NgxsmkColumn - Column configuration (now with generic types!)
- NgxsmkRow - Row data (now with generic types!)
- NgxsmkCellTemplateContext - Typed cell template context (NEW!)
- NgxsmkHeaderTemplateContext - Typed header template context (NEW!)
- NgxsmkRowDetailTemplateContext - Typed row detail template context (NEW!)
- PaginationConfig - Pagination configuration
- SelectionEvent - Selection event
- SortEvent - Sort event
- PageEvent - Page event
- SelectionType - Selection type enum
- RowDetailView - Row detail configuration
$3
- SafeHtmlPipe - Safe HTML pipe
$3
- VirtualScrollService - Virtual scrolling logic
- ColumnResizeService - Column resize logic
- SelectionService - Selection management
---
šØ Styling
$3
`typescript
`
Available themes:
- theme-default - Clean, modern design
- theme-material - Material Design 3
- theme-dark - Dark mode
- theme-minimal - Minimalist design
- theme-colorful - Vibrant theme
$3
All CSS variables are fully reactive and can be changed at runtime:
`scss
:root {
// Colors
--ngxsmk-dt-primary-color: #e91e63;
--ngxsmk-dt-bg-white: #ffffff;
--ngxsmk-dt-bg-hover: #fef3c7;
// Dimensions (responsive)
--ngxsmk-dt-row-height: 40px;
--ngxsmk-dt-padding: 12px;
--ngxsmk-dt-font-size: 13px;
--ngxsmk-dt-radius-lg: 8px;
}
``