@are-visual/virtual-table 0.0.1

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 (46) hide show
  1. package/README.md +548 -0
  2. package/index.d.ts +311 -0
  3. package/index.esm.js +1771 -0
  4. package/index.esm.js.map +1 -0
  5. package/middleware/column-resize/index.d.ts +19 -0
  6. package/middleware/column-resize/index.js +130 -0
  7. package/middleware/column-resize/index.js.map +1 -0
  8. package/middleware/column-resize/styles.css +8 -0
  9. package/middleware/column-resize/styles.scss +10 -0
  10. package/middleware/empty/index.d.ts +10 -0
  11. package/middleware/empty/index.js +73 -0
  12. package/middleware/empty/index.js.map +1 -0
  13. package/middleware/expandable/index.d.ts +37 -0
  14. package/middleware/expandable/index.js +239 -0
  15. package/middleware/expandable/index.js.map +1 -0
  16. package/middleware/expandable/styles.css +49 -0
  17. package/middleware/expandable/styles.scss +73 -0
  18. package/middleware/horizontal-scroll-bar/index.d.ts +15 -0
  19. package/middleware/horizontal-scroll-bar/index.js +90 -0
  20. package/middleware/horizontal-scroll-bar/index.js.map +1 -0
  21. package/middleware/horizontal-scroll-bar/styles.css +11 -0
  22. package/middleware/horizontal-scroll-bar/styles.scss +13 -0
  23. package/middleware/loading/index.d.ts +7 -0
  24. package/middleware/loading/index.js +73 -0
  25. package/middleware/loading/index.js.map +1 -0
  26. package/middleware/loading/styles.css +17 -0
  27. package/middleware/loading/styles.scss +27 -0
  28. package/middleware/selection/index.d.ts +47 -0
  29. package/middleware/selection/index.js +282 -0
  30. package/middleware/selection/index.js.map +1 -0
  31. package/middleware/selection/styles.css +13 -0
  32. package/middleware/selection/styles.scss +20 -0
  33. package/middleware/summary/index.d.ts +36 -0
  34. package/middleware/summary/index.js +203 -0
  35. package/middleware/summary/index.js.map +1 -0
  36. package/middleware/summary/styles.css +36 -0
  37. package/middleware/summary/styles.scss +45 -0
  38. package/middleware/utils/getScrollbarSize.d.ts +5 -0
  39. package/middleware/utils/getScrollbarSize.js +15 -0
  40. package/middleware/utils/getScrollbarSize.js.map +1 -0
  41. package/middleware/utils/useControllableValue.d.ts +16 -0
  42. package/middleware/utils/useControllableValue.js +28 -0
  43. package/middleware/utils/useControllableValue.js.map +1 -0
  44. package/package.json +34 -0
  45. package/styles/table.css +142 -0
  46. package/styles/table.scss +186 -0
