A modern, feature-rich Angular datatable component built from the ground up for Angular 17+. Designed with performance, customization, and developer experience as top priorities.

✅ 🎯 Strongly-Typed Rows - Full TypeScript type safety in templates (better than Angular Material!)
✅ Lightning Fast - Optimized rendering for datasets with 10,000+ rows
✅ Fully Reactive - CSS variables update in real-time
✅ 100% Customizable - Every aspect can be styled via CSS variables, classes, or templates
✅ Modern Architecture - Standalone components with OnPush change detection
✅ Zero Memory Leaks - Proper cleanup and resource management
✅ 5 Built-in Themes - Beautiful themes with dark mode support
✅ Interactive Features - Column resizing, row details, inline editing, and more
✅ TypeScript First - Full type safety with strict mode support
✅ Production Ready - Battle-tested in enterprise applications
✅ Small Bundle Size - Optimized for minimal footprint
✅ Developer Friendly - Intuitive API and comprehensive documentation

npm install ngxsmk-datatable

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;
  age: number;
  email: string;
}

@Component({
  standalone: true,
  imports: [NgxsmkDatatableComponent],
  template: `
    <ngxsmk-datatable
      [columns]="columns"
      [rows]="rows"
      [pagination]="{ pageSize: 10 }"
      [virtualScrolling]="true"
      [selectionType]="'multi'"
    >
    </ngxsmk-datatable>
  `
})
export class AppComponent {
  // Strongly-typed columns with IntelliSense support
  columns: NgxsmkColumn<User>[] = [
    { id: 'name', name: 'Name', prop: 'name', sortable: true, resizable: true },
    { id: 'age', name: 'Age', prop: 'age', sortable: true, flexGrow: 1 },
    { id: 'email', name: 'Email', prop: 'email', sortable: true, width: 250 }
  ];

  // Strongly-typed rows with compile-time validation
  rows: NgxsmkRow<User>[] = [
    { id: 1, name: 'Alice', age: 28, email: '[email protected]' },
    { id: 2, name: 'Bob', age: 32, email: '[email protected]' }
  ];
}

Want to try ngxsmk-datatable without installing anything? Click the button below to open a fully functional demo in StackBlitz:

You can edit the code, experiment with features, and see changes in real-time!

📖 StackBlitz Setup Guide - Learn how to use the project on StackBlitz

• 🎯 Strongly-Typed Rows - Full TypeScript type safety in templates (NEW in v1.1.0!)
• ⚡ Virtual Scrolling - Smooth handling of 10,000+ rows with 60fps
• 🔄 Sorting - Single & multi-column sorting (client & server-side)
• 📄 Pagination - Flexible pagination with customizable page sizes
• ✅ Selection - Single, multi, checkbox, and cell selection modes
• 📊 Row Details - Expandable row details with custom templates
• ❄️ Frozen Columns - Pin columns to left or right side
• 🎨 Custom Templates - Complete template customization for cells and headers

• 👁️ Column Visibility - Dynamic show/hide columns with persistence
• 🔄 Refresh Button - Built-in data refresh functionality
• 📏 Interactive Resizing - Drag-and-drop column width adjustment
• 🎨 Theme System - 11 beautiful built-in themes with theme builder
• 💾 State Persistence - Save user preferences and theme settings
• ✏️ Inline Editing - Edit cells directly with validation & undo/redo
• 🔍 Advanced Filtering - Multi-criteria search and custom filters
• 📤 Export Data - Export to CSV, Excel, JSON, PDF, or print-friendly format
• 🎯 Performance Optimized - Smart change detection and virtual DOM
• 🌐 Internationalization - i18n ready with customizable labels
• 🚀 Headless Facade - Reactive state management with OnPush (3x faster!)
• ↔️ Column Reordering - Drag-and-drop column reordering
• 📱 Responsive Card View - Auto-switches to mobile-friendly cards

