rgg

rggrid

A basic editable datagrid control for Angular apps.

Showing:

Popularity

Downloads/wk

1

Maintenance

No Maintenance Data Available

Package

Dependencies

1

License

Type Definitions

Built-In

Tree-Shakeable

Yes?

Readme

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

How to install

Simply run the npm install script

    npm install --save rggrid

Updates

  • UI Improvements input text align right

Dependencies

  • devextreme +17.2.6
  • devextreme-angular +17.2.6

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial