diff --git a/api-generator/components/datatable.js b/api-generator/components/datatable.js index 5e0ac3cc4..0ff00b8c0 100644 --- a/api-generator/components/datatable.js +++ b/api-generator/components/datatable.js @@ -342,12 +342,6 @@ const DataTableProps = [ default: 'null', description: 'Items of the frozen part in scrollable DataTable.' }, - { - name: 'responsiveLayout', - type: 'string', - default: 'stack', - description: 'Defines the responsive mode, valid options are "stack" and "scroll".' - }, { name: 'breakpoint', type: 'string', diff --git a/api-generator/components/treetable.js b/api-generator/components/treetable.js index c5c2ad785..a85a360ba 100644 --- a/api-generator/components/treetable.js +++ b/api-generator/components/treetable.js @@ -216,12 +216,6 @@ const TreeTableProps = [ default: 'null', description: 'Height of the scroll viewport in fixed units or the "flex" keyword for a dynamic size.' }, - { - name: 'responsiveLayout', - type: 'string', - default: 'null', - description: 'Defines the responsive mode, currently only option is scroll.' - }, { name: 'size', type: 'string', diff --git a/components/lib/datatable/BaseDataTable.vue b/components/lib/datatable/BaseDataTable.vue index c318fbc5f..f80638589 100644 --- a/components/lib/datatable/BaseDataTable.vue +++ b/components/lib/datatable/BaseDataTable.vue @@ -234,10 +234,6 @@ export default { type: Array, default: null }, - responsiveLayout: { - type: String, - default: 'scroll' - }, breakpoint: { type: String, default: '960px' diff --git a/components/lib/datatable/BodyCell.vue b/components/lib/datatable/BodyCell.vue index 46d1f7366..a8cbb42e9 100755 --- a/components/lib/datatable/BodyCell.vue +++ b/components/lib/datatable/BodyCell.vue @@ -17,7 +17,6 @@ :data-p-cell-editing="d_editing" :data-p-frozen-column="columnProp('frozen')" > - {{ columnProp('header') }} { Column }, template: ` - + @@ -1257,8 +1257,7 @@ describe('DataTable.vue', () => { sortOrder: 1, scrollable: true, expandableRowGroups: true, - expandedRowGroups: null, - responsiveLayout: 'scroll' + expandedRowGroups: null }, slots: { default: ` @@ -1333,8 +1332,7 @@ describe('DataTable.vue', () => { sortMode: 'single', sortField: 'name', sortOrder: 1, - scrollable: true, - responsiveLayout: 'scroll' + scrollable: true }, slots: { default: ` @@ -1397,16 +1395,5 @@ describe('DataTable.vue', () => { // contextmenu - // responsive - it('should have stack layout', async () => { - await wrapper.setProps({ responsiveLayout: 'stack' }); - - expect(wrapper.find('.p-datatable').classes()).toContain('p-datatable-responsive-stack'); - }); - - it('should have scroll layout', () => { - expect(wrapper.find('.p-datatable').classes()).toContain('p-datatable-responsive-scroll'); - }); - // row styling }); diff --git a/components/lib/datatable/DataTable.vue b/components/lib/datatable/DataTable.vue index efbe74cc4..c27ac8c9d 100755 --- a/components/lib/datatable/DataTable.vue +++ b/components/lib/datatable/DataTable.vue @@ -130,7 +130,6 @@ :editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$slots" - :responsiveLayout="responsiveLayout" :editButtonProps="rowEditButtonProps" :isVirtualScrollerDisabled="true" @rowgroup-toggle="toggleRowGroup" @@ -187,7 +186,6 @@ :editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$slots" - :responsiveLayout="responsiveLayout" :editButtonProps="rowEditButtonProps" :virtualScrollerContentProps="slotProps" :isVirtualScrollerDisabled="virtualScrollerDisabled" @@ -425,10 +423,6 @@ export default { mounted() { this.$el.setAttribute(this.attributeSelector, ''); - if (this.responsiveLayout === 'stack' && !this.scrollable && !this.unstyled) { - this.createResponsiveStyle(); - } - if (this.isStateful()) { this.restoreState(); @@ -442,7 +436,6 @@ export default { beforeUnmount() { this.unbindColumnResizeEvents(); this.destroyStyleElement(); - this.destroyResponsiveStyle(); this.d_columns.clear(); this.d_columnGroups.clear(); @@ -1911,55 +1904,6 @@ export default { DomHandler.setAttribute(this.styleElement, 'nonce', this.$primevue?.config?.csp?.nonce); document.head.appendChild(this.styleElement); }, - createResponsiveStyle() { - if (!this.responsiveStyleElement) { - this.responsiveStyleElement = document.createElement('style'); - this.responsiveStyleElement.type = 'text/css'; - DomHandler.setAttribute(this.responsiveStyleElement, 'nonce', this.$primevue?.config?.csp?.nonce); - document.head.appendChild(this.responsiveStyleElement); - - let tableSelector = `.p-datatable-table-container ${this.virtualScrollerDisabled ? '' : '> .p-virtualscroller'} > .p-datatable-table`; - let selector = `.p-datatable[${this.attributeSelector}] > ${tableSelector}`; - let gridLinesSelector = `.p-datatable[${this.attributeSelector}].p-datatable-gridlines > ${tableSelector}`; - let innerHTML = ` -@media screen and (max-width: ${this.breakpoint}) { - ${selector} > .p-datatable-thead > tr > th, - ${selector} > .p-datatable-tfoot > tr > td { - display: none; - } - - ${selector} > .p-datatable-tbody > tr > td { - display: flex; - width: 100%; - align-items: center; - justify-content: space-between; - } - - ${selector} > .p-datatable-tbody > tr > td:not(:last-child) { - border: 0 none; - } - - ${gridLinesSelector} > .p-datatable-tbody > tr > td:last-child { - border-top: 0; - border-right: 0; - border-left: 0; - } - - ${selector} > .p-datatable-tbody > tr > td > .p-column-title { - display: block; - } -} -`; - - this.responsiveStyleElement.innerHTML = innerHTML; - } - }, - destroyResponsiveStyle() { - if (this.responsiveStyleElement) { - document.head.removeChild(this.responsiveStyleElement); - this.responsiveStyleElement = null; - } - }, destroyStyleElement() { if (this.styleElement) { document.head.removeChild(this.styleElement); diff --git a/components/lib/datatable/TableBody.vue b/components/lib/datatable/TableBody.vue index 592602d03..d7fd2b30f 100755 --- a/components/lib/datatable/TableBody.vue +++ b/components/lib/datatable/TableBody.vue @@ -32,7 +32,6 @@ :editingRowKeys="editingRowKeys" :templates="templates" :editButtonProps="editButtonProps" - :responsiveLayout="responsiveLayout" :virtualScrollerContentProps="virtualScrollerContentProps" :isVirtualScrollerDisabled="isVirtualScrollerDisabled" :editingMeta="editingMeta" @@ -216,10 +215,6 @@ export default { type: Object, default: null }, - responsiveLayout: { - type: String, - default: 'stack' - }, virtualScrollerContentProps: { type: Object, default: null diff --git a/components/lib/treetable/BaseTreeTable.vue b/components/lib/treetable/BaseTreeTable.vue index 8bf544090..c32ba5591 100644 --- a/components/lib/treetable/BaseTreeTable.vue +++ b/components/lib/treetable/BaseTreeTable.vue @@ -154,10 +154,6 @@ export default { type: String, default: null }, - responsiveLayout: { - type: String, - default: 'scroll' - }, size: { type: String, default: null diff --git a/components/lib/treetable/style/TreeTableStyle.js b/components/lib/treetable/style/TreeTableStyle.js index 4263ec0d2..18713c1d9 100644 --- a/components/lib/treetable/style/TreeTableStyle.js +++ b/components/lib/treetable/style/TreeTableStyle.js @@ -445,8 +445,7 @@ p-treetable-gridlines .p-treetable-tbody > tr:last-child>td { color: inherit; } -.p-treetable .p-treetable-row-checkbox { - vertical-align: middle; +.p-treetable .p-treetable-node-checkbox { margin-right: 0.5rem; } `;