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: '[email protected]'
        },
        {
            id: 2, 
            name: 'Peter Parker',
            email: '[email protected]'
        },
        {
            id: 3, 
            name: 'Pedro Perez',
            email: '[email protected]'
        },
        {
            id: 3, 
            name: 'Susan Lee',
            email: '[email protected]'
        }
    ]

  • 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