@zywave/zui-table 4.0.2-pre.1 → 4.0.2-pre.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/dist/base.d.ts +29 -0
  2. package/dist/base.js +67 -0
  3. package/dist/base.js.map +1 -0
  4. package/dist/css/zui-table.fouc.css +1 -1
  5. package/dist/custom-elements.json +192 -27
  6. package/dist/zui-table-cell-css.js +1 -1
  7. package/dist/zui-table-cell-css.js.map +1 -1
  8. package/dist/zui-table-cell.d.ts +27 -3
  9. package/dist/zui-table-cell.js +93 -6
  10. package/dist/zui-table-cell.js.map +1 -1
  11. package/dist/zui-table-css.js +1 -1
  12. package/dist/zui-table-css.js.map +1 -1
  13. package/dist/zui-table-footer.d.ts +6 -4
  14. package/dist/zui-table-footer.js +6 -4
  15. package/dist/zui-table-footer.js.map +1 -1
  16. package/dist/zui-table-row-css.js +1 -1
  17. package/dist/zui-table-row-css.js.map +1 -1
  18. package/dist/zui-table-row.d.ts +7 -4
  19. package/dist/zui-table-row.js +57 -11
  20. package/dist/zui-table-row.js.map +1 -1
  21. package/dist/zui-table-topbar-css.js +1 -1
  22. package/dist/zui-table-topbar-css.js.map +1 -1
  23. package/dist/zui-table-topbar.d.ts +12 -3
  24. package/dist/zui-table-topbar.js +105 -5
  25. package/dist/zui-table-topbar.js.map +1 -1
  26. package/dist/zui-table.d.ts +7 -5
  27. package/dist/zui-table.js +24 -10
  28. package/dist/zui-table.js.map +1 -1
  29. package/docs/customelement-manifest-element.html +28 -0
  30. package/{demo/index.html → docs/demo.html} +236 -42
  31. package/lab.html +347 -60
  32. package/package.json +9 -4
  33. package/src/base.ts +79 -0
  34. package/src/css/zui-table.fouc.scss +90 -17
  35. package/src/zui-table-cell-css.js +1 -1
  36. package/src/zui-table-cell.scss +26 -0
  37. package/src/zui-table-cell.ts +84 -6
  38. package/src/zui-table-css.js +1 -1
  39. package/src/zui-table-footer.ts +6 -4
  40. package/src/zui-table-row-css.js +1 -1
  41. package/src/zui-table-row.scss +11 -4
  42. package/src/zui-table-row.ts +51 -11
  43. package/src/zui-table-topbar-css.js +1 -1
  44. package/src/zui-table-topbar.scss +77 -9
  45. package/src/zui-table-topbar.ts +106 -5
  46. package/src/zui-table.scss +2 -2
  47. package/src/zui-table.ts +24 -9
  48. package/test/zui-table.test.ts +146 -4
package/lab.html CHANGED
@@ -22,13 +22,24 @@
22
22
 
23
23
  <style>
24
24
  body {
25
- padding: 2em;
25
+ padding: 10px;
26
+ transition: 100ms ease-in-out;
27
+ }
28
+
29
+ @media (min-width: 45em) {
30
+ body {
31
+ padding: 20px;
32
+ }
26
33
  }
27
34
 
28
35
  h2 {
29
36
  margin-top: 4rem;
30
37
  }
31
38
 
39
+ .two-actions-column-width-example {
40
+ --zui-table-columns-template: 1fr 1fr 1fr 1fr 1fr 28ch;
41
+ }
42
+
32
43
  .custom-column-widths-example zui-table-row:not([summary]) {
33
44
  --zui-table-columns-template: 1fr 1fr 14ch 14ch 17ch 7.1875rem;
34
45
  }
@@ -78,7 +89,7 @@
78
89
  </zui-table-row>
79
90
  </zui-table>
80
91
 
81
- <h2>Table with 1-2 actions</h2>
92
+ <h2>Table with 1 action</h2>
82
93
 
83
94
  <zui-table>
84
95
  <zui-table-row>
@@ -88,7 +99,7 @@
88
99
  <zui-table-cell>10,156 A.G.</zui-table-cell>
89
100
  <zui-table-cell>67 years old</zui-table-cell>
90
101
  <zui-table-cell action>
91
- <zui-button class="secondary">Betray</zui-button>
102
+ <zui-button type="secondary">Betray</zui-button>
92
103
  </zui-table-cell>
93
104
  </zui-table-row>
94
105
  <zui-table-row>
@@ -98,7 +109,7 @@
98
109
  <zui-table-cell>10,191 A.G.</zui-table-cell>
99
110
  <zui-table-cell>51 years old</zui-table-cell>
100
111
  <zui-table-cell action>
101
- <zui-button class="secondary">Betray</zui-button>
112
+ <zui-button type="secondary">Betray</zui-button>
102
113
  </zui-table-cell>
103
114
  </zui-table-row>
104
115
  <zui-table-row>
@@ -108,7 +119,7 @@
108
119
  <zui-table-cell>10,219 A.G.</zui-table-cell>
109
120
  <zui-table-cell>43 years old</zui-table-cell>
110
121
  <zui-table-cell action>
111
- <zui-button class="secondary">Betray</zui-button>
122
+ <zui-button type="secondary">Betray</zui-button>
112
123
  </zui-table-cell>
