https://github.com/angular-ru/angular-ru-ng-table-builder-example-app
DEMO: https://angular-ru.github.io/angular-ru-ng-table-builder-example-app/
https://github.com/angular-ru/angular-ru-ng-table-builder-example-app
Last synced: 9 months ago
JSON representation
DEMO: https://angular-ru.github.io/angular-ru-ng-table-builder-example-app/
- Host: GitHub
- URL: https://github.com/angular-ru/angular-ru-ng-table-builder-example-app
- Owner: Angular-RU
- Created: 2020-06-22T10:30:03.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-07-08T12:50:25.000Z (over 4 years ago)
- Last Synced: 2025-01-24T15:29:15.220Z (11 months ago)
- Language: HTML
- Homepage:
- Size: 41.1 MB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular Table Builder
[](https://badge.fury.io/js/%40angular-ru%2Fng-table-builder)
[](https://npm-stat.com/charts.html?package=@angular-ru/ng-table-builder&from=2017-01-12)
The Angular Table Builder includes a comprehensive set of ready-to-use features covering everything from paging,
sorting, filtering, editing, and grouping to row and column virtualization, and accessibility support.
Demo: https://angular-ru.github.io/angular-ru-ng-table-builder-example-app/
```bash
$ npm install --save @angular-ru/ng-table-builder
```
After a few seconds of waiting, you should be good to go. Let's get to the actual coding! As a first step, let's add the
Angular table builder module to our app module (src/app.module.ts):
```ts
import { TableBuilderModule } from '@angular-ru/ng-table-builder';
@NgModule({
imports: [
// ...
TableBuilderModule.forRoot()
]
})
export class AppModule {}
```
### Simple use
Next, let's declare the basic grid configuration. Edit src/app.component.ts:
```ts
import { Component } from '@angular/core';
import { MyData } from './my-data.interface';
@Component({
selector: 'app-root',
template: ` `
})
export class AppComponent {
public data: MyData[] = [
{ make: 'Toyota', model: 'Celica', price: 35000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Porsche', model: 'Boxter', price: 72000 }
];
}
```
see: https://stackblitz.com/edit/ng-table-builder-simple
The `ngx-table-builder` provides a styled data-table that can be used to display rows of data. The ngx-table-builder is
an customizable data-table with a fully-templated API, dynamic columns, and an accessible DOM structure. This component
acts as the core upon which anyone can build their own tailored data-table experience.
### Custom template
```ts
// app.component.ts
import { Component } from '@angular/core';
import { LicenseSample } from './license.interface';
@Component({
selector: 'app',
templateUrl: './app.component.html'
})
export class AppComponent {
public licenses: LicenseSample[] = [
{
id: 1,
name: 'single',
price: 29.3
},
{
id: 2,
name: 'developer',
price: 49.8
},
{
id: 3,
name: 'premium',
price: 99.5
},
{
id: 4,
name: 'enterprise',
price: 199
}
];
}
```
```html
License
{{ name | uppercase }}
Cost
{{ price | currency }}
```
### TODO:
- [x] Simple use and setup;
- [x] Virtual scroll (horizontal, vertical);
- [x] Auto calculate height;
- [x] Customisable Appearance;
- [x] State Persistence;
- [x] Filtering;
- [x] Resizing;
- [x] Sorting;
- [x] Selection;
- [x] Context menu;
- [ ] Outstanding Performance (need improved);