stk-table-vue 0.6.7 → 0.6.9

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 (21) hide show
  1. package/README.md +0 -10
  2. package/lib/src/StkTable/StkTable.vue.d.ts +695 -506
  3. package/lib/src/StkTable/types/index.d.ts +1 -0
  4. package/lib/src/StkTable/useAutoResize.d.ts +1 -0
  5. package/lib/src/StkTable/useColResize.d.ts +1 -0
  6. package/lib/src/StkTable/useFixedCol.d.ts +1 -0
  7. package/lib/src/StkTable/useFixedStyle.d.ts +1 -0
  8. package/lib/src/StkTable/useGetFixedColPosition.d.ts +1 -0
  9. package/lib/src/StkTable/useHighlight.d.ts +1 -0
  10. package/lib/src/StkTable/useKeyboardArrowScroll.d.ts +1 -0
  11. package/lib/src/StkTable/useThDrag.d.ts +1 -0
  12. package/lib/src/StkTable/useTrDrag.d.ts +1 -0
  13. package/lib/src/StkTable/useVirtualScroll.d.ts +1 -0
  14. package/lib/src/StkTable/utils/constRefUtils.d.ts +1 -0
  15. package/lib/src/StkTable/utils/index.d.ts +1 -0
  16. package/lib/src/StkTable/utils/useTriggerRef.d.ts +1 -0
  17. package/lib/stk-table-vue.js +2374 -2363
  18. package/lib/style.css +395 -386
  19. package/package.json +2 -2
  20. package/src/StkTable/StkTable.vue +24 -9
  21. package/src/StkTable/style.less +34 -36