113
124
  </zui-table-row>
114
125
  <zui-table-row>
@@ -118,7 +129,7 @@
118
129
  <zui-table-cell>10,219 A.G.</zui-table-cell>
119
130
  <zui-table-cell>28 years old</zui-table-cell>
120
131
  <zui-table-cell action>
121
- <zui-button class="secondary">Betray</zui-button>
132
+ <zui-button type="secondary">Betray</zui-button>
122
133
  </zui-table-cell>
123
134
  </zui-table-row>
124
135
  <zui-table-row>
@@ -128,7 +139,67 @@
128
139
  <zui-table-cell>13,728 A.G.</zui-table-cell>
129
140
  <zui-table-cell>3,521 years old</zui-table-cell>
130
141
  <zui-table-cell action>
131
- <zui-button class="secondary">Betray</zui-button>
142
+ <zui-button type="secondary">Betray</zui-button>
143
+ </zui-table-cell>
144
+ </zui-table-row>
145
+ </zui-table>
146
+
147
+ <h2>Table with 2 actions</h2>
148
+
149
+ <zui-table class="two-actions-column-width-example">
150
+ <zui-table-row>
151
+ <zui-table-cell>Paulus Atreides</zui-table-cell>
152
+ <zui-table-cell>Old Duke</zui-table-cell>
153
+ <zui-table-cell>10,089 A.G.</zui-table-cell>
154
+ <zui-table-cell>10,156 A.G.</zui-table-cell>
155
+ <zui-table-cell>67 years old</zui-table-cell>
156
+ <zui-table-cell action>
157
+ <zui-button type="secondary">Betray</zui-button>
158
+ <zui-button type="link" danger>Assassinate</zui-button>
159
+ </zui-table-cell>
160
+ </zui-table-row>
161
+ <zui-table-row>
162
+ <zui-table-cell>Leto Atreides I</zui-table-cell>
163
+ <zui-table-cell>Red Duke</zui-table-cell>
164
+ <zui-table-cell>10,140 A.G.</zui-table-cell>
165
+ <zui-table-cell>10,191 A.G.</zui-table-cell>
166
+ <zui-table-cell>51 years old</zui-table-cell>
167
+ <zui-table-cell action>
168
+ <zui-button type="secondary">Betray</zui-button>
169
+ <zui-button type="link" danger>Assassinate</zui-button>
170
+ </zui-table-cell>
171
+ </zui-table-row>
172
+ <zui-table-row>
173
+ <zui-table-cell>Paul Atreides</zui-table-cell>
174
+ <zui-table-cell>Padishah Emperor</zui-table-cell>
175
+ <zui-table-cell>10,176 A.G.</zui-table-cell>
176
+ <zui-table-cell>10,219 A.G.</zui-table-cell>
177
+ <zui-table-cell>43 years old</zui-table-cell>
178
+ <zui-table-cell action>
179
+ <zui-button type="secondary">Betray</zui-button>
180
+ <zui-button type="link" danger>Assassinate</zui-button>
181
+ </zui-table-cell>
182
+ </zui-table-row>
183
+ <zui-table-row>
184
+ <zui-table-cell>Alia Atreides</zui-table-cell>
185
+ <zui-table-cell>Imperial Regent</zui-table-cell>
186
+ <zui-table-cell>10,191 A.G.</zui-table-cell>
187
+ <zui-table-cell>10,219 A.G.</zui-table-cell>
188
+ <zui-table-cell>28 years old</zui-table-cell>
189
+ <zui-table-cell action>
190
+ <zui-button type="secondary">Betray</zui-button>
191
+ <zui-button type="link" danger>Assassinate</zui-button>
192
+ </zui-table-cell>
193
+ </zui-table-row>
194
+ <zui-table-row>
195
+ <zui-table-cell>Leto Atreides II</zui-table-cell>
196
+ <zui-table-cell>God Emperor</zui-table-cell>
197
+ <zui-table-cell>10,207 A.G.</zui-table-cell>
198
+ <zui-table-cell>13,728 A.G.</zui-table-cell>
199
+ <zui-table-cell>3,521 years old</zui-table-cell>
200
+ <zui-table-cell action>
201
+ <zui-button type="secondary">Betray</zui-button>
202
+ <zui-button type="link" danger>Assassinate</zui-button>
132
203
  </zui-table-cell>
133
204
  </zui-table-row>
134
205
  </zui-table>
@@ -235,6 +306,72 @@
235
306
  <zui-table-cell>10,089 A.G.</zui-table-cell>
236
307
  <zui-table-cell>10,156 A.G.</zui-table-cell>
237
308
  <zui-table-cell>67 years old</zui-table-cell>
