@tcn/ui-table 0.0.8 → 1.0.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.
- package/dist/__stories__/sample_data.d.ts +20 -0
- package/dist/__stories__/sample_data.js +1155 -0
- package/dist/__stories__/sample_data.js.map +1 -0
- package/dist/__stories__/table.stories.d.ts +2 -0
- package/dist/__stories__/table.stories.js +141 -16
- package/dist/__stories__/table.stories.js.map +1 -1
- package/dist/_components/cells/cell.module.css +62 -6
- package/dist/_components/cells/data_cell.js +6 -6
- package/dist/_components/cells/data_cell.js.map +1 -1
- package/dist/_components/cells/header_cell.js +8 -5
- package/dist/_components/cells/header_cell.js.map +1 -1
- package/dist/_components/cells/sticky_row_data_cell.d.ts +8 -0
- package/dist/_components/cells/sticky_row_data_cell.js +12 -0
- package/dist/_components/cells/sticky_row_data_cell.js.map +1 -0
- package/dist/_components/cells/sticky_row_fill_cell.d.ts +5 -0
- package/dist/_components/cells/sticky_row_fill_cell.js +6 -0
- package/dist/_components/cells/sticky_row_fill_cell.js.map +1 -0
- package/dist/_components/table/table.d.ts +2 -1
- package/dist/_components/table/table.js +12 -1
- package/dist/_components/table/table.js.map +1 -1
- package/dist/_components/table/table.module.css +36 -17
- package/package.json +1 -1
|
@@ -27,7 +27,7 @@ td {
|
|
|
27
27
|
overflow: hidden;
|
|
28
28
|
white-space: nowrap;
|
|
29
29
|
text-overflow: ellipsis;
|
|
30
|
-
padding: 0px 4px;
|
|
30
|
+
/* padding: 0px 4px; */
|
|
31
31
|
background-color: inherit;
|
|
32
32
|
}
|
|
33
33
|
|
|
@@ -69,15 +69,20 @@ td {
|
|
|
69
69
|
color: #000; /* Black text color */
|
|
70
70
|
font-weight: normal;
|
|
71
71
|
text-align: start;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.table-body th > div {
|
|
72
75
|
border-inline-start: 1px solid #ccc;
|
|
73
76
|
border-bottom: 1px solid #ccc;
|
|
77
|
+
display: flex;
|
|
78
|
+
align-items: center;
|
|
74
79
|
}
|
|
75
80
|
|
|
76
|
-
.table-body th:first-child {
|
|
81
|
+
.table-body th:first-child > div {
|
|
77
82
|
border-inline-start: none;
|
|
78
83
|
}
|
|
79
84
|
|
|
80
|
-
.table-body th:last-child {
|
|
85
|
+
.table-body th:last-child > div {
|
|
81
86
|
border-inline: 1px solid #ccc;
|
|
82
87
|
}
|
|
83
88
|
|
|
@@ -85,11 +90,11 @@ td {
|
|
|
85
90
|
border-inline: 1px solid #202020;
|
|
86
91
|
}
|
|
87
92
|
|
|
88
|
-
.table-body td:last-child {
|
|
93
|
+
.table-body td:last-child > div {
|
|
89
94
|
border-inline: 1px solid #ccc;
|
|
90
95
|
}
|
|
91
96
|
|
|
92
|
-
:global(.dark-mode) .table-body td:last-child {
|
|
97
|
+
:global(.dark-mode) .table-body td:last-child > div {
|
|
93
98
|
border-inline: 1px solid #202020;
|
|
94
99
|
}
|
|
95
100
|
|
|
@@ -100,11 +105,14 @@ td {
|
|
|
100
105
|
background-color: #333;
|
|
101
106
|
}
|
|
102
107
|
|
|
103
|
-
.table-body td {
|
|
108
|
+
.table-body td > div {
|
|
109
|
+
height: 100%;
|
|
110
|
+
display: flex;
|
|
111
|
+
align-items: center;
|
|
104
112
|
border-bottom: 1px solid #e0e0e0; /* Lighter border for cells */
|
|
105
113
|
}
|
|
106
114
|
|
|
107
|
-
:global(.dark-mode) .table-body td {
|
|
115
|
+
:global(.dark-mode) .table-body td > div {
|
|
108
116
|
border-bottom: 1px solid #202020; /* Lighter border for cells */
|
|
109
117
|
}
|
|
110
118
|
|
|
@@ -176,23 +184,24 @@ td {
|
|
|
176
184
|
|
|
177
185
|
.table-body td,
|
|
178
186
|
.table-body th {
|
|
179
|
-
padding: 4px 0;
|
|
180
|
-
max-height:
|
|
181
|
-
height:
|
|
187
|
+
/* padding: 4px 0; */
|
|
188
|
+
max-height: 30px;
|
|
189
|
+
height: 30px;
|
|
182
190
|
font-size: 12px;
|
|
191
|
+
vertical-align: middle;
|
|
183
192
|
}
|
|
184
193
|
|
|
185
|
-
.table-body td:first-child {
|
|
194
|
+
.table-body td:first-child > div {
|
|
186
195
|
padding-inline-start: var(--surface-inset, 6px);
|
|
187
196
|
}
|
|
188
197
|
|
|
189
|
-
.table-body td:last-child {
|
|
198
|
+
.table-body td:last-child > div {
|
|
190
199
|
padding-inline-end: var(--surface-inset, 6px);
|
|
191
200
|
}
|
|
192
201
|
|
|
193
202
|
:global(.small-text) .table-body td,
|
|
194
203
|
:global(.small-text) .table-body th {
|
|
195
|
-
padding: 2px 4px;
|
|
204
|
+
/* padding: 2px 4px; */
|
|
196
205
|
max-height: 20px;
|
|
197
206
|
height: 20px;
|
|
198
207
|
font-size: 10px;
|
|
@@ -200,7 +209,7 @@ td {
|
|
|
200
209
|
|
|
201
210
|
:global(.medium-small-text) .table-body td,
|
|
202
211
|
:global(.medium-small-text) .table-body th {
|
|
203
|
-
padding: 4px 6px;
|
|
212
|
+
/* padding: 4px 6px; */
|
|
204
213
|
max-height: 22px;
|
|
205
214
|
height: 22px;
|
|
206
215
|
font-size: 12px;
|
|
@@ -208,7 +217,7 @@ td {
|
|
|
208
217
|
|
|
209
218
|
:global(.medium-text) .table-body td,
|
|
210
219
|
:global(.medium-text) .table-body th {
|
|
211
|
-
padding: 6px 8px;
|
|
220
|
+
/* padding: 6px 8px; */
|
|
212
221
|
max-height: 24px;
|
|
213
222
|
height: 24px;
|
|
214
223
|
font-size: 14px;
|
|
@@ -216,7 +225,7 @@ td {
|
|
|
216
225
|
|
|
217
226
|
:global(.medium-large-text) .table-body td,
|
|
218
227
|
:global(.medium-large-text) .table-body th {
|
|
219
|
-
padding: 8px 10px;
|
|
228
|
+
/* padding: 8px 10px; */
|
|
220
229
|
max-height: 26px;
|
|
221
230
|
height: 26px;
|
|
222
231
|
font-size: 16px;
|
|
@@ -224,7 +233,7 @@ td {
|
|
|
224
233
|
|
|
225
234
|
:global(.large-text) .table-body td,
|
|
226
235
|
:global(.large-text) .table-body th {
|
|
227
|
-
padding: 10px 12px;
|
|
236
|
+
/* padding: 10px 12px; */
|
|
228
237
|
height: 28px;
|
|
229
238
|
max-height: 28px;
|
|
230
239
|
font-size: 18px;
|
|
@@ -249,3 +258,13 @@ td {
|
|
|
249
258
|
:global(.dark-mode) .table-body tr th:global(.fill) {
|
|
250
259
|
background-color: #333;
|
|
251
260
|
}
|
|
261
|
+
|
|
262
|
+
/* sticky stuff */
|
|
263
|
+
|
|
264
|
+
.table-body tr[data-sticky-row] td {
|
|
265
|
+
background-color: rgb(204, 204, 204);
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
:global(.dark-mode) .table-body tr[data-sticky-row] td {
|
|
269
|
+
background-color: rgb(47, 47, 47);
|
|
270
|
+
}
|