{"_id":"@ashitrai/ng-spreadsheet","_rev":"4-5db1ca04ba6a20efde6f50df959c79f6","name":"@ashitrai/ng-spreadsheet","dist-tags":{"latest":"0.2.2"},"versions":{"0.1.0":{"name":"@ashitrai/ng-spreadsheet","version":"0.1.0","keywords":["angular","spreadsheet","excel","grid","table","virtual-scroll","component","library"],"author":{"name":"ng-spreadsheet contributors"},"license":"MIT","_id":"@ashitrai/ng-spreadsheet@0.1.0","maintainers":[{"name":"ashitrai","email":"nikkuashit@gmail.com"}],"homepage":"https://github.com/ashitabi/ng-spreadsheet#readme","bugs":{"url":"https://github.com/ashitabi/ng-spreadsheet/issues"},"dist":{"shasum":"517a34fe9002e817a3a26939f2870738d0172f9d","tarball":"https://registry.npmjs.org/@ashitrai/ng-spreadsheet/-/ng-spreadsheet-0.1.0.tgz","fileCount":5,"integrity":"sha512-CSMwx7otpiVJpKhSPhT80k0IwIvDhRreIz/SNt/ZTGazRjl4fe6aUdsw8SjQgUxPwtRX/lVxE5/ZKOXV5Vusiw==","signatures":[{"sig":"MEYCIQC9SLYmw+HBKvzzDWIDfbPLCqH7e6s42TPLiMcRzy/uOAIhANwkqttDb96cMw+etSzlHZfmkzexMy8xfTGQwaBLbUGt","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":514554},"module":"fesm2022/ashitrai-ng-spreadsheet.mjs","exports":{".":{"types":"./index.d.ts","default":"./fesm2022/ashitrai-ng-spreadsheet.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"0fcfe2e91622feae062de6cdf12ddf7e64737f39","typings":"index.d.ts","_npmUser":{"name":"ashitrai","email":"nikkuashit@gmail.com"},"repository":{"url":"git+https://github.com/ashitabi/ng-spreadsheet.git","type":"git"},"_npmVersion":"11.4.2","description":"A production-ready Angular spreadsheet component library with Excel-like functionality","directories":{},"sideEffects":false,"_nodeVersion":"24.4.1","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/cdk":"^20.0.0","@angular/core":"^20.0.0","@angular/common":"^20.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ng-spreadsheet_0.1.0_1764137257656_0.6210068936268742","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@ashitrai/ng-spreadsheet","version":"0.2.0","keywords":["angular","spreadsheet","excel","grid","table","virtual-scroll","component","library"],"author":{"name":"ng-spreadsheet contributors"},"license":"MIT","_id":"@ashitrai/ng-spreadsheet@0.2.0","maintainers":[{"name":"ashitrai","email":"nikkuashit@gmail.com"}],"homepage":"https://github.com/ashitabi/ng-spreadsheet#readme","bugs":{"url":"https://github.com/ashitabi/ng-spreadsheet/issues"},"dist":{"shasum":"8ba92e54c1fd0b1cbf8d23a411b16958c66bce45","tarball":"https://registry.npmjs.org/@ashitrai/ng-spreadsheet/-/ng-spreadsheet-0.2.0.tgz","fileCount":5,"integrity":"sha512-3/YHkRM5TF9t/c7wxmAduFBWAHP51IzxaQSdT6PIR+R3HxNB2FZFB2QvmdnY4siV8C9VsEdforyM0UB6C03sWg==","signatures":[{"sig":"MEUCIQDfCjy824Yc6jf98Bqyzz7eFDZfyaMUIiWM/PMWrwclzgIgH4Fhigq6+hmSqpih1inM2NUOmovEGhoAtzlSd4K2bK0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":558346},"module":"fesm2022/ashitrai-ng-spreadsheet.mjs","exports":{".":{"types":"./index.d.ts","default":"./fesm2022/ashitrai-ng-spreadsheet.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"549d772e72e73d917702cdca3f2b939517736a03","typings":"index.d.ts","_npmUser":{"name":"ashitrai","email":"nikkuashit@gmail.com"},"repository":{"url":"git+https://github.com/ashitabi/ng-spreadsheet.git","type":"git"},"_npmVersion":"11.4.2","description":"A production-ready Angular spreadsheet component library with Excel-like functionality","directories":{},"sideEffects":false,"_nodeVersion":"24.4.1","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/cdk":"^20.0.0","@angular/core":"^20.0.0","@angular/common":"^20.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ng-spreadsheet_0.2.0_1764333297715_0.10456997558838643","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@ashitrai/ng-spreadsheet","version":"0.2.1","keywords":["angular","spreadsheet","excel","grid","table","virtual-scroll","component","library"],"author":{"name":"ng-spreadsheet contributors"},"license":"MIT","_id":"@ashitrai/ng-spreadsheet@0.2.1","maintainers":[{"name":"ashitrai","email":"nikkuashit@gmail.com"}],"homepage":"https://github.com/ashitabi/ng-spreadsheet#readme","bugs":{"url":"https://github.com/ashitabi/ng-spreadsheet/issues"},"dist":{"shasum":"5d522b8e5015f1df3ca329925606df26dd0a7bea","tarball":"https://registry.npmjs.org/@ashitrai/ng-spreadsheet/-/ng-spreadsheet-0.2.1.tgz","fileCount":5,"integrity":"sha512-XpM5Nt6XYwkuaELzZBkGxqzvD4Nr4AoT49SOzXsoB/KdYEuV2Zyet5CPwUgxmee4IdcNJ/OxpKyVtP7RaoQaUQ==","signatures":[{"sig":"MEQCIGkFUd97sU0wbawBpnki0iU/jDWuwErURzJ4rrV5je1lAiBnpPYgnPXTseY5/17zBQ1xJ2iAIuPWTiNrmc7pc4GATw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":558086},"module":"fesm2022/ashitrai-ng-spreadsheet.mjs","exports":{".":{"types":"./index.d.ts","default":"./fesm2022/ashitrai-ng-spreadsheet.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"7defdeb15832550dfddb5d20aac9e20d64fbd374","typings":"index.d.ts","_npmUser":{"name":"ashitrai","email":"nikkuashit@gmail.com"},"repository":{"url":"git+https://github.com/ashitabi/ng-spreadsheet.git","type":"git"},"_npmVersion":"11.4.2","description":"A production-ready Angular spreadsheet component library with Excel-like functionality","directories":{},"sideEffects":false,"_nodeVersion":"24.4.1","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/cdk":"^20.0.0","@angular/core":"^20.0.0","@angular/common":"^20.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ng-spreadsheet_0.2.1_1764576943603_0.7356463708828149","host":"s3://npm-registry-packages-npm-production"}},"0.2.2":{"name":"@ashitrai/ng-spreadsheet","version":"0.2.2","description":"A production-ready Angular spreadsheet component library with Excel-like functionality","keywords":["angular","spreadsheet","excel","grid","table","virtual-scroll","component","library"],"author":{"name":"ng-spreadsheet contributors"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/ashitabi/ng-spreadsheet.git"},"bugs":{"url":"https://github.com/ashitabi/ng-spreadsheet/issues"},"homepage":"https://github.com/ashitabi/ng-spreadsheet#readme","peerDependencies":{"@angular/common":"^20.0.0","@angular/core":"^20.0.0","@angular/cdk":"^20.0.0"},"dependencies":{"tslib":"^2.3.0"},"sideEffects":false,"module":"fesm2022/ashitrai-ng-spreadsheet.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","default":"./fesm2022/ashitrai-ng-spreadsheet.mjs"}},"_id":"@ashitrai/ng-spreadsheet@0.2.2","gitHead":"7769f03874d66e8db887ff455ec5c9710cd707da","_nodeVersion":"24.4.1","_npmVersion":"11.4.2","dist":{"integrity":"sha512-3j2exjv35k+GfRsP8tSpSvA9QMRepzpwSRGTIuUPJyE9mPTt1HGP29drW9hGz+hPfHcrrguge4nhUiK5HMlpvw==","shasum":"8158f6dd4a55144e2bcbe6ad4a0c83798b11fcdf","tarball":"https://registry.npmjs.org/@ashitrai/ng-spreadsheet/-/ng-spreadsheet-0.2.2.tgz","fileCount":5,"unpackedSize":575114,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIES+VbhqTW3RXWyztROYEPFdhLlvkf402giYFoJUb7EGAiBpMVIs3H8l3jFvCzHxjyhnbkoyoxL16BJ5ZqT3P6o/6w=="}]},"_npmUser":{"name":"ashitrai","email":"nikkuashit@gmail.com"},"directories":{},"maintainers":[{"name":"ashitrai","email":"nikkuashit@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ng-spreadsheet_0.2.2_1764578913482_0.5120683243182522"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-26T06:07:37.596Z","modified":"2025-12-01T08:48:33.905Z","0.1.0":"2025-11-26T06:07:37.913Z","0.2.0":"2025-11-28T12:34:57.940Z","0.2.1":"2025-12-01T08:15:43.806Z","0.2.2":"2025-12-01T08:48:33.684Z"},"bugs":{"url":"https://github.com/ashitabi/ng-spreadsheet/issues"},"author":{"name":"ng-spreadsheet contributors"},"license":"MIT","homepage":"https://github.com/ashitabi/ng-spreadsheet#readme","keywords":["angular","spreadsheet","excel","grid","table","virtual-scroll","component","library"],"repository":{"type":"git","url":"git+https://github.com/ashitabi/ng-spreadsheet.git"},"description":"A production-ready Angular spreadsheet component library with Excel-like functionality","maintainers":[{"name":"ashitrai","email":"nikkuashit@gmail.com"}],"readme":"# ng-spreadsheet\n\nA production-ready Angular spreadsheet component library with Excel-like functionality, built with Angular 20+ and Angular CDK.\n\n## Features\n\n### Core Spreadsheet Functionality ✅\n\n- **Virtual Scrolling**: Smooth handling of 10,000+ rows using Angular CDK Virtual Scroll\n- **Cell Selection**: Single cell and range selection with mouse drag and Shift+click\n- **Cell Editing**: Double-click or F2 to edit, inline editing with formula bar support\n- **Keyboard Navigation**: Arrow keys, Tab, Enter, Shift+Tab for seamless navigation\n- **Row/Column Headers**: Interactive headers (A, B, C... and 1, 2, 3...)\n- **Column Resizing**: Drag column borders to resize with mouse\n- **Row Resizing**: Drag row borders to resize with mouse\n- **Context Menu**: Right-click menu with Cut, Copy, Paste, Delete, Insert/Delete Row/Column\n- **Fill Handle**: Excel-like green square for drag-to-fill functionality\n- **Undo/Redo**: Full history tracking with Ctrl+Z and Ctrl+Y (up to 100 actions)\n- **Copy/Paste**: Ctrl+C/V support with TSV format\n\n### Formula Engine ✅ (23 Functions)\n\n**Mathematical Functions:**\n- `SUM`, `AVERAGE`, `COUNT`, `MIN`, `MAX`, `PRODUCT`\n\n**Statistical Functions:**\n- `COUNTA`, `COUNTBLANK`, `MEDIAN`, `MODE`, `STDEV`, `VAR`, `CORREL`, `PERCENTILE`, `QUARTILE`, `RANK`\n\n**Logical Functions:**\n- `IF`, `IFS`, `IFERROR`, `IFNA`, `AND`, `OR`, `NOT`\n\n**Formula Features:**\n- Cell references (A1, B2) and ranges (A1:B10)\n- Formula autocomplete with function suggestions\n- Parameter hints showing function syntax\n- Automatic recalculation when dependencies change\n- Circular reference detection\n\n### Excel-like Ribbon ✅\n\n**Font Formatting:**\n- Font family selection (Arial, Calibri, Times New Roman, Courier New, Verdana, Georgia)\n- Font size (10-24px)\n- Bold, Italic, Underline\n- Text color and background color pickers\n\n**Number Formatting:**\n- Formats: General, Number, Currency, Accounting, Percentage, Date, Time\n- Increase/decrease decimal places\n\n**Alignment:**\n- Horizontal alignment (Left, Center, Right)\n- Word wrap toggle\n\n**Data Operations:**\n- Sort ascending/descending by column\n- Filter toggle\n- Search/Find functionality\n\n### Coming Soon ⏳\n\n- **Merge & Center** cells\n- **Cell borders** (all, outline, top, bottom, left, right)\n- **Vertical alignment** (top, middle, bottom)\n- **Format Painter** to copy cell formatting\n- **Paste Special** (values, formats, formulas)\n- **Clear options** (all, contents, formats)\n- **AutoFit column width** to content\n- **Freeze panes**\n- **Data validation**\n- **Conditional formatting**\n- **Excel (.xlsx) import/export**\n- **Multiple sheet tabs**\n\n## Installation\n\n```bash\nnpm install ng-spreadsheet\n```\n\nOr if building from source:\n\n```bash\nnpm install\nnpm run build ng-spreadsheet\n```\n\n## Quick Start\n\n### 1. Import the Component\n\n```typescript\nimport { Component } from '@angular/core';\nimport { SpreadsheetComponent, SpreadsheetData } from 'ng-spreadsheet';\n\n@Component({\n  selector: 'app-root',\n  imports: [SpreadsheetComponent],\n  template: `\n    <ngs-spreadsheet\n      [data]=\"spreadsheetData\"\n      [height]=\"600\"\n      [width]=\"1000\"\n      (cellClick)=\"onCellClick($event)\"\n      (cellChange)=\"onCellChange($event)\"\n    />\n  `\n})\nexport class AppComponent {\n  spreadsheetData: SpreadsheetData = {\n    sheets: [{\n      id: 'sheet_1',\n      name: 'Sheet1',\n      rowCount: 1000,\n      colCount: 26,\n      cells: this.initializeCells(),\n      isActive: true,\n    }],\n    activeSheetIndex: 0,\n  };\n\n  private initializeCells() {\n    // Initialize your cell data here\n    // See demo app for complete example\n  }\n\n  onCellClick(address: any) {\n    console.log('Cell clicked:', address);\n  }\n\n  onCellChange(event: any) {\n    console.log('Cell changed:', event);\n  }\n}\n```\n\n### 2. Basic Usage with Sample Data\n\n```typescript\nimport { createDefaultSpreadsheet } from 'ng-spreadsheet';\n\nexport class AppComponent {\n  // Create a default empty spreadsheet\n  spreadsheetData = createDefaultSpreadsheet();\n}\n```\n\n## API Reference\n\n### SpreadsheetComponent\n\n#### Inputs\n\n| Input | Type | Default | Description |\n|-------|------|---------|-------------|\n| `data` | `SpreadsheetData` | - | Initial spreadsheet data |\n| `height` | `number` | `600` | Height of the spreadsheet in pixels |\n| `width` | `number` | `1000` | Width of the spreadsheet in pixels |\n| `readonly` | `boolean` | `false` | Whether the spreadsheet is read-only |\n\n#### Outputs\n\n| Output | Type | Description |\n|--------|------|-------------|\n| `cellClick` | `EventEmitter<CellAddress>` | Emitted when a cell is clicked |\n| `cellChange` | `EventEmitter<{address, oldValue, newValue}>` | Emitted when a cell value changes |\n| `cellDoubleClick` | `EventEmitter<CellAddress>` | Emitted when a cell is double-clicked |\n| `selectionChange` | `EventEmitter<CellAddress \\| null>` | Emitted when cell selection changes |\n\n### SpreadsheetDataService\n\nInjectable service for managing spreadsheet state programmatically.\n\n```typescript\nimport { SpreadsheetDataService } from 'ng-spreadsheet';\n\nconstructor(private dataService: SpreadsheetDataService) {\n  // Get current data\n  const data = this.dataService.getData();\n\n  // Update a cell\n  this.dataService.updateCell(0, 0, 'Hello');\n\n  // Select a cell\n  this.dataService.selectCell({ row: 0, col: 0 });\n\n  // Undo/Redo\n  this.dataService.undo();\n  this.dataService.redo();\n\n  // Subscribe to changes\n  this.dataService.activeSheet$.subscribe(sheet => {\n    console.log('Active sheet:', sheet);\n  });\n}\n```\n\n### Data Models\n\n#### Cell\n\n```typescript\ninterface Cell {\n  row: number;\n  col: number;\n  value: any;\n  displayValue?: string;\n  style?: CellStyle;\n  isEditing?: boolean;\n  isSelected?: boolean;\n  readonly?: boolean;\n  dataType?: 'string' | 'number' | 'boolean' | 'date' | 'formula' | 'error';\n  error?: string;\n}\n```\n\n#### Sheet\n\n```typescript\ninterface Sheet {\n  id: string;\n  name: string;\n  cells: Cell[][];\n  rowCount: number;\n  colCount: number;\n  columnWidths?: number[];\n  rowHeights?: number[];\n  isActive?: boolean;\n  defaultColumnWidth?: number;\n  defaultRowHeight?: number;\n}\n```\n\n#### SpreadsheetData\n\n```typescript\ninterface SpreadsheetData {\n  sheets: Sheet[];\n  activeSheetIndex: number;\n  metadata?: {\n    title?: string;\n    author?: string;\n    createdDate?: Date;\n    modifiedDate?: Date;\n  };\n}\n```\n\n## Keyboard Shortcuts\n\n| Shortcut | Action |\n|----------|--------|\n| Arrow Keys | Navigate between cells |\n| Tab | Move to next cell (right) |\n| Shift + Tab | Move to previous cell (left) |\n| Enter | Move to cell below |\n| F2 | Start editing selected cell |\n| Delete / Backspace | Clear cell content |\n| Ctrl+Z / Cmd+Z | Undo last action |\n| Ctrl+Y / Cmd+Y | Redo last undone action |\n| Shift + Click | Select range of cells |\n| Escape | Cancel editing |\n\n## Advanced Usage\n\n### Custom Cell Initialization\n\n```typescript\nimport { Cell, createEmptyCell } from 'ng-spreadsheet';\n\nfunction createCustomCell(row: number, col: number): Cell {\n  const cell = createEmptyCell(row, col);\n  cell.value = `R${row}C${col}`;\n  cell.displayValue = cell.value;\n  cell.style = {\n    backgroundColor: '#f0f0f0',\n    fontWeight: 'bold',\n  };\n  return cell;\n}\n```\n\n### Working with Cell Addresses\n\n```typescript\nimport {\n  colIndexToLetter,\n  colLetterToIndex,\n  cellAddressToA1,\n  a1ToCellAddress\n} from 'ng-spreadsheet';\n\n// Convert column index to letter\ncolIndexToLetter(0);  // 'A'\ncolIndexToLetter(25); // 'Z'\ncolIndexToLetter(26); // 'AA'\n\n// Convert letter to column index\ncolLetterToIndex('A');  // 0\ncolLetterToIndex('Z');  // 25\ncolLetterToIndex('AA'); // 26\n\n// Convert cell address to A1 notation\ncellAddressToA1({ row: 0, col: 0 }); // 'A1'\n\n// Parse A1 notation\na1ToCellAddress('B5'); // { row: 4, col: 1 }\n```\n\n## Performance\n\nThe library is designed for high performance:\n\n- **Virtual Scrolling**: Uses Angular CDK Virtual Scroll to efficiently render only visible cells\n- **Handles 10,000+ rows** smoothly with virtual scrolling\n- **Immutable State**: Uses immutable patterns for efficient change detection\n- **Lazy Rendering**: Only renders cells in the viewport\n\n## Development\n\n### Build the Library\n\n```bash\nnpm run build ng-spreadsheet\n```\n\n### Run the Demo\n\n```bash\nnpm start demo\n```\n\nThen open http://localhost:4200 in your browser.\n\n### Project Structure\n\n```\nprojects/ng-spreadsheet/\n├── src/\n│   ├── lib/\n│   │   ├── components/\n│   │   │   └── spreadsheet.component.ts\n│   │   ├── models/\n│   │   │   ├── cell.model.ts\n│   │   │   ├── cell-style.model.ts\n│   │   │   └── sheet.model.ts\n│   │   └── services/\n│   │       └── spreadsheet-data.service.ts\n│   └── public-api.ts\n└── README.md\n```\n\n## Browser Support\n\n- Chrome (latest)\n- Firefox (latest)\n- Safari (latest)\n- Edge (latest)\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## Roadmap\n\n**Completed:**\n- [x] Column/row resizing\n- [x] Cell styling (colors, fonts, alignment)\n- [x] Copy/paste functionality\n- [x] Formula engine (23 functions)\n- [x] Context menu\n- [x] Ribbon with formatting options\n- [x] Undo/redo support\n\n**In Progress:**\n- [ ] Merge & Center cells\n- [ ] Cell borders\n- [ ] Vertical alignment\n- [ ] Format Painter\n- [ ] Paste Special\n- [ ] Clear options\n- [ ] AutoFit column width\n\n**Planned:**\n- [ ] Freeze panes\n- [ ] Advanced filtering\n- [ ] Data validation\n- [ ] Conditional formatting\n- [ ] Cell comments\n- [ ] Excel import/export (.xlsx)\n- [ ] CSV import/export\n- [ ] PDF export\n- [ ] Multiple sheet support with tabs\n- [ ] Cross-sheet formula references\n- [ ] Advanced formulas (VLOOKUP, HLOOKUP, INDEX, MATCH, etc.)\n- [ ] Date/Time functions\n- [ ] Text manipulation functions\n\n## License\n\nMIT\n\n## Credits\n\nBuilt with:\n- [Angular](https://angular.dev) - Web framework\n- [Angular CDK](https://material.angular.io/cdk) - Component Dev Kit for virtual scrolling\n- [TypeScript](https://www.typescriptlang.org/) - Type-safe JavaScript\n\n## Support\n\nFor issues and feature requests, please use the [GitHub issue tracker](https://github.com/yourusername/ng-spreadsheet/issues).\n","readmeFilename":"README.md"}