https://github.com/nzick/ng2-flex-table
Angular 4 Table - Beautiful Table especially made for non-relational databases. With inline editing, column search & filter and fixed headers.
https://github.com/nzick/ng2-flex-table
angular angular4 filter sorting table
Last synced: about 1 year ago
JSON representation
Angular 4 Table - Beautiful Table especially made for non-relational databases. With inline editing, column search & filter and fixed headers.
- Host: GitHub
- URL: https://github.com/nzick/ng2-flex-table
- Owner: nzick
- License: mit
- Created: 2017-05-13T15:12:25.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-05-18T12:26:34.000Z (almost 9 years ago)
- Last Synced: 2025-02-28T19:55:58.763Z (about 1 year ago)
- Topics: angular, angular4, filter, sorting, table
- Language: TypeScript
- Homepage:
- Size: 284 KB
- Stars: 14
- Watchers: 3
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ng2-flex-table
Angular2 Table Component with *NO DEPENDENCYS*
***ng2-flex-table*** is a table grid component for Angular2/4.
## Demo
Try it out: [http://ng2-flex-table.nicolaszick.com](http://ng2-flex-table.nicolaszick.com)
## Data
This table is made for non relational databases where response object not necessary have the same columns:
````json
{
'startDate': '2015/08/19',
'salary': 208.178
}, {
'lastname': 'Pearl Crosby',
'detailposition': 'In PC'
}
````
Results in the following headers:
| startDate | salary | lastname | detailposition |
|------------|---------|--------------|----------------|
| 2015/08/19 | 208.178 | | |
| | | Pearl Crosby | In PC |
***ng2-flex-table*** is built to handle this type of objects and fits the table to your needs.
All available *keys* will be used as a column and if some object doesnt have it, the cell with be left empty but can be edited by inline editing.
`(outEvent)` will give you the changed Object if some attribute has changed or tabled got initiated.
## Installation
Install ng2-flex-table via `npm`
````shell
npm install ng2-flex-table --save
````
## Integration
```ts
// app.module.ts
import { DataTableModule } from 'ng2-flex-table';
@NgModule({
...
imports: [ DataTableModule ]
...
})
export class AppModule { }
// app.component.html
```
Adjust the table height to your needs like this:
```sass
.ng2-flex-table
&__body
height: 1000px !important
```
## Run Included Demo
```shell
git clone https://github.com/nzick/ng2-flex-table.git --depth 1
cd ng2-flex-table
npm install
npm start
```
## AoT Library Build
```shell
npm run build:lib
```
## Licence
This project is licensed under the MIT license. See the [LICENSE](LICENSE) file for more info.