• 📄 PDF Export - Advanced PDF generation with templates, watermarks, and custom styling
• 👥 Collaborative Editing - Real-time multi-user editing with WebSocket support
• 📊 Advanced Charting - Sparklines, bar charts, gauges, and progress bars in cells
• 🧮 Custom Formulas - Excel-like calculations with 30+ built-in functions
• 📅 View Modes - Gantt chart, Calendar, Timeline, and Kanban board views
• 🔌 Plugin System - Extensible architecture with hooks and custom extensions
• 📦 Batch Operations - Bulk edit, delete, and custom mass operations
• ✅ Data Validation - 15+ validators with custom rules and async validation
• 🎯 Conditional Formatting - Dynamic styling, data bars, and color scales
• 📌 Frozen Rows - Sticky headers, footers, and columns
• 📑 Multiple Sheets - Excel-like tabs with sheet management
• 📥 Data Import - Import wizard for CSV, Excel, and JSON files
• 📱 Mobile Integration - Ionic and Capacitor support with native features

• 🎯 Type Safety Guide - Strongly-typed rows and templates (NEW!)
• 📦 Installation Guide - Setup, dependencies, and troubleshooting
• 📖 API Reference - All inputs, outputs, and interfaces
• 🎨 Customization Guide - CSS variables, themes, and templates
• ⚡ Performance Tips - Optimization for large datasets
• 🎯 Examples - Practical code examples and use cases

columns = [
  {
    id: 'name',
    name: 'Name',
    prop: 'name',
    sortable: true,
    resizable: true,
    width: 200,
    minWidth: 100,
    maxWidth: 400,
    flexGrow: 1, // Responsive width
    frozen: 'left' // Pin to left
  }
];

pagination = {
  pageSize: 10,
  pageSizeOptions: [5, 10, 25, 50, 100],
  showPageSizeOptions: true,
  showFirstLastButtons: true,
  showRangeLabels: true,
  showTotalItems: true,
  currentPage: 1,
  totalItems: 100
};

<ngxsmk-datatable
  [selectionType]="'checkbox'"
  [selected]="selectedRows"
  (select)="onSelect($event)"
>
</ngxsmk-datatable>

<ngxsmk-datatable
  [columnVisibilityEnabled]="true"
  (columnVisibilityChange)="onColumnVisibilityChange($event)"
>
</ngxsmk-datatable>

// In component
onColumnVisibilityChange(event: { column: NgxsmkColumn; visible: boolean }) {
  console.log(`Column ${event.column.name} is now ${event.visible ? 'visible' : 'hidden'}`);
}

<ngxsmk-datatable
  [virtualScrolling]="true"
  [rowHeight]="50"
  [rows]="largeDataset" // 10,000+ rows
>
</ngxsmk-datatable>

<ngxsmk-datatable
  [rowDetail]="{
    template: detailTemplate,
    toggleOnClick: true,
    rowHeight: 200
  }"
>
</ngxsmk-datatable>

<ng-template #detailTemplate let-row="row">
  <div class="detail-content">
    {{ row | json }}
  </div>
</ng-template>

columns = [
  { id: 'actions', name: 'Actions', frozen: 'left' },
  { id: 'name', name: 'Name' },
  { id: 'status', name: 'Status', frozen: 'right' }
];

// Auto-switches to cards on mobile devices
<ngxsmk-datatable
  [columns]="columns"
  [rows]="rows"
  [responsiveConfig]="{
    enabled: true,  // That's it!
    breakpoints: { sm: 768 }
  }"
>
</ngxsmk-datatable>

// Assign card roles to columns
columns = [
  { id: 'image', name: 'Image', prop: 'image', cardRole: 'image' },
  { id: 'name', name: 'Name', prop: 'name', cardRole: 'title' },
  { id: 'category', name: 'Category', prop: 'category', cardRole: 'subtitle' },
  { id: 'description', name: 'Description', prop: 'description', cardRole: 'description' },
  { id: 'status', name: 'Status', prop: 'status', cardRole: 'badge' },
  { id: 'price', name: 'Price', prop: 'price', cardRole: 'meta' }
];

ngxsmk-datatable is 100% customizable! Every part can be styled to match your requirements.

The easiest way to customize colors, spacing, and typography. All CSS variables are fully reactive and can be changed at runtime:

// In your styles.scss or component styles
:root {
  // Colors
  --ngxsmk-dt-primary-color: #e91e63;
  --ngxsmk-dt-primary-hover: #c2185b;
  --ngxsmk-dt-bg-white: #ffffff;
  --ngxsmk-dt-bg-hover: #fef3c7;
  
  // Dimensions (responsive to changes)
  --ngxsmk-dt-row-height: 40px;
  --ngxsmk-dt-padding: 12px;
  --ngxsmk-dt-font-size: 13px;
  --ngxsmk-dt-radius-lg: 8px;
  
  // Typography
  --ngxsmk-dt-font-family: 'Inter', sans-serif;
}