309
+ <zui-table-cell action>
310
+ <zui-button type="secondary">Betray</zui-button>
311
+ </zui-table-cell>
312
+ </zui-table-row>
313
+ <zui-table-row>
314
+ <zui-table-cell>Leto Atreides I</zui-table-cell>
315
+ <zui-table-cell>Red Duke</zui-table-cell>
316
+ <zui-table-cell>10,140 A.G.</zui-table-cell>
317
+ <zui-table-cell>10,191 A.G.</zui-table-cell>
318
+ <zui-table-cell>51 years old</zui-table-cell>
319
+ <zui-table-cell action>
320
+ <zui-button type="secondary">Betray</zui-button>
321
+ </zui-table-cell>
322
+ </zui-table-row>
323
+ <zui-table-row>
324
+ <zui-table-cell>Paul Atreides</zui-table-cell>
325
+ <zui-table-cell>Padishah Emperor</zui-table-cell>
326
+ <zui-table-cell>10,176 A.G.</zui-table-cell>
327
+ <zui-table-cell>10,219 A.G.</zui-table-cell>
328
+ <zui-table-cell>43 years old</zui-table-cell>
329
+ <zui-table-cell action>
330
+ <zui-button type="secondary">Betray</zui-button>
331
+ </zui-table-cell>
332
+ </zui-table-row>
333
+ <zui-table-row>
334
+ <zui-table-cell>Alia Atreides</zui-table-cell>
335
+ <zui-table-cell>Imperial Regent</zui-table-cell>
336
+ <zui-table-cell>10,191 A.G.</zui-table-cell>
337
+ <zui-table-cell>10,219 A.G.</zui-table-cell>
338
+ <zui-table-cell>28 years old</zui-table-cell>
339
+ <zui-table-cell action>
340
+ <zui-button type="secondary">Betray</zui-button>
341
+ </zui-table-cell>
342
+ </zui-table-row>
343
+ <zui-table-row>
344
+ <zui-table-cell>Leto Atreides II</zui-table-cell>
345
+ <zui-table-cell>God Emperor</zui-table-cell>
346
+ <zui-table-cell>10,207 A.G.</zui-table-cell>
347
+ <zui-table-cell>13,728 A.G.</zui-table-cell>
348
+ <zui-table-cell>3,521 years old</zui-table-cell>
349
+ <zui-table-cell action>
350
+ <zui-button type="secondary">Betray</zui-button>
351
+ </zui-table-cell>
352
+ </zui-table-row>
353
+ </zui-table>
354
+
355
+ <h2>Table with sortable row headers</h2>
356
+
357
+ <zui-table id="sortableTable">
358
+ <zui-table-topbar>
359
+ <div>Sorting by: <strong id="table-sorting-value">*</strong></div>
360
+ </zui-table-topbar>
361
+ <zui-table-row header>
362
+ <zui-table-cell sortable sort="descending">Name</zui-table-cell>
363
+ <zui-table-cell sortable sort="ascending">Title</zui-table-cell>
364
+ <zui-table-cell sortable>Born</zui-table-cell>
365
+ <zui-table-cell sortable>Died</zui-table-cell>
366
+ <zui-table-cell sortable>Age</zui-table-cell>
367
+ <zui-table-cell>Action</zui-table-cell>
368
+ </zui-table-row>
369
+ <zui-table-row>
370
+ <zui-table-cell sortable>Paulus Atreides</zui-table-cell>
371
+ <zui-table-cell>Old Duke</zui-table-cell>
372
+ <zui-table-cell>10,089 A.G.</zui-table-cell>
373
+ <zui-table-cell>10,156 A.G.</zui-table-cell>
374
+ <zui-table-cell>67 years old</zui-table-cell>
238
375
  <zui-table-cell action>
239
376
  <zui-button class="secondary">Betray</zui-button>
240
377
  </zui-table-cell>
@@ -299,7 +436,7 @@
299
436
  <zui-table-cell>10,156 A.G.</zui-table-cell>
300
437
  <zui-table-cell>67 years old</zui-table-cell>
301
438
  <zui-table-cell action>
302
- <zui-button class="secondary">Betray</zui-button>
439
+ <zui-button type="secondary">Betray</zui-button>
303
440
  </zui-table-cell>
304
441
  </zui-table-row>
305
442
  <zui-table-row>
@@ -309,7 +446,7 @@
309
446
  <zui-table-cell>10,191 A.G.</zui-table-cell>
310
447
  <zui-table-cell>51 years old</zui-table-cell>
311
448
  <zui-table-cell action>
312
- <zui-button class="secondary">Betray</zui-button>
449
+ <zui-button type="secondary">Betray</zui-button>
313
450
  </zui-table-cell>
314
451
  </zui-table-row>
315
452
  <zui-table-row>
@@ -319,7 +456,7 @@
319
456
  <zui-table-cell>10,219 A.G.</zui-table-cell>
320
457
  <zui-table-cell>43 years old</zui-table-cell>
321
458
  <zui-table-cell action>
322
- <zui-button class="secondary">Betray</zui-button>
459
+ <zui-button type="secondary">Betray</zui-button>
323
460
  </zui-table-cell>
324
461
  </zui-table-row>
325
462
  <zui-table-row>
@@ -329,7 +466,7 @@
329
466
  <zui-table-cell>10,219 A.G.</zui-table-cell>
330
467
  <zui-table-cell>28 years old</zui-table-cell>
331
468
  <zui-table-cell action>
332
- <zui-button class="secondary">Betray</zui-button>
469
+ <zui-button type="secondary">Betray</zui-button>
333
470
  </zui-table-cell>
334
471
  </zui-table-row>
335
472
  <zui-table-row>
@@ -339,7 +476,7 @@
339
476
  <zui-table-cell>13,728 A.G.</zui-table-cell>
340
477
  <zui-table-cell>3,521 years old</zui-table-cell>
341
478
  <zui-table-cell action>
342
- <zui-button class="secondary">Betray</zui-button>
479
+ <zui-button type="secondary">Betray</zui-button>
343
480
  </zui-table-cell>
