sn-advanced-datatable

A feature-rich data table for Angular with search, filtering, sorting, row selection, expandable rows, and pagination.

Installation

npm i sn-advanced-datatable

Usage

import { SnAdvancedDatatableComponent } from 'sn-advanced-datatable';

@Component({
  imports: [SnAdvancedDatatableComponent],
  template: `
    <sn-advanced-datatable 
      [columns]="columns" 
      [data]="data"
      [searchable]="true"
      [filterable]="true"
      [selectable]="true"
      [expandable]="true"
      [pageSize]="10">
    </sn-advanced-datatable>
  `
})
export class MyComponent {
  columns = [
    { header: 'Name', key: 'name', sortable: true, filterable: true },
    { header: 'Email', key: 'email', sortable: true },
    { header: 'Status', key: 'status', sortable: true, filterable: true },
  ];
  data = [
    { name: 'Alice', email: '[email protected]', status: 'Active' },
    { name: 'Bob', email: '[email protected]', status: 'Inactive' },
  ];
}

Features

| Feature | Description | |---|---| | Global search | Full-text filter across all columns | | Column filters | Per-column text inputs | | Sorting | Click headers to sort asc/desc | | Row selection | Checkbox-based, select-all per page | | Expandable rows | Accordion content with custom ng-template | | Pagination | Page size selector, visible page range | | Appearance | Striped, hoverable, bordered options |