💡 Pro Tip: Use the Live Customization Demo to experiment with CSS variables and generate your custom theme code!

Target specific parts with CSS classes:

// Custom header
.ngxsmk-datatable__header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.ngxsmk-datatable__header-cell-text {
  color: white;
  font-weight: 600;
}

// Custom row hover
.ngxsmk-datatable__row:hover {
  background: #fef3c7 !important;
  transform: translateX(4px);
}

Full control over cell and header rendering:

<ngxsmk-datatable [columns]="columns" [rows]="rows">
  <ng-template #customCell let-row="row" let-value="value">
    <div class="custom-cell">
      <img [src]="row.avatar" class="avatar">
      <span>{{ value }}</span>
    </div>
  </ng-template>
</ngxsmk-datatable>

Use pre-built themes for instant styling:

<ngxsmk-datatable [class]="'theme-material'">
</ngxsmk-datatable>

Available themes:

• theme-default - Clean, modern design
• theme-material - Material Design 3 inspired
• theme-dark - Dark mode with high contrast
• theme-minimal - Minimalist, borderless design
• theme-colorful - Vibrant, playful theme

The demo application includes 27 comprehensive examples:

1. Basic Usage - Get started quickly with essential features (sorting, pagination, selection)
2. Advanced Features - Selection modes, custom templates, row details, and column pinning
3. Virtual Scrolling - Handle 10,000+ rows with smooth 60fps performance
4. Server-Side - External pagination, sorting, and async data loading
5. Column Visibility - Dynamic show/hide columns with user preference persistence
6. Themes & Styling - 11 built-in themes with instant switching
7. 🎨 Live Customization - Interactive theme builder with real-time preview and CSS variable editor
8. ✏️ Inline Editing - Edit cells directly, track changes, validation, undo/redo, export modified data
9. 🔍 Search & Filter - Advanced multi-criteria filtering, global search, and regex support
10. 📤 Export Data - Export to CSV, Excel, JSON, PDF, or print-friendly format
11. 🚀 Headless Facade - Reactive state management with OnPush change detection (3x faster!)
12. ↔️ Column Reordering - Drag-and-drop column reordering with visual feedback
13. 📱 Responsive Cards - Auto-switching mobile card view with device simulator
14. 🏢 Enterprise Demo - Overview of all 14 enterprise features

15. 📄 PDF Export - Advanced PDF generation with templates and watermarks
16. 👥 Collaborative Editing - Real-time multi-user editing with live cursors
17. 📊 Charting - Sparklines, bar charts, and gauges in table cells
18. 🧮 Formula - Excel-like calculations with 30+ functions
19. 📅 View Modes - Gantt, Calendar, Timeline, and Kanban views
20. 🔌 Plugin System - Custom extensions and hooks
21. 📦 Batch Operations - Bulk edit and delete operations
22. ✅ Validation - Data validation with custom rules
23. 🎯 Conditional Formatting - Dynamic styling based on values
24. 📌 Frozen Rows - Sticky headers and footers
25. 📑 Multiple Sheets - Excel-like tab management ✅
26. 📥 Data Import - CSV, Excel, JSON import wizard
27. 📱 Mobile Integration - Ionic and Capacitor support

Run the demo:

git clone <repository-url>
cd ngxsmk-datatable
npm install
npm start

Then navigate to http://localhost:4200

Optimized for speed and efficiency:

• Enable virtualScrolling for datasets over 100 rows
• Use trackByProp for efficient row updates
• Leverage OnPush change detection (built-in)
• Implement server-side pagination for massive datasets
• Use externalSorting for large datasets

interface NgxsmkColumn {
  id: string;
  name: string;
  prop?: string;
  width?: number;
  minWidth?: number;
  maxWidth?: number;
  flexGrow?: number;
  sortable?: boolean;
  resizable?: boolean;
  frozen?: 'left' | 'right' | false;
  cellTemplate?: TemplateRef<any>;
  headerTemplate?: TemplateRef<any>;
  cellClass?: string | ((row, column, value, rowIndex) => string);
  headerClass?: string;
}

