Uni-Table: High-Performance Angular Data Table with Signals

Uni-Table is a next-generation data grid for Angular, re-engineered with Signals to deliver zero-lag performance. It combines enterprise-grade features—like server-side processing and complex filtering—with a developer-friendly configuration API, making it the ideal choice for building responsive, data-heavy applications.

✨ Explore the Interactive Demo on StackBlitz

🚀 What's New in v22.0.0

• ⚡ Pure Signal Architecture: Upgraded to modern Angular Signals (input(), linkedSignal(), computed()) for lightning-fast, fine-grained updates without unnecessary re-renders.
• 📦 On-Demand Deferred Rendering (@defer): Dropdowns, column visibility managers, and expanded responsive rows load with @defer triggers for maximum runtime efficiency.
• 🎯 Flexible Column Definitions: title in UniColumn is optional; headerless columns (e.g. action buttons, icons) work cleanly without throwing errors.
• 🎛️ Customizable Pagination: Configure custom pageLengthOptions ([5, 10, 25, 50, 100]), toggle First/Last buttons, and switch between icons and text labels (pagingControls).
• 🌐 Decoupled Translation Support: Independent <uni-label> safely resolves translation keys when @ngx-translate/core is available without breaking when omitted.
• 🛡️ Smart Auto-Closing Overlays: Active dropdown menus and popovers automatically close on outside clicks via modern component host bindings.

🎨 Visual Tour: Features in Action

What you see in the screenshots above isn't just a static table—it's a high-performance data engine in action:

1. Dynamic Header Controls: Take full command of your table's toolbar. Seamlessly toggle features like Export, Global Search, and Column Visibility (colVis). You can even enable a Context Menu for quick client-side actions (available in client-side mode).
2. Smart Conditional Highlighting: Visualize your data's meaning at a glance. Easily apply conditional styling—like the orange cell highlights shown—to draw attention to critical values or specific data states without complex CSS hacks.
3. Rich Custom Templates: Go beyond simple text. Inject custom ng-templates to render interactive Action columns, formatted Pricing, status badges, or even complex nested components.

📦 Installation

To install the library, run:

npm install @unify-india/uni-table

Since UniTableComponent is a standalone component, import it directly into your component's imports array:

import { UniTableComponent } from '@unify-india/uni-table';

@Component({
  // ...
  imports: [UniTableComponent],
})
export class YourComponent {}

📊 Version Compatibility

Uni-Table versioning now aligns with Angular's major versions to ensure seamless integration and long-term support.

| Angular Version | Uni-Table Version | | :--- | :--- | | Angular 22 | 22.x.x | | Angular 21 | 21.x.x | | Angular 20 | 20.x.x | | Angular 19 | 20.x.x | | Angular 18 | 20.x.x | | Angular 17.3+ | 20.x.x |

✨ Key Features

Uni-Table isn't just another data grid; it's a complete toolkit for building data-rich interfaces that your users will love.

• 🚀 Signal-First Architecture: Speed by Design Built entirely on Angular Signals, Uni-Table delivers ultra-fast, fine-grained reactivity. Sorting, paging, and filtering happen instantly.

• 🎨 Your Pagination, Your Rules Fully customizable pagination controls (text, icons, or both) and flexible navigation options (First/Last, Prev/Next).

• 📱 Advanced Responsiveness Smart collapse functionality moves overflow columns into an expandable "details view," with priority controls to keep critical data visible.

• 👁️ Reactive Column Visibility Built-in colVis menu lets users instantly toggle columns on or off without re-rendering the DOM.

• 💾 Intelligent State Persistence Automatically saves page, sort order, search terms, and column visibility to local storage so users never lose their context.

• 🌐 Universal Data Handling (Client & Server) Seamlessly handles local arrays or server-side data (via stateChange output).

• 🔧 Pixel-Perfect Column Control Precise width controls, custom ng-template support for cells, and dynamic styling.

• 🔍 Powerful Search Global text search out-of-the-box, plus a manualSearch API for external control.

🎨 Effortless Styling with CSS Variables

Customize the entire table design without ::ng-deep by overriding CSS variables:

uni-table {
  --uni-primary-color: #6366f1;
  --uni-bg: #ffffff;
  --uni-table-striped-bg: #f8fafc;
  --uni-border-radius: 12px;
}

🚀 Quick Start

import { Component } from '@angular/core';
import { UniDataConfig, UniTableConfig } from '@unify-india/uni-table';

@Component({
  selector: 'app-root',
  template: `
    <uni-table [config]="tableConfig" [dataConfig]="dataConfig"></uni-table>
  `
})
export class AppComponent {
  tableConfig: UniTableConfig = {
    paging: true,
    searching: true,
    colVis: true,
    autoSaveState: true,
    storageKey: 'my-users-table'
  };

  dataConfig: UniDataConfig = {
    columns: [
      { key: 'id', title: 'ID', width: '50px' },
      { key: 'name', title: 'Name', priority: 1 },
      { key: 'email', title: 'Email' },
    ],
    data: [
      { id: 1, name: 'John Doe', email: '[email protected]' },
      { id: 2, name: 'Jane Smith', email: '[email protected]' },
    ],
  };
}

📖 API Reference

Component Inputs

| Name | Type | Description | | :----------- | :-------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | config | UniTableConfig| (Primary) Configuration object for table features (paging, sorting, state saving, etc.). | | dtOptions | UniDtOptions | (Legacy/Alias) Alternative input for table options. Merged with config. | | dataConfig | UniDataConfig | (Required) Defines columns (key, title, width, template, etc.) and the data array to be displayed. |

Component Outputs

| Name | Type | Description | | :------------ | :----------------------------- | :------------------------------------------------------------------------------------------------------- | | stateChange | EventEmitter<UniTableState> | Emits whenever the table state changes (page, sort, search). Critical for Server-Side implementations to fetch new data. |

🤝 Contributing & Feedback

We are open to contributions! We want to make this the best data table for Angular, and your input is vital. Whether you have suggestions, new feature ideas, or bug fixes, feel free to open a Pull Request or create an Issue.

• Issues: Found a bug or have a suggestion? Open an Issue.
• PRs: Pull Requests are welcome for bug fixes, new features, and suggestions! Check out our Contributing Guidelines.

Need Urgent Support? Reach out to me directly on LinkedIn.

💡 Looking for a Better Way? If you are facing performance issues or hitting limitations with other packages, reach out to me (IAM5K). I'd be happy to discuss if Uni-Table is the right fit!

License

This project is licensed under the MIT License - see the LICENSE file for details.