Nightly Procrastination Machine

    @epicfaace/ngdatasheet

    0.6.1 • Public • Published

    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:

      ...
      import { NgModule }      from '@angular/core';
      import { NgDatasheetModule } from 'ngdatasheet/ngdatasheet';
      ...
     
      ...
      @NgModule({
        imports:      [ NgDatasheetModule ]
        ...

    In your component define a 2-D data array:

    public dataany[][] = [
        ['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:

    <ng-datasheet [(data)]="data"></ng-datasheet>

    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 <ng-datasheet></ng-datasheet> using a directive
        • Injecting <ng-template> with selector as supplied in the appropriate spot in the data array

    Install

    npm i @epicfaace/ngdatasheet

    DownloadsWeekly Downloads

    4

    Version

    0.6.1

    License

    MIT

    Unpacked Size

    57.2 kB

    Total Files

    17

    Last publish

    Collaborators

    • epicfaace