344
481
  </zui-table-row>
345
482
  <zui-table-row summary>
@@ -349,6 +486,75 @@
349
486
  </zui-table-row>
350
487
  </zui-table>
351
488
 
489
+ <h2>Table topbar with search</h2>
490
+
491
+ <zui-table>
492
+ <zui-table-topbar>
493
+ <zui-search placeholder="Search for a family member" no-submit></zui-search>
494
+ </zui-table-topbar>
495
+ <zui-table-row header>
496
+ <zui-table-cell>Name</zui-table-cell>
497
+ <zui-table-cell>Title</zui-table-cell>
498
+ <zui-table-cell>Born</zui-table-cell>
499
+ <zui-table-cell>Died</zui-table-cell>
500
+ <zui-table-cell>Age</zui-table-cell>
501
+ <zui-table-cell>Action</zui-table-cell>
502
+ </zui-table-row>
503
+ <zui-table-row>
504
+ <zui-table-cell>Paulus Atreides</zui-table-cell>
505
+ <zui-table-cell>Old Duke</zui-table-cell>
506
+ <zui-table-cell>10,089 A.G.</zui-table-cell>
507
+ <zui-table-cell>10,156 A.G.</zui-table-cell>
508
+ <zui-table-cell>67 years old</zui-table-cell>
509
+ <zui-table-cell action>
510
+ <zui-button type="secondary">Betray</zui-button>
511
+ </zui-table-cell>
512
+ </zui-table-row>
513
+ <zui-table-row>
514
+ <zui-table-cell>Leto Atreides I</zui-table-cell>
515
+ <zui-table-cell>Red Duke</zui-table-cell>
516
+ <zui-table-cell>10,140 A.G.</zui-table-cell>
517
+ <zui-table-cell>10,191 A.G.</zui-table-cell>
518
+ <zui-table-cell>51 years old</zui-table-cell>
519
+ <zui-table-cell action>
520
+ <zui-button type="secondary">Betray</zui-button>
521
+ </zui-table-cell>
522
+ </zui-table-row>
523
+ <zui-table-row>
524
+ <zui-table-cell>Paul Atreides</zui-table-cell>
525
+ <zui-table-cell>Padishah Emperor</zui-table-cell>
526
+ <zui-table-cell>10,176 A.G.</zui-table-cell>
527
+ <zui-table-cell>10,219 A.G.</zui-table-cell>
528
+ <zui-table-cell>43 years old</zui-table-cell>
529
+ <zui-table-cell action>
530
+ <zui-button type="secondary">Betray</zui-button>
531
+ </zui-table-cell>
532
+ </zui-table-row>
533
+ <zui-table-row>
534
+ <zui-table-cell>Alia Atreides</zui-table-cell>
535
+ <zui-table-cell>Imperial Regent</zui-table-cell>
536
+ <zui-table-cell>10,191 A.G.</zui-table-cell>
537
+ <zui-table-cell>10,219 A.G.</zui-table-cell>
538
+ <zui-table-cell>28 years old</zui-table-cell>
539
+ <zui-table-cell action>
540
+ <zui-button type="secondary">Betray</zui-button>
541
+ </zui-table-cell>
542
+ </zui-table-row>
543
+ <zui-table-row>
544
+ <zui-table-cell>Leto Atreides II</zui-table-cell>
545
+ <zui-table-cell>God Emperor</zui-table-cell>
546
+ <zui-table-cell>10,207 A.G.</zui-table-cell>
547
+ <zui-table-cell>13,728 A.G.</zui-table-cell>
548
+ <zui-table-cell>3,521 years old</zui-table-cell>
549
+ <zui-table-cell action>
550
+ <zui-button type="secondary">Betray</zui-button>
551
+ </zui-table-cell>
552
+ </zui-table-row>
553
+ <zui-table-row summary>
554
+ <zui-table-cell style="text-align: right"> Average lifespan: 742 years </zui-table-cell>
555
+ </zui-table-row>
556
+ </zui-table>
557
+
352
558
  <h2>Table topbar with search and counter</h2>
353
559
 
354
560
  <zui-table>
@@ -371,7 +577,7 @@
371
577
  <zui-table-cell>10,156 A.G.</zui-table-cell>
372
578
  <zui-table-cell>67 years old</zui-table-cell>
373
579
  <zui-table-cell action>
374
- <zui-button class="secondary">Betray</zui-button>
580
+ <zui-button type="secondary">Betray</zui-button>
375
581
  </zui-table-cell>
376
582
  </zui-table-row>
377
583
  <zui-table-row>
@@ -381,7 +587,7 @@
381
587
  <zui-table-cell>10,191 A.G.</zui-table-cell>
382
588
  <zui-table-cell>51 years old</zui-table-cell>
383
589
  <zui-table-cell action>
384
- <zui-button class="secondary">Betray</zui-button>
590
+ <zui-button type="secondary">Betray</zui-button>
385
591
  </zui-table-cell>
386
592
  </zui-table-row>
387
593
  <zui-table-row>
@@ -391,7 +597,7 @@
391
597
  <zui-table-cell>10,219 A.G.</zui-table-cell>
392
598
  <zui-table-cell>43 years old</zui-table-cell>
393
599
  <zui-table-cell action>
394
- <zui-button class="secondary">Betray</zui-button>
600
+ <zui-button type="secondary">Betray</zui-button>
395
601
  </zui-table-cell>
