NgxSmartTable

A powerful, feature-rich Angular smart table library with inline editing, validation, sorting, pagination, filtering, sticky columns, keyboard navigation, and more.

Features

• ✅ Inline Cell Editing - Click to edit with multiple editor types
• ✅ Column-Level Filtering - Multiple operators and custom dropdown filters
• ✅ Sorting & Pagination - Server-side and client-side support
• ✅ Sticky/Pinned Columns - Pin columns left or right with user controls
• ✅ Column Management - Resize, reorder, show/hide, and pin columns
• ✅ Keyboard Navigation - Excel-like arrow key navigation and editing
• ✅ Virtual Scrolling - Handle millions of rows efficiently
• ✅ Configuration Builder - Visual UI for building table configurations
• ✅ Type-Safe - Full TypeScript support with comprehensive interfaces
• ✅ Reactive - Event-driven architecture with RxJS

Installation

npm install @your-org/ngx-smart-table

Quick Start

import { Component } from '@angular/core';
import { TableConfig } from '@your-org/ngx-smart-table';

@Component({
  selector: 'app-my-table',
  template: `
    <st-table [config]="tableConfig" [data]="data"></st-table>
  `
})
export class MyTableComponent {
  tableConfig: TableConfig = {
    columns: [
      { key: 'id', header: 'ID', width: 80 },
      { key: 'name', header: 'Name', sortable: true, filterable: true },
      { key: 'email', header: 'Email', filterable: true }
    ],
    pagination: { enabled: true, pageSize: 25 },
    sorting: { enabled: true, mode: 'server' },
    features: {
      keyboardNavigation: { enabled: true }
    }
  };

  data = [
    { id: 1, name: 'John Doe', email: '[email protected]' },
    { id: 2, name: 'Jane Smith', email: '[email protected]' }
  ];
}

Documentation

For complete documentation, see the documentation folder:

• Column Configuration Guide - All column properties and features
• Table Configuration Guide - Table-level settings
• Keyboard Navigation Guide - Excel-like navigation
• Architecture Overview - System design and patterns

Column Configuration

New Features

• movable: Control if column can be reordered (default: true)
• pinnable: Control if column can be pinned/unpinned (default: true)
• enableMenu: Control if column menu button appears (default: true)

Example

const columns = [
  {
    key: 'id',
    header: 'ID',
    width: 80,
    sticky: 'left',        // Pin to left
    movable: false,        // Cannot reorder
    pinnable: false,       // Cannot unpin
    enableMenu: false      // No menu button
  },
  {
    key: 'name',
    header: 'Name',
    sortable: true,
    filterable: true,
    movable: true,         // Can reorder
    pinnable: true         // Can pin/unpin
  },
  {
    key: 'actions',
    header: 'Actions',
    width: 100,
    sticky: 'right',       // Pin to right
    sortable: false,
    enableMenu: false
  }
];

Keyboard Navigation

Enable Excel-like keyboard navigation:

{
  features: {
    keyboardNavigation: {
      enabled: true
    }
  }
}

Keyboard Shortcuts:

• Arrow keys: Navigate cells
• Tab/Shift+Tab: Move between cells
• Enter: Edit/save and move down
• Escape: Cancel editing
• Alphanumeric keys: Start editing

Column Menu

The column menu (⋮) provides quick access to:

• Sort ascending/descending
• Clear sort
• Filter (with multiple operators)
• Pin left/right
• Unpin
• Move left/right

Menu options automatically show/hide based on column configuration.

License

MIT

Links

• GitHub Repository
• Documentation
• Demo Application

Built with ❤️ using Angular and TypeScript