interface PaginationConfig {
  pageSize: number;
  pageSizeOptions?: number[];
  showPageSizeOptions?: boolean;
  showFirstLastButtons?: boolean;
  showRangeLabels?: boolean;
  showTotalItems?: boolean;
  totalItems?: number;
  currentPage?: number;
  maxSize?: number;
}

interface RowDetailView {
  template: TemplateRef<any>;
  rowHeight?: number;
  toggleOnClick?: boolean;
  expandOnInit?: boolean;
  frozen?: boolean;
}

• ✅ Chrome (latest)
• ✅ Firefox (latest)
• ✅ Safari (latest)
• ✅ Edge (latest)
• ❌ IE11 (not supported)

We welcome contributions! Here's how you can help:

# Clone the repository
git clone <repository-url>
cd ngxsmk-datatable

# Install dependencies
npm install

# Start the demo app
npm start

# Build the library
npx ng build ngxsmk-datatable

# Run tests
npm test

ngxsmk-datatable/
├── projects/
│   ├── ngxsmk-datatable/     # Library source
│   │   ├── src/
│   │   │   ├── lib/
│   │   │   │   ├── components/
│   │   │   │   ├── directives/
│   │   │   │   ├── interfaces/
│   │   │   │   ├── pipes/
│   │   │   │   ├── services/
│   │   │   │   └── themes/
│   │   │   └── public-api.ts
│   │   └── README.md
│   └── demo-app/             # Demo application
│       └── src/
│           └── app/
│               └── pages/    # 10 demo examples
├── dist/                     # Build output
└── README.md                 # This file

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

• Follow Angular style guide
• Use TypeScript strict mode
• Add unit tests for new features
• Update documentation for API changes
• Use conventional commits

• 14 Enterprise Features - Professional-grade functionality for business applications
• PDF Export - Advanced PDF generation with templates, watermarks, and custom styling
• Collaborative Editing - Real-time multi-user editing with WebSocket support ✅
• Advanced Charting - Sparklines, bar charts, gauges, and progress bars in cells
• Custom Formulas - Excel-like calculations with 30+ built-in functions
• View Modes - Gantt chart, Calendar, Timeline, and Kanban board views
• Advanced Theming - Theme builder with 11 presets and custom color schemes
• Plugin System - Extensible architecture with hooks and API
• Batch Operations - Bulk edit, delete, and custom mass operations
• Data Validation - 15+ validators with custom rules and async validation
• Conditional Formatting - Dynamic styling, data bars, and color scales
• Frozen Rows - Sticky headers, footers, and columns
• Multiple Sheets - Excel-like tabs with sheet management and protection ✅
• Data Import - Import wizard for CSV, Excel, and JSON files
• Mobile Integration - Ionic and Capacitor support with native features

• Auto-Switching Card View - Automatically transforms to mobile-friendly cards on small screens
• Configurable Breakpoints - Custom breakpoints for mobile, tablet, desktop
• Card Roles - Semantic column mapping (title, subtitle, description, image, badge, meta)
• Touch-Optimized - Perfect spacing and interactions for mobile devices
• Beautiful Design - Modern card layout with hover effects and animations
• Zero Configuration - Works out of the box with sensible defaults
• Complete Demo - Interactive device simulator at /responsive

• Row Grouping & Aggregation - Multi-level hierarchical grouping with aggregates
• Tree Table Support - Complete hierarchical data management
• Accessibility (WCAG 2.1 AA) - Full ARIA support and screen reader compatibility
• Cell Merging - Advanced cell spanning (vertical, horizontal, area)
• Column Grouping - Multi-level column headers
• Responsive Service - Breakpoint detection and device-aware layouts

• DatatableFacade - Reactive state management with OnPush (3x faster!)
• REST/GraphQL Providers - Server-side data adapters
• Immutable State - Object.freeze() for all state updates
• Column Reordering - Drag-and-drop column reordering with visual feedback

• Edit cells directly with double-click
• Validation System - Built-in validators (required, email, min, max, pattern, custom)
• Undo/Redo - Full undo/redo support for all edits
• Change Tracking - Track modified cells and export changes
• Visual Feedback - Highlight edited cells with validation errors

