https://github.com/buoyad/ngdatasheet
Excel-esque datasheet for Angular 2
https://github.com/buoyad/ngdatasheet
angular2 datasheet npm npm-module webcomponent
Last synced: 11 months 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 (about 9 years ago)
- Default Branch: master
- Last Pushed: 2018-11-28T03:19:49.000Z (over 7 years ago)
- Last Synced: 2025-07-26T12:10:54.878Z (11 months 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