NGX Table Layout Picker Workspace

Angular library workspace for the NGX Table Layout Picker - an intuitive grid-based table dimension selector component.

Live Demo

📁 Project Structure

This workspace contains:

• projects/ngx-table-layout-picker/ - The main library package
• projects/demo/ - Demo application showcasing the library features
• plan/ - Architecture and implementation documentation

🚀 Getting Started

Prerequisites

• Node.js 20.x or higher
• npm 10.x or higher

Installation

# Install dependencies
npm install

Development

Run Demo Application

npm start

Open your browser and navigate to http://localhost:4200/ to see the demo application.

Build Library

npm run build

The built library will be in dist/ngx-table-layout-picker/.

Run Tests

npm test

📚 Library Features

The NGX Table Layout Picker library provides:

• ✅ Interactive grid-based table dimension selection
• ✅ Inline and dropdown usage modes
• ✅ Light, dark, and auto theme detection
• ✅ Responsive design for all devices
• ✅ Full accessibility support (ARIA, keyboard navigation)
• ✅ Angular 20+ standalone components
• ✅ Signal-based state management
• ✅ Material Design integration

🔌 Quick API Overview

Components

• NgxTableLayoutPickerComponent - Main inline table dimension selector

  • Interactive grid interface with hover and click selection
  • Configurable dimensions, themes, and responsive behavior
  • Events: selectionChange, cellHover, gridExpanded, gridShrank

• NgxTableLayoutPickerDropdownComponent - Material Design dropdown wrapper

  • Button trigger with customizable appearance
  • Material Menu integration
  • Pass-through configuration to picker component

Services

• TableLayoutService - Core business logic for grid calculations
• ResponsiveService - Breakpoint detection and responsive recommendations
• ThemeService - Theme management and system preference detection

Models

• TableSelection - Selected table dimensions with rows, cols, cells, and timestamp
• TableLayoutConfig - Configuration options for the picker
• GridDimensions - Simple row/col dimensions
• ThemeMode - Theme type: 'light' | 'dark' | 'auto'

For complete API details, see the API Reference.

🚀 Quick Start Examples

Basic Inline Usage

import { Component } from '@angular/core';
import { NgxTableLayoutPickerComponent, TableSelection } from 'ngx-table-layout-picker';

@Component({
  selector: 'app-editor',
  standalone: true,
  imports: [NgxTableLayoutPickerComponent],
  template: `
    <ngx-table-layout-picker
      [rows]="10"
      [cols]="10"
      [theme]="'auto'"
      (selectionChange)="onTableSelected($event)">
    </ngx-table-layout-picker>
  `
})
export class EditorComponent {
  onTableSelected(selection: TableSelection): void {
    console.log(`Selected: ${selection.rows} × ${selection.cols}`);
    // Insert table with these dimensions
  }
}

Dropdown with Material Design

import { Component } from '@angular/core';
import { NgxTableLayoutPickerDropdownComponent, TableSelection } from 'ngx-table-layout-picker';

@Component({
  selector: 'app-toolbar',
  standalone: true,
  imports: [NgxTableLayoutPickerDropdownComponent],
  template: `
    <ngx-table-layout-picker-dropdown
      buttonLabel="Insert Table"
      buttonIcon="table_chart"
      [selectorConfig]="{ rows: 10, cols: 10, theme: 'auto' }"
      (tableSelected)="insertTable($event)">
    </ngx-table-layout-picker-dropdown>
  `
})
export class ToolbarComponent {
  insertTable(selection: TableSelection): void {
    // Handle table insertion
  }
}

For more examples and patterns, see the Usage Guide.

🔧 Development Workflow

1. Library Development

Make changes to files in projects/ngx-table-layout-picker/src/.

2. Build Library

ng build ngx-table-layout-picker

3. Test in Demo App

The demo app imports from ngx-table-layout-picker which resolves to:

• dist/ngx-table-layout-picker (after building)
• Or the source files during development with path mapping

4. Run Tests

ng test

📦 Publishing

After building the library:

cd dist/ngx-table-layout-picker
npm publish

CI/CD & Automation

This project includes a comprehensive CI/CD pipeline using GitHub Actions for automated testing, deployment, and releases.

Workflows

• CI - Continuous integration testing on Node.js 20.x+
• Deploy - Automatic deployment to GitHub Pages on push to main
• Release - Semantic versioning and NPM publishing
• PR Checks - Automated validation for pull requests
• CodeQL - Weekly security scanning

Demo Application

The demo app is automatically deployed to GitHub Pages:

• URL: https://ngmikeng.github.io/ngx-table-layout-picker/
• Trigger: Automatic on push to main branch
• Manual: Use workflow dispatch in Actions tab

Semantic Versioning

This project uses Conventional Commits for automated versioning:

# Patch release (1.0.0 → 1.0.1)
fix(selector): correct cell selection bug

# Minor release (1.0.0 → 1.1.0)
feat(dropdown): add keyboard navigation

# Major release (1.0.0 → 2.0.0)
feat(api): redesign component interface

BREAKING CHANGE: removed deprecated cellBorderColor option

Setup & Configuration

For detailed setup instructions including:

• Enabling GitHub Pages
• Configuring NPM publishing
• Setting up secrets
• Troubleshooting

Documentation

Library Documentation

• 📖 API Reference - Complete API documentation for all components, services, and models
• 📘 Usage Guide - Comprehensive examples and integration patterns
• 🎨 Theming Guide - Customization and styling documentation
• 📦 Library README - Quick start and overview

Demo & Live Examples

• 🚀 Live Demo - Interactive demo application
• 💻 Demo Source Code - Demo application implementation

Project Documentation

• 🏗️ Architecture Documentation - System architecture and design
• ✅ Feature Requirements - Feature specifications
• 🎯 Component Design - Component structure and patterns
• 📊 CI/CD Deployment Plan - Deployment strategy
• 📈 Implementation Progress - Development timeline

Components

NgxTableLayoutPickerComponent

Main table layout selector with grid interface.

NgxTableLayoutPickerDropdownComponent

Dropdown wrapper with Angular Material integration.

Supporting Components

• TableCellComponent (internal)
• TableFooterComponent (internal)

Services

TableLayoutService

Business logic for cell calculations, validation, and utilities.

🎨 Demo Application

The demo app (projects/demo/) showcases:

1. Inline Mode - Direct component usage
2. Dropdown Mode - Material Menu integration
3. Feature Highlights - Key capabilities list
4. Theme Switching - Light/dark mode toggle
5. Selection Tracking - Real-time selection display

📝 Scripts

# Start development server
npm start

# Build library
npm run build

# Run tests
npm test

# Lint code
npm run lint

🏗️ Workspace Configuration

• Angular: 20+ (tested with 21.1.x)
• TypeScript: 5.9.x
• Material: 20+ (tested with 21.1.x)
• Testing: Vitest
• Build: ng-packagr

🤝 Contributing

1. Create a feature branch from develop or main
2. Make your changes following Conventional Commits
3. Write/update tests
4. Build and test locally
5. Submit a pull request
   • PR checks workflow will automatically validate your changes
   • All tests must pass before merging

Commit Message Format

<type>(<scope>): <subject>

Types: feat, fix, docs, style, refactor, perf, test, chore

📄 License

MIT License - see LICENSE file for details.

🙏 Acknowledgments

Built with Angular CLI and inspired by table insertion tools in popular office applications.

Made with ❤️ using Angular

For more information on Angular CLI commands, visit the Angular CLI Documentation.