package/lib/style.css CHANGED
@@ -1,386 +1,395 @@
1
- @keyframes stk-table-dim{
2
- from{
3
- background-color:var(--highlight-color);
4
- }
5
- }
6
- .stk-table{
7
- --row-height:28px;
8
- --header-row-height:var(--row-height);
9
- --cell-padding-y:0;
10
- --cell-padding-x:8px;
11
- --resize-handle-width:4px;
12
- --border-color:#e8e8f4;
13
- --border-width:1px;
14
- --td-bgc:#fff;
15
- --td-hover-color:#71a2fd;
16
- --td-active-color:#386ccc;
17
- --th-bgc:#fafafc;
18
- --th-color:#272841;
19
- --tr-active-bgc:#e6f7ff;
20
- --tr-hover-bgc:rgba(230, 247, 255, 0.7);
21
- --bg-border-top:linear-gradient(180deg, var(--border-color) var(--border-width), transparent var(--border-width));
22
- --bg-border-right:linear-gradient(270deg, var(--border-color) var(--border-width), transparent var(--border-width));
23
- --bg-border-bottom:linear-gradient(0deg, var(--border-color) var(--border-width), transparent var(--border-width));
24
- --bg-border-left:linear-gradient(90deg, var(--border-color) var(--border-width), transparent var(--border-width));
25
- --highlight-color:#71a2fd;
26
- --highlight-duration:2s;
27
- --highlight-timing-function:linear;
28
- --stripe-bgc:#fafafc;
29
- --sort-arrow-color:#757699;
30
- --sort-arrow-hover-color:#8f90b5;
31
- --sort-arrow-active-color:#1b63d9;
32
- --sort-arrow-active-sub-color:#cbcbe1;
33
- --col-resize-indicator-color:#87879c;
34
- --fixed-col-shadow-color-from:rgba(0, 0, 0, 0.1);
35
- --fixed-col-shadow-color-to:rgba(0, 0, 0, 0);
36
- --drag-handle-hover-color:#d0d1e0;
37
- position:relative;
38
- overflow:auto;
39
- display:flex;
40
- flex-direction:column;
41
- box-sizing:border-box;
42
- }
43
- .stk-table.dark{
44
- --th-bgc:#202029;
45
- --th-color:#C0C0D1;
46
- --td-bgc:#1b1b24;
47
- --td-hover-color:#70a6ff;
48
- --td-active-color:#386ccc;
49
- --border-color:#292933;
50
- --tr-active-bgc:#283f63;
51
- --tr-hover-bgc:#1a2b46;
52
- --table-bgc:#1b1b24;
53
- --highlight-color:#1e4c99;
54
- --stripe-bgc:#202029;
55
- --sort-arrow-color:#5d6064;
56
- --sort-arrow-hover-color:#727782;
57
- --sort-arrow-active-color:#d0d1d2;
58
- --sort-arrow-active-sub-color:#5d6064;
59
- --col-resize-indicator-color:#5d6064;
60
- --fixed-col-shadow-color-from:rgba(135, 135, 156, 0.1);
61
- --fixed-col-shadow-color-to:rgba(135, 135, 156, 0);
62
- --drag-handle-hover-color:#5d6064;
63
- color:#d1d1e0;
64
- }
65
- .stk-table.headless.border{
66
- border-top:1px solid var(--border-color);
67
- background-image:var(--bg-border-right), var(--bg-border-bottom);
68
- }
69
- .stk-table.col-resizable .stk-table-main{
70
- width:-moz-fit-content;
71
- width:fit-content;
72
- min-width:-moz-min-content;
73
- min-width:min-content;
74
- }
75
- .stk-table.is-col-resizing th{
76
- pointer-events:none;
77
- }
78
- .stk-table.border{
79
- border-left:1px solid var(--border-color);
80
- background-image:var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
81
- }
82
- .stk-table.border th,
83
- .stk-table.border td{
84
- background-image:var(--bg-border-right), var(--bg-border-bottom);
85
- }
86
- .stk-table.border thead tr:first-child th{
87
- background-image:var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
88
- }
89
- .stk-table.border-h{
90
- border-left:none;
91
- --bg-border-right:linear-gradient(transparent, transparent);
92
- --bg-border-left:linear-gradient(transparent, transparent);
93
- }
94
- .stk-table.border-v{
95
- --bg-border-bottom:linear-gradient(transparent, transparent);
96
- --bg-border-top:linear-gradient(transparent, transparent);
97
- }
98
- .stk-table.border-body-v tbody{
99
- --bg-border-bottom:linear-gradient(transparent, transparent);
100
- }
101
- .stk-table.stripe:not(.vt-on) .stk-tbody-main tr:nth-child(even){
102
- background-color:var(--stripe-bgc);
103
- }
104
- .stk-table.stripe.vt-on .stk-tbody-main tr:nth-child(odd){
105
- background-color:var(--stripe-bgc);
106
- }
107
- .stk-table.stripe.row-hover .stk-tbody-main tr:hover{
108
- background-color:var(--tr-hover-bgc);
109
- }
110
- .stk-table.stripe.row-active .stk-tbody-main tr.active{
111
- background-color:var(--tr-active-bgc);
112
- }
113
- .stk-table.row-hover .stk-tbody-main tr:hover{
114
- background-color:var(--tr-hover-bgc);
115
- }
116
- .stk-table.row-active .stk-tbody-main tr.active{
117
- background-color:var(--tr-active-bgc);
118
- }
119
- .stk-table.cell-hover tbody td:hover{
120
- box-shadow:inset 0 0 0 2px var(--td-hover-color);
121
- }
122
- .stk-table.cell-active tbody td.active{
123
- box-shadow:inset 0 0 0 2px var(--td-active-color);
124
- }
125
- .stk-table.text-overflow .table-cell-wrapper{
126
- white-space:nowrap;
127
- overflow:hidden;
128
- text-overflow:ellipsis;
129
- }
130
- .stk-table.header-text-overflow .table-header-cell-wrapper{
131
- white-space:nowrap;
132
- overflow:hidden;
133
- }
134
- .stk-table.header-text-overflow .table-header-title{
135
- text-overflow:ellipsis;
136
- overflow:hidden;
137
- }
138
- .stk-table.virtual{
139
- }
140
- .stk-table.virtual .table-header-cell-wrapper{
141
- overflow:hidden;
142
- max-height:calc(var(--header-row-height) * 1);
143
- max-height:calc(var(--header-row-height) * var(--row-span, 1));
144
- }
145
- .stk-table.virtual .table-header-cell-wrapper .table-header-title{
146
- max-height:inherit;
147
- }
148
- .stk-table.virtual tbody td{
149
- height:var(--row-height);
150
- }
151
- .stk-table.virtual tbody td .table-cell-wrapper{
152
- max-height:var(--row-height);
153
- overflow:hidden;
154
- }
155
- .stk-table.virtual .padding-top-tr td{
156
- height:0;
157
- }
158
- .stk-table.virtual .expand-cell .table-cell-wrapper{
159
- white-space:nowrap;
160
- }
161
- .stk-table.auto-row-height tbody td{
162
- height:auto;
163
- height:initial;
164
- }
165
- .stk-table.auto-row-height tbody td .table-cell-wrapper{
166
- max-height:none;
167
- max-height:initial;
168
- overflow:visible;
169
- overflow:initial;
170
- }
171
- .stk-table.fixed-relative-mode th{
172
- position:relative;
173
- }
174
- .stk-table.fixed-relative-mode .fixed-cell--active{
175
- position:relative;
176
- }
177
- .stk-table th,
178
- .stk-table td{
179
- font-size:14px;
180
- box-sizing:border-box;
181
- padding:var(--cell-padding-y) var(--cell-padding-x);
182
- }
183
- .stk-table th{
184
- color:var(--th-color);
185
- background-color:inherit;
186
- z-index:2;
187
- position:sticky;
188
- }
189
- .stk-table th.sortable{
190
- cursor:pointer;
191
- }
192
- .stk-table th:not(.sorter-desc):not(.sorter-asc):hover .table-header-sorter .arrow-up{
193
- fill:var(--sort-arrow-hover-color);
194
- }
195
- .stk-table th:not(.sorter-desc):not(.sorter-asc):hover .table-header-sorter .arrow-down{
196
- fill:var(--sort-arrow-hover-color);
197
- }
198
- .stk-table th.sorter-desc .table-header-sorter{
199
- display:inline;
200
- }
201
- .stk-table th.sorter-desc .table-header-sorter .arrow-up{
202
- fill:var(--sort-arrow-active-sub-color);
203
- }
204
- .stk-table th.sorter-desc .table-header-sorter .arrow-down{
205
- fill:var(--sort-arrow-active-color);
206
- }
207
- .stk-table th.sorter-asc .table-header-sorter{
208
- display:inline;
209
- }
210
- .stk-table th.sorter-asc .table-header-sorter .arrow-up{
211
- fill:var(--sort-arrow-active-color);
212
- }
213
- .stk-table th.sorter-asc .table-header-sorter .arrow-down{
214
- fill:var(--sort-arrow-active-sub-color);
215
- }
216
- .stk-table thead tr{
217
- background-color:var(--th-bgc);
218
- height:var(--header-row-height);
219
- }
220
- .stk-table tbody tr{
221
- background-color:var(--td-bgc);
222
- height:var(--row-height);
223
- }
224
- .stk-table .vt-x-left,
225
- .stk-table .vt-x-right{
226
- padding:0;
227
- background:none;
228
- pointer-events:none;
229
- }
230
- .stk-table .column-resize-indicator{
231
- width:0;
232
- height:100%;
233
- border-left:2px solid var(--col-resize-indicator-color);
234
- position:absolute;
235
- z-index:10;
236
- display:none;
237
- pointer-events:none;
238
- }
239
- .stk-table .stk-table-main{
240
- border-spacing:0;
241
- border-collapse:separate;
242
- width:-moz-fit-content;
243
- width:fit-content;
244
- min-width:100%;
245
- }
246
- .stk-table .stk-table-main.fixed-mode{
247
- table-layout:fixed;
248
- min-width:-moz-min-content;
249
- min-width:min-content;
250
- }
251
- .stk-table .fixed-cell{
252
- background-color:inherit;
253
- }
254
- .stk-table .highlight-cell{
255
- animation:stk-table-dim var(--highlight-duration);
256
- animation-timing-function:var(--highlight-timing-function);
257
- }
258
- .stk-table .seq-column{
259
- text-align:center;
260
- }
261
- .stk-table .expand-cell{
262
- cursor:pointer;
263
- }
264
- .stk-table .expand-cell .expanded-cell-wrapper::before{
265
- content:'';
266
- display:inline-block;
267
- margin:0 2px;
268
- width:0;
269
- height:0;
270
- border-left:5px solid #757699;
271
- border-top:4px solid transparent;
272
- border-bottom:4px solid transparent;
273
- transition:transform 0.2s ease;
274
- }
275
- .stk-table .expand-cell .expanded-cell-wrapper > span{
276
- margin-left:var(--cell-padding-x);
277
- }
278
- .stk-table .expand-cell.expanded .table-cell-wrapper::before{
279
- transform:rotate(90deg);
280
- }
281
- .stk-table .drag-row-cell .table-cell-wrapper{
282
- display:inline-flex;
283
- align-items:center;
284
- }
285
- .stk-table .drag-row-cell .drag-row-handle{
286
- cursor:grab;
287
- border-radius:4px;
288
- }
289
- .stk-table .drag-row-cell .drag-row-handle:hover{
290
- background-color:var(--drag-handle-hover-color);
291
- }
292
- .stk-table .drag-row-cell .drag-row-handle:active{
293
- cursor:grabbing;
294
- }
295
- .stk-table .drag-row-cell .drag-row-handle > svg{
296
- vertical-align:-2px;
297
- }
298
- .stk-table .tr-dragging{
299
- opacity:0.5;
300
- }
301
- .stk-table .tr-dragging-over{
302
- background-color:var(--tr-hover-bgc);
303
- }
304
- .stk-table .fixed-cell--left{
305
- --shadow-rotate:90deg;
306
- }
307
- .stk-table .fixed-cell--left.fixed-cell--shadow::after{
308
- right:-10px;
309
- }
310
- .stk-table .fixed-cell--right{
311
- --shadow-rotate:-90deg;
312
- }
313
- .stk-table .fixed-cell--right.fixed-cell--shadow::after{
314
- left:-10px;
315
- }
316
- .stk-table .fixed-cell--shadow::after{
317
- content:'';
318
- width:10px;
319
- height:100%;
320
- top:0px;
321
- position:absolute;
322
- pointer-events:none;
323
- background-image:linear-gradient(var(--shadow-rotate), var(--fixed-col-shadow-color-from), var(--fixed-col-shadow-color-to));
324
- }
325
- .stk-table .fixed-cell--active{
326
- position:sticky;
327
- }
328
- .stk-table th.fixed-cell--active{
329
- z-index:3;
330
- }
331
- .stk-table td.fixed-cell--active{
332
- z-index:1;
333
- }
334
- .stk-table .table-header-cell-wrapper{
335
- max-width:100%;
336
- display:inline-flex;
337
- align-items:center;
338
- }
339
- .stk-table .table-header-title{
340
- overflow:hidden;
341
- }
342
- .stk-table .table-header-sorter{
343
- flex-shrink:0;
344
- margin-left:4px;
345
- width:16px;
346
- height:16px;
347
- display:none;
348
- }
349
- .stk-table .table-header-sorter .arrow-up,
350
- .stk-table .table-header-sorter .arrow-down{
351
- fill:var(--sort-arrow-color);
352
- }
353
- .stk-table .table-header-resizer{
354
- position:absolute;
355
- top:0;
356
- bottom:0;
357
- cursor:col-resize;
358
- width:var(--resize-handle-width);
359
- }
360
- .stk-table .table-header-resizer.left{
361
- left:0;
362
- }
363
- .stk-table .table-header-resizer.right{
364
- right:0;
365
- }
366
- .stk-table .highlight-row{
367
- animation:stk-table-dim var(--highlight-duration);
368
- animation-timing-function:var(--highlight-timing-function);
369
- }
370
- .stk-table .stk-table-no-data{
371
- background-color:var(--table-bgc);
372
- line-height:var(--row-height);
373
- text-align:center;
374
- font-size:14px;
375
- position:sticky;
376
- left:0px;
377
- border-right:var(--border-width) solid var(--border-color);
378
- border-bottom:var(--border-width) solid var(--border-color);
379
- display:flex;
380
- flex-direction:column;
381
- align-items:center;
382
- justify-content:center;
383
- }
384
- .stk-table .stk-table-no-data.no-data-full{
385
- flex:1;
386
- }
1
+ @keyframes stk-table-dim{
2
+ from{
3
+ background-color:var(--highlight-color);
4
+ }
5
+ }
6
+ .stk-table{
7
+ --row-height:28px;
8
+ --header-row-height:var(--row-height);
9
+ --cell-padding-y:0;
10
+ --cell-padding-x:8px;
11
+ --resize-handle-width:4px;
12
+ --border-color:#e8e8f4;
13
+ --border-width:1px;
14
+ --td-bgc:#fff;
15
+ --td-hover-color:#71a2fd;
16
+ --td-active-color:#386ccc;
17
+ --th-bgc:#fafafc;
18
+ --th-color:#272841;
19
+ --tr-active-bgc:#e6f7ff;
20
+ --tr-hover-bgc:rgba(230, 247, 255, 0.7);
21
+ --bg-border-top:linear-gradient(180deg, var(--border-color) var(--border-width), transparent var(--border-width));
22
+ --bg-border-right:linear-gradient(270deg, var(--border-color) var(--border-width), transparent var(--border-width));
23
+ --bg-border-bottom:linear-gradient(0deg, var(--border-color) var(--border-width), transparent var(--border-width));
24
+ --bg-border-left:linear-gradient(90deg, var(--border-color) var(--border-width), transparent var(--border-width));
25
+ --highlight-color:#71a2fd;
26
+ --highlight-duration:2s;
27
+ --highlight-timing-function:linear;
28
+ --stripe-bgc:#fafafc;
29
+ --sort-arrow-color:#757699;
30
+ --sort-arrow-hover-color:#8f90b5;
31
+ --sort-arrow-active-color:#1b63d9;
32
+ --sort-arrow-active-sub-color:#cbcbe1;
33
+ --col-resize-indicator-color:#87879c;
34
+ --fixed-col-shadow-color-from:rgba(0, 0, 0, 0.1);
35
+ --fixed-col-shadow-color-to:rgba(0, 0, 0, 0);
36
+ --drag-handle-hover-color:#d0d1e0;
37
+ position:relative;
38
+ overflow:auto;
39
+ display:flex;
40
+ flex-direction:column;
41
+ box-sizing:border-box;
42
+ }
43
+ .stk-table.dark{
44
+ --th-bgc:#202029;
45
+ --th-color:#c0c0d1;
46
+ --td-bgc:#1b1b24;
47
+ --td-hover-color:#70a6ff;
48
+ --td-active-color:#386ccc;
49
+ --border-color:#292933;
50
+ --tr-active-bgc:#283f63;
51
+ --tr-hover-bgc:#1a2b46;
52
+ --table-bgc:#1b1b24;
53
+ --highlight-color:#1e4c99;
54
+ --stripe-bgc:#202029;
55
+ --sort-arrow-color:#5d6064;
56
+ --sort-arrow-hover-color:#727782;
57
+ --sort-arrow-active-color:#d0d1d2;
58
+ --sort-arrow-active-sub-color:#5d6064;
59
+ --col-resize-indicator-color:#5d6064;
60
+ --fixed-col-shadow-color-from:rgba(135, 135, 156, 0.1);
61
+ --fixed-col-shadow-color-to:rgba(135, 135, 156, 0);
62
+ --drag-handle-hover-color:#5d6064;
63
+ color:#d1d1e0;
64
+ }
65
+ .stk-table.headless.border{
66
+ border-top:1px solid var(--border-color);
67
+ background-image:var(--bg-border-right), var(--bg-border-bottom);
68
+ }
69
+ .stk-table.col-resizable .stk-table-main{
70
+ width:-moz-fit-content;
71
+ width:fit-content;
72
+ min-width:-moz-min-content;
73
+ min-width:min-content;
74
+ }
75
+ .stk-table.is-col-resizing th{
76
+ pointer-events:none;
77
+ }
78
+ .stk-table.border{
79
+ border-left:1px solid var(--border-color);
80
+ background-image:var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
81
+ }
82
+ .stk-table.border th,
83
+ .stk-table.border td{
84
+ background-image:var(--bg-border-right), var(--bg-border-bottom);
85
+ }
86
+ .stk-table.border thead tr:first-child th{
87
+ background-image:var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
88
+ }
89
+ .stk-table.border-h{
90
+ border-left:none;
91
+ --bg-border-right:linear-gradient(transparent, transparent);
92
+ --bg-border-left:linear-gradient(transparent, transparent);
93
+ }
94
+ .stk-table.border-v{
95
+ --bg-border-bottom:linear-gradient(transparent, transparent);
96
+ --bg-border-top:linear-gradient(transparent, transparent);
97
+ }
98
+ .stk-table.border-body-v tbody{
99
+ --bg-border-bottom:linear-gradient(transparent, transparent);
100
+ }
101
+ .stk-table.stripe:not(.vt-on) .stk-tbody-main tr:nth-child(even){
102
+ background-color:var(--stripe-bgc);
103
+ }
104
+ .stk-table.stripe.vt-on .stk-tbody-main tr:nth-child(odd){
105
+ background-color:var(--stripe-bgc);
106
+ }
107
+ .stk-table.stripe.row-hover .stk-tbody-main tr:hover{
108
+ background-color:var(--tr-hover-bgc);
109
+ }
110
+ .stk-table.stripe.row-active .stk-tbody-main tr.active{
111
+ background-color:var(--tr-active-bgc);
112
+ }
113
+ .stk-table.row-hover .stk-tbody-main tr:hover{
114
+ background-color:var(--tr-hover-bgc);
115
+ }
116
+ .stk-table.row-active .stk-tbody-main tr.active{
117
+ background-color:var(--tr-active-bgc);
118
+ }
119
+ .stk-table.cell-hover tbody td:hover{
120
+ box-shadow:inset 0 0 0 2px var(--td-hover-color);
121
+ }
122
+ .stk-table.cell-active tbody td.active{
123
+ box-shadow:inset 0 0 0 2px var(--td-active-color);
124
+ }
125
+ .stk-table.text-overflow .table-cell-wrapper{
126
+ white-space:nowrap;
127
+ overflow:hidden;
128
+ text-overflow:ellipsis;
129
+ }
130
+ .stk-table.header-text-overflow .table-header-cell-wrapper{
131
+ white-space:nowrap;
132
+ overflow:hidden;
133
+ }
134
+ .stk-table.header-text-overflow .table-header-title{
135
+ text-overflow:ellipsis;
136
+ overflow:hidden;
137
+ }
138
+ .stk-table.virtual{
139
+ }
140
+ .stk-table.virtual .table-header-cell-wrapper{
141
+ overflow:hidden;
142
+ max-height:calc(var(--header-row-height) * 1);
143
+ max-height:calc(var(--header-row-height) * var(--row-span, 1));
144
+ }
145
+ .stk-table.virtual .table-header-cell-wrapper .table-header-title{
146
+ max-height:inherit;
147
+ }
148
+ .stk-table.virtual tbody td{
149
+ height:var(--row-height);
150
+ }
151
+ .stk-table.virtual tbody td .table-cell-wrapper{
152
+ max-height:var(--row-height);
153
+ overflow:hidden;
154
+ }
155
+ .stk-table.virtual .padding-top-tr td{
156
+ height:0;
157
+ }
158
+ .stk-table.virtual .expand-cell .table-cell-wrapper{
159
+ white-space:nowrap;
160
+ }
161
+ .stk-table.auto-row-height tbody td{
162
+ height:auto;
163
+ height:initial;
164
+ }
165
+ .stk-table.auto-row-height tbody td .table-cell-wrapper{
166
+ max-height:none;
167
+ max-height:initial;
168
+ overflow:visible;
169
+ overflow:initial;
170
+ }
171
+ .stk-table.fixed-relative-mode th{
172
+ position:relative;
173
+ }
174
+ .stk-table.fixed-relative-mode .fixed-cell--active{
175
+ position:relative;
176
+ }
177
+ .stk-table.scroll-row-by-row .stk-table-main{
178
+ position:sticky;
179
+ top:0;
180
+ }
181
+ .stk-table .row-by-row-table-height{
182
+ width:1px;
183
+ position:absolute;
184
+ left:0;
185
+ }
186
+ .stk-table th,
187
+ .stk-table td{
188
+ font-size:14px;
189
+ box-sizing:border-box;
190
+ padding:var(--cell-padding-y) var(--cell-padding-x);
191
+ }
192
+ .stk-table th{
193
+ color:var(--th-color);
194
+ background-color:inherit;
195
+ z-index:2;
196
+ position:sticky;
197
+ }
198
+ .stk-table th.sortable{
199
+ cursor:pointer;
200
+ }
201
+ .stk-table th:not(.sorter-desc):not(.sorter-asc):hover .table-header-sorter .arrow-up{
202
+ fill:var(--sort-arrow-hover-color);
203
+ }
204
+ .stk-table th:not(.sorter-desc):not(.sorter-asc):hover .table-header-sorter .arrow-down{
205
+ fill:var(--sort-arrow-hover-color);
206
+ }
207
+ .stk-table th.sorter-desc .table-header-sorter{
208
+ display:inline;
209
+ }
210
+ .stk-table th.sorter-desc .table-header-sorter .arrow-up{
211
+ fill:var(--sort-arrow-active-sub-color);
212
+ }
213
+ .stk-table th.sorter-desc .table-header-sorter .arrow-down{
214
+ fill:var(--sort-arrow-active-color);
215
+ }
216
+ .stk-table th.sorter-asc .table-header-sorter{
217
+ display:inline;
218
+ }
219
+ .stk-table th.sorter-asc .table-header-sorter .arrow-up{
220
+ fill:var(--sort-arrow-active-color);
221
+ }
222
+ .stk-table th.sorter-asc .table-header-sorter .arrow-down{
223
+ fill:var(--sort-arrow-active-sub-color);
224
+ }
225
+ .stk-table thead tr{
226
+ background-color:var(--th-bgc);
227
+ height:var(--header-row-height);
228
+ }
229
+ .stk-table tbody tr{
230
+ background-color:var(--td-bgc);
231
+ height:var(--row-height);
232
+ }
233
+ .stk-table .vt-x-left,
234
+ .stk-table .vt-x-right{
235
+ padding:0;
236
+ background:none;
237
+ pointer-events:none;
238
+ }
239
+ .stk-table .column-resize-indicator{
240
+ width:0;
241
+ height:100%;
242
+ border-left:2px solid var(--col-resize-indicator-color);
243
+ position:absolute;
244
+ z-index:10;
245
+ display:none;
246
+ pointer-events:none;
247
+ }
248
+ .stk-table .stk-table-main{
249
+ border-spacing:0;
250
+ border-collapse:separate;
251
+ width:-moz-fit-content;
252
+ width:fit-content;
253
+ min-width:100%;
254
+ }
255
+ .stk-table .stk-table-main.fixed-mode{
256
+ table-layout:fixed;
257
+ min-width:-moz-min-content;
258
+ min-width:min-content;
259
+ }
260
+ .stk-table .fixed-cell{
261
+ background-color:inherit;
262
+ }
263
+ .stk-table .highlight-cell{
264
+ animation:stk-table-dim var(--highlight-duration);
265
+ animation-timing-function:var(--highlight-timing-function);
266
+ }
267
+ .stk-table .seq-column{
268
+ text-align:center;
269
+ }
270
+ .stk-table .expand-cell{
271
+ cursor:pointer;
272
+ }
273
+ .stk-table .expand-cell .expanded-cell-wrapper::before{
274
+ content:'';
275
+ display:inline-block;
276
+ margin:0 2px;
277
+ width:0;
278
+ height:0;
279
+ border-left:5px solid #757699;
280
+ border-top:4px solid transparent;
281
+ border-bottom:4px solid transparent;
282
+ transition:transform 0.2s ease;
283
+ }
284
+ .stk-table .expand-cell .expanded-cell-wrapper > span{
285
+ margin-left:var(--cell-padding-x);
286
+ }
287
+ .stk-table .expand-cell.expanded .table-cell-wrapper::before{
288
+ transform:rotate(90deg);
289
+ }
290
+ .stk-table .drag-row-cell .table-cell-wrapper{
291
+ display:inline-flex;
292
+ align-items:center;
293
+ }
294
+ .stk-table .drag-row-cell .drag-row-handle{
295
+ cursor:grab;
296
+ border-radius:4px;
297
+ }
298
+ .stk-table .drag-row-cell .drag-row-handle:hover{
299
+ background-color:var(--drag-handle-hover-color);
300
+ }
301
+ .stk-table .drag-row-cell .drag-row-handle:active{
302
+ cursor:grabbing;
303
+ }
304
+ .stk-table .drag-row-cell .drag-row-handle > svg{
305
+ vertical-align:-2px;
306
+ }
307
+ .stk-table .tr-dragging{
308
+ opacity:0.5;
309
+ }
310
+ .stk-table .tr-dragging-over{
311
+ background-color:var(--tr-hover-bgc);
312
+ }
313
+ .stk-table .fixed-cell--left{
314
+ --shadow-rotate:90deg;
315
+ }
316
+ .stk-table .fixed-cell--left.fixed-cell--shadow::after{
317
+ right:-10px;
318
+ }
319
+ .stk-table .fixed-cell--right{
320
+ --shadow-rotate:-90deg;
321
+ }
322
+ .stk-table .fixed-cell--right.fixed-cell--shadow::after{
323
+ left:-10px;
324
+ }
325
+ .stk-table .fixed-cell--shadow::after{
326
+ content:'';
327
+ width:10px;
328
+ height:100%;
329
+ top:0px;
330
+ position:absolute;
331
+ pointer-events:none;
332
+ background-image:linear-gradient(var(--shadow-rotate), var(--fixed-col-shadow-color-from), var(--fixed-col-shadow-color-to));
333
+ }
334
+ .stk-table .fixed-cell--active{
335
+ position:sticky;
336
+ }
337
+ .stk-table th.fixed-cell--active{
338
+ z-index:3;
339
+ }
340
+ .stk-table td.fixed-cell--active{
341
+ z-index:1;
342
+ }
343
+ .stk-table .table-header-cell-wrapper{
344
+ max-width:100%;
345
+ display:inline-flex;
346
+ align-items:center;
347
+ }
348
+ .stk-table .table-header-title{
349
+ overflow:hidden;
350
+ }
351
+ .stk-table .table-header-sorter{
352
+ flex-shrink:0;
353
+ margin-left:4px;
354
+ width:16px;
355
+ height:16px;
356
+ display:none;
357
+ }
358
+ .stk-table .table-header-sorter .arrow-up,
359
+ .stk-table .table-header-sorter .arrow-down{
360
+ fill:var(--sort-arrow-color);
361
+ }
362
+ .stk-table .table-header-resizer{
363
+ position:absolute;
364
+ top:0;
365
+ bottom:0;
366
+ cursor:col-resize;
367
+ width:var(--resize-handle-width);
368
+ }
369
+ .stk-table .table-header-resizer.left{
370
+ left:0;
371
+ }
372
+ .stk-table .table-header-resizer.right{
373
+ right:0;
374
+ }
375
+ .stk-table .highlight-row{
376
+ animation:stk-table-dim var(--highlight-duration);
377
+ animation-timing-function:var(--highlight-timing-function);
378
+ }
379
+ .stk-table .stk-table-no-data{
380
+ background-color:var(--table-bgc);
381
+ line-height:var(--row-height);
382
+ text-align:center;
383
+ font-size:14px;
384
+ position:sticky;
385
+ left:0px;
386
+ border-right:var(--border-width) solid var(--border-color);
387
+ border-bottom:var(--border-width) solid var(--border-color);
388
+ display:flex;
389
+ flex-direction:column;
390
+ align-items:center;
391
+ justify-content:center;
392
+ }
393
+ .stk-table .stk-table-no-data.no-data-full{
394
+ flex:1;
395
+ }