396
602
  </zui-table-row>
397
603
  <zui-table-row>
@@ -401,7 +607,7 @@
401
607
  <zui-table-cell>10,219 A.G.</zui-table-cell>
402
608
  <zui-table-cell>28 years old</zui-table-cell>
403
609
  <zui-table-cell action>
404
- <zui-button class="secondary">Betray</zui-button>
610
+ <zui-button type="secondary">Betray</zui-button>
405
611
  </zui-table-cell>
406
612
  </zui-table-row>
407
613
  <zui-table-row>
@@ -411,23 +617,20 @@
411
617
  <zui-table-cell>13,728 A.G.</zui-table-cell>
412
618
  <zui-table-cell>3,521 years old</zui-table-cell>
413
619
  <zui-table-cell action>
414
- <zui-button class="secondary">Betray</zui-button>
620
+ <zui-button type="secondary">Betray</zui-button>
415
621
  </zui-table-cell>
416
622
  </zui-table-row>
417
623
  <zui-table-row summary>
418
- <zui-table-cell style="text-align: right;">
419
- Average lifespan: 742 years
420
- </zui-table-cell>
624
+ <zui-table-cell style="text-align: right"> Average lifespan: 742 years </zui-table-cell>
421
625
  </zui-table-row>
422
626
  </zui-table>
423
627
 
424
- <h2>Table topbar with search, counter, and actions</h2>
628
+ <h2>Table topbar with search, counter, and 1 action</h2>
425
629
 
426
630
  <zui-table>
427
631
  <zui-table-topbar>
428
632
  <zui-search placeholder="Search for a family member" no-submit></zui-search>
429
633
  <div slot="counter">5 family members</div>
430
- <zui-button slot="action" class="secondary">Whisper</zui-button>
431
634
  <zui-button slot="action">Add a family member</zui-button>
432
635
  </zui-table-topbar>
433
636
  <zui-table-row header>
@@ -445,7 +648,7 @@
445
648
  <zui-table-cell>10,156 A.G.</zui-table-cell>
446
649
  <zui-table-cell>67 years old</zui-table-cell>
447
650
  <zui-table-cell action>
448
- <zui-button class="secondary">Betray</zui-button>
651
+ <zui-button type="secondary">Betray</zui-button>
449
652
  </zui-table-cell>
450
653
  </zui-table-row>
451
654
  <zui-table-row>
@@ -455,7 +658,7 @@
455
658
  <zui-table-cell>10,191 A.G.</zui-table-cell>
456
659
  <zui-table-cell>51 years old</zui-table-cell>
457
660
  <zui-table-cell action>
458
- <zui-button class="secondary">Betray</zui-button>
661
+ <zui-button type="secondary">Betray</zui-button>
459
662
  </zui-table-cell>
460
663
  </zui-table-row>
461
664
  <zui-table-row>
@@ -465,7 +668,7 @@
465
668
  <zui-table-cell>10,219 A.G.</zui-table-cell>
466
669
  <zui-table-cell>43 years old</zui-table-cell>
467
670
  <zui-table-cell action>
468
- <zui-button class="secondary">Betray</zui-button>
671
+ <zui-button type="secondary">Betray</zui-button>
469
672
  </zui-table-cell>
470
673
  </zui-table-row>
471
674
  <zui-table-row>
@@ -475,7 +678,7 @@
475
678
  <zui-table-cell>10,219 A.G.</zui-table-cell>
476
679
  <zui-table-cell>28 years old</zui-table-cell>
477
680
  <zui-table-cell action>
478
- <zui-button class="secondary">Betray</zui-button>
681
+ <zui-button type="secondary">Betray</zui-button>
479
682
  </zui-table-cell>
480
683
  </zui-table-row>
481
684
  <zui-table-row>
@@ -485,7 +688,7 @@
485
688
  <zui-table-cell>13,728 A.G.</zui-table-cell>
486
689
  <zui-table-cell>3,521 years old</zui-table-cell>
487
690
  <zui-table-cell action>
488
- <zui-button class="secondary">Betray</zui-button>
691
+ <zui-button type="secondary">Betray</zui-button>
489
692
  </zui-table-cell>
490
693
  </zui-table-row>
491
694
  <zui-table-row summary>
@@ -495,13 +698,13 @@
495
698
  </zui-table-row>
496
699
  </zui-table>
497
700
 
498
- <h2>Table with footer</h2>
701
+ <h2>Table topbar with search, counter, and 2 actions</h2>
499
702
 
500
703
  <zui-table>
501
704
  <zui-table-topbar>
502
705
  <zui-search placeholder="Search for a family member" no-submit></zui-search>
503
706
  <div slot="counter">5 family members</div>
504
- <zui-button slot="action" class="secondary">Whisper</zui-button>
707
+ <zui-button slot="action" type="secondary">Whisper</zui-button>
505
708
  <zui-button slot="action">Add a family member</zui-button>
506
709
  </zui-table-topbar>
507
710
  <zui-table-row header>
@@ -519,7 +722,7 @@
519
722
  <zui-table-cell>10,156 A.G.</zui-table-cell>
520
723
  <zui-table-cell>67 years old</zui-table-cell>
521
724
  <zui-table-cell action>
522
- <zui-button class="secondary">Betray</zui-button>
725
+ <zui-button type="secondary">Betray</zui-button>
523
726
  </zui-table-cell>
