Skip to content

Commit 2df4dcf

Browse files
devhusdevhus
committed
fixed some of stacked-table features, added stacked label prop to print a column's name in the row content
1 parent 3f0d741 commit 2df4dcf

File tree

2 files changed

+67
-47
lines changed

2 files changed

+67
-47
lines changed

‎packages/bootstrap-vue-3/src/components/BTable/BTable.vue

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,9 @@
9898
v-bind="field.tdAttr"
9999
:class="getFieldRowClasses(field, item)"
100100
>
101+
<label v-if="stacked" class="b-table-stacked-label">{{
102+
getFieldHeadLabel(field)
103+
}}</label>
101104
<slot
102105
v-if="$slots['cell(' + field.key + ')'] || $slots['cell()']"
103106
:name="$slots['cell(' + field.key + ')'] ? 'cell(' + field.key + ')' : 'cell()'"
@@ -222,6 +225,8 @@ interface BTableProps {
222225
responsive?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
223226
small?: Booleanish
224227
striped?: Booleanish
228+
stacked?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' // boolean | Breakpoint
229+
labelStacked?: boolean
225230
variant?: ColorVariant
226231
sortBy?: string
227232
sortDesc?: Booleanish
@@ -254,6 +259,8 @@ const props = withDefaults(defineProps<BTableProps>(), {
254259
responsive: false,
255260
small: false,
256261
striped: false,
262+
labelStacked: false,
263+
stacked: false,
257264
sortDesc: false,
258265
sortInternal: true,
259266
selectable: false,
@@ -312,11 +319,12 @@ const sortDescBoolean = useBooleanish(toRef(props, 'sortDesc'))
312319
const sortInternalBoolean = useBooleanish(toRef(props, 'sortInternal'))
313320
const selectableBoolean = useBooleanish(toRef(props, 'selectable'))
314321
const stickySelectBoolean = useBooleanish(toRef(props, 'stickySelect'))
322+
const labelStackedBoolean = useBooleanish(toRef(props, 'labelStacked'))
315323
const busyBoolean = useBooleanish(toRef(props, 'busy'))
316324
const showEmptyBoolean = useBooleanish(toRef(props, 'showEmpty'))
317-
const noProviderPagingBoolean = useBooleanish(toRef(props, 'showEmpty'))
318-
const noProviderSortingBoolean = useBooleanish(toRef(props, 'showEmpty'))
319-
const noProviderFilteringBoolean = useBooleanish(toRef(props, 'showEmpty'))
325+
const noProviderPagingBoolean = useBooleanish(toRef(props, 'noProviderPaging'))
326+
const noProviderSortingBoolean = useBooleanish(toRef(props, 'noProviderSorting'))
327+
const noProviderFilteringBoolean = useBooleanish(toRef(props, 'noProviderFiltering'))
320328
321329
const internalBusyFlag = ref(busyBoolean.value)
322330
itemHelper.filterEvent.value = async (items) => {
@@ -351,6 +359,7 @@ const containerAttrs = computed(() => ({
351359
hover: props.hover,
352360
responsive: props.responsive,
353361
striped: props.striped,
362+
stacked: props.stacked,
354363
small: props.small,
355364
tableClass: tableClasses.value,
356365
tableVariant: props.variant,

‎packages/bootstrap-vue-3/src/components/BTable/_table.scss

Lines changed: 55 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,65 @@
1-
.table.b-table.b-table-stacked {
2-
display: block;
3-
width: 100%;
4-
}
5-
6-
.table.b-table.b-table-stacked > tfoot,
7-
.table.b-table.b-table-stacked > tfoot > tr.b-table-bottom-row,
8-
.table.b-table.b-table-stacked > tfoot > tr.b-table-top-row,
9-
.table.b-table.b-table-stacked > thead,
10-
.table.b-table.b-table-stacked > thead > tr.b-table-bottom-row,
11-
.table.b-table.b-table-stacked > thead > tr.b-table-top-row {
1+
.b-table-stacked-label {
122
display: none;
133
}
144

15-
.table.b-table.b-table-stacked > caption,
16-
.table.b-table.b-table-stacked > tbody,
17-
.table.b-table.b-table-stacked > tbody > tr,
18-
.table.b-table.b-table-stacked > tbody > tr > td,
19-
.table.b-table.b-table-stacked > tbody > tr > th {
20-
display: block;
21-
}
5+
@each $breakpoint in map-keys($grid-breakpoints) {
6+
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
227

23-
.table.b-table.b-table-stacked > tbody > tr > :first-child,
24-
.table.b-table.b-table-stacked > tbody > tr > [rowspan] + td,
25-
.table.b-table.b-table-stacked > tbody > tr > [rowspan] + th {
26-
border-top-width: 3px;
27-
}
8+
@include media-breakpoint-down($breakpoint, $grid-breakpoints) {
9+
.table.b-table.b-table-stacked#{$infix} {
10+
display: block;
11+
width: 100%;
12+
}
2813

29-
.table.b-table.b-table-stacked > tbody > tr > [data-label]::before {
30-
content: attr(data-label);
31-
width: 40%;
32-
float: left;
33-
text-align: right;
34-
word-wrap: break-word;
35-
font-weight: 700;
36-
font-style: normal;
37-
padding: 0 0.5rem 0 0;
38-
margin: 0;
39-
}
14+
.table.b-table.b-table-stacked#{$infix} > tfoot,
15+
.table.b-table.b-table-stacked#{$infix} > tfoot > tr.b-table-bottom-row,
16+
.table.b-table.b-table-stacked#{$infix} > tfoot > tr.b-table-top-row,
17+
.table.b-table.b-table-stacked#{$infix} > thead,
18+
.table.b-table.b-table-stacked#{$infix} > thead > tr.b-table-bottom-row,
19+
.table.b-table.b-table-stacked#{$infix} > thead > tr.b-table-top-row {
20+
display: none;
21+
}
4022

41-
.table.b-table.b-table-stacked > tbody > tr > [data-label]::after {
42-
display: block;
43-
clear: both;
44-
content: "";
45-
}
23+
.table.b-table.b-table-stacked#{$infix} > caption,
24+
.table.b-table.b-table-stacked#{$infix} > tbody,
25+
.table.b-table.b-table-stacked#{$infix} > tbody > tr,
26+
.table.b-table.b-table-stacked#{$infix} > tbody > tr > td,
27+
.table.b-table.b-table-stacked#{$infix} > tbody > tr > td > .b-table-stacked-label,
28+
.table.b-table.b-table-stacked#{$infix} > tbody > tr > th {
29+
display: block;
30+
}
31+
32+
.table.b-table.b-table-stacked#{$infix} > tbody > tr > :first-child,
33+
.table.b-table.b-table-stacked#{$infix} > tbody > tr > [rowspan] + td,
34+
.table.b-table.b-table-stacked#{$infix} > tbody > tr > [rowspan] + th {
35+
border-top-width: 3px;
36+
}
37+
38+
.table.b-table.b-table-stacked#{$infix} > tbody > tr > [data-label]::before {
39+
content: attr(data-label);
40+
width: 40%;
41+
float: left;
42+
text-align: right;
43+
word-wrap: break-word;
44+
font-weight: 700;
45+
font-style: normal;
46+
padding: 0 0.5rem 0 0;
47+
margin: 0;
48+
}
4649

47-
.table.b-table.b-table-stacked > tbody > tr > [data-label] > div {
48-
display: inline-block;
49-
width: 60%;
50-
padding: 0 0 0 0.5rem;
51-
margin: 0;
50+
.table.b-table.b-table-stacked#{$infix} > tbody > tr > [data-label]::after {
51+
display: block;
52+
clear: both;
53+
content: "";
54+
}
55+
56+
.table.b-table.b-table-stacked#{$infix} > tbody > tr > [data-label] > div {
57+
display: inline-block;
58+
width: 60%;
59+
padding: 0 0 0 0.5rem;
60+
margin: 0;
61+
}
62+
}
5263
}
5364

5465
.b-table-sticky-header,

0 commit comments

Comments
 (0)