package/styles/table.scss ADDED
@@ -0,0 +1,186 @@
1
+ :root {
2
+ --virtual-table-header-bg: #fafafa;
3
+ --virtual-table-border-color: #f0f0f0;
4
+ --virtual-table-row-hover-bg: #fafafa;
5
+ --virtual-table-font-size: 14px;
6
+ --virtual-table-split-shadow: rgba(5, 5, 5, 0.06);
7
+ --virtual-table-header-split: #c2c2c2;
8
+ --virtual-table-fixed-cell-background: #fff;
9
+ --virtual-table-cell-padding: 8px;
10
+ }
11
+
12
+ [class^='virtual-table'] {
13
+ box-sizing: border-box;
14
+ }
15
+
16
+ .virtual-table {
17
+ width: 100%;
18
+ text-align: left;
19
+ font-size: var(--virtual-table-font-size);
20
+ line-height: 1.57142;
21
+
22
+ table {
23
+ border-collapse: separate;
24
+ }
25
+
26
+ &-header {
27
+ overflow: auto hidden;
28
+ scrollbar-width: none;
29
+
30
+ &::-webkit-scrollbar {
31
+ display: none;
32
+ }
33
+
34
+ >table {
35
+ border-spacing: 0;
36
+ table-layout: fixed;
37
+ width: 100%;
38
+ }
39
+ }
40
+
41
+ &-header-sticky {
42
+ position: sticky;
43
+ top: 0;
44
+ left: 0;
45
+ z-index: 2;
46
+ background-color: var(--virtual-table-fixed-cell-background);
47
+ }
48
+
49
+ &-thead {}
50
+
51
+ &-header-cell {
52
+ position: relative;
53
+ padding: var(--virtual-table-cell-padding);
54
+ text-align: start;
55
+ background-color: var(--virtual-table-header-bg);
56
+ border-bottom: 1px solid var(--virtual-table-border-color);
57
+ font-weight: 600;
58
+ font-size: 14px;
59
+
60
+ &:not(:last-child, :first-child.virtual-table-selection-column, :first-child.virtual-table-expand-column, :first-child.virtual-table-expand-column + .virtual-table-selection-column, .no-split)::before {
61
+ position: absolute;
62
+ top: 50%;
63
+ inset-inline-end: 0;
64
+ width: 1px;
65
+ height: 1.2em;
66
+ background-color: var(--virtual-table-header-split);
67
+ transform: translateY(-50%);
68
+ transition: background-color 0.2s;
69
+ content: '';
70
+ }
71
+ }
72
+
73
+ &-body-wrapper {
74
+ overflow: auto hidden;
75
+ scrollbar-width: none;
76
+
77
+ &::-webkit-scrollbar {
78
+ display: none;
79
+ }
80
+ }
81
+
82
+ &-body {
83
+ table-layout: fixed;
84
+ width: 100%;
85
+ border-spacing: 0;
86
+ }
87
+
88
+ &-row {
89
+ &:not(.no-hover):hover>.virtual-table-cell {
90
+ background-color: var(--virtual-table-row-hover-bg);
91
+ }
92
+ }
93
+
94
+ &-cell {
95
+ position: relative;
96
+ padding: var(--virtual-table-cell-padding);
97
+ transition:
98
+ background 0.2s,
99
+ border-color 0.2s;
100
+ border-bottom: 1px solid var(--virtual-table-border-color);
101
+ overflow-wrap: break-word;
102
+ }
103
+
104
+ &-sticky-cell {
105
+ position: sticky !important;
106
+ z-index: 1;
107
+
108
+ &:not(.virtual-table-header-cell) {
109
+ background-color: var(--virtual-table-fixed-cell-background);
110
+ }
111
+ }
112
+
113
+ &-cell-fix-left-last {
114
+ &::after {
115
+ content: '';
116
+ position: absolute;
117
+ top: 0;
118
+ right: 0;
119
+ bottom: -1px;
120
+ width: 30px;
121
+ transform: translateX(100%);
122
+ transition: box-shadow 0.3s;
123
+ pointer-events: none;
124
+ }
125
+ }
126
+
127
+ &-cell-fix-right-first {
128
+ &::after {
129
+ content: '';
130
+ position: absolute;
131
+ top: 0;
132
+ bottom: -1px;
133
+ left: 0;
134
+ width: 30px;
135
+ transform: translateX(-100%);
136
+ transition: box-shadow 0.3s;
137
+ pointer-events: none;
138
+ }
139
+ }
140
+
141
+ &-has-fix-left {
142
+ .virtual-table-sticky-cell:not(.virtual-table-header-cell) {
143
+ background-color: var(--virtual-table-fixed-cell-background);
144
+ }
145
+
146
+ .virtual-table-cell-fix-left-last::after {
147
+ box-shadow: inset 10px 0 8px -8px var(--virtual-table-split-shadow);
148
+ }
149
+
150
+ .virtual-table-cell-fix-left-last::before {
151
+ background-color: transparent !important;
152
+ }
153
+ }
154
+
155
+ &-has-fix-right {
156
+ .virtual-table-cell-fix-right-first::after {
157
+ box-shadow: inset -10px 0 8px -8px var(--virtual-table-split-shadow);
158
+ }
159
+
160
+ .virtual-table-cell-fix-right-first::after {
161
+ background-color: transparent;
162
+ }
163
+ }
164
+
165
+ &-align-right {
166
+ text-align: end;
167
+ }
168
+
169
+ &-align-center {
170
+ text-align: center;
171
+ }
172
+
173
+ &-bordered {
174
+
175
+ .virtual-table-cell,
176
+ .virtual-table-header-cell {
177
+ border-inline-end: 1px solid var(--virtual-table-border-color);
178
+ }
179
+
180
+ .virtual-table-header-cell {
181
+ &::before {
182
+ background-color: transparent !important;
183
+ }
184
+ }
185
+ }
186
+ }