Skip to content

Commit 5c9e5a1

Browse files
author
sowvikr
committed
Improve performance in filter.
1 parent e996931 commit 5c9e5a1

File tree

1 file changed

+133
-130
lines changed

1 file changed

+133
-130
lines changed

‎projects/angular-open-datagrid/src/lib/data-table/data-table.component.html‎

Lines changed: 133 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -6,55 +6,55 @@
66
</select>
77
</div>
88
-->
9-
<div class="table-container">
9+
<div class="table-container">
1010
<div *ngIf="commonSearch" class="common-search" [ngClass]="theme">
1111
<label>
1212
Search:
1313
<input type="search" placeholder="Search..." (keyup)="onCommonFilter($event.target.value)"/>
1414
</label>
1515
</div>
16-
<table class="dataTable" (click)="onContextMenuOff()" [ngClass]="theme">
17-
<thead>
18-
<tr class="header" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="drop($event)"
19-
(cdkDropListSorted)="swapped($event)">
20-
<th style="width: 5px"></th>
21-
<th style="width: 5px"></th>
22-
<th *ngIf="rowSelection" style="width: 5px"></th>
23-
<th *ngFor="let item of columnDefs ; let i = index" cdkDrag
24-
[ngStyle]="{'width':item.width}" [ngClass]="dragTheme"
25-
resizable>
26-
<div [ngClass]="dragTheme" *cdkDragPreview>
27-
<div>{{item.headerName}}</div>
28-
</div>
16+
<table class="dataTable" (click)="onContextMenuOff()" [ngClass]="theme">
17+
<thead>
18+
<tr class="header" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="drop($event)"
19+
(cdkDropListSorted)="swapped($event)">
20+
<th style="width: 5px"></th>
21+
<th style="width: 5px"></th>
22+
<th *ngIf="rowSelection" style="width: 5px"></th>
23+
<th *ngFor="let item of columnDefs ; let i = index" cdkDrag
24+
[ngStyle]="{'width':item.width}" [ngClass]="dragTheme"
25+
resizable>
26+
<div [ngClass]="dragTheme" *cdkDragPreview>
27+
<div>{{item.headerName}}</div>
28+
</div>
2929

30-
<div class="headerText" cdkDragHandle>
31-
<i (click)="sortColumn(i)" class="fa fa-sort" *ngIf="item.sortState == null && item.sort"
32-
aria-hidden="true"> </i>
33-
<i (click)="sortColumn(i)" class="fa fa-sort-asc" *ngIf="item.sortState && item.sort" aria-hidden="true"> </i>
34-
<i (click)="sortColumn(i)" class="fa fa-sort-desc"
35-
*ngIf="!item.sortState && !(item.sortState == null) && item.sort" aria-hidden="true"> </i>
36-
{{item.headerName}}
37-
</div>
38-
<span class="col-resize col-resize-cursor " grabber></span>
39-
</th>
40-
</tr>
41-
<tr class="filter">
42-
<th style="width: 5px">
43-
#
44-
</th>
45-
<th style="width: 5px">
30+
<div class="headerText" cdkDragHandle>
31+
<i (click)="sortColumn(i)" class="fa fa-sort" *ngIf="item.sortState == null && item.sort"
32+
aria-hidden="true"> </i>
33+
<i (click)="sortColumn(i)" class="fa fa-sort-asc" *ngIf="item.sortState && item.sort" aria-hidden="true"> </i>
34+
<i (click)="sortColumn(i)" class="fa fa-sort-desc"
35+
*ngIf="!item.sortState && !(item.sortState == null) && item.sort" aria-hidden="true"> </i>
36+
{{item.headerName}}
37+
</div>
38+
<span class="col-resize col-resize-cursor " grabber></span>
39+
</th>
40+
</tr>
41+
<tr class="filter">
42+
<th style="width: 5px">
43+
#
44+
</th>
45+
<th style="width: 5px">
4646

47-
</th>
48-
<th style="width: 5px" *ngIf="rowSelection">
49-
<label class="container">
50-
<input type="checkbox" (change)="checkedRowSelection($event, true);" [(ngModel)]="selectAllRows"/>
51-
<span class="checkmark"></span>
52-
</label>
53-
</th>
54-
<th *ngFor="let item of columnDefs; let i = index" [ngStyle]="{'width':item.width}">
55-
<input *ngIf="item.filter" [disabled]="item.columnFilter" (keyup)="filter(i,$event.target.value)" type="text"
56-
width="calc(100% - 23px)"
57-
height="10"/>
47+
</th>
48+
<th style="width: 5px" *ngIf="rowSelection">
49+
<label class="container">
50+
<input type="checkbox" (change)="checkedRowSelection($event, true);" [(ngModel)]="selectAllRows"/>
51+
<span class="checkmark"></span>
52+
</label>
53+
</th>
54+
<th *ngFor="let item of columnDefs; let i = index" [ngStyle]="{'width':item.width}">
55+
<input *ngIf="item.filter" [disabled]="item.columnFilter" (keyup)="filter(i,$event.target.value)" type="text"
56+
width="calc(100% - 23px)"
57+
height="10"/>
5858
<span>
5959
<i class="fa fa-filter filter-icon" *ngIf="item.filter && item.columnFilter"
6060
(click)="toggleFilter(i, $event)">
@@ -67,99 +67,102 @@
6767
[hidden]="!item.showFilter" [theme]="theme" [ngStyle]="{'left.px': filterMenuX}">
6868
</app-column-filter>
6969
</span>
70-
<span class="col-resize"></span>
70+
<span class="col-resize"></span>
7171

