diff --git a/packages/dx-vue-grid-bootstrap4/src/grid.js b/packages/dx-vue-grid-bootstrap4/src/grid.js
index e2e5420a8a..504be784e6 100644
--- a/packages/dx-vue-grid-bootstrap4/src/grid.js
+++ b/packages/dx-vue-grid-bootstrap4/src/grid.js
@@ -9,7 +9,7 @@ export const DxGrid = {
return (
{context.children}
diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/column-chooser.js b/packages/dx-vue-grid-bootstrap4/src/plugins/column-chooser.js
index 1223ea86bd..565cd5abc7 100644
--- a/packages/dx-vue-grid-bootstrap4/src/plugins/column-chooser.js
+++ b/packages/dx-vue-grid-bootstrap4/src/plugins/column-chooser.js
@@ -14,7 +14,7 @@ export const DxColumnChooser = {
containerComponent={Container}
itemComponent={Item}
toggleButtonComponent={ToggleButton}
- {...{ attrs: context.props, on: context.listeners }}
+ {...context.data}
/>
);
},
diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/grouping-panel.js b/packages/dx-vue-grid-bootstrap4/src/plugins/grouping-panel.js
index 73a5ca908c..f7f4014233 100644
--- a/packages/dx-vue-grid-bootstrap4/src/plugins/grouping-panel.js
+++ b/packages/dx-vue-grid-bootstrap4/src/plugins/grouping-panel.js
@@ -23,7 +23,7 @@ export const DxGroupingPanel = {
itemComponent={GroupPanelItem}
emptyMessageComponent={GroupPanelEmptyMessage}
messages={{ ...defaultMessages, ...context.props.messages }}
- {...{ attrs: context.data.attrs, on: context.listeners }}
+ {...context.data}
/>
);
},
diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/paging-panel.js b/packages/dx-vue-grid-bootstrap4/src/plugins/paging-panel.js
index 73901f150a..f5677259c2 100644
--- a/packages/dx-vue-grid-bootstrap4/src/plugins/paging-panel.js
+++ b/packages/dx-vue-grid-bootstrap4/src/plugins/paging-panel.js
@@ -19,7 +19,7 @@ export const DxPagingPanel = {
);
},
diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/search-panel.js b/packages/dx-vue-grid-bootstrap4/src/plugins/search-panel.js
index 40943cbfc7..47e2eb686e 100644
--- a/packages/dx-vue-grid-bootstrap4/src/plugins/search-panel.js
+++ b/packages/dx-vue-grid-bootstrap4/src/plugins/search-panel.js
@@ -18,7 +18,7 @@ export const DxSearchPanel = {
);
},
diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/table-band-header.js b/packages/dx-vue-grid-bootstrap4/src/plugins/table-band-header.js
index 910a6a3b19..c14ee3b557 100644
--- a/packages/dx-vue-grid-bootstrap4/src/plugins/table-band-header.js
+++ b/packages/dx-vue-grid-bootstrap4/src/plugins/table-band-header.js
@@ -14,7 +14,7 @@ export const DxTableBandHeader = {
rowComponent={TableRow}
bandedHeaderCellComponent={BandedHeaderCell}
invisibleCellComponent={InvisibleCell}
- {...{ attrs: context.props, on: context.listeners }}
+ {...context.data}
/>
);
},
diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/table-column-visibility.js b/packages/dx-vue-grid-bootstrap4/src/plugins/table-column-visibility.js
index 356cdcd2aa..ea133f6025 100644
--- a/packages/dx-vue-grid-bootstrap4/src/plugins/table-column-visibility.js
+++ b/packages/dx-vue-grid-bootstrap4/src/plugins/table-column-visibility.js
@@ -18,7 +18,7 @@ export const DxTableColumnVisibility = {
);
},
diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/table-edit-column.js b/packages/dx-vue-grid-bootstrap4/src/plugins/table-edit-column.js
index cca4ff3420..9ba3218baf 100644
--- a/packages/dx-vue-grid-bootstrap4/src/plugins/table-edit-column.js
+++ b/packages/dx-vue-grid-bootstrap4/src/plugins/table-edit-column.js
@@ -28,7 +28,7 @@ export const DxTableEditColumn = {
headerCellComponent={EditCommandHeadingCell}
commandComponent={CommandButton}
messages={{ ...defaultMessages, ...context.props.messages }}
- {...{ attrs: context.data.attrs, on: context.listeners }}
+ {...context.data}
/>
);
},
diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/table-edit-row.js b/packages/dx-vue-grid-bootstrap4/src/plugins/table-edit-row.js
index 38677b7523..e09e13eb2e 100644
--- a/packages/dx-vue-grid-bootstrap4/src/plugins/table-edit-row.js
+++ b/packages/dx-vue-grid-bootstrap4/src/plugins/table-edit-row.js
@@ -10,7 +10,7 @@ export const DxTableEditRow = {
);
},
diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/table-filter-row.js b/packages/dx-vue-grid-bootstrap4/src/plugins/table-filter-row.js
index b630d65641..4aed8c9af5 100644
--- a/packages/dx-vue-grid-bootstrap4/src/plugins/table-filter-row.js
+++ b/packages/dx-vue-grid-bootstrap4/src/plugins/table-filter-row.js
@@ -36,7 +36,7 @@ export const DxTableFilterRow = {
iconComponent={Icon}
editorComponent={Editor}
messages={{ ...defaultMessages, ...context.props.messages }}
- {...{ attrs: context.data.attrs, on: context.listeners }}
+ {...context.data}
/>
);
},
diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/table-group-row.js b/packages/dx-vue-grid-bootstrap4/src/plugins/table-group-row.js
index ab08ca43c6..0d83b9d134 100644
--- a/packages/dx-vue-grid-bootstrap4/src/plugins/table-group-row.js
+++ b/packages/dx-vue-grid-bootstrap4/src/plugins/table-group-row.js
@@ -11,7 +11,7 @@ export const DxTableGroupRow = {
cellComponent={TableGroupCell}
rowComponent={TableRow}
indentColumnWidth={33}
- {...{ attrs: context.props, on: context.listeners }}
+ {...context.data}
/>
);
},
diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/table-header-row.js b/packages/dx-vue-grid-bootstrap4/src/plugins/table-header-row.js
index 8a87979e84..bee9d33ef6 100644
--- a/packages/dx-vue-grid-bootstrap4/src/plugins/table-header-row.js
+++ b/packages/dx-vue-grid-bootstrap4/src/plugins/table-header-row.js
@@ -10,7 +10,7 @@ export const DxTableHeaderRow = {
);
},
diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/table-row-detail.js b/packages/dx-vue-grid-bootstrap4/src/plugins/table-row-detail.js
index 754bb345d8..bf937ff968 100644
--- a/packages/dx-vue-grid-bootstrap4/src/plugins/table-row-detail.js
+++ b/packages/dx-vue-grid-bootstrap4/src/plugins/table-row-detail.js
@@ -13,7 +13,7 @@ export const DxTableRowDetail = {
cellComponent={TableDetailCell}
rowComponent={TableRow}
toggleColumnWidth={48}
- {...{ attrs: context.props, on: context.listeners }}
+ {...context.data}
/>
);
},
diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/table-selection.js b/packages/dx-vue-grid-bootstrap4/src/plugins/table-selection.js
index bdad8f83b0..68238afbe4 100644
--- a/packages/dx-vue-grid-bootstrap4/src/plugins/table-selection.js
+++ b/packages/dx-vue-grid-bootstrap4/src/plugins/table-selection.js
@@ -13,7 +13,7 @@ export const DxTableSelection = {
cellComponent={TableSelectCell}
headerCellComponent={TableSelectAllCell}
selectionColumnWidth={40}
- {...{ attrs: context.props, on: context.listeners }}
+ {...context.data}
/>
);
},
diff --git a/packages/dx-vue-grid-bootstrap4/src/plugins/table.js b/packages/dx-vue-grid-bootstrap4/src/plugins/table.js
index 08510f9bd6..61ee8bebef 100644
--- a/packages/dx-vue-grid-bootstrap4/src/plugins/table.js
+++ b/packages/dx-vue-grid-bootstrap4/src/plugins/table.js
@@ -40,7 +40,7 @@ export const DxTable = {
stubCellComponent={TableStubCell}
stubHeaderCellComponent={TableHeaderStubCell}
messages={{ ...defaultMessages, ...context.props.messages }}
- {...{ attrs: context.data.attrs, on: context.listeners }}
+ {...context.data}
/>
);
},
diff --git a/packages/dx-vue-grid-bootstrap4/src/templates/table.js b/packages/dx-vue-grid-bootstrap4/src/templates/table.js
index 2ab19d2aaf..bb5a5628a9 100644
--- a/packages/dx-vue-grid-bootstrap4/src/templates/table.js
+++ b/packages/dx-vue-grid-bootstrap4/src/templates/table.js
@@ -1,17 +1,3 @@
-let globalStickyProp;
-const testCSSProp = (property, value, noPrefixes) => {
- const prop = `${property}:`;
- const el = document.createElement('test');
- const mStyle = el.style;
-
- if (!noPrefixes) {
- mStyle.cssText = `${prop + ['-webkit-', '-moz-', '-ms-', '-o-', ''].join(`${value};${prop}`) + value};`;
- } else {
- mStyle.cssText = prop + value;
- }
- return mStyle[property];
-};
-
export const Table = {
name: 'Table',
props: {
@@ -25,7 +11,6 @@ export const Table = {
data() {
return ({
backgroundColor: 'white',
- stickyProp: globalStickyProp,
});
},
mounted() {
@@ -33,14 +18,10 @@ export const Table = {
},
methods: {
checkStyles() {
- globalStickyProp = testCSSProp('position', 'sticky');
-
const body = document.getElementsByTagName('body')[0];
const { backgroundColor } = window.getComputedStyle(body);
- if (this.backgroundColor !== backgroundColor
- || this.stickyProp !== globalStickyProp) {
- this.stickyProp = globalStickyProp;
+ if (this.backgroundColor !== backgroundColor) {
this.backgroundColor = backgroundColor;
}
},
@@ -51,11 +32,11 @@ export const Table = {
class={{
'table mb-0 dx-g-bs4-overflow-hidden dx-g-bs4-table': true,
'dx-g-bs4-table-head': this.use === 'head',
+ 'dx-g-bs4-table-sticky': !!this.use,
}}
style={{
minWidth: this.minWidth,
...this.use === 'head' ? {
- position: this.stickyProp,
backgroundColor: this.backgroundColor,
} : null,
}}
diff --git a/packages/dx-vue-grid/src/grid.js b/packages/dx-vue-grid/src/grid.js
index eda6c4daf5..467f280fed 100644
--- a/packages/dx-vue-grid/src/grid.js
+++ b/packages/dx-vue-grid/src/grid.js
@@ -8,7 +8,7 @@ export const DxGrid = {
return (
{context.children}