Integrated Charts

ngx-deebodata-community

Row Virtualization

NgxDeebodata Documentation

Angular data grid with virtual scroll, integrated charts, row grouping, column resizing & re-ordering, column hiding, cell editing, tab accessibility, sorting with priority, and advanced filtering.

Usage for Developers

Install the data grid from npm, which uses only core @angular packages and rxjs as dependencies.

npm i ngx-deebodata

In the .ts component you want to use the data grid in

import { NgxDeebodata } from 'ngx-deebodata';


@Component({

  selector: 'app-your-component',

  imports: [ NgxDeebodata ],

  templateUrl: './your-component.html',

  styleUrl: './your-component.css'

})

In the template of the component, pass your license key if deploying to any url besides http://localhost:4200, pass a signal object[ ] as the data input of the ngx-deebodata, and any other preferences. The component works fully without a license during local development on http://localhost:4200/

<ngx-deebodata

[editable]="true"

[rowNumbers]="true"

[data]="signalArrayOfObjects()"

[color1]="'navy'"

[color2]="'lightblue'"

[primaryKey]="'employee_id'"

[defRowHgt]="'50px'"

[defGridHgt]="500"

[licenseKey]="licenseKey"

[pieGraphColors]="['red', 'blue', 'lightgray', 'orange', 'green']"

[removePieCovers]="false"

[altRowColor]="'#ececec'"

[myColumnStyles]="[]"

[myColumnValueColors]="[]"

[forceGrouping]="['column_needs_grouping']"

></ngx-deebodata>

It's best to pass hex or rgb colors to color1, color2, pieGraphColors, & altRowColor, but css colors work too

Always pass a px value to defRowHgt like '50px'

forceGrouping - if a column you want grouping/dropdown filters for isn't getting that treatment automatically, try to force it with this - may or may not work depending on how many distinct values the column has and other criteria

removePieCovers input can be a boolean or a string[] of column names where the pie graph should be uncovered

To pass Column Symbols (Numeric columns only)

In the .ts component you want to use the data grid in

import { ColumnSymbol, NgxDeebodata } from 'ngx-deebodata';

In the exported class

symbols: ColumnSymbol[] = [{ column: "salary", symbol: "$" }];

In the template of the component


<ngx-deebodata

[data]="signalArrayOfObjects()"

[myColumnSymbols]="symbols"

></ngx-deebodata>

To Hook Cell Edits

In the .ts component you want to use the data grid in

import { CellEdit, NgxDeebodata } from 'ngx-deebodata';

In the exported class

handleCellEdit(event: CellEdit) {//executes on cell edit if editable isn't false

    /*CellEdit interface -> { value: any; row: any; column: string; idType: string; valueChanged: boolean; }

    row will either be the 0-based index of the edited cell's parent row in the initial data set

    or, if a primaryKey is passed or detected, it will be the value of that primaryKey for the edited
 
    row. Use idType (will be either "key" or "rowId") to know which one is emitting. Use valueChanged

    to know if an edit actually changed the value*/

    // console.log(event)

}

In the template of the component

<ngx-deebodata

[data]="signalArrayOfObjects()"

(cellEdit)="handleCellEdit($event)"

></ngx-deebodata>

To pass Column Value Colors for Charts

For a given column with limited distinct values (qualifies for grouping), give each value it's own color in the charts (pie, bar, line)

In the .ts component you want to use the data grid in

import { ColumnValueColors, NgxDeebodata } from 'ngx-deebodata';

In the exported class

valueColors: ColumnValueColors[] = [

    {

      column: "party",

      valueColors: [

        { value: "Republican", color: "rgb(255, 0, 0)" },

        { value: "Democrat", color: "rgb(0, 0, 255)" },

        { value: "Independent", color: "rgb(0, 255, 0)" }

      ]

    }

  ]

In the template of the component

<ngx-deebodata

[data]="signalArrayOfObjects()"

[myColumnValueColors]="valueColors"

></ngx-deebodata>

To pass Column Styles

These styles apply to values in a given column of the data grid. It technically works for any column, but it's recommended to only pass this for grouped columns that have very limited distinct values. The only css values processed now are color, font_size, font_weight, and text_decoration.

In the .ts component you want to use the data grid in

import { ColumnStyles, NgxDeebodata } from 'ngx-deebodata';

In the exported class

columnStyles: ColumnStyles[] = [

    {

        column: "party",
 
        css: [

            { value: "Republican", color: "red", font_size: "18px" },

            { value: "Democrat", color: "blue", font_size: "18px" },

            { value: "Independent", color: "green", font_size: "18px" },

        ]

    },

  ]

In the template of the component

<ngx-deebodata

[data]="signalArrayOfObjects()"

[myColumnStyles]="columnStyles"

></ngx-deebodata>