|
29 | 29 |
|
30 | 30 | <div class="flex flex-wrap gap-2"> |
31 | 31 | <button (click)="rerender()" class="border p-1">Regenerate</button> |
32 | | - <button (click)="randomizeColumns()" class="border p-1"> |
33 | | - Shuffle Columns |
34 | | - </button> |
| 32 | + <button (click)="randomizeColumns()" class="border p-1">Shuffle Columns</button> |
35 | 33 | </div> |
36 | 34 | <div class="h-4"></div> |
37 | 35 | <div> |
38 | 36 | <label> |
39 | | - <input |
40 | | - type="checkbox" |
41 | | - #input |
42 | | - [checked]="split()" |
43 | | - (change)="split.set(input.checked)" |
44 | | - /> |
| 37 | + <input type="checkbox" #input [checked]="split()" (change)="split.set(input.checked)" /> |
45 | 38 | Split mode |
46 | 39 | </label> |
47 | 40 | </div> |
|
51 | 44 | @if (split()) { |
52 | 45 | <table class="border-2 border-black"> |
53 | 46 | <thead> |
54 | | - @for ( |
55 | | - headerGroup of table.getLeftHeaderGroups(); |
56 | | - track headerGroup.id |
57 | | - ) { |
| 47 | + @for (headerGroup of table.getLeftHeaderGroups(); track headerGroup.id) { |
58 | 48 | <tr> |
59 | 49 | @for (header of headerGroup.headers; track header.id) { |
60 | 50 | <th [attr.colSpan]="header.colSpan"> |
|
73 | 63 | </div> |
74 | 64 |
|
75 | 65 | <ng-container |
76 | | - *ngTemplateOutlet=" |
77 | | - headerContentTpl; |
78 | | - context: { $implicit: header } |
79 | | - " |
| 66 | + *ngTemplateOutlet="headerContentTpl; context: { $implicit: header }" |
80 | 67 | /> |
81 | 68 | </th> |
82 | 69 | } |
|
109 | 96 | <!-- Center Side --> |
110 | 97 | <table class="border-2 border-black"> |
111 | 98 | <thead> |
112 | | - @if ( |
113 | | - split() ? table.getCenterHeaderGroups() : table.getHeaderGroups(); |
114 | | - as headerGroups |
115 | | - ) { |
| 99 | + @if (split() ? table.getCenterHeaderGroups() : table.getHeaderGroups(); as headerGroups) { |
116 | 100 | @for (headerGroup of headerGroups; track headerGroup.id) { |
117 | 101 | <tr> |
118 | 102 | @for (header of headerGroup.headers; track header.id) { |
|
131 | 115 | } |
132 | 116 |
|
133 | 117 | <ng-container |
134 | | - *ngTemplateOutlet=" |
135 | | - headerContentTpl; |
136 | | - context: { $implicit: header } |
137 | | - " |
| 118 | + *ngTemplateOutlet="headerContentTpl; context: { $implicit: header }" |
138 | 119 | /> |
139 | 120 | </div> |
140 | 121 | </th> |
|
145 | 126 | </thead> |
146 | 127 | <tbody> |
147 | 128 | @for (row of table.getRowModel().rows | slice: 0 : 20; track row.id) { |
148 | | - @if ( |
149 | | - split() ? row.getCenterVisibleCells() : row.getVisibleCells(); |
150 | | - as cells |
151 | | - ) { |
| 129 | + @if (split() ? row.getCenterVisibleCells() : row.getVisibleCells(); as cells) { |
152 | 130 | <tr> |
153 | 131 | @for (cell of cells; track cell.id) { |
154 | 132 | <td> |
|
173 | 151 | @if (split()) { |
174 | 152 | <table class="border-2 border-black"> |
175 | 153 | <thead> |
176 | | - @for ( |
177 | | - headerGroup of table.getRightHeaderGroups(); |
178 | | - track headerGroup.id |
179 | | - ) { |
| 154 | + @for (headerGroup of table.getRightHeaderGroups(); track headerGroup.id) { |
180 | 155 | <tr> |
181 | 156 | @for (header of headerGroup.headers; track header.id) { |
182 | 157 | <th [attr.colSpan]="header.colSpan"> |
|
195 | 170 | </div> |
196 | 171 |
|
197 | 172 | <ng-container |
198 | | - *ngTemplateOutlet=" |
199 | | - headerContentTpl; |
200 | | - context: { $implicit: header } |
201 | | - " |
| 173 | + *ngTemplateOutlet="headerContentTpl; context: { $implicit: header }" |
202 | 174 | /> |
203 | 175 | </th> |
204 | 176 | } |
|
237 | 209 | @if (!header.isPlaceholder && header.column.getCanPin()) { |
238 | 210 | <div class="flex gap-1 justify-center"> |
239 | 211 | @if (header.column.getIsPinned() !== 'left') { |
240 | | - <button class="border rounded px-2" (click)="header.column.pin('left')"> |
241 | | - <= |
242 | | - </button> |
| 212 | + <button class="border rounded px-2" (click)="header.column.pin('left')"><=</button> |
243 | 213 | } |
244 | 214 |
|
245 | 215 | @if (header.column.getIsPinned()) { |
246 | | - <button class="border rounded px-2" (click)="header.column.pin(false)"> |
247 | | - X |
248 | | - </button> |
| 216 | + <button class="border rounded px-2" (click)="header.column.pin(false)">X</button> |
249 | 217 | } |
250 | 218 |
|
251 | 219 | @if (header.column.getIsPinned() !== 'right') { |
252 | | - <button |
253 | | - class="border rounded px-2" |
254 | | - (click)="header.column.pin('right')" |
255 | | - > |
256 | | - => |
257 | | - </button> |
| 220 | + <button class="border rounded px-2" (click)="header.column.pin('right')">=></button> |
258 | 221 | } |
259 | 222 | </div> |
260 | 223 | } |
|
0 commit comments