How to use ag-grid-community - 10 common examples

};
        this.dispatchEvent(event);
        if (this.params.action) {
            this.params.action();
        }
    };
    MenuItemComponent.prototype.destroy = function () {
        // console.log('MenuItemComponent->destroy() ' + this.instance);
        _super.prototype.destroy.call(this);
    };
    // private instance = Math.random();
    MenuItemComponent.TEMPLATE = "<div class="\&quot;ag-menu-option\&quot;">\n            <span class="\&quot;ag-menu-option-icon\&quot;"></span>\n            <span class="\&quot;ag-menu-option-text\&quot;"></span>\n            <span class="\&quot;ag-menu-option-shortcut\&quot;"></span>\n            <span class="\&quot;ag-menu-option-popup-pointer\&quot;"></span>\n        </div>";
    MenuItemComponent.EVENT_ITEM_SELECTED = 'itemSelected';
    __decorate([
        ag_grid_community_1.Autowired('gridOptionsWrapper'),
        __metadata("design:type", ag_grid_community_1.GridOptionsWrapper)
    ], MenuItemComponent.prototype, "gridOptionsWrapper", void 0);
    __decorate([
        ag_grid_community_1.Autowired('tooltipManager'),
        __metadata("design:type", ag_grid_community_1.TooltipManager)
    ], MenuItemComponent.prototype, "tooltipManager", void 0);
    __decorate([
        ag_grid_community_1.RefSelector('eIcon'),
        __metadata("design:type", HTMLElement)
    ], MenuItemComponent.prototype, "eIcon", void 0);
    __decorate([
        ag_grid_community_1.RefSelector('eName'),
        __metadata("design:type", HTMLElement)
    ], MenuItemComponent.prototype, "eName", void 0);
    __decorate([
        ag_grid_community_1.RefSelector('eShortcut'),
        __metadata("design:type", HTMLElement)

TotalRowsComp.prototype.postConstruct = function () {
        this.setLabel('totalRows', 'Total Rows');
        // this component is only really useful with client side row model
        if (this.gridApi.getModel().getType() !== 'clientSide') {
            console.warn("ag-Grid: agTotalRowCountComponent should only be used with the client side row model.");
            return;
        }
        this.addCssClass('ag-status-panel');
        this.addCssClass('ag-status-panel-total-row-count');
        this.setDisplayed(true);
        var listener = this.onDataChanged.bind(this);
        this.eventService.addEventListener(ag_grid_community_1.Events.EVENT_MODEL_UPDATED, listener);
    };
    TotalRowsComp.prototype.onDataChanged = function () {

FilteredRowsComp.prototype.postConstruct = function () {
        this.setLabel('filteredRows', 'Filtered');
        // this component is only really useful with client side row model
        if (this.gridApi.getModel().getType() !== 'clientSide') {
            console.warn("ag-Grid: agFilteredRowCountComponent should only be used with the client side row model.");
            return;
        }
        this.addCssClass('ag-status-panel');
        this.addCssClass('ag-status-panel-filtered-row-count');
        this.setDisplayed(true);
        var listener = this.onDataChanged.bind(this);
        this.eventService.addEventListener(ag_grid_community_1.Events.EVENT_MODEL_UPDATED, listener);
    };
    FilteredRowsComp.prototype.onDataChanged = function () {

}
            });
        }
        var gotResult = count > 1;
        var gotNumberResult = numberCount > 1;
        // we show count even if no numbers
        this.setAggregationComponentValue('count', count, gotResult);
        // show if numbers found
        this.setAggregationComponentValue('sum', sum, gotNumberResult);
        this.setAggregationComponentValue('min', min, gotNumberResult);
        this.setAggregationComponentValue('max', max, gotNumberResult);
        this.setAggregationComponentValue('avg', (sum / numberCount), gotNumberResult);
    };
    AggregationComp.TEMPLATE = "<div class="\&quot;ag-status-panel">\n                \n                \n                \n                \n                \n            </div>";
    __decorate([
        ag_grid_community_1.Autowired('eventService'),
        __metadata("design:type", ag_grid_community_1.EventService)
    ], AggregationComp.prototype, "eventService", void 0);
    __decorate([
        ag_grid_community_1.Autowired('rangeController'),
        __metadata("design:type", rangeController_1.RangeController)
    ], AggregationComp.prototype, "rangeController", void 0);
    __decorate([
        ag_grid_community_1.Autowired('valueService'),
        __metadata("design:type", ag_grid_community_1.ValueService)
    ], AggregationComp.prototype, "valueService", void 0);
    __decorate([
        ag_grid_community_1.Autowired('cellNavigationService'),
        __metadata("design:type", ag_grid_community_1.CellNavigationService)
    ], AggregationComp.prototype, "cellNavigationService", void 0);
    __decorate([
        ag_grid_community_1.Autowired('rowRenderer'),

};
    RangeChartService.prototype.getSelectedRange = function () {
        var ranges = this.rangeController.getCellRanges();
        return ranges.length > 0 ? ranges[0] : {};
    };
    RangeChartService.prototype.destroyAllActiveCharts = function () {
        // we take copy as the forEach is removing from the array as we process
        var activeCharts = this.activeCharts.slice();
        activeCharts.forEach(function (chart) { return chart.destroyChart(); });
    };
    __decorate([
        ag_grid_community_1.Autowired('rangeController'),
        __metadata("design:type", rangeController_1.RangeController)
    ], RangeChartService.prototype, "rangeController", void 0);
    __decorate([
        ag_grid_community_1.Autowired('context'),
        __metadata("design:type", ag_grid_community_1.Context)
    ], RangeChartService.prototype, "context", void 0);
    __decorate([
        ag_grid_community_1.Autowired('gridOptionsWrapper'),
        __metadata("design:type", ag_grid_community_1.GridOptionsWrapper)
    ], RangeChartService.prototype, "gridOptionsWrapper", void 0);
    __decorate([
        ag_grid_community_1.PreDestroy,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", []),
        __metadata("design:returntype", void 0)
    ], RangeChartService.prototype, "destroyAllActiveCharts", null);
    RangeChartService = __decorate([
        ag_grid_community_1.Bean('rangeChartService')
    ], RangeChartService);
    return RangeChartService;

var initSelect = function (property, input, values, sortedValues) {
            var fontValue = _this.params.initialFont[property];
            var initialValue = values[0];
            if (fontValue) {
                var fontValueAsStr = "" + fontValue;
                var lowerCaseFontValue = ag_grid_community_1._.exists(fontValueAsStr) ? fontValueAsStr.toLowerCase() : '';
                var lowerCaseValues = values.map(function (value) { return value.toLowerCase(); });
                // check for known font values using lowercase
                var valueIndex = lowerCaseValues.indexOf(lowerCaseFontValue);
                var unknownUserProvidedFont = valueIndex < 0;
                if (unknownUserProvidedFont) {
                    var capitalisedFontValue = ag_grid_community_1._.capitalise(fontValueAsStr);
                    // add user provided font to list
                    values.push(capitalisedFontValue);
                    if (sortedValues) {
                        values.sort();
                    }
                    initialValue = capitalisedFontValue;
                }
                else {
                    initialValue = values[valueIndex];
                }
            }
            var options = values.map(function (value) {
                return { value: value, text: value };
            });
            input.addOptions(options)
                .setValue("" + initialValue)

}
            else {
                this.tooltipManager.registerTooltip(this);
            }
        }
        if (this.params.shortcut) {
            this.eShortcut.innerHTML = this.params.shortcut;
        }
        if (this.params.subMenu) {
            if (this.gridOptionsWrapper.isEnableRtl()) {
                // for RTL, we show arrow going left
                this.ePopupPointer.appendChild(ag_grid_community_1._.createIconNoSpan('smallLeft', this.gridOptionsWrapper));
            }
            else {
                // for normal, we show arrow going right
                this.ePopupPointer.appendChild(ag_grid_community_1._.createIconNoSpan('smallRight', this.gridOptionsWrapper));
            }
        }
        else {
            this.ePopupPointer.innerHTML = ' ';
        }
        this.eName.innerHTML = this.params.name;
        if (this.params.disabled) {
            ag_grid_community_1._.addCssClass(this.getGui(), 'ag-menu-option-disabled');
        }
        else {
            this.addGuiEventListener('click', this.onOptionSelected.bind(this));
        }
        if (this.params.cssClasses) {
            this.params.cssClasses.forEach(function (it) { return ag_grid_community_1._.addCssClass(_this.getGui(), it); });
        }
    };