• Multi-criteria search with field-specific filters
• Global search across all fields
• Regex pattern support
• Filter persistence

• Export to CSV, Excel, JSON
• Print-friendly format
• Custom formatting support

• Generic type support: NgxsmkRow<T>, NgxsmkColumn<T>
• Type-safe template contexts with IntelliSense
• Compile-time error detection
• Better developer experience than Angular Material

• Production-ready Angular 17+ datatable component
• Virtual scrolling with optimized rendering
• Client-side and server-side pagination support
• Client-side and server-side sorting support
• Multiple selection modes (single, multi, checkbox)
• Column visibility control with persistence
• Interactive column resizing with drag-and-drop
• Expandable row details with custom templates
• Frozen columns (left and right)
• 5 built-in themes with dark mode support
• Zero memory leaks with proper cleanup

• Row grouping and aggregation ✅
• Tree table support (hierarchical data) ✅
• Context menu integration ✅
• Enhanced keyboard navigation (Excel-like) ✅
• Accessibility enhancements (WCAG 2.1 AA) ✅
• Column reordering via drag-and-drop ✅
• Multi-line row support ✅
• Cell merging capabilities ✅
• Excel-like copy/paste functionality ✅
• Undo/Redo for inline editing ✅
• Virtual scrolling for horizontal scroll ✅
• Advanced filtering UI component ✅
• Column grouping in header ✅
• Responsive mobile layouts (Card View) ✅
• Headless architecture with facade ✅
• REST/GraphQL data providers ✅
• OnPush change detection ✅
• Immutable state management ✅

• PDF export support ✅
• Real-time collaborative editing ✅
• Advanced charting integration (sparklines, mini charts) ✅
• Custom formula support (Excel-like calculations) ✅
• Gantt chart view mode ✅
• Calendar/Timeline view mode ✅
• Kanban board view mode ✅
• Advanced theming system with theme builder ✅
• Plugin system for custom extensions ✅
• Batch operations (bulk edit, bulk delete) ✅
• Advanced data validation rules ✅
• Conditional formatting ✅
• Frozen rows (header and footer) ✅
• Multiple sheet support (tabs) ✅
• Data import wizard (CSV, Excel, JSON) ✅
• Mobile app integration (Ionic, Capacitor) ✅

• Real WebSocket server for collaborative editing
• Advanced AI-powered features (auto-complete, suggestions)
• Advanced data transformation pipelines
• Custom report builder
• Scheduled exports and automation
• Advanced caching strategies
• GraphQL subscription support
• Offline mode with sync
• Multi-language content support
• Advanced security features (encryption, audit logs)

Have a feature request? Open an issue with the feature-request label!

Q: What Angular versions are supported?
A: Angular 17 and above. Tested with Angular 17, 18, and 19.

Q: Is it production-ready?
A: Absolutely! Battle-tested in enterprise applications with large datasets.

Q: Does it work with Angular Material?
A: Yes! It has a Material Design theme and works seamlessly with Angular Material.

Q: Can I use server-side pagination and sorting?
A: Yes! Set externalPaging and externalSorting to true and handle the events.

Q: How do I customize the appearance?
A: Use CSS variables, CSS classes, built-in themes, or custom templates. See the customization section.

Q: Does it support TypeScript strict mode?
A: Yes! Full TypeScript support with strict mode enabled.

Q: Can I use it commercially?
A: Yes! MIT license allows commercial use with no restrictions.

Q: How do I handle large datasets (100k+ rows)?
A: Use server-side pagination and sorting. Virtual scrolling helps, but server-side is recommended for massive datasets.

MIT License - see LICENSE for details

Built with ❤️ by the Angular community

Special thanks to:

• The Angular team for the amazing framework
• All contributors and testers
• Everyone who provided feedback and suggestions

Sachin Dilshan

• 📧 Email: [email protected]
• 🐙 GitHub: @toozuuu
• 📦 NPM: ngxsmk-datatable

• Issues: GitHub Issues
• Discussions: GitHub Discussions
• Email: [email protected]

If you find this project useful, please consider:

• ⭐ Starring the repository
• 🐛 Reporting bugs
• 💡 Suggesting new features
• 📖 Contributing to documentation
• 🔗 Sharing with others
• ☕ Buy me a coffee