@aloudata/aloudata-design 2.5.1 → 2.5.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.
- package/dist/DataPreviewTable/components/Body/Error.d.ts +1 -2
- package/dist/DataPreviewTable/components/Body/Error.js +5 -7
- package/dist/DataPreviewTable/components/Header/index.d.ts +1 -0
- package/dist/DataPreviewTable/components/Header/index.js +3 -4
- package/dist/DataPreviewTable/index.js +16 -15
- package/dist/DataPreviewTable/interface.d.ts +2 -2
- package/dist/DataPreviewTable/style/index.less +6 -0
- package/dist/Table/helper.d.ts +6 -4
- package/dist/Table/helper.js +20 -5
- package/dist/Table/hooks/useFixed.d.ts +10 -0
- package/dist/Table/hooks/useFixed.js +56 -0
- package/dist/Table/hooks/useScroll.d.ts +5 -1
- package/dist/Table/hooks/useScroll.js +79 -11
- package/dist/Table/index.js +56 -51
- package/dist/Table/style/index.less +70 -4
- package/dist/Table/types.d.ts +4 -0
- package/dist/ald.min.css +1 -1
- package/package.json +2 -1
|
@@ -4,8 +4,9 @@
|
|
|
4
4
|
@import '../../ScrollArea/style/index.less';
|
|
5
5
|
@import '../../Empty/style/index.less';
|
|
6
6
|
|
|
7
|
+
@header-height: 40px;
|
|
8
|
+
|
|
7
9
|
.ald-table-container {
|
|
8
|
-
position: relative;
|
|
9
10
|
display: flex;
|
|
10
11
|
flex-direction: column;
|
|
11
12
|
width: 100%;
|
|
@@ -22,7 +23,6 @@
|
|
|
22
23
|
display: flex;
|
|
23
24
|
flex-direction: column;
|
|
24
25
|
border-spacing: 0;
|
|
25
|
-
position: relative;
|
|
26
26
|
|
|
27
27
|
.ald-table-spin {
|
|
28
28
|
position: absolute;
|
|
@@ -86,6 +86,55 @@
|
|
|
86
86
|
position: relative;
|
|
87
87
|
border-bottom: 1px solid var(--alias-colors-border-subtle, #f3f4f6);
|
|
88
88
|
flex: 0 0 auto;
|
|
89
|
+
|
|
90
|
+
&.ald-table-fixed-left,
|
|
91
|
+
&.ald-table-fixed-right {
|
|
92
|
+
position: sticky;
|
|
93
|
+
background-color: #fff;
|
|
94
|
+
z-index: 2;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.fixed-left-shadow {
|
|
99
|
+
&::after {
|
|
100
|
+
position: absolute;
|
|
101
|
+
right: 0;
|
|
102
|
+
transform: translateX(100%);
|
|
103
|
+
top: 0;
|
|
104
|
+
bottom: 0;
|
|
105
|
+
width: 30px;
|
|
106
|
+
transition: box-shadow 0.2s;
|
|
107
|
+
content: '';
|
|
108
|
+
pointer-events: none;
|
|
109
|
+
box-shadow: inset 10px 0 8px -8px rgba(5, 5, 5, 0.06);
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.fixed-right-shadow {
|
|
114
|
+
&::after {
|
|
115
|
+
position: absolute;
|
|
116
|
+
left: 0;
|
|
117
|
+
transform: translateX(-100%);
|
|
118
|
+
top: 0;
|
|
119
|
+
bottom: 0;
|
|
120
|
+
width: 30px;
|
|
121
|
+
transition: box-shadow 0.2s;
|
|
122
|
+
content: '';
|
|
123
|
+
pointer-events: none;
|
|
124
|
+
box-shadow: inset -10px 0 8px -8px rgba(5, 5, 5, 0.06);
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
&.ald-table-ping-left {
|
|
129
|
+
.ald-table-fixed-left {
|
|
130
|
+
.fixed-left-shadow();
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
&.ald-table-ping-right {
|
|
135
|
+
.ald-table-fixed-right {
|
|
136
|
+
.fixed-right-shadow();
|
|
137
|
+
}
|
|
89
138
|
}
|
|
90
139
|
|
|
91
140
|
.ald-table-th {
|
|
@@ -99,7 +148,7 @@
|
|
|
99
148
|
padding-left: var(--alias-spacing-200, 16px);
|
|
100
149
|
font-size: 12px;
|
|
101
150
|
overflow: hidden;
|
|
102
|
-
height:
|
|
151
|
+
height: @header-height;
|
|
103
152
|
display: flex;
|
|
104
153
|
align-items: center;
|
|
105
154
|
}
|
|
@@ -130,7 +179,6 @@
|
|
|
130
179
|
|
|
131
180
|
.ald-table-body {
|
|
132
181
|
min-height: 96px;
|
|
133
|
-
overflow: auto;
|
|
134
182
|
|
|
135
183
|
.ald-table-tr {
|
|
136
184
|
&.ald-table-row-hover:hover {
|
|
@@ -186,8 +234,26 @@
|
|
|
186
234
|
height: 100%;
|
|
187
235
|
}
|
|
188
236
|
|
|
237
|
+
.ald-table-header {
|
|
238
|
+
background-color: #fff;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.ald-table-header-scroll-placeholder {
|
|
242
|
+
height: @header-height;
|
|
243
|
+
position: sticky;
|
|
244
|
+
right: 0;
|
|
245
|
+
background-color: #fff;
|
|
246
|
+
z-index: 2;
|
|
247
|
+
flex: 0 0 auto;
|
|
248
|
+
}
|
|
249
|
+
|
|
189
250
|
.ald-table-body-scroll {
|
|
190
251
|
overflow: auto;
|
|
252
|
+
height: 100%;
|
|
253
|
+
|
|
254
|
+
&.ald-table-scroll-y {
|
|
255
|
+
overflow-y: scroll;
|
|
256
|
+
}
|
|
191
257
|
}
|
|
192
258
|
|
|
193
259
|
.ald-table-empty {
|
package/dist/Table/types.d.ts
CHANGED
|
@@ -39,4 +39,8 @@ export interface ITableColumn<TDataItem = unknown> {
|
|
|
39
39
|
ellipsis?: boolean;
|
|
40
40
|
noPadding?: boolean;
|
|
41
41
|
align?: 'left' | 'center' | 'right';
|
|
42
|
+
fixed?: 'left' | 'right';
|
|
43
|
+
}
|
|
44
|
+
export interface IInnerTableColumn<TDataItem = unknown> extends ITableColumn<TDataItem> {
|
|
45
|
+
columnWidths: number[];
|
|
42
46
|
}
|