An implementation of [datatables.net](https://github.com/DataTables/DataTables) for [Universis project](https://gitlab.com/universis) applications.
npm install @universis/ngx-tablesAn implementation of datatables.net for Universis project applications.
Install @universis/ngx-tables in an angular cli by executing:
npm i @universis/ngx-tables
Important note: Don't forget to install peer dependencies also.
Import TablesModule:
# app.module.ts
import { TablesModule } from '@universis/ngx-tables';
...
imports: [
CommonModule,
BrowserModule,
HttpClientModule,
TranslateModule.forRoot(),
SharedModule.forRoot(),
RouterModule,
...
...
TablesModule
],
Add AdvancedTableComponent:
and load a table configuration:
export const TABLE1_COFIGURATION = {
"title": "Students",
"model": "Students",
"searchExpression":"indexof(person/familyName, '${text}') ge 0 or indexof(person/givenName, '${text}') ge 0",
"selectable": false,
"multipleSelect": false,
"columns": [
{
"name":"id",
"property": "id",
"hidden": true
},
{
"name":"person/familyName",
"property": "familyName",
"title":"Family Name"
},
{
"name":"person/givenName",
"property": "givenName",
"title":"Given Name"
},
...
],
"criteria": [
{
"name": "studentName",
"filter": "(indexof(person/familyName, '${value}') ge 0 or indexof(person/givenName, '${value}') ge 0 or indexof(concat(person/familyName, ' ', person/givenName),'${value}') ge 0)",
"type": "text"
},
{
"name": "username",
"filter": "(indexof(user/name, '${value}') ge 0)",
"type": "text"
},
...
],
"searches": [
],
"defaults":{
"filter": "studentStatus/alternateName eq eq 'active'"
},
"paths" : [
]
}
Use this configuration in component:
# table1.component.ts
import {TABLE1_COFIGURATION} from './table1.configuration';
@Component({
selector: 'app-table1',
templateUrl: './table1.component.html'
})
export class Table1Component implements OnInit {
public tableConfiguration: any = TABLE1_COFIGURATION;
public filter: any = {};
constructor() {
}
ngOnInit() {
}
}
AdvancedTableComponent uses table configuration to load data from the given model and draw datatable.
Use AdvancedTableComponent.configSrc to load table configuration from a json file.
AdvancedSearchComponent enables search operation against a loaded datatable.
AdvancedSearchComponent has a simple text box for text search based on AdvancedTableComponent#config.searchExpression expression.
AdvancedSearchComponent may also have an advanced search form for searching by using lookup tables, numbers, booleans etc.