https://github.com/benwinding/ngx-auto-table
A simple to use data table for Angular
https://github.com/benwinding/ngx-auto-table
angular datatable table
Last synced: 11 months ago
JSON representation
A simple to use data table for Angular
- Host: GitHub
- URL: https://github.com/benwinding/ngx-auto-table
- Owner: benwinding
- License: mit
- Created: 2019-03-26T01:40:53.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-07-05T00:43:20.000Z (almost 4 years ago)
- Last Synced: 2025-05-12T13:04:47.294Z (11 months ago)
- Topics: angular, datatable, table
- Language: TypeScript
- Homepage: https://benwinding.github.io/ngx-auto-table/
- Size: 18 MB
- Stars: 3
- Watchers: 2
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ngx-auto-table
[](https://www.npmjs.com/package/ngx-auto-table)
[](https://github.com/benwinding/ngx-auto-table/blob/master/LICENSE)
[](https://www.npmjs.com/package/ngx-auto-table)
[](https://github.com/benwinding/ngx-auto-table)
A simple to use data table for Angular. (Wrapper around the Material Table)
## [Demo](https://benwinding.github.io/ngx-auto-table/index.html)
### Features include
- 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
- All configuration options [can be found here.](https://github.com/benwinding/ngx-auto-table/blob/master/projects/ngx-auto-table/src/lib/models.ts#L37)
#### Install
`yarn add ngx-auto-table`
Then add to your imports
``` typescript
import { AutoTableModule } from 'ngx-auto-table';
imports: [
...
AutoTableModule,
...
]
```
Then add this to your tsconfig:
``` json
"compilerOptions": {
...
"paths": {
"@angular/*": ["node_modules/@angular/*"]
}
```
#### Usage
- Add the table to the HTML template
``` html
```
- Add config object to the typescript
``` typescript
config: AutoTableConfig;
ngOnInit() {
this.config = {
data$: people$
};
}
```
#### Sorting/Ordering
``` typescript
this.config = {
data$: people$,
// Initially sort by the "name" column
initialSort: 'name';
// Initially sort in Descending order
initialSortDir: "desc";
};
```
#### Row Operations
``` typescript
this.config = {
data$: people$,
actions: [
{
label: 'Delete',
icon: 'delete', // material icon set
onClick: (p: User) => {
// Do stuff
}
}
]
};
```
#### Bulk Row Operations
``` typescript
this.config = {
data$: people$,
actionsBulk: [
{
label: 'Delete',
icon: 'delete', // material icon set
onClick: (p: User) => {
// Do stuff
}
}
]
};
```
#### Custom Templates
``` html
```
#### Basic Example Component
To use the table in a component, simply add it to the template and feed it an obseravble in the Typescript file.
``` typescript
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: `
`
})
export class AutoTableTestComponent implements OnInit {
config: AutoTableConfig;
ngOnInit() {
const people$: Observable = of(sampleUsers);
this.config = {
data$: people$
};
}
}
```