@itfin/components 1.3.40 → 1.3.41
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/package.json +1 -1
- package/src/assets/scss/components/_text-field.scss +8 -0
- package/src/components/table/Table2.vue +11 -19
- package/src/components/table/TableBody.vue +13 -9
- package/src/components/table/TableGroup.vue +19 -13
- package/src/components/table/TableHeader.vue +4 -3
- package/src/components/table/index.stories.js +26 -3
- package/src/components/table/table.js +16 -0
- package/src/components/table/table2.scss +11 -1
package/package.json
CHANGED
|
@@ -2,6 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
.itf-text-field {
|
|
4
4
|
&__input {
|
|
5
|
+
.addon + & {
|
|
6
|
+
border-top-left-radius: $input-border-radius !important;
|
|
7
|
+
border-bottom-left-radius: $input-border-radius !important;
|
|
8
|
+
}
|
|
5
9
|
-moz-appearance: textfield; // Hide Arrows From Input Number (Firefox)
|
|
6
10
|
|
|
7
11
|
&::-webkit-outer-spin-button, // Hide Arrows From Input Number (Chrome, Safari, Edge, Opera)
|
|
@@ -26,6 +30,10 @@
|
|
|
26
30
|
z-index: 10;
|
|
27
31
|
}
|
|
28
32
|
&__input {
|
|
33
|
+
.addon + & {
|
|
34
|
+
border-top-left-radius: $input-border-radius !important;
|
|
35
|
+
border-bottom-left-radius: $input-border-radius !important;
|
|
36
|
+
}
|
|
29
37
|
resize: none;
|
|
30
38
|
}
|
|
31
39
|
&__autogrow &__input {
|
|
@@ -21,8 +21,11 @@
|
|
|
21
21
|
:show-add-column="showAddColumn"
|
|
22
22
|
:show-header="!noHeader"
|
|
23
23
|
:schema="schema"
|
|
24
|
+
:editable="editable"
|
|
24
25
|
:no-column-menu="noColumnMenu"
|
|
25
26
|
:no-select-all="noSelectAll"
|
|
27
|
+
:currencies="currencies"
|
|
28
|
+
:currency="currency"
|
|
26
29
|
@new="$emit('new', $event)"
|
|
27
30
|
@add-column="$emit('add-column', $event)"
|
|
28
31
|
>
|
|
@@ -39,21 +42,6 @@
|
|
|
39
42
|
</div>
|
|
40
43
|
|
|
41
44
|
</template>
|
|
42
|
-
<style lang="scss">
|
|
43
|
-
.last-sticky-column:after {
|
|
44
|
-
content: '';
|
|
45
|
-
background: linear-gradient(to right,#dfe0e2,rgba(255,0,0,0));
|
|
46
|
-
height: 100%;
|
|
47
|
-
width: 6px;
|
|
48
|
-
position: absolute;
|
|
49
|
-
bottom: 0;
|
|
50
|
-
right: -7px;
|
|
51
|
-
|
|
52
|
-
body[data-theme="dark"] & {
|
|
53
|
-
background: linear-gradient(to right, #707070,rgba(255,0,0,0));
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
</style>
|
|
57
45
|
<script>
|
|
58
46
|
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
|
|
59
47
|
import itfCheckboxGroup from '../checkbox/CheckboxGroup.vue';
|
|
@@ -80,9 +68,11 @@ class itfTable2 extends Vue {
|
|
|
80
68
|
// @Prop({ required: true, type: Array }) columns;
|
|
81
69
|
@Prop({ required: true, type: Array }) rows;
|
|
82
70
|
@Prop({ type: String, default: null }) groupBy;
|
|
83
|
-
@Prop({ type: String, default:
|
|
71
|
+
@Prop({ type: String, default: null }) idProperty;
|
|
84
72
|
@Prop({ type: String, default: null }) stateName; // save state to storage
|
|
85
73
|
@Prop({ type: Object, default: () => ({}) }) schema;
|
|
74
|
+
@Prop() currency;
|
|
75
|
+
@Prop() currencies;
|
|
86
76
|
@Prop(Boolean) addNewRows;
|
|
87
77
|
@Prop(Boolean) columnSorting;
|
|
88
78
|
@Prop(Boolean) columnResizing;
|
|
@@ -92,6 +82,7 @@ class itfTable2 extends Vue {
|
|
|
92
82
|
@Prop(Boolean) noHeader;
|
|
93
83
|
@Prop(Boolean) noColumnMenu;
|
|
94
84
|
@Prop(Boolean) noSelectAll;
|
|
85
|
+
@Prop(Boolean) editable;
|
|
95
86
|
|
|
96
87
|
state = {
|
|
97
88
|
selectedIds: [],
|
|
@@ -151,10 +142,11 @@ class itfTable2 extends Vue {
|
|
|
151
142
|
|
|
152
143
|
get groups() {
|
|
153
144
|
const { groupBy, rows } = this;
|
|
154
|
-
|
|
155
|
-
|
|
145
|
+
const indexedRows = (rows || []).map((row, index) => ({ ...row, $index: index }));
|
|
146
|
+
if (!groupBy || !indexedRows.length) {
|
|
147
|
+
return [{ name: '', rows: indexedRows }]
|
|
156
148
|
}
|
|
157
|
-
const groups =
|
|
149
|
+
const groups = indexedRows.reduce((acc, row) => {
|
|
158
150
|
const group = row[groupBy];
|
|
159
151
|
if (!acc[group]) {
|
|
160
152
|
acc[group] = [];
|
|
@@ -23,7 +23,8 @@
|
|
|
23
23
|
</div>
|
|
24
24
|
<div class="indicator sticky">
|
|
25
25
|
<div class="fill table-view-row-count" :class="{'on-rest': !noSelectAll}">
|
|
26
|
-
<span>{{ item[idProperty] }}</span>
|
|
26
|
+
<span v-if="idProperty">{{ item[idProperty] }}</span>
|
|
27
|
+
<span v-else>{{ (n + 1) }}</span>
|
|
27
28
|
</div>
|
|
28
29
|
<div v-if="!noSelectAll" class="fill on-hover">
|
|
29
30
|
<itf-checkbox :value="item[idProperty]" />
|
|
@@ -35,28 +36,28 @@
|
|
|
35
36
|
v-if="column.visible !== false"
|
|
36
37
|
:data-column="k"
|
|
37
38
|
:style="`width: ${column.width}px; max-width: ${column.width}px; left: ${column.left}px;`"
|
|
38
|
-
:class="{'sticky': column.pinned, 'last-sticky-column': k === lastPinnedIndex, 'flex-grow-1': column.grow, 'px-2': !column.editable, 'editable': column.editable}"
|
|
39
|
-
class="table-view-item-value d-flex h-100
|
|
39
|
+
:class="{'sticky': column.pinned, 'last-sticky-column': k === lastPinnedIndex, 'flex-grow-1': column.grow, 'px-2': !(column.editable && editable), 'editable': column.editable && editable}"
|
|
40
|
+
class="table-view-item-value d-flex h-100">
|
|
40
41
|
<slot :name="`column.${column.property}`" :item="item" :column="column">
|
|
41
|
-
<template v-if="column.editable">
|
|
42
|
+
<template v-if="column.editable && editable">
|
|
42
43
|
<slot :name="`edit.${column.type}`" :update="(val) => updateValue(item, val, n, column)" :value="getValue(item, column)" :item="item" :column="column">
|
|
43
44
|
<itf-text-field class="w-100" v-if="column.type === 'text'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
|
|
44
45
|
<itf-hours-field
|
|
45
46
|
class="w-100"
|
|
46
|
-
placeholder="
|
|
47
|
+
placeholder="00h 00m"
|
|
47
48
|
v-else-if="column.type === 'time'"
|
|
48
49
|
:hours="getValue(item, column)"
|
|
49
50
|
@update:hours="updateValue(item, $event, n, column)"
|
|
50
51
|
/>
|
|
51
52
|
<itf-textarea class="w-100" :rows="2" autogrow v-else-if="column.type === 'textarea'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
|
|
52
|
-
<itf-money-field class="w-100" currency-
|
|
53
|
+
<itf-money-field class="w-100" currency-disabled :currency="currency" :currencies="currencies" v-else-if="column.type === 'money'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
|
|
53
54
|
</slot>
|
|
54
55
|
</template>
|
|
55
|
-
<
|
|
56
|
-
<slot :name="`format.${column.type}`" :value="getValue(item, column)" :item="item" :column="column">
|
|
56
|
+
<div v-else>
|
|
57
|
+
<slot :name="`format.${column.type}`" :value="getValue(item, column)" :update="(value) => updateValue(item, value, n, column)" :item="item" :column="column">
|
|
57
58
|
{{getValue(item, column)}}
|
|
58
59
|
</slot>
|
|
59
|
-
</
|
|
60
|
+
</div>
|
|
60
61
|
</slot>
|
|
61
62
|
</div>
|
|
62
63
|
</template>
|
|
@@ -221,7 +222,10 @@ class itfTableBody extends Vue {
|
|
|
221
222
|
@Prop() idProperty;
|
|
222
223
|
@Prop(Boolean) showAddColumn;
|
|
223
224
|
@Prop(Boolean) noSelectAll;
|
|
225
|
+
@Prop(Boolean) editable;
|
|
224
226
|
@Prop() selectedIds;
|
|
227
|
+
@Prop() currency;
|
|
228
|
+
@Prop() currencies;
|
|
225
229
|
|
|
226
230
|
getValue(item, column) {
|
|
227
231
|
return get(item, column.property);
|
|
@@ -22,11 +22,8 @@
|
|
|
22
22
|
</span>
|
|
23
23
|
<span class="d-flex align-items-center line-overflow group-header-value"
|
|
24
24
|
data-test="group-value-group-label-value">
|
|
25
|
-
{{ title }}
|
|
25
|
+
<slot name="group-title" :rows="rows" :title="rows">{{ title }}</slot>
|
|
26
26
|
</span>
|
|
27
|
-
<div data-test="table-group-item-count" class="table-group-item-count">
|
|
28
|
-
{{ rows.length }}
|
|
29
|
-
</div>
|
|
30
27
|
</a>
|
|
31
28
|
</div>
|
|
32
29
|
</div>
|
|
@@ -42,6 +39,7 @@
|
|
|
42
39
|
:show-add-column="showAddColumn"
|
|
43
40
|
:rows="rows"
|
|
44
41
|
:schema="schema"
|
|
42
|
+
:editable="editable"
|
|
45
43
|
:no-column-menu="noColumnMenu"
|
|
46
44
|
:no-select-all="noSelectAll"
|
|
47
45
|
:selected-ids="selectedIds"
|
|
@@ -57,6 +55,9 @@
|
|
|
57
55
|
@update="$emit('update', $event)"
|
|
58
56
|
:id-property="idProperty"
|
|
59
57
|
:rows="rows"
|
|
58
|
+
:editable="editable"
|
|
59
|
+
:currency="currency"
|
|
60
|
+
:currencies="currencies"
|
|
60
61
|
:columns="visibleColumns"
|
|
61
62
|
:no-select-all="noSelectAll"
|
|
62
63
|
:selected-ids="selectedIds"
|
|
@@ -75,8 +76,8 @@
|
|
|
75
76
|
class="table-row-template d-flex align-items-stretch">
|
|
76
77
|
<div class="shadow-area"></div>
|
|
77
78
|
<a href="" @click.prevent="$emit('new', title)" data-test="table-add-new-item"
|
|
78
|
-
class="d-flex align-items-center flex-grow-1 table-add-new-item
|
|
79
|
-
<span class="d-sticky d-flex align-items-center">
|
|
79
|
+
class="d-flex align-items-center flex-grow-1 table-add-new-item text-decoration-none">
|
|
80
|
+
<span class="d-sticky d-flex align-items-center py-1">
|
|
80
81
|
<itf-icon name="plus"/>
|
|
81
82
|
<span>{{ newLabel }}</span>
|
|
82
83
|
</span>
|
|
@@ -90,6 +91,7 @@
|
|
|
90
91
|
<div class="table-summary-columns d-flex tw-flex-row align-items-center">
|
|
91
92
|
<span
|
|
92
93
|
v-for="(column, n) in visibleColumns"
|
|
94
|
+
v-if="column.visible !== false"
|
|
93
95
|
:key="n"
|
|
94
96
|
:data-column="n"
|
|
95
97
|
class="position-relative line-overflow"
|
|
@@ -204,13 +206,13 @@
|
|
|
204
206
|
font-size: 1.25rem;
|
|
205
207
|
border-left: 0;
|
|
206
208
|
border-bottom: 0;
|
|
207
|
-
border-right: 1px solid var(--bs-border-color);
|
|
209
|
+
//border-right: 1px solid var(--bs-border-color);
|
|
208
210
|
|
|
209
211
|
&.header-additional-column {
|
|
210
212
|
border-radius: 0;
|
|
211
213
|
}
|
|
212
214
|
&:hover {
|
|
213
|
-
background: var(--hover-bg);
|
|
215
|
+
background: var(--itf-table-hover-bg);
|
|
214
216
|
}
|
|
215
217
|
}
|
|
216
218
|
|
|
@@ -229,7 +231,7 @@
|
|
|
229
231
|
|
|
230
232
|
.table-group-item-count {
|
|
231
233
|
padding: 0.125rem 0.5rem;
|
|
232
|
-
background-color: rgb(250 251 252 / 1);
|
|
234
|
+
//background-color: rgb(250 251 252 / 1);
|
|
233
235
|
border-radius: 0.1875rem;
|
|
234
236
|
font-weight: normal;
|
|
235
237
|
font-size: 1rem;
|
|
@@ -244,7 +246,6 @@
|
|
|
244
246
|
}
|
|
245
247
|
|
|
246
248
|
.table-add-new-item {
|
|
247
|
-
border-left: 1px solid var(--itf-table-border-color);
|
|
248
249
|
border-right: 1px solid var(--itf-table-border-color);
|
|
249
250
|
border-bottom: 1px solid var(--itf-table-border-color);
|
|
250
251
|
outline: none;
|
|
@@ -253,9 +254,11 @@
|
|
|
253
254
|
left: var(--shadow-area-width);
|
|
254
255
|
position: sticky;
|
|
255
256
|
padding-left: var(--shadow-area-width);
|
|
257
|
+
border-left: 1px solid var(--itf-table-border-color);
|
|
258
|
+
height: 100%;
|
|
256
259
|
}
|
|
257
260
|
&:hover, &:active {
|
|
258
|
-
background: var(--hover-bg);
|
|
261
|
+
background: var(--itf-table-hover-bg);
|
|
259
262
|
}
|
|
260
263
|
}
|
|
261
264
|
|
|
@@ -274,7 +277,7 @@
|
|
|
274
277
|
padding-right: .25rem;
|
|
275
278
|
}
|
|
276
279
|
.summary-text {
|
|
277
|
-
color: var(--
|
|
280
|
+
color: var(--itf-table-summary-text);
|
|
278
281
|
}
|
|
279
282
|
&.table-summary-persist .table-summary-column,
|
|
280
283
|
&:hover .table-summary-column {
|
|
@@ -317,6 +320,8 @@ class itfTableGroup extends Vue {
|
|
|
317
320
|
@Prop() selectedIds;
|
|
318
321
|
@Prop() title;
|
|
319
322
|
@Prop() idProperty;
|
|
323
|
+
@Prop() currency;
|
|
324
|
+
@Prop() currencies;
|
|
320
325
|
@Prop(Boolean) showGrouping;
|
|
321
326
|
@Prop(Boolean) showSummary;
|
|
322
327
|
@Prop(Boolean) addNewRows;
|
|
@@ -326,6 +331,7 @@ class itfTableGroup extends Vue {
|
|
|
326
331
|
@Prop(Boolean) showHeader;
|
|
327
332
|
@Prop(Boolean) noColumnMenu;
|
|
328
333
|
@Prop(Boolean) noSelectAll;
|
|
334
|
+
@Prop(Boolean) editable;
|
|
329
335
|
@Prop({type: String, default: function() { return this.$t('components.table.new'); } }) newLabel;
|
|
330
336
|
@Prop({type: Object, default: () => ({})}) schema;
|
|
331
337
|
|
|
@@ -376,7 +382,7 @@ class itfTableGroup extends Vue {
|
|
|
376
382
|
get calculateMethods() {
|
|
377
383
|
return [
|
|
378
384
|
{ id: 'none', title: this.$t('components.table.calculateNone') },
|
|
379
|
-
{ id: 'total', title: this.$t('components.table.calculateTotal'), summary: 'Total', func: (rows, column) => rows.reduce((acc, row) => acc + (getNumber(row, column.property)), 0) },
|
|
385
|
+
{ id: 'total', title: this.$t('components.table.calculateTotal'), summary: 'Total', func: (rows, column) => round(rows.reduce((acc, row) => acc + (getNumber(row, column.property)), 0)) },
|
|
380
386
|
{ id: 'average', title: this.$t('components.table.calculateAverage'), summary: 'Average', func: (rows, column) => {
|
|
381
387
|
const sum = rows.reduce((acc, row) => acc + (getNumber(row, column.property)), 0);
|
|
382
388
|
return round(sum / rows.length, 3);
|
|
@@ -33,12 +33,12 @@
|
|
|
33
33
|
v-draggable="{ handle: true, payload: { index: n, item: column }, mirror: {yAxis:false} }">
|
|
34
34
|
<itf-dropdown text append-to-body shadow ref="dropdown" class="w-100" :disabled="noColumnMenu">
|
|
35
35
|
<template #button>
|
|
36
|
-
<span :title="column.title[locale] || column.title['en_US']">
|
|
36
|
+
<span class="itf-table2__header-title" :title="column.title[locale] || column.title['en_US']">
|
|
37
37
|
<span v-if="column.icon" :class="column.icon"></span>
|
|
38
38
|
{{column.title[locale] || column.title['en_US']}}
|
|
39
|
-
<div class="itf-table2__subtitle"
|
|
39
|
+
<div v-if="column.prefix" class="itf-table2__subtitle" v-text="column.prefix" />
|
|
40
40
|
</span>
|
|
41
|
-
<itf-icon name="arrow_up" :size="16" class="ms-1"
|
|
41
|
+
<!-- <itf-icon name="arrow_up" :size="16" class="ms-1" />-->
|
|
42
42
|
</template>
|
|
43
43
|
|
|
44
44
|
<div v-if="column.sortable">
|
|
@@ -168,6 +168,7 @@ class itfTableHeader extends Vue {
|
|
|
168
168
|
@Prop(Boolean) visibleHeader;
|
|
169
169
|
@Prop(Boolean) noColumnMenu;
|
|
170
170
|
@Prop(Boolean) noSelectAll;
|
|
171
|
+
@Prop(Boolean) editable;
|
|
171
172
|
|
|
172
173
|
@Watch('selectedIds')
|
|
173
174
|
@Watch('rows')
|
|
@@ -117,7 +117,7 @@ storiesOf('Common', module)
|
|
|
117
117
|
{
|
|
118
118
|
Id: 1,
|
|
119
119
|
summary: true,
|
|
120
|
-
Description: 'Total',
|
|
120
|
+
Description: 'Total asd asd dad ad ada dadad a',
|
|
121
121
|
EmployeeId: 1,
|
|
122
122
|
Total: 100,
|
|
123
123
|
FTE: 1.0,
|
|
@@ -147,7 +147,8 @@ storiesOf('Common', module)
|
|
|
147
147
|
},
|
|
148
148
|
{
|
|
149
149
|
"property": "EmployeeId",
|
|
150
|
-
"title": { "en_US": "Employee", "uk_UA": "Імʼя" },
|
|
150
|
+
"title": { "en_US": "Employee full name", "uk_UA": "Імʼя" },
|
|
151
|
+
prefix: 'USD',
|
|
151
152
|
"type": "employee",
|
|
152
153
|
"copy": true,
|
|
153
154
|
"editable": true,
|
|
@@ -347,6 +348,28 @@ storiesOf('Common', module)
|
|
|
347
348
|
</template>
|
|
348
349
|
</itf-table2>
|
|
349
350
|
|
|
351
|
+
<itf-table2
|
|
352
|
+
editable
|
|
353
|
+
add-new-rows
|
|
354
|
+
@new="onAdd"
|
|
355
|
+
state-name="test"
|
|
356
|
+
:schema="schema"
|
|
357
|
+
:columns.sync="columns2" :rows="list2"
|
|
358
|
+
show-summary
|
|
359
|
+
column-sorting column-resizing show-add-column show-grouping @add-column="onAdd">
|
|
360
|
+
<template #format.employee="{ item }">
|
|
361
|
+
{{item.EmployeeId}}
|
|
362
|
+
</template>
|
|
363
|
+
<template #edit.employee="{ item }">
|
|
364
|
+
<itf-select
|
|
365
|
+
class="w-100"
|
|
366
|
+
v-model="item.EmployeeId"
|
|
367
|
+
:reduce="item => item.Id"
|
|
368
|
+
:get-option-label="item => item.Name"
|
|
369
|
+
:options="[{ Id: 1, Name: 'Vitalii Savchuk' }]" />
|
|
370
|
+
</template>
|
|
371
|
+
</itf-table2>
|
|
372
|
+
|
|
350
373
|
<br />
|
|
351
374
|
<br />
|
|
352
375
|
<br />
|
|
@@ -451,7 +474,7 @@ storiesOf('Common', module)
|
|
|
451
474
|
list2: [
|
|
452
475
|
{
|
|
453
476
|
summary: true,
|
|
454
|
-
Employee: 'Total',
|
|
477
|
+
Employee: 'Total asda das dasd ada dad adaddas',
|
|
455
478
|
Total: 100,
|
|
456
479
|
FTE: 1.0,
|
|
457
480
|
Position: 'Developer',
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
.itf-table2 {
|
|
2
2
|
--itf-table-border-color: #dbddd1;
|
|
3
3
|
--itf-table-header-bg: #f9faf5;
|
|
4
|
+
--itf-table-hover-header-bg: var(--bs-tertiary-bg);
|
|
4
5
|
--itf-table-hover-bg: #f2f2f2;
|
|
5
6
|
--itf-table-bg: var(--bs-body-bg);
|
|
6
7
|
--itf-table-min-width: 45px;
|
|
@@ -8,10 +9,17 @@
|
|
|
8
9
|
--itf-table-input-focus-border-color: #0028aa;
|
|
9
10
|
--itf-table-selected-bg: #cbd6f4;
|
|
10
11
|
--itf-table-header-subtitle-color: #aeafaa;
|
|
12
|
+
--itf-table-summary-text: var(--bs-tertiary-color);
|
|
11
13
|
|
|
12
14
|
// dark
|
|
13
15
|
body[data-theme="dark"] & {
|
|
14
16
|
--itf-table-hover-bg: #393b41;
|
|
17
|
+
--itf-table-header-bg: #0f0f0f;
|
|
18
|
+
--itf-table-hover-header-bg: #252525;
|
|
19
|
+
--itf-table-border-color: var(--bs-card-border-color);
|
|
20
|
+
--itf-table-input-focus-border-color: #252525;
|
|
21
|
+
--itf-table-selected-bg: #011534;
|
|
22
|
+
--itf-table-summary-text: #82909d80;
|
|
15
23
|
}
|
|
16
24
|
|
|
17
25
|
&.scrollable {
|
|
@@ -62,6 +70,7 @@
|
|
|
62
70
|
position: relative;
|
|
63
71
|
display: flex;
|
|
64
72
|
min-width: var(--itf-table-min-width);
|
|
73
|
+
background-color: var(--itf-table-header-bg);
|
|
65
74
|
//background-color: var(--bs-body-bg);
|
|
66
75
|
//background-color: rgb(238 238 238 / 1);
|
|
67
76
|
//font-weight: 500;
|
|
@@ -170,7 +179,7 @@
|
|
|
170
179
|
left: -50px;
|
|
171
180
|
}
|
|
172
181
|
.table-view-header-value:not(.reserved):hover {
|
|
173
|
-
background-color: var(--
|
|
182
|
+
background-color: var(--itf-table-hover-header-bg);
|
|
174
183
|
}
|
|
175
184
|
.draggable-source--is-dragging {
|
|
176
185
|
z-index: 100;
|
|
@@ -212,6 +221,7 @@
|
|
|
212
221
|
display: flex;
|
|
213
222
|
position: relative;
|
|
214
223
|
min-width: var(--itf-table-min-width);
|
|
224
|
+
background: var(--itf-table2-row-bg);
|
|
215
225
|
|
|
216
226
|
.itf-table2__striped & {
|
|
217
227
|
border-right: 1px solid var(--bs-border-color);
|