https://github.com/buoyad/ngdatasheet

Excel-esque datasheet for Angular 2
https://github.com/buoyad/ngdatasheet

angular2 datasheet npm npm-module webcomponent

Last synced: 9 days ago
JSON representation

Excel-esque datasheet for Angular 2

• Host: GitHub
• URL: https://github.com/buoyad/ngdatasheet
• Owner: buoyad
• License: mit
• Created: 2017-04-05T01:16:44.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-11-28T03:19:49.000Z (almost 6 years ago)
• Last Synced: 2023-09-19T13:13:08.658Z (about 1 year ago)
• Topics: angular2, datasheet, npm, npm-module, webcomponent
• Language: TypeScript
• Homepage: https://buoyad.github.io/ngDatasheet/
• Size: 309 KB
• Stars: 7
• Watchers: 2
• Forks: 2
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# NgDatasheet

Datasheet component for Angular 2 that allows user interaction and prettified display alike.

## Notice

This component is still under development. Breaking changes are subject to release with no notice.

## Installation

`npm install --save ngdatasheet`

## Usage

Import NgDatasheetModule into your NgModule:

```typescript

  ...

  import { NgModule }      from '@angular/core';

  import { NgDatasheetModule } from 'ngdatasheet/ngdatasheet';

  ...

  ...

  @NgModule({

    imports:      [ NgDatasheetModule ]

    ...

```

In your component define a 2-D data array:

```typescript

public data: any[][] = [

    ['Item',               'Unit price', 'Quantity',       'Price'],

    ['Joy Division shirt',          25,           4,           100],

    ['Cutoff jeans',                30,          24,           720],

    ['Peeps',                     1.25,         100,           125],

    ['Subtotal',                      ,            ,           945],

    ['Tax',                           ,      '3.0%',       .03*945],

    ['Total',                         ,            , 945 + .03*945]

  ]

```

And bind to it in your template: 

```html

```

Output:



## Planned Features

* Inline expression evaluation 

* `data` property: 

  * Support for relative expressioning via property  

  * Support for defining cells as read-only  

  * Support for inline templating with the following API:  

    * Defining templates within the `` using a directive  

    * Injecting `` with selector as supplied in the appropriate spot in the `data` array