xxxxxxxxxx1
<!-- Start your project here-->2
<div style="height: 100vh"> 3
<div class="flex-center flex-column">4
5
<div class="float-center mb-1 w-100">6
<h3 class="card-header text-center font-weight-bold py-2">{{title}}</h3>7
</div>8
9
<div style="overflow: auto;">10
11
<table mdbTable mdbTableScroll scrollY="true" class="table table-striped text-center table-responsive" bordered="true">12
13
<!-- Table head -->14
<thead>15
<tr>16
<th class="text-center">17
18
<div class="dropdown btn-group" mdbDropdown>19
20
<mdb-icon fas icon="user" classInside="dropdown-toggle"21
class="orange-text waves-effect"22
mdbDropdownToggle mdbWavesEffect></mdb-icon>23
24
<div class="dropdown-menu dropdown-primary">25
<button type="button" class="dropdown-item" (click)="BurgerMenuClick('Action')">Action</button>26
<button type="button" class="dropdown-item" (click)="BurgerMenuClick('Another')">Another action</button>27
<button type="button" class="dropdown-item" (click)="BurgerMenuClick('Something')">Something else here</button>28
<div class="divider dropdown-divider"></div>29
<button type="button" class="dropdown-item" (click)="BurgerMenuClick('Link')">Separated link</button>30
</div>31
</div>32
33
</th>34
<th *ngFor="let header of headers" class="align-middle">{{header}}</th>35
</tr>36
</thead>37
38
<!-- Table body -->39
<tbody>40
<tr *ngFor="let item of listInfo; let idx = index; let rowEven = even" [class.card-header]="rowEven">41
<td>42
43
<!-- Check and Burger Menu - enabled -->44
<div>45
<div class="ml-3">46
<mdb-checkbox id="ck-{{ item.id }}" [checked]="item.check" (change)="onChkChange($event)"></mdb-checkbox>47
</div>48
49
<!-- Burger Menu -->50
<div id="bm-{{ idx }}" class="dropdown btn-group" mdbDropdown>51
52
<!-- Icon Burger Menu -->53
<mdb-icon id="ibm-{{ idx }}" fas icon="bars" classInside="dropdown-toggle"54
class="black-text waves-effect burgher-menu-size"55
title="Options" i18n-title="@@menuOptions.title"56
mdbDropdownToggle mdbWavesEffect></mdb-icon>57
58
<!-- Options Burger Menu -->59
<div id="obm-{{ idx }}" class="dropdown-menu dropdown-primary">60
<button type="button" class="dropdown-item" (click)="BurgerMenuClick('Edit')"><mdb-icon fas icon="edit" class="cyan-text mr-2"></mdb-icon><ng-container i18n="@@optionEdit">Edit ...</ng-container></button>61
<button type="button" class="dropdown-item" (click)="BurgerMenuClick('Change')"><mdb-icon fas icon="retweet" class="black-text mr-2"></mdb-icon><ng-container i18n="@@optionChange">Change ...</ng-container></button>62
<button type="button" class="dropdown-item" (click)="BurgerMenuClick('Groups')"><mdb-icon far icon="object-ungroup" class="pink-text mr-2"></mdb-icon><ng-container i18n="@@optionGroups">Groups ...</ng-container></button>63
<button type="button" class="dropdown-item" (click)="BurgerMenuClick('Delete')"><mdb-icon fas icon="trash-alt" class="red-text mr-2"></mdb-icon><ng-container i18n="@@optionDelete">Delete ...</ng-container></button>64
<div class="dropdown-divider"></div>65
<button type="button" class="dropdown-item" (click)="BurgerMenuClick('SelectAll')"><mdb-icon fas icon="check" class="green-text mr-2"></mdb-icon><ng-container i18n="@@optionSelectAll">Select All ...</ng-container></button>66
</div>67
</div>68
</div>69
<!--/. Check and Burger Menu -->70
71
</td>72
<td class="align-middle">{{item.name}}</td>73
<td class="align-middle">{{item.surname}}</td>74
<td class="align-middle">{{item.country}}</td>75
<td class="align-middle">{{item.city}}</td>76
<td class="align-middle">{{item.position}}</td>77
<td class="align-middle">{{item.age}}</td>78
</tr>79
</tbody>80
<!-- /.Table body -->81
82
</table>83
<!-- /.Table -->84
85
</div>86
87
</div> 88
</div>89
<!-- /Start your project here-->90
91
xxxxxxxxxx1
2
tbody {3
display: block;4
overflow: auto;5
height: 500px;6
width: 100%;7
}8
9
thead tr {10
display: table;11
width: 100%;12
table-layout: fixed;13
}14
15
thead, tbody tr {16
display: table;17
width: 100%;18
table-layout: fixed;19
}20
21
thead {22
width: calc( 100% - 1em )23
}24
25
td {26
width: 90px;27
}28
xxxxxxxxxx1
import { Component } from '@angular/core';2
3
@Component({4
selector: 'app-root',5
templateUrl: './app.component.html',6
styleUrls: ['./app.component.scss']7
})8
export class AppComponent implements OnInit {9
title = 'Big list with DDL';10
11
public headers: Array<string> = new Array<string>("Name", "Surname", "Country", "City", "Position", "Age");12
public sourceList: Array<IListItem> = new Array<IListItem>();13
public listInfo: Array<IListItem> = new Array<IListItem>();14
15
constructor() {16
17
this.sourceList = [18
{ id: 1, check: false, name: "Kate", surname: "Moss", country: "USA", city: "New York City", position: "Web Designer", age: 23 },19
{ id: 2, check: false, name: "Anna", surname: "Wintour", country: "United Kingdom", city: "London", position: "Frontend Developer", age: 36 },20
{ id: 3, check: false, name: "Tom", surname: "Bond", country: "Spain", city: "Madrid", position: "Photographer", age: 25 },21
{ id: 4, check: false, name: "Jerry", surname: "Horwitz", country: "Italy", city: "Bari", position: "Editor-in-chief", age: 41 },22
{ id: 5, check: false, name: "Janis", surname: "Joplin", country: "Poland", city: "Warsaw", position: "Video Maker", age: 39 },23
{ id: 6, check: false, name: "Gary", surname: "Winogrand", country: "Germany", city: "Berlin", position: "Photographer", age: 37 },24
{ id: 7, check: false, name: "Angie", surname: "Smith", country: "USA", city: "San Francisco", position: "Teacher", age: 52 },25
{ id: 8, check: false, name: "John", surname: "Mattis", country: "France", city: "Paris", position: "Actor", age: 28 },26
{ id: 9, check: false, name: "Otto", surname: "Morris", country: "Germany", city: "Munich", position: "Singer", age: 35 },27
{ id: 10, check: false, name: "Kate junior", surname: "Moss", country: "USA", city: "New York City", position: "Web Designer", age: 13 },28
{ id: 11, check: false, name: "Anna junior", surname: "Wintour", country: "United Kingdom", city: "London", position: "Frontend Developer", age: 26 },29
{ id: 12, check: false, name: "Tom junior", surname: "Bond", country: "Spain", city: "Madrid", position: "Photographer", age: 15 },30
{ id: 13, check: false, name: "Jerry junior", surname: "Horwitz", country: "Italy", city: "Bari", position: "Editor-in-chief", age: 31 },31
{ id: 14, check: false, name: "Janis junior", surname: "Joplin", country: "Poland", city: "Warsaw", position: "Video Maker", age: 29 },32
{ id: 15, check: false, name: "Gary junior", surname: "Winogrand", country: "Germany", city: "Berlin", position: "Photographer", age: 27 },33
{ id: 16, check: false, name: "Angie junior", surname: "Smith", country: "USA", city: "San Francisco", position: "Teacher", age: 42 },34
{ id: 17, check: false, name: "John junior", surname: "Mattis", country: "France", city: "Paris", position: "Actor", age: 18 }35
];36
}37
38
ngOnInit() {39
40
// Add items for Big list41
for (var i = 0; i < 1; i++) {42
this.listInfo = new Array<IListItem>(...this.listInfo, ...this.sourceList);43
}44
}45
46
public onChkAll(event: MdbCheckboxChange): void {47
let itemId: number = Number(event.element.id.split('-')[1]);48
this.listInfo.filter(i => i.id == itemId).forEach(i => i.check = event.element.checked);49
}50
51
public BurgerMenuClick(option: string) {52
console.log("Burger Menu option Clicked:", option);53
}54
55
}56
57
interface IListItem {58
id: number;59
check: boolean;60
name: string;61
surname: string;62
country: string;63
city: string;64
position: string;65
age: number;66
}67
Console errors: 0