A simple to use data table for Angular. (Wrapper around the Material Table)
- Default filtering and sorting of all data
- Uses RXJS observables
- Uses angular material theme and icons under the hood
- Row and Bulk actions, easily configurable
- Typed Data passed into the configuration
- Custom ng-templates for each column
yarn add ngx-auto-table
Then add to your imports
import { AutoTableModule } from 'ngx-auto-table';
imports: [
...
AutoTableModule,
...
]Then add this to your tsconfig:
"compilerOptions": {
...
"paths": {
"@angular/*": ["node_modules/@angular/*"]
}- Add the table to the HTML template
<ngx-auto-table
[config]="config"
[columnDefinitions]="{
name: {},
age: {}
}"
>
</ngx-auto-table>- Add config object to the typescript
config: AutoTableConfig<User>;
ngOnInit() {
this.config = {
data$: people$
};
}this.config = {
data$: people$,
actions: [
{
label: 'Delete',
icon: 'delete', // material icon set
onClick: (p: User) => {
// Do stuff
}
}
]
};this.config = {
data$: people$,
actionsBulk: [
{
label: 'Delete',
icon: 'delete', // material icon set
onClick: (p: User) => {
// Do stuff
}
}
]
};<ngx-auto-table
[config]="config"
[columnDefinitions]="{
name: {},
age: {},
email: {template: emailTemplate}
}"
>
<ng-template #emailTemplate let-row>
<a [href]="'mailto:'+row.email">{{ row.email }} </a>
</ng-template>
</ngx-auto-table>To use the table in a component, simply add it to the template and feed it an obseravble in the Typescript file.
import { Component, OnInit } from '@angular/core';
import { AutoTableConfig } from 'ngx-auto-table/dist/public_api';
import { of, Observable } from 'rxjs';
interface User {
name: string;
age: number;
}
const sampleUsers: User[] = [
{ name: 'Frank', age: 22 },
{ name: 'Albert', age: 34 },
{ name: 'Jasper', age: 29 },
{ name: 'Hugo', age: 23 }
];
@Component({
selector: 'app-auto-table-test',
template: `
<div>
<ngx-auto-table [config]="config" [columnDefinitions]="{
name: {},
age: {}
}">
</ngx-auto-table>
</div>
`
})
export class AutoTableTestComponent implements OnInit {
config: AutoTableConfig<User>;
ngOnInit() {
const people$: Observable<User[]> = of(sampleUsers);
this.config = {
data$: people$
};
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent