stk-table-vue 0.0.2 → 0.2.0

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 (22) hide show
  1. package/README.md +137 -5
  2. package/lib/src/StkTable/StkTable.vue.d.ts +367 -335
  3. package/lib/src/StkTable/const.d.ts +1 -0
  4. package/lib/src/StkTable/types/index.d.ts +73 -60
  5. package/lib/src/StkTable/useColResize.d.ts +18 -18
  6. package/lib/src/StkTable/useFixedCol.d.ts +20 -0
  7. package/lib/src/StkTable/useFixedStyle.d.ts +20 -20
  8. package/lib/src/StkTable/useKeyboardArrowScroll.d.ts +17 -14
  9. package/lib/src/StkTable/useThDrag.d.ts +14 -14
  10. package/lib/src/StkTable/useVirtualScroll.d.ts +73 -73
  11. package/lib/src/StkTable/utils.d.ts +23 -23
  12. package/lib/stk-table-vue.js +1490 -1269
  13. package/lib/style.css +294 -286
  14. package/package.json +1 -1
  15. package/src/StkTable/StkTable.vue +149 -64
  16. package/src/StkTable/const.ts +1 -0
  17. package/src/StkTable/style.less +191 -237
  18. package/src/StkTable/types/index.ts +15 -2
  19. package/src/StkTable/useFixedCol.ts +91 -0
  20. package/src/StkTable/useKeyboardArrowScroll.ts +24 -10
  21. package/src/StkTable/useVirtualScroll.ts +50 -10
  22. package/src/vite-env.d.ts +1 -0
package/lib/style.css CHANGED
@@ -1,286 +1,294 @@
1
- @keyframes stkTableDim{
2
- from{
3
- background-color:var(--highlight-color);
4
- }
5
- }
6
- .stk-table{
7
- --row-height:28px;
8
- --cell-padding-x:8px;
9
- --resize-handle-width:4px;
10
- --border-color:#e8e8f4;
11
- --border-width:1px;
12
- --td-bgc:#fff;
13
- --th-bgc:#fafafc;
14
- --th-color:#272841;
15
- --tr-active-bgc:#e6f7ff;
16
- --tr-hover-bgc:rgba(230, 247, 255, 0.7);
17
- --bg-border-top:linear-gradient(180deg, var(--border-color) var(--border-width), transparent var(--border-width));
18
- --bg-border-right:linear-gradient(270deg, var(--border-color) var(--border-width), transparent var(--border-width));
19
- --bg-border-bottom:linear-gradient(0deg, var(--border-color) var(--border-width), transparent var(--border-width));
20
- --bg-border-left:linear-gradient(90deg, var(--border-color) var(--border-width), transparent var(--border-width));
21
- --highlight-color:#71a2fd;
22
- --stripe-bgc:#fafafc;
23
- --sort-arrow-color:#757699;
24
- --sort-arrow-hover-color:#8f90b5;
25
- --sort-arrow-active-color:#1b63d9;
26
- --sort-arrow-active-sub-color:#cbcbe1;
27
- --col-resize-indicator-color:#87879c;
28
- position:relative;
29
- overflow:auto;
30
- display:flex;
31
- flex-direction:column;
32
- }
33
- .stk-table.dark{
34
- --th-bgc:#202029;
35
- --th-color:#C0C0D1;
36
- --td-bgc:#1b1b24;
37
- --border-color:#292933;
38
- --tr-active-bgc:#283f63;
39
- --tr-hover-bgc:#1a2b46;
40
- --table-bgc:#1b1b24;
41
- --highlight-color:#1e4c99;
42
- --stripe-bgc:#202029;
43
- --sort-arrow-color:#5d6064;
44
- --sort-arrow-hover-color:#727782;
45
- --sort-arrow-active-color:#d0d1d2;
46
- --sort-arrow-active-sub-color:#5d6064;
47
- --col-resize-indicator-color:#5d6064;
48
- color:#d1d1e0;
49
- }
50
- .stk-table.headless{
51
- border-top:1px solid var(--border-color);
52
- }
53
- .stk-table.col-resizable .stk-table-main{
54
- width:-moz-fit-content !important;
55
- width:fit-content !important;
56
- min-width:-moz-min-content !important;
57
- min-width:min-content !important;
58
- }
59
- .stk-table.is-col-resizing th{
60
- pointer-events:none;
61
- }
62
- .stk-table.border-h{
63
- --bg-border-right:linear-gradient(transparent, transparent);
64
- --bg-border-left:linear-gradient(transparent, transparent);
65
- }
66
- .stk-table.border-v{
67
- --bg-border-bottom:linear-gradient(transparent, transparent);
68
- }
69
- .stk-table.border .stk-table-main th,
70
- .stk-table.border .stk-table-main td{
71
- background-image:var(--bg-border-right), var(--bg-border-bottom);
72
- }
73
- .stk-table.border .stk-table-main thead tr:first-child th{
74
- background-image:var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
75
- }
76
- .stk-table.border .stk-table-main thead tr:first-child th:first-child{
77
- background-image:var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
78
- }
79
- .stk-table.border .stk-table-main thead tr th:first-child{
80
- background-image:var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
81
- }
82
- .stk-table.border .stk-table-main tbody td:first-child{
83
- background-image:var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
84
- }
85
- .stk-table.border.virtual-x .stk-table-main .virtual-x-left{
86
- background:none;
87
- pointer-events:none;
88
- }
89
- .stk-table.border.virtual-x .stk-table-main .virtual-x-right{
90
- padding:0;
91
- background:none;
92
- pointer-events:none;
93
- }
94
- .stk-table.border.virtual-x .stk-table-main thead tr:first-child .virtual-x-left + th{
95
- background-image:var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
96
- }
97
- .stk-table.border.virtual-x .stk-table-main tr .virtual-x-left + th{
98
- background-image:var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
99
- }
100
- .stk-table.border-body-v .stk-table-main tbody{
101
- --bg-border-bottom:linear-gradient(transparent, transparent);
102
- }
103
- .stk-table.stripe .stk-table-main{
104
- }
105
- .stk-table.stripe .stk-table-main tbody tr:nth-child(odd){
106
- background-color:var(--stripe-bgc);
107
- }
108
- .stk-table.stripe .stk-table-main tbody tr:hover{
109
- background-color:var(--tr-hover-bgc);
110
- }
111
- .stk-table .column-resize-indicator{
112
- width:0;
113
- height:100%;
114
- border-left:2px solid var(--col-resize-indicator-color);
115
- position:absolute;
116
- z-index:10;
117
- display:none;
118
- pointer-events:none;
119
- }
120
- .stk-table .stk-table-main{
121
- border-spacing:0;
122
- border-collapse:separate;
123
- width:-moz-fit-content;
124
- width:fit-content;
125
- min-width:100%;
126
- }
127
- .stk-table .stk-table-main.fixed-mode{
128
- table-layout:fixed;
129
- min-width:-moz-min-content;
130
- min-width:min-content;
131
- }
132
- .stk-table .stk-table-main th,
133
- .stk-table .stk-table-main td{
134
- z-index:1;
135
- height:var(--row-height);
136
- font-size:14px;
137
- box-sizing:border-box;
138
- padding:0 var(--cell-padding-x);
139
- }
140
- .stk-table .stk-table-main th{
141
- color:var(--th-color);
142
- }
143
- .stk-table .stk-table-main thead tr:first-child th{
144
- position:sticky;
145
- top:0;
146
- }
147
- .stk-table .stk-table-main thead tr th{
148
- background-color:var(--th-bgc);
149
- }
150
- .stk-table .stk-table-main thead tr th.sortable{
151
- cursor:pointer;
152
- }
153
- .stk-table .stk-table-main thead tr th.text-overflow .table-header-cell-wrapper{
154
- white-space:nowrap;
155
- overflow:hidden;
156
- }
157
- .stk-table .stk-table-main thead tr th.text-overflow .table-header-cell-wrapper .table-header-title{
158
- text-overflow:ellipsis;
159
- overflow:hidden;
160
- }
161
- .stk-table .stk-table-main thead tr th:not(.sorter-desc):not(.sorter-asc):hover .table-header-cell-wrapper .table-header-sorter #arrow-up{
162
- fill:var(--sort-arrow-hover-color);
163
- }
164
- .stk-table .stk-table-main thead tr th:not(.sorter-desc):not(.sorter-asc):hover .table-header-cell-wrapper .table-header-sorter #arrow-down{
165
- fill:var(--sort-arrow-hover-color);
166
- }
167
- .stk-table .stk-table-main thead tr th.sorter-desc .table-header-cell-wrapper .table-header-sorter{
168
- display:inline;
169
- display:initial;
170
- }
171
- .stk-table .stk-table-main thead tr th.sorter-desc .table-header-cell-wrapper .table-header-sorter #arrow-up{
172
- fill:var(--sort-arrow-active-sub-color);
173
- }
174
- .stk-table .stk-table-main thead tr th.sorter-desc .table-header-cell-wrapper .table-header-sorter #arrow-down{
175
- fill:var(--sort-arrow-active-color);
176
- }
177
- .stk-table .stk-table-main thead tr th.sorter-asc .table-header-cell-wrapper .table-header-sorter{
178
- display:inline;
179
- display:initial;
180
- }
181
- .stk-table .stk-table-main thead tr th.sorter-asc .table-header-cell-wrapper .table-header-sorter #arrow-up{
182
- fill:var(--sort-arrow-active-color);
183
- }
184
- .stk-table .stk-table-main thead tr th.sorter-asc .table-header-cell-wrapper .table-header-sorter #arrow-down{
185
- fill:var(--sort-arrow-active-sub-color);
186
- }
187
- .stk-table .stk-table-main thead tr th .table-header-cell-wrapper{
188
- max-width:100%;
189
- display:inline-flex;
190
- align-items:center;
191
- }
192
- .stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-title{
193
- overflow:hidden;
194
- align-self:flex-start;
195
- }
196
- .stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-sorter{
197
- flex-shrink:0;
198
- margin-left:4px;
199
- width:16px;
200
- height:16px;
201
- display:none;
202
- }
203
- .stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-sorter #arrow-up,
204
- .stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-sorter #arrow-down{
205
- fill:var(--sort-arrow-color);
206
- }
207
- .stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-resizer{
208
- position:absolute;
209
- top:0;
210
- bottom:0;
211
- cursor:col-resize;
212
- width:var(--resize-handle-width);
213
- }
214
- .stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-resizer.left{
215
- left:0;
216
- }
217
- .stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-resizer.right{
218
- right:0;
219
- }
220
- .stk-table .stk-table-main tbody tr{
221
- background-color:var(--td-bgc);
222
- }
223
- .stk-table .stk-table-main tbody tr.highlight-row{
224
- animation:stkTableDim 2s linear;
225
- }
226
- .stk-table .stk-table-main tbody tr.hover,
227
- .stk-table .stk-table-main tbody tr:hover{
228
- background-color:var(--tr-hover-bgc);
229
- }
230
- .stk-table .stk-table-main tbody tr.active{
231
- background-color:var(--tr-active-bgc);
232
- }
233
- .stk-table .stk-table-main tbody tr td{
234
- }
235
- .stk-table .stk-table-main tbody tr td.fixed-cell{
236
- background-color:inherit;
237
- }
238
- .stk-table .stk-table-main tbody tr td.highlight-cell{
239
- animation:stkTableDim 2s linear;
240
- }
241
- .stk-table .stk-table-main tbody tr td.text-overflow .table-cell-wrapper{
242
- white-space:nowrap;
243
- overflow:hidden;
244
- text-overflow:ellipsis;
245
- }
246
- .stk-table .stk-table-no-data{
247
- background-color:var(--table-bgc);
248
- line-height:var(--row-height);
249
- text-align:center;
250
- font-size:14px;
251
- position:sticky;
252
- left:0px;
253
- border-left:var(--border-width) solid var(--border-color);
254
- border-right:var(--border-width) solid var(--border-color);
255
- border-bottom:var(--border-width) solid var(--border-color);
256
- display:flex;
257
- flex-direction:column;
258
- align-items:center;
259
- justify-content:center;
260
- }
261
- .stk-table .stk-table-no-data.no-data-full{
262
- flex:1;
263
- }
264
- .stk-table.virtual .stk-table-main thead tr th{
265
- }
266
- .stk-table.virtual .stk-table-main thead tr th .table-header-cell-wrapper{
267
- overflow:hidden;
268
- max-height:var(--row-height);
269
- }
270
- .stk-table.virtual .stk-table-main tbody{
271
- position:relative;
272
- }
273
- .stk-table.virtual .stk-table-main tbody tr.padding-top-tr td{
274
- height:0;
275
- }
276
- .stk-table.virtual .stk-table-main tbody tr td{
277
- height:var(--row-height);
278
- line-height:1;
279
- }
280
- .stk-table.virtual .stk-table-main tbody tr td .table-cell-wrapper{
281
- max-height:var(--row-height);
282
- overflow:hidden;
283
- }
284
- .stk-table.virtual-x .stk-table-main .virtual-x-left{
285
- padding:0;
286
- }
1
+ @keyframes stkTableDim{
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-x:8px;
10
+ --resize-handle-width:4px;
11
+ --border-color:#e8e8f4;
12
+ --border-width:1px;
13
+ --td-bgc:#fff;
14
+ --th-bgc:#fafafc;
15
+ --th-color:#272841;
16
+ --tr-active-bgc:#e6f7ff;
17
+ --tr-hover-bgc:rgba(230, 247, 255, 0.7);
18
+ --bg-border-top:linear-gradient(180deg, var(--border-color) var(--border-width), transparent var(--border-width));
19
+ --bg-border-right:linear-gradient(270deg, var(--border-color) var(--border-width), transparent var(--border-width));
20
+ --bg-border-bottom:linear-gradient(0deg, var(--border-color) var(--border-width), transparent var(--border-width));
21
+ --bg-border-left:linear-gradient(90deg, var(--border-color) var(--border-width), transparent var(--border-width));
22
+ --highlight-color:#71a2fd;
23
+ --stripe-bgc:#fafafc;
24
+ --sort-arrow-color:#757699;
25
+ --sort-arrow-hover-color:#8f90b5;
26
+ --sort-arrow-active-color:#1b63d9;
27
+ --sort-arrow-active-sub-color:#cbcbe1;
28
+ --col-resize-indicator-color:#87879c;
29
+ --fixed-col-shadow-color-from:rgba(0, 0, 0, 0.1);
30
+ --fixed-col-shadow-color-to:rgba(0, 0, 0, 0);
31
+ position:relative;
32
+ overflow:auto;
33
+ display:flex;
34
+ flex-direction:column;
35
+ border-left:1px solid #e8e8f4;
36
+ border-left:1px solid var(--border-color);
37
+ }
38
+ .stk-table.dark{
39
+ --th-bgc:#202029;
40
+ --th-color:#C0C0D1;
41
+ --td-bgc:#1b1b24;
42
+ --border-color:#292933;
43
+ --tr-active-bgc:#283f63;
44
+ --tr-hover-bgc:#1a2b46;
45
+ --table-bgc:#1b1b24;
46
+ --highlight-color:#1e4c99;
47
+ --stripe-bgc:#202029;
48
+ --sort-arrow-color:#5d6064;
49
+ --sort-arrow-hover-color:#727782;
50
+ --sort-arrow-active-color:#d0d1d2;
51
+ --sort-arrow-active-sub-color:#5d6064;
52
+ --col-resize-indicator-color:#5d6064;
53
+ --fixed-col-shadow-color-from:rgba(135, 135, 156, 0.1);
54
+ --fixed-col-shadow-color-to:rgba(135, 135, 156, 0);
55
+ color:#d1d1e0;
56
+ }
57
+ .stk-table.headless{
58
+ border-top:1px solid var(--border-color);
59
+ }
60
+ .stk-table.col-resizable .stk-table-main{
61
+ width:-moz-fit-content !important;
62
+ width:fit-content !important;
63
+ min-width:-moz-min-content !important;
64
+ min-width:min-content !important;
65
+ }
66
+ .stk-table.is-col-resizing th{
67
+ pointer-events:none;
68
+ }
69
+ .stk-table.border-h{
70
+ --bg-border-right:linear-gradient(transparent, transparent);
71
+ --bg-border-left:linear-gradient(transparent, transparent);
72
+ }
73
+ .stk-table.border-v{
74
+ --bg-border-bottom:linear-gradient(transparent, transparent);
75
+ }
76
+ .stk-table.border th,
77
+ .stk-table.border td{
78
+ background-image:var(--bg-border-right), var(--bg-border-bottom);
79
+ }
80
+ .stk-table.border thead tr:first-child th{
81
+ background-image:var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
82
+ }
83
+ .stk-table.border.virtual-x .virtual-x-left{
84
+ background:none;
85
+ pointer-events:none;
86
+ }
87
+ .stk-table.border.virtual-x .virtual-x-right{
88
+ padding:0;
89
+ background:none;
90
+ pointer-events:none;
91
+ }
92
+ .stk-table.border-body-v tbody{
93
+ --bg-border-bottom:linear-gradient(transparent, transparent);
94
+ }
95
+ .stk-table.stripe{
96
+ }
97
+ .stk-table.stripe tbody tr:nth-child(odd){
98
+ background-color:var(--stripe-bgc);
99
+ }
100
+ .stk-table .column-resize-indicator{
101
+ width:0;
102
+ height:100%;
103
+ border-left:2px solid var(--col-resize-indicator-color);
104
+ position:absolute;
105
+ z-index:10;
106
+ display:none;
107
+ pointer-events:none;
108
+ }
109
+ .stk-table .stk-table-main{
110
+ border-spacing:0;
111
+ border-collapse:separate;
112
+ width:-moz-fit-content;
113
+ width:fit-content;
114
+ min-width:100%;
115
+ }
116
+ .stk-table .stk-table-main.fixed-mode{
117
+ table-layout:fixed;
118
+ min-width:-moz-min-content;
119
+ min-width:min-content;
120
+ }
121
+ .stk-table .stk-table-main th,
122
+ .stk-table .stk-table-main td{
123
+ z-index:1;
124
+ font-size:14px;
125
+ box-sizing:border-box;
126
+ padding:0 var(--cell-padding-x);
127
+ }
128
+ .stk-table .stk-table-main th{
129
+ color:var(--th-color);
130
+ background-color:var(--th-bgc);
131
+ }
132
+ .stk-table .stk-table-main th.sortable{
133
+ cursor:pointer;
134
+ }
135
+ .stk-table .stk-table-main th.text-overflow .table-header-cell-wrapper{
136
+ white-space:nowrap;
137
+ overflow:hidden;
138
+ }
139
+ .stk-table .stk-table-main th.text-overflow .table-header-title{
140
+ text-overflow:ellipsis;
141
+ overflow:hidden;
142
+ }
143
+ .stk-table .stk-table-main td.fixed-cell{
144
+ background-color:inherit;
145
+ }
146
+ .stk-table .stk-table-main td.highlight-cell{
147
+ animation:stkTableDim 2s linear;
148
+ }
149
+ .stk-table .stk-table-main td.text-overflow .table-cell-wrapper{
150
+ white-space:nowrap;
151
+ overflow:hidden;
152
+ text-overflow:ellipsis;
153
+ }
154
+ .stk-table .stk-table-main .fixed-cell--left{
155
+ --shadow-rotate:90deg;
156
+ }
157
+ .stk-table .stk-table-main .fixed-cell--left.fixed-cell--shadow::after{
158
+ right:-10px;
159
+ }
160
+ .stk-table .stk-table-main .fixed-cell--right{
161
+ --shadow-rotate:-90deg;
162
+ }
163
+ .stk-table .stk-table-main .fixed-cell--right.fixed-cell--shadow::after{
164
+ left:-10px;
165
+ }
166
+ .stk-table .stk-table-main .fixed-cell--shadow::after{
167
+ content:'';
168
+ width:10px;
169
+ height:100%;
170
+ top:0px;
171
+ position:absolute;
172
+ pointer-events:none;
173
+ background-image:linear-gradient(var(--shadow-rotate), var(--fixed-col-shadow-color-from), var(--fixed-col-shadow-color-to));
174
+ }
175
+ .stk-table .stk-table-main thead tr{
176
+ height:var(--header-row-height);
177
+ }
178
+ .stk-table .stk-table-main thead tr:first-child th{
179
+ position:sticky;
180
+ top:0;
181
+ }
182
+ .stk-table .stk-table-main th:not(.sorter-desc):not(.sorter-asc):hover .table-header-sorter .arrow-up{
183
+ fill:var(--sort-arrow-hover-color);
184
+ }
185
+ .stk-table .stk-table-main th:not(.sorter-desc):not(.sorter-asc):hover .table-header-sorter .arrow-down{
186
+ fill:var(--sort-arrow-hover-color);
187
+ }
188
+ .stk-table .stk-table-main th.sorter-desc .table-header-sorter{
189
+ display:inline;
190
+ display:initial;
191
+ }
192
+ .stk-table .stk-table-main th.sorter-desc .table-header-sorter .arrow-up{
193
+ fill:var(--sort-arrow-active-sub-color);
194
+ }
195
+ .stk-table .stk-table-main th.sorter-desc .table-header-sorter .arrow-down{
196
+ fill:var(--sort-arrow-active-color);
197
+ }
198
+ .stk-table .stk-table-main th.sorter-asc .table-header-sorter{
199
+ display:inline;
200
+ display:initial;
201
+ }
202
+ .stk-table .stk-table-main th.sorter-asc .table-header-sorter .arrow-up{
203
+ fill:var(--sort-arrow-active-color);
204
+ }
205
+ .stk-table .stk-table-main th.sorter-asc .table-header-sorter .arrow-down{
206
+ fill:var(--sort-arrow-active-sub-color);
207
+ }
208
+ .stk-table .stk-table-main .table-header-cell-wrapper{
209
+ max-width:100%;
210
+ display:inline-flex;
211
+ align-items:center;
212
+ }
213
+ .stk-table .stk-table-main .table-header-title{
214
+ overflow:hidden;
215
+ align-self:flex-start;
216
+ }
217
+ .stk-table .stk-table-main .table-header-sorter{
218
+ flex-shrink:0;
219
+ margin-left:4px;
220
+ width:16px;
221
+ height:16px;
222
+ display:none;
223
+ }
224
+ .stk-table .stk-table-main .table-header-sorter .arrow-up,
225
+ .stk-table .stk-table-main .table-header-sorter .arrow-down{
226
+ fill:var(--sort-arrow-color);
227
+ }
228
+ .stk-table .stk-table-main .table-header-resizer{
229
+ position:absolute;
230
+ top:0;
231
+ bottom:0;
232
+ cursor:col-resize;
233
+ width:var(--resize-handle-width);
234
+ }
235
+ .stk-table .stk-table-main .table-header-resizer.left{
236
+ left:0;
237
+ }
238
+ .stk-table .stk-table-main .table-header-resizer.right{
239
+ right:0;
240
+ }
241
+ .stk-table .stk-table-main tbody tr{
242
+ background-color:var(--td-bgc);
243
+ height:var(--row-height);
244
+ }
245
+ .stk-table .stk-table-main tbody tr.highlight-row{
246
+ animation:stkTableDim 2s linear;
247
+ }
248
+ .stk-table .stk-table-main tbody tr.hover,
249
+ .stk-table .stk-table-main tbody tr:hover{
250
+ background-color:var(--tr-hover-bgc);
251
+ }
252
+ .stk-table .stk-table-main tbody tr.active{
253
+ background-color:var(--tr-active-bgc);
254
+ }
255
+ .stk-table .stk-table-no-data{
256
+ background-color:var(--table-bgc);
257
+ line-height:var(--row-height);
258
+ text-align:center;
259
+ font-size:14px;
260
+ position:sticky;
261
+ left:0px;
262
+ border-right:var(--border-width) solid var(--border-color);
263
+ border-bottom:var(--border-width) solid var(--border-color);
264
+ display:flex;
265
+ flex-direction:column;
266
+ align-items:center;
267
+ justify-content:center;
268
+ }
269
+ .stk-table .stk-table-no-data.no-data-full{
270
+ flex:1;
271
+ }
272
+ .stk-table.virtual{
273
+ }
274
+ .stk-table.virtual .table-header-cell-wrapper{
275
+ overflow:hidden;
276
+ max-height:var(--header-row-height);
277
+ }
278
+ .stk-table.virtual tbody{
279
+ position:relative;
280
+ }
281
+ .stk-table.virtual tbody tr td{
282
+ height:var(--row-height);
283
+ line-height:1;
284
+ }
285
+ .stk-table.virtual tbody tr td .table-cell-wrapper{
286
+ max-height:var(--row-height);
287
+ overflow:hidden;
288
+ }
289
+ .stk-table.virtual .padding-top-tr td{
290
+ height:0;
291
+ }
292
+ .stk-table.virtual-x .virtual-x-left{
293
+ padding:0;
294
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "stk-table-vue",
3
- "version": "0.0.2",
3
+ "version": "0.2.0",
4
4
  "description": "simple realtime virtual table for vue3",
5
5
  "main": "./lib/stk-table-vue.js",
6
6
  "types": "./lib/StkTable/index.d.ts",