diff --git a/src/components/MdTable/MdTable.vue b/src/components/MdTable/MdTable.vue
index 0b27f5baf..bf31ce21c 100644
--- a/src/components/MdTable/MdTable.vue
+++ b/src/components/MdTable/MdTable.vue
@@ -9,13 +9,15 @@
-
+
@@ -60,6 +62,7 @@
import MdTableRow from './MdTableRow'
import MdTableRowGhost from './MdTableRowGhost'
import MdTableCellSelection from './MdTableCellSelection'
+ import MdResizeObserver from 'core/utils/MdResizeObserver'
const getObjectAttribute = (object, key) => {
let value = object
@@ -127,6 +130,8 @@
},
data () {
return {
+ windowResizeObserver: null,
+ fixedHeaderTableWidth: 0,
fixedHeaderPadding: 0,
hasContentScroll: false,
MdTable: {
@@ -190,6 +195,11 @@
if (this.mdFixedHeader && this.value.length === 0) {
return `md-table-empty`
}
+ },
+ fixedHeaderTableStyles () {
+ return {
+ width: this.fixedHeaderTableWidth + 'px'
+ }
}
},
provide () {
@@ -262,9 +272,18 @@
},
setScroll ($event) {
raf(() => {
+ if (this.mdFixedHeader) {
+ this.$refs.fixedHeaderContainer.scrollLeft = $event.target.scrollLeft
+ }
+
this.hasContentScroll = $event.target.scrollTop > 0
})
},
+ setHeaderScroll ($event) {
+ raf(() => {
+ this.MdTable.contentEl.scrollLeft = $event.target.scrollLeft
+ })
+ },
getContentEl () {
return this.$el.querySelector('.md-table-content')
},
@@ -307,6 +326,11 @@
} else if (this.MdTable.selectingMode === 'multiple') {
this.MdTable.selectedItems = this.mdSelectedValue || []
}
+ },
+ setWidth () {
+ if (this.mdFixedHeader) {
+ this.fixedHeaderTableWidth = this.$refs.contentTable.offsetWidth
+ }
}
},
created () {
@@ -316,9 +340,16 @@
},
mounted () {
this.setContentEl()
+ this.$nextTick().then(this.setWidth)
if (this.mdFixedHeader) {
this.setHeaderPadding()
+ this.windowResizeObserver = new MdResizeObserver(window, this.setWidth)
+ }
+ },
+ beforeDestroy () {
+ if (this.windowResizeObserver) {
+ this.windowResizeObserver.destroy()
}
}
}
@@ -334,6 +365,18 @@
.md-table-fixed-header {
position: relative;
+
+ .md-table-fixed-header-container {
+ -webkit-box-flex: 1;
+ flex: 1;
+ overflow-x: auto;
+
+ &::-webkit-scrollbar,
+ &::-webkit-scrollbar-thumb,
+ &::-webkit-scrollbar-button {
+ display: none;
+ }
+ }
}
.md-table-fixed-header-active {
diff --git a/src/components/MdTable/MdTableHead.vue b/src/components/MdTable/MdTableHead.vue
index 864545768..1e253523b 100644
--- a/src/components/MdTable/MdTableHead.vue
+++ b/src/components/MdTable/MdTableHead.vue
@@ -20,6 +20,7 @@