524
727
  </zui-table-row>
525
728
  <zui-table-row>
@@ -529,7 +732,7 @@
529
732
  <zui-table-cell>10,191 A.G.</zui-table-cell>
530
733
  <zui-table-cell>51 years old</zui-table-cell>
531
734
  <zui-table-cell action>
532
- <zui-button class="secondary">Betray</zui-button>
735
+ <zui-button type="secondary">Betray</zui-button>
533
736
  </zui-table-cell>
534
737
  </zui-table-row>
535
738
  <zui-table-row>
@@ -539,7 +742,7 @@
539
742
  <zui-table-cell>10,219 A.G.</zui-table-cell>
540
743
  <zui-table-cell>43 years old</zui-table-cell>
541
744
  <zui-table-cell action>
542
- <zui-button class="secondary">Betray</zui-button>
745
+ <zui-button type="secondary">Betray</zui-button>
543
746
  </zui-table-cell>
544
747
  </zui-table-row>
545
748
  <zui-table-row>
@@ -549,7 +752,7 @@
549
752
  <zui-table-cell>10,219 A.G.</zui-table-cell>
550
753
  <zui-table-cell>28 years old</zui-table-cell>
551
754
  <zui-table-cell action>
552
- <zui-button class="secondary">Betray</zui-button>
755
+ <zui-button type="secondary">Betray</zui-button>
553
756
  </zui-table-cell>
554
757
  </zui-table-row>
555
758
  <zui-table-row>
@@ -559,14 +762,84 @@
559
762
  <zui-table-cell>13,728 A.G.</zui-table-cell>
560
763
  <zui-table-cell>3,521 years old</zui-table-cell>
561
764
  <zui-table-cell action>
562
- <zui-button class="secondary">Betray</zui-button>
765
+ <zui-button type="secondary">Betray</zui-button>
563
766
  </zui-table-cell>
564
767
  </zui-table-row>
565
768
  <zui-table-row summary>
566
- <zui-table-cell style="text-align: right;">
567
- Average lifespan: 742 years
769
+ <zui-table-cell style="text-align: right"> Average lifespan: 742 years </zui-table-cell>
770
+ </zui-table-row>
771
+ </zui-table>
772
+
773
+ <h2>Table with footer</h2>
774
+
775
+ <zui-table>
776
+ <zui-table-topbar>
777
+ <zui-search placeholder="Search for a family member" no-submit></zui-search>
778
+ <div slot="counter">5 family members</div>
779
+ <zui-button slot="action" type="secondary">Whisper</zui-button>
780
+ <zui-button slot="action">Add a family member</zui-button>
781
+ </zui-table-topbar>
782
+ <zui-table-row header>
783
+ <zui-table-cell>Name</zui-table-cell>
784
+ <zui-table-cell>Title</zui-table-cell>
785
+ <zui-table-cell>Born</zui-table-cell>
786
+ <zui-table-cell>Died</zui-table-cell>
787
+ <zui-table-cell>Age</zui-table-cell>
788
+ <zui-table-cell>Action</zui-table-cell>
789
+ </zui-table-row>
790
+ <zui-table-row>
791
+ <zui-table-cell>Paulus Atreides</zui-table-cell>
792
+ <zui-table-cell>Old Duke</zui-table-cell>
793
+ <zui-table-cell>10,089 A.G.</zui-table-cell>
794
+ <zui-table-cell>10,156 A.G.</zui-table-cell>
795
+ <zui-table-cell>67 years old</zui-table-cell>
796
+ <zui-table-cell action>
797
+ <zui-button type="secondary">Betray</zui-button>
798
+ </zui-table-cell>
799
+ </zui-table-row>
800
+ <zui-table-row>
801
+ <zui-table-cell>Leto Atreides I</zui-table-cell>
802
+ <zui-table-cell>Red Duke</zui-table-cell>
803
+ <zui-table-cell>10,140 A.G.</zui-table-cell>
804
+ <zui-table-cell>10,191 A.G.</zui-table-cell>
805
+ <zui-table-cell>51 years old</zui-table-cell>
806
+ <zui-table-cell action>
807
+ <zui-button type="secondary">Betray</zui-button>
808
+ </zui-table-cell>
809
+ </zui-table-row>
810
+ <zui-table-row>
811
+ <zui-table-cell>Paul Atreides</zui-table-cell>
812
+ <zui-table-cell>Padishah Emperor</zui-table-cell>
813
+ <zui-table-cell>10,176 A.G.</zui-table-cell>
814
+ <zui-table-cell>10,219 A.G.</zui-table-cell>
815
+ <zui-table-cell>43 years old</zui-table-cell>
816
+ <zui-table-cell action>
817
+ <zui-button type="secondary">Betray</zui-button>
818
+ </zui-table-cell>
819
+ </zui-table-row>
820
+ <zui-table-row>
821
+ <zui-table-cell>Alia Atreides</zui-table-cell>
822
+ <zui-table-cell>Imperial Regent</zui-table-cell>
823
+ <zui-table-cell>10,191 A.G.</zui-table-cell>
824
+ <zui-table-cell>10,219 A.G.</zui-table-cell>
825
+ <zui-table-cell>28 years old</zui-table-cell>
826
+ <zui-table-cell action>
827
+ <zui-button type="secondary">Betray</zui-button>
828
+ </zui-table-cell>
829
+ </zui-table-row>
830
+ <zui-table-row>
831
+ <zui-table-cell>Leto Atreides II</zui-table-cell>
832
+ <zui-table-cell>God Emperor</zui-table-cell>
833
+ <zui-table-cell>10,207 A.G.</zui-table-cell>
834
+ <zui-table-cell>13,728 A.G.</zui-table-cell>
835
+ <zui-table-cell>3,521 years old</zui-table-cell>
836
+ <zui-table-cell action>
837
+ <zui-button type="secondary">Betray</zui-button>
568
838
  </zui-table-cell>
