Powerful Angular Table Library powered by TanStack Table
npm install tangridA powerful, feature-rich, and highly customizable data table component for Angular, built on top of the headless UI library TanStack Table.
TanGrid provides a production-grade data table solution that combines the power and flexibility of TanStack Table with the ease of use of a pre-built Angular component. It is designed to handle complex data scenarios with ease, offering features like virtual scrolling, column reordering, server-side operations, and extensive theming capabilities out of the box.
Key design principles:
- Headless Core: Leverages TanStack Table for logic, ensuring robustness and flexibility.
- Performance: Optimized for large datasets with virtual scrolling support via @tanstack/angular-virtual.
- Developer Experience: Extensive API with typed interfaces and intuitive configuration.
- Modern Angular: Built with Standalone Components and Signals for optimal performance.
- 🚀 High Performance: Virtual scrolling support for rendering thousands of rows efficiently.
- 🔄 Sorting & Filtering: Multi-column sorting and global/column-specific filtering.
- 📄 Pagination: Built-in pagination with customizable page sizes.
- 👆 Selection: Single and multiple row selection modes.
- ↔️ Column Reordering: Drag-and-drop column reordering using SortableJS.
- 📌 Column Pinning: Pin columns to the left or right.
- ✏️ Inline Editing: Edit cell values directly within the table.
- 📂 Row Expansion: Expandable rows for showing detailed information.
- 📤 Exporting: Built-in support for exporting data to CSV, Excel, and PDF.
- 🎨 Theming: Multiple built-in themes (Material, Bootstrap, Ant Design) and SCSS customization.
- 🌐 Server-side Support: Full support for server-side sorting, filtering, and pagination.
Install the package and its required peer dependencies:
``bash`
npm install tangrid @tanstack/angular-table @tanstack/angular-virtual sortablejs
Ensure you also have @angular/cdk installed if you plan to use specific features that might rely on it (though the core virtual scroll now uses TanStack Virtual).
`bash`
npm install @angular/cdk
Import TanGrid in your component:
`typescript
import { Component } from '@angular/core';
import { TanGrid, TanGridColumn } from 'tangrid';
interface User {
id: number;
name: string;
email: string;
role: string;
}
@Component({
selector: 'app-users-table',
standalone: true,
imports: [TanGrid],
template:
[columns]="columns"
[pagination]="true"
[sorting]="true"
[filtering]="true"
globalFilterPlaceholder="Search users..."
>
,
})
export class UsersTableComponent {
users: User[] = [
{ id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' },
{ id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
// ... more data
];
columns: TanGridColumn
{ header: 'ID', accessorKey: 'id', width: '50px' },
{ header: 'Name', accessorKey: 'name', sortable: true, filterable: true },
{ header: 'Email', accessorKey: 'email' },
{
header: 'Role',
accessorKey: 'role',
cell: (ctx) => ${ctx.row.role} // Or use a TemplateRef`
},
];
}
#### Inputs
| Input | Type | Default | Description |
|-------|------|---------|-------------|
| data | T[] | [] | Array of data objects to display. |columns
| | TanGridColumn | [] | Column definitions. |pagination
| | boolean | false | Enable pagination. |sorting
| | boolean | false | Enable sorting. |filtering
| | boolean | false` | Enable filtering. |
This project is licensed under the MIT License - see the LICENSE file for details.