@anglr/grid

Angular Grid

This is readme for Angular grid.

Implementation of Angular grid for displaying data. Absolutely customizable Angular grid. Every part of grid can be customized or replaced with own implementation. Should allow you to create any custom requested feature.

• Description
• Installation
• Usage
• Samples
• Basic concept
• API
• API Extensions
• API Material

Description

• Module supports Angular Server Side Rendering
• Module supports Angular Ahead of Time Compilation
• Grid is composed of plugins and replecable parts, allows to change implementation of these plugins
• All components are set to OnPush change detection
• Supports Angular IVY

Installation

To install latest version of this module you just run:

npm install "@anglr/grid" --save

Usage

Tutorials and basic description can be found at Homepage

Samples

• Basic asynchronous data
• Basic synchronous data
• Basic metadata (all)
• Grouped metadata
• Configuration
• Custom renderer

import {Component, ChangeDetectionStrategy} from "@angular/core";
import {GridOptions, SimpleOrdering, BasicPagingOptions, AsyncDataLoaderOptions, DataResponse} from "@anglr/grid";

import {Address, DataService} from "../../../services/api/data";
import {Orderable} from "../../../misc/types";

/**
 * Basic sample for grid component
 */
@Component(
{
    selector: 'basic-sample',
    templateUrl: 'basicSample.component.html',
    providers: [DataService],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class BasicSampleComponent
{
    //######################### public properties - template bindings #########################

    /**
     * Grid options that are used for grid initialization
     */
    public gridOptions: GridOptions;

    //######################### constructor #########################
    constructor(private _dataSvc: DataService)
    {
        this.gridOptions =
        {
            plugins:
            {
                dataLoader:
                {
                    options: <AsyncDataLoaderOptions<Address, SimpleOrdering>>
                    {
                        //data callback used for getting data asynchronously
                        dataCallback: this._getData.bind(this)
                    }
                },
                paging:
                {
                    options: <BasicPagingOptions>
                    {
                        //available values for items per page buttons
                        itemsPerPageValues: [5, 10, 20],
                        //initial value of items per page, should be one of above
                        initialItemsPerPage: 5
                    }
                }
            }
        };
    }

    //######################### private methods #########################

    /**
     * Callback used for obtaining data
     * @param page - Index of requested page
     * @param itemsPerPage - Number of items per page
     * @param ordering - Order by column name
     */
    private async _getData(page: number, itemsPerPage: number, ordering: SimpleOrdering): Promise<DataResponse<Address>>
    {
        let reqOrdering: Orderable = null;

        if(ordering)
        {
            reqOrdering = 
            {
                direction: ordering.orderByDirection,
                sort: ordering.orderBy
            };
        }

        let result = await this._dataSvc
            .getData({
                        page: page,
                        size: itemsPerPage
                    },
                    reqOrdering)
            .toPromise();

        return {
            data: result.content,
            totalCount: result.totalElements
        };
    }
}

<ng-grid [gridOptions]="gridOptions">
    <basic-table-metadata>
        <basic-table-column id="country" name="country" title="Country"></basic-table-column>
        <basic-table-column id="city" name="city" title="City"></basic-table-column>
        <basic-table-column id="zip" name="zip" title="ZIP"></basic-table-column>
        <basic-table-column id="street" name="street" title="Street"></basic-table-column>
        <basic-table-column id="houseNumber" name="houseNumber" title="House Number"></basic-table-column>
    </basic-table-metadata>
</ng-grid>

Changelog

Version 10.1.0 (2024-05-17)

Features

• new DEFAULT_MATRIX_COLUMN_WIDTH injection token, that is used for injecting default matrix column width
• new provideDefaultMatrixColumnWidth function, that provides default matrix column width
• new GridDataSADirective directive, that sets up static data for grid
  • implements
    • onChanges
  • inputs
    • data array of data that are displayed
• updated MatrixContentRendererSAComponent component
  • now supports excluding of columns for row definition
  • now supports rendering multiple grid containers with specifying columns and exclude
• updated MatrixGridSAComponent component
  • now supports multipe GridContainerTemplateSADirective
• updated HeaderRowContainerTemplateSADirective directive
  • new inputs
    • headerRowContainerTemplateExclude indication whether list of columns will be excluded, not included in this row
• new provideDefaultMatrixColumnWidth function, that provides default matrix column width
• updated ContentRowContainerTemplateSADirective directive
  • new inputs
    • contentRowContainerTemplateExclude indication whether list of columns will be excluded, not included in this row
• new provideDefaultMatrixColumnWidth function, that provides default matrix column width
• updated FooterRowContainerTemplateSADirective directive
  • new inputs
    • footerRowContainerTemplateExclude indication whether list of columns will be excluded, not included in this row
• updated GridContainerTemplateSADirective directive
  • new inputs
    • gridContainerTemplate array of column ids to be rendered in this grid container, if not specified or null all available columns will be rendered
    • gridContainerTemplateExclude indication whether list of columns will be excluded, not included in this grid container
• updated GridContext interface
  • new properties
    • gridColumns all currently available columns metadata for current grid container
• updated MatrixGridModule module,
  • now exports also CssGridTemplateColumnsSAPipe
• updated MatrixGridMetadata interface
  • properties
    • gridContainer can now also be an array
• subpackage @anglr/grid/material
  • new SelectionStoreDirective directive, that sets metadata selector storage name
    • is standalone
    • attributes
      • selectionStore name of store to be set up