569
839
  </zui-table-row>
840
+ <zui-table-row summary>
841
+ <zui-table-cell style="text-align: right"> Average lifespan: 742 years </zui-table-cell>
842
+ </zui-table-row>
570
843
  <zui-table-footer>
571
844
  <zui-pager current-page="1" total-pages="10"></zui-pager>
572
845
  </zui-table-footer>
@@ -578,7 +851,7 @@
578
851
  <zui-table-topbar>
579
852
  <zui-search placeholder="Search for a family member" value="Spongebob Squarepants" no-submit></zui-search>
580
853
  <div slot="counter">0 family members</div>
581
- <zui-button slot="action" class="secondary">Whisper</zui-button>
854
+ <zui-button slot="action" type="secondary">Whisper</zui-button>
582
855
  <zui-button slot="action">Add a family member</zui-button>
583
856
  </zui-table-topbar>
584
857
  <zui-table-row header>
@@ -601,7 +874,7 @@
601
874
  <zui-table-topbar>
602
875
  <zui-search placeholder="Search for a family member" value="Spongebob Squarepants" no-submit></zui-search>
603
876
  <div slot="counter">0 family members</div>
604
- <zui-button slot="action" class="secondary">Whisper</zui-button>
877
+ <zui-button slot="action" type="secondary">Whisper</zui-button>
605
878
  <zui-button slot="action">Add a family member</zui-button>
606
879
  </zui-table-topbar>
607
880
  <zui-table-row header>
@@ -612,8 +885,8 @@
612
885
  <zui-table-cell>Age</zui-table-cell>
613
886
  <zui-table-cell>Action</zui-table-cell>
614
887
  </zui-table-row>
615
- <div slot="no-results-message" style="text-align: center;">
616
- <div style="font-size: 2rem; margin-bottom: 0.5em;">¯\_(ツ)_/¯</div>
888
+ <div slot="no-results-message" style="text-align: center">
889
+ <div style="font-size: 2rem; margin-bottom: 0.5em">¯\_(ツ)_/¯</div>
617
890
  <p class="zui font-weight-semibold">No results for "Spongebob Squarepants"</p>
618
891
  <p>Searching through all the Dune lore yielded no results.</p>
619
892
  </div>
@@ -628,7 +901,7 @@
628
901
  <zui-table-topbar>
629
902
  <zui-search placeholder="Search for a family member" no-submit></zui-search>
630
903
  <div slot="counter">5 family members</div>
631
- <zui-button slot="action" class="secondary">Whisper</zui-button>
904
+ <zui-button slot="action" type="secondary">Whisper</zui-button>
632
905
  <zui-button slot="action">Add a family member</zui-button>
633
906
  </zui-table-topbar>
634
907
  <zui-table-row header>
@@ -646,7 +919,7 @@
646
919
  <zui-table-cell>10,156 A.G.</zui-table-cell>
647
920
  <zui-table-cell>67 years old</zui-table-cell>
648
921
  <zui-table-cell action>
649
- <zui-button class="secondary">Betray</zui-button>
922
+ <zui-button type="secondary">Betray</zui-button>
650
923
  </zui-table-cell>
651
924
  </zui-table-row>
652
925
  <zui-table-row>
@@ -656,7 +929,7 @@
656
929
  <zui-table-cell>10,191 A.G.</zui-table-cell>
657
930
  <zui-table-cell>51 years old</zui-table-cell>
658
931
  <zui-table-cell action>
659
- <zui-button class="secondary">Betray</zui-button>
932
+ <zui-button type="secondary">Betray</zui-button>
660
933
  </zui-table-cell>
661
934
  </zui-table-row>
662
935
  <zui-table-row>
@@ -666,7 +939,7 @@
666
939
  <zui-table-cell>10,219 A.G.</zui-table-cell>
667
940
  <zui-table-cell>43 years old</zui-table-cell>
668
941
  <zui-table-cell action>
669
- <zui-button class="secondary">Betray</zui-button>
942
+ <zui-button type="secondary">Betray</zui-button>
670
943
  </zui-table-cell>
671
944
  </zui-table-row>
672
945
  <zui-table-row>
@@ -676,7 +949,7 @@
676
949
  <zui-table-cell>10,219 A.G.</zui-table-cell>
677
950
  <zui-table-cell>28 years old</zui-table-cell>
678
951
  <zui-table-cell action>
679
- <zui-button class="secondary">Betray</zui-button>
952
+ <zui-button type="secondary">Betray</zui-button>
680
953
  </zui-table-cell>
681
954
  </zui-table-row>
682
955
  <zui-table-row>
@@ -686,13 +959,11 @@
686
959
  <zui-table-cell>13,728 A.G.</zui-table-cell>
687
960
  <zui-table-cell>3,521 years old</zui-table-cell>