72-
</th>
73-
</tr>
74-
</thead>
75-
<tbody (click)="onContextMenuOff()" tabindex="0" ctrlKeys
76-
(ctrlC)="onCtrlC()"
77-
(ctrlV)="onCtrlV()" cdkDropList (cdkDropListDropped)="dropRow($event)">
78-
<tr *ngFor="let row of PagedRows; let rowCount = index" [hidden]="row.filteredOut" [@enterAnimation]
79-
cdkDrag
80-
[ngClass]="{'odd': rowCount%2 !== 0, 'even': rowCount%2===0}">
81-
<div [ngClass]="dragTheme" *cdkDragPreview>
82-
<div [innerHTML]="row.cellRender(rowCount, 0,row.data[0], columnDefs)"></div>
83-
</div>
84-
<td style="width: 5px" oncontextmenu="return false;" *ngIf="rowSelection" class="checkBoxRow">
85-
<app-inline-edit
86-
[theme]="theme"
87-
[isSelected]="false"
88-
[renderer]="null"
89-
(rightClicked)="showContextMenu($event)"
90-
(changed)="checkedRowSelection($event, false)"
91-
[isEditable]="false"
92-
[columnDefs]="columnDefs" [row]="rowCount"
93-
[column]="-2" [cellValue]="rowCount+1"
94-
[cellData]="[]">
72+
</th>
73+
</tr>
74+
</thead>
75+
<tbody (click)="onContextMenuOff()" tabindex="0" ctrlKeys
76+
(ctrlC)="onCtrlC()"
77+
(ctrlV)="onCtrlV()" cdkDropList (cdkDropListDropped)="dropRow($event)">
78+
<ng-container *ngFor="let row of PagedRows; let rowCount = index">
79+
<tr *ngIf="!(row.filteredOut && row.filteredOutCommon)"
80+
[@enterAnimation]
81+
cdkDrag
82+
[ngClass]="{'odd': rowCount%2 !== 0, 'even': rowCount%2===0}">
83+
<div [ngClass]="dragTheme" *cdkDragPreview>
84+
<div [innerHTML]="row.cellRender(rowCount, 0,row.data[0], columnDefs)"></div>
85+
</div>
86+
<td style="width: 5px" oncontextmenu="return false;" *ngIf="rowSelection" class="checkBoxRow">
87+
<app-inline-edit
88+
[theme]="theme"
89+
[isSelected]="false"
90+
[renderer]="null"
91+
(rightClicked)="showContextMenu($event)"
92+
(changed)="checkedRowSelection($event, false)"
93+
[isEditable]="false"
94+
[columnDefs]="columnDefs" [row]="rowCount"
95+
[column]="-2" [cellValue]="rowCount+1"
96+
[cellData]="[]">
9597

96-
</app-inline-edit>
97-
</td>
98-
<td cdkDragHandle style="width: 5px; cursor: grab" oncontextmenu="return false;" *ngIf="rowSelection"
99-
class="checkBoxRow row-drag">
100-
<app-inline-edit
101-
[theme]="theme"
102-
[isSelected]="false"
103-
[renderer]="null"
104-
(rightClicked)="showContextMenu($event)"
105-
(changed)="checkedRowSelection($event, false)"
106-
[isEditable]="false"
107-
[columnDefs]="columnDefs" [row]="rowCount"
108-
[column]="-3" [cellValue]=""
109-
[cellData]="[]">
98+
</app-inline-edit>
99+
</td>
100+
<td cdkDragHandle style="width: 5px; cursor: grab" oncontextmenu="return false;" *ngIf="rowSelection"
101+
class="checkBoxRow row-drag">
102+
<app-inline-edit
103+
[theme]="theme"
104+
[isSelected]="false"
105+
[renderer]="null"
106+
(rightClicked)="showContextMenu($event)"
107+
(changed)="checkedRowSelection($event, false)"
108+
[isEditable]="false"
109+
[columnDefs]="columnDefs" [row]="rowCount"
110+
[column]="-3" [cellValue]=""
111+
[cellData]="[]">
110112

