Rggrid NPM | npm.io

RG-GRID

A basic and custom grid to be able to capture and edit range of values in a pivot grid for Angular 5+ Apps.

Example

<rg-grid #grid
    [concepts]="concepts"
    [columnsDataSource]="columns"
    [displayTotalPerRow]="true"
    [displayGeneralTotal]="true"
    [editConcepts]="false"
    [allowDecimals]="false"
    [decimalPositions]="3"
    [navigationType]="0"
    [displayTotalPerColumn]="true"
    [height]="600"
    conceptField="name">
</rg-grid>

Documentation

concepts

object[]
example:

  [ 
      {
          id: 1, 
          name: 'John Doe',
          email: 'johndoe@example.com'
      },
      {
          id: 2, 
          name: 'Peter Parker',
          email: 'spiderman@marvel.com'
      },
      {
          id: 3, 
          name: 'Pedro Perez',
          email: 'pperezz@live.com'
      },
      {
          id: 3, 
          name: 'Susan Lee',
          email: 'slee@gmail.com'
      }
  ]

This is mandatory

columnsDataSource

IColumItem[]
example:

columns: IColumnItem[] = [
      {
          editable: false,
          title: 'Email', // this appears only as a readonly column
          fieldName: 'email'
      }
      {
          title: 'Monday',
          editable: true
      },
      {
          title: 'Tuesday',
          editable: true
      },
      {
          title: 'Wednesday',
          editable: true
      },
      {
          title: 'Thursday',
          editable: true
      },
      {
          title: 'Friday',
          editable: true
      }
  ];

This is mandatory

displayTotalPerRow: Display a total in the same row
- boolean
- default: true
displayGeneralTotal: Display a grand total below all rows
- boolean
- default: true
editConcepts: Allow to edit each concept (first cell in the row)
- boolean
- default: false
allowDecimals: allow capture decimals
- boolean
- default: false
decimalPositions: when allowDecimals is true, decimalPositions define the number of decimal digit positions
- number
- default: 2
navigationType: set default navigation type
- number
- default: 0
- enum: NavigationType.Row | NavgationType.Column
displayTotalPerColumn: display sum of all column values
- number
height: set the control's height
- number (px)
conceptField: the property to read from the concept list to display in the first cell