688
961
  <zui-table-cell action>
689
- <zui-button class="secondary">Betray</zui-button>
962
+ <zui-button type="secondary">Betray</zui-button>
690
963
  </zui-table-cell>
691
964
  </zui-table-row>
692
965
  <zui-table-row summary>
693
- <zui-table-cell style="text-align: right;">
694
- Average lifespan: 742 years
695
- </zui-table-cell>
966
+ <zui-table-cell style="text-align: right"> Average lifespan: 742 years </zui-table-cell>
696
967
  </zui-table-row>
697
968
  <zui-table-footer>
698
969
  <zui-pager current-page="1" total-pages="10"></zui-pager>
@@ -705,7 +976,7 @@
705
976
  <zui-table-topbar>
706
977
  <zui-search placeholder="Search for a family member" no-submit></zui-search>
707
978
  <div slot="counter">5 family members</div>
708
- <zui-button slot="action" class="secondary">Whisper</zui-button>
979
+ <zui-button slot="action" type="secondary">Whisper</zui-button>
709
980
  <zui-button slot="action">Add a family member</zui-button>
710
981
  </zui-table-topbar>
711
982
  <zui-table-row header>
@@ -723,7 +994,7 @@
723
994
  <zui-table-cell>10,156 A.G.</zui-table-cell>
724
995
  <zui-table-cell>67 years old</zui-table-cell>
725
996
  <zui-table-cell action>
726
- <zui-button class="secondary">Betray</zui-button>
997
+ <zui-button type="secondary">Betray</zui-button>
727
998
  </zui-table-cell>
728
999
  </zui-table-row>
729
1000
  <zui-table-row>
@@ -733,7 +1004,7 @@
733
1004
  <zui-table-cell>10,191 A.G.</zui-table-cell>
734
1005
  <zui-table-cell>51 years old</zui-table-cell>
735
1006
  <zui-table-cell action>
736
- <zui-button class="secondary">Betray</zui-button>
1007
+ <zui-button type="secondary">Betray</zui-button>
737
1008
  </zui-table-cell>
738
1009
  </zui-table-row>
739
1010
  <zui-table-row>
@@ -743,7 +1014,7 @@
743
1014
  <zui-table-cell>10,219 A.G.</zui-table-cell>
744
1015
  <zui-table-cell>43 years old</zui-table-cell>
745
1016
  <zui-table-cell action>
746
- <zui-button class="secondary">Betray</zui-button>
1017
+ <zui-button type="secondary">Betray</zui-button>
747
1018
  </zui-table-cell>
748
1019
  </zui-table-row>
749
1020
  <zui-table-row>
@@ -753,7 +1024,7 @@
753
1024
  <zui-table-cell>10,219 A.G.</zui-table-cell>
754
1025
  <zui-table-cell>28 years old</zui-table-cell>
755
1026
  <zui-table-cell action>
756
- <zui-button class="secondary">Betray</zui-button>
1027
+ <zui-button type="secondary">Betray</zui-button>
757
1028
  </zui-table-cell>
758
1029
  </zui-table-row>
759
1030
  <zui-table-row>
@@ -763,13 +1034,11 @@
763
1034
  <zui-table-cell>13,728 A.G.</zui-table-cell>
764
1035
  <zui-table-cell>3,521 years old</zui-table-cell>
765
1036
  <zui-table-cell action>
766
- <zui-button class="secondary">Betray</zui-button>
1037
+ <zui-button type="secondary">Betray</zui-button>
767
1038
  </zui-table-cell>
768
1039
  </zui-table-row>
769
1040
  <zui-table-row summary>
770
- <zui-table-cell style="text-align: right;">
771
- Average lifespan: 742 years
772
- </zui-table-cell>
1041
+ <zui-table-cell style="text-align: right"> Average lifespan: 742 years </zui-table-cell>
773
1042
  </zui-table-row>
774
1043
  <zui-table-footer>
775
1044
  <zui-pager current-page="1" total-pages="10"></zui-pager>
@@ -777,8 +1046,26 @@
777
1046
  </zui-table>
778
1047
 
779
1048
  <script>
780
- // zui-base-styles needs this for dumb IE11 if you add rel="zui-stylesheet"
781
- // window.zui.importCustomStyles();
1049
+ const sortableHeaders = document.querySelectorAll("zui-table-row[header] zui-table-cell[sortable]");
1050
+ const displaySortDirection = document.querySelector("#table-sorting-value");
1051
+ const firstHeaderWithDirection = document.querySelector("zui-table-cell[sort]");
1052
+
1053
+ displaySortDirection.innerText = firstHeaderWithDirection?.getAttribute("sort") ?? `null`;
1054
+
1055
+ function handleSort(event) {
1056
+ setTimeout(() => {
1057
+ displaySortDirection.innerText = (function () {
1058
+ if (event.detail.sort === null) {
1059
+ return `null`;
1060
+ }
1061
+ return `${event.detail.cell.innerText}: "${event.detail.sort}"`;
1062
+ })();
1063
+ }, 10);
1064
+ }
1065
+
1066
+ sortableTable.addEventListener("sort", handleSort);
1067
+
1068
+ sortableHeaders.forEach((header) => header.addEventListener("sort", handleSort));
782
1069
 
783
1070
  // Uncomment to test FOUC styling
784
1071
  // customElements.define = function () { };