111-
</app-inline-edit>
112-
</td>
113-
<td style="width: 5px" oncontextmenu="return false;" *ngIf="rowSelection" class="checkBoxRow">
114-
<app-inline-edit
115-
[theme]="theme"
116-
[isSelected]="false"
117-
[renderer]="null"
118-
(rightClicked)="showContextMenu($event)"
119-
(changed)="checkedRowSelection($event, false)"
120-
[isEditable]="false"
121-
[columnDefs]="columnDefs" [row]="rowCount"
122-
[column]="-1" [cellValue]="row.rowSelect"
123-
[cellData]="[]">
113+
</app-inline-edit>
114+
</td>
115+
<td style="width: 5px" oncontextmenu="return false;" *ngIf="rowSelection" class="checkBoxRow">
116+
<app-inline-edit
117+
[theme]="theme"
118+
[isSelected]="false"
119+
[renderer]="null"
120+
(rightClicked)="showContextMenu($event)"
121+
(changed)="checkedRowSelection($event, false)"
122+
[isEditable]="false"
123+
[columnDefs]="columnDefs" [row]="rowCount"
124+
[column]="-1" [cellValue]="row.rowSelect"
125+
[cellData]="[]">
124126

125-
</app-inline-edit>
126-
</td>
127+
</app-inline-edit>
128+
</td>
127129

128-
<td ctrlkeys *ngFor="let cell of row.data; let columnCount = index"
129-
(click)="onClick(rowCount, columnCount, cell, $event)"
130-
(mousedown)="onDragStart(rowCount, columnCount,$event)"
131-
(mouseover)="onSelecting(rowCount, columnCount, cell, $event)"
132-
(mouseup)="onDragEnd(rowCount, columnCount, $event)"
133-
[ngStyle]="{'width':columnDefs[columnCount].width, transform:isMoving? Moved[columnCount]:'inherit'}"
134-
[ngClass]="{'column-moving':(isMoving&&(Moved[columnCount]!==undefined))}"
135-
oncontextmenu="return false;">
136-
<app-inline-edit
137-
[theme]="theme"
138-
[isSelected]="contextMenuData && contextMenuData[rowCount] && !(contextMenuData[rowCount][columnCount] === undefined)"
139-
[renderer]="row.cellRender"
140-
(rightClicked)="showContextMenu($event)"
141-
(changed)="valueChanged($event)"
142-
[isEditable]="columnDefs[columnCount].isEdit"
143-
[columnDefs]="columnDefs" [row]="rowCount"
144-
[column]="columnCount" [cellValue]="cell"
145-
[cellData]="columnDefs[columnCount].uniqueFilterValues">
130+
<td ctrlkeys *ngFor="let cell of row.data; let columnCount = index"
131+
(click)="onClick(rowCount, columnCount, cell, $event)"
132+
(mousedown)="onDragStart(rowCount, columnCount,$event)"
133+
(mouseover)="onSelecting(rowCount, columnCount, cell, $event)"
134+
(mouseup)="onDragEnd(rowCount, columnCount, $event)"
135+
[ngStyle]="{'width':columnDefs[columnCount].width, transform:isMoving? Moved[columnCount]:'inherit'}"
136+
[ngClass]="{'column-moving':(isMoving&&(Moved[columnCount]!==undefined))}"
137+
oncontextmenu="return false;">
138+
<app-inline-edit
139+
[theme]="theme"
140+
[isSelected]="contextMenuData && contextMenuData[rowCount] && !(contextMenuData[rowCount][columnCount] === undefined)"
141+
[renderer]="row.cellRender"
142+
(rightClicked)="showContextMenu($event)"
143+
(changed)="valueChanged($event)"
144+
[isEditable]="columnDefs[columnCount].isEdit"
145+
[columnDefs]="columnDefs" [row]="rowCount"
146+
[column]="columnCount" [cellValue]="cell"
147+
[cellData]="columnDefs[columnCount].uniqueFilterValues">
146148

147-
</app-inline-edit>
148-
</td>
149-
</tr>
150-
</tbody>
151-
<tbody *ngIf="FilterRowCount === 0">
152-
<tr>
153-
<td [attr.colspan]="columnDefs.length" style="text-align: center">
154-
No Data
155-
</td>
156-
</tr>
157-
</tbody>
149+
</app-inline-edit>
150+
</td>
151+
</tr>
152+
</ng-container>
153+
</tbody>
154+
<tbody *ngIf="FilterRowCount === 0">
155+
<tr>
156+
<td [attr.colspan]="columnDefs.length" style="text-align: center">
157+
No Data
158+
</td>
159+
</tr>
160+
</tbody>
158161

159-
<tfoot *ngIf="pagination">
160-
<tr>
162+
<tfoot *ngIf="pagination">
163+
<tr>
161164

162-
<td [attr.colspan]="columnDefs.length+3">
165+
<td [attr.colspan]="columnDefs.length+3">
163166
<span class="rowCount">
164167
<label for="rowCount">Rows: </label>
165168
<select id="rowCount" class="page-number-selection"
@@ -189,10 +192,10 @@
189192
<i class="fa fa-angle-double-right"></i>
190193
</button>
191194
</span>
192-
</td>
193-
</tr>
194-
</tfoot>
195-
</table>
195+
</td>
196+
</tr>
197+
</tfoot>
198+
</table>
196199
</div>
197200
<div *ngIf="contextmenu" (click)="onContextMenuOff()">
198201
<app-context-menu [x]="contextmenuX" [y]="contextmenuY" [isEdit]="contextMenuIsEdit" [theme]="theme"

0 commit comments

Comments
 (0)