Angular Table Manager
👨🏫 Try the demo!
⚡ Edit on Stackblitz!
👨🔧 Generate your models here!
Features:
- Quick search
- Advanced search
- Column managing (column order, visibility, sticky on horizontal scroll)
- Sorting
- Customizable button columns (With their own events)
- Selection (multiple and single)
- Easy editing and customization
Components:
- ngx-table: Basic data table.
- ngx-table-manager: Table manager, it provides the search and sort fuctions.
- ngx-tm-select: Dropdown select filter, for specific calumn with custom or unique data from the column.
Getting started
Installation:
Install via npm package manager
npm i ngx-table-manager
Prerequisites:
npm i -s @angular/flex-layout
ng add @angular/material
npm i ngx-color-picker
Usage:
Module:
Import ngx-table-manager
;@
HTML:
Add ngx-table-manager
<!-- DROPDOWN FILTER - FOR COLUMN 'TYPE' --><!-- TABLE MANAGER WITH SEARCH AND ADVANCED SEARCH --><!-- MATERIAL TABLE -->
TypeScript:
;;;;;@implements OnInit// ngx-table, ngx-table-managertsTest: TableSort;// ngx-tm-selectarrSelectTest =key: 1 value: 'test1'key: 2 value: 'test2';// ngx-tableextraCols = ;select;isRowSelect;numberFormat;loading = true;arrEc: Array<ExtraCols>;s: Select;{// SET MEMBERS:const search = title: 'Name' name: 'name' show: true sticky: false ;thistsTest = null null null null null null false search;thistsTestsetSelect =type: 'select'multi: truefilter:col: 'type' value: 'a' 'b' relation: Relationseq;thistsTestsetExtraCols =type: 'edit'icon: 'edit'filter:col: 'name' value: 'test1' 'test2' relation: Relationseqtype: 'del'icon: 'delete'style:color: '#FF6859'tooltip: 'Delete';thisnumberFormat = '1.0-2';thisisRowSelect = true;}/*** Call load data on init. Simulate API request.*/{;}/*** Get data from local DATA. (replace this with your request.)*/{thistsTest;thisloading = false;}/*** Set tsTest to search result.* @param searchObj Search result.*/{}/*** Output event.* @param event edit, del, select, selectAll.*/{console;}/*** ngx-tm-select selection change.* @param selectObj Search result.*/{}// Toggle selectable{if thistsTestgetSelectthistsTestsetSelect = null;elsethistsTestsetSelect =type: 'select'multi: truefilter: col: 'type' value: 'a' 'b' relation: Relationseq col: 'id' value: 5 relation: Relationsgt;}// Refresh data{DATA;thistsTest;}/*** Close column select dialog.* @param event Returns the cols. data.*/{console;thistsTestarrCols = event;}{console;}
- You can generate your column model with our model generator or you can leave it as null and the table manager class will generate it for you!
Columns:
{"TestCols": [{"title": "Id","name": "id","show": true,"sticky": false,"search_value": "","style": {},"format": "number"},{"title": "Name","name": "name","show": true,"sticky": false,"search_value": "","style": {},"format": "string"},{"title": "Type","name": "type","show": true,"sticky": false,"search_value": "","style": {},"format": "string"},{"title": "Text","name": "text","show": true,"sticky": false,"search_value": "","style": {},"format": "string"}]}