https://github.com/ressurectit/ng-grid
Customizable modular Angular module displaying grid - https://ressurectit.github.io/#/content/grid
https://github.com/ressurectit/ng-grid
angular customizable grid list modular table
Last synced: 3 months ago
JSON representation
Customizable modular Angular module displaying grid - https://ressurectit.github.io/#/content/grid
- Host: GitHub
- URL: https://github.com/ressurectit/ng-grid
- Owner: ressurectit
- License: mit
- Created: 2020-01-08T07:18:44.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2025-01-27T08:11:19.000Z (about 1 year ago)
- Last Synced: 2025-09-17T22:54:20.600Z (7 months ago)
- Topics: angular, customizable, grid, list, modular, table
- Language: TypeScript
- Homepage:
- Size: 1000 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- Changelog: changelog.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://badge.fury.io/js/%40anglr%2Fgrid)
[](https://ci.appveyor.com/project/kukjevov/ng-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](#description)
* [Installation](#installation)
* [Usage](#usage)
* [Samples](#samples)
* [Basic concept](https://ressurectit.github.io/#/content/grid/concept)
* [API](https://ressurectit.github.io/#/content/api/ng-grid/grid)
* [API Extensions](https://ressurectit.github.io/#/content/api/ng-grid-extensions/grid-extensions)
* [API Material](https://ressurectit.github.io/#/content/api/ng-grid-material/grid-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:
```bash
npm install "@anglr/grid" --save
```
## Usage
Tutorials and basic description can be found at [Homepage](https://ressurectit.github.io/#/content/grid)
## Samples
- [Basic asynchronous data](https://ressurectit.github.io/#/content/grid/basic)
- [Basic synchronous data](https://ressurectit.github.io/#/content/grid/basicSync)
- [Basic metadata (all)](https://ressurectit.github.io/#/content/grid/basicMetadata)
- [Grouped metadata](https://ressurectit.github.io/#/content/grid/groupedMetadata)
- [Configuration](https://ressurectit.github.io/#/content/grid/configuration)
- [Custom renderer](https://ressurectit.github.io/#/content/grid/customRenderer)
```typescript
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: >
{
//data callback used for getting data asynchronously
dataCallback: this._getData.bind(this)
}
},
paging:
{
options:
{
//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>
{
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
};
}
}
```
```html
```