AggFuncService.prototype.getDefaultAggFunc = function (column) {
        var allKeys = this.getFuncNames(column);
        // use 'sum' if it's a) allowed for the column and b) still registered
        // (ie not removed by user)
        var sumInKeysList = allKeys.indexOf(AggFuncService_1.AGG_SUM) >= 0;
        var sumInFuncs = ag_grid_community_1._.exists(this.aggFuncsMap[AggFuncService_1.AGG_SUM]);
        var useSum = sumInKeysList && sumInFuncs;
        if (useSum) {
            return AggFuncService_1.AGG_SUM;
        }
        else {
            if (ag_grid_community_1._.existsAndNotEmpty(allKeys)) {
                return allKeys[0];
            }
            else {
                return null;
            }
        }
    };
    AggFuncService.prototype.addAggFuncs = function (aggFuncs) {

return;
        }
        // format all the values, if a formatter is provided
        for (var i = 0; i < values.length; i++) {
            var valueUnformatted = values[i];
            var valueFormatted = this.valueFormatterService.formatValue(this.column, null, null, valueUnformatted);
            if (valueFormatted != null) {
                values[i] = valueFormatted;
            }
        }
        var arrayToDisplay = values.length > 10 ? values.slice(0, 10).concat('...') : values;
        var valuesString = "(" + values.length + ") " + arrayToDisplay.join(",");
        this.eFloatingFilterText.value = valuesString;
    };
    __decorate([
        ag_grid_community_1.RefSelector('eFloatingFilterText'),
        __metadata("design:type", HTMLInputElement)
    ], SetFloatingFilterComp.prototype, "eFloatingFilterText", void 0);
    __decorate([
        ag_grid_community_1.Autowired('valueFormatterService'),
        __metadata("design:type", ag_grid_community_1.ValueFormatterService)
    ], SetFloatingFilterComp.prototype, "valueFormatterService", void 0);
    return SetFloatingFilterComp;
}(ag_grid_community_1.Component));
exports.SetFloatingFilterComp = SetFloatingFilterComp;

ctx.restore();

        // y-axis
        const yAxis = new CanvasAxis(yScale);
        yAxis.translation = [padding.left, padding.top];
        yAxis.render(ctx);

        // x-axis
        const xAxis = new CanvasAxis(xGroupScale);
        xAxis.rotation = -Math.PI / 2;
        xAxis.translation = [padding.left, padding.top + seriesHeight];
        xAxis.flippedLabels = true;
        xAxis.render(ctx);*/
    };
    __decorate([
        ag_grid_community_1.RefSelector('eChart'),
        __metadata("design:type", HTMLElement)
    ], Chart.prototype, "eChart", void 0);
    __decorate([
        ag_grid_community_1.RefSelector('eErrors'),
        __metadata("design:type", HTMLElement)
    ], Chart.prototype, "eErrors", void 0);
    return Chart;
}(ag_grid_community_1.Component));
exports.Chart = Chart;