From e67726110f49767761298c57a46648991265a9b0 Mon Sep 17 00:00:00 2001 From: Raimund Bauer Date: Tue, 15 Oct 2024 16:15:48 +0200 Subject: [PATCH 1/2] enable column resizable configuration for datatable and treetable per column --- packages/primevue/scripts/components/column.js | 6 ++++++ packages/primevue/src/column/BaseColumn.vue | 4 ++++ packages/primevue/src/column/Column.d.ts | 5 +++++ packages/primevue/src/datatable/HeaderCell.vue | 11 ++++++++--- .../primevue/src/datatable/style/DataTableStyle.js | 2 +- packages/primevue/src/treetable/HeaderCell.vue | 13 +++++++++---- .../primevue/src/treetable/style/TreeTableStyle.js | 2 +- 7 files changed, 34 insertions(+), 9 deletions(-) diff --git a/packages/primevue/scripts/components/column.js b/packages/primevue/scripts/components/column.js index 7018f8ae55..0ffb0895e7 100644 --- a/packages/primevue/scripts/components/column.js +++ b/packages/primevue/scripts/components/column.js @@ -29,6 +29,12 @@ const ColumnProps = [ default: 'false', description: 'Defines if a column is sortable.' }, + { + name: 'resizable', + type: 'boolean', + default: 'false', + description: 'Defines if a column is resizable despite being frozen or other table columns not so.' + }, { name: 'header', type: 'any', diff --git a/packages/primevue/src/column/BaseColumn.vue b/packages/primevue/src/column/BaseColumn.vue index 045400038d..78e0262929 100644 --- a/packages/primevue/src/column/BaseColumn.vue +++ b/packages/primevue/src/column/BaseColumn.vue @@ -30,6 +30,10 @@ export default { type: Boolean, default: false }, + resizable: { + type: Boolean, + default: false + }, header: { type: null, default: null diff --git a/packages/primevue/src/column/Column.d.ts b/packages/primevue/src/column/Column.d.ts index 59dc716f4a..877190a2cc 100755 --- a/packages/primevue/src/column/Column.d.ts +++ b/packages/primevue/src/column/Column.d.ts @@ -379,6 +379,11 @@ export interface ColumnProps { * @defaultValue false */ sortable?: boolean | undefined; + /** + * Defines if a column is resizable when not all columns are. + * @defaultValue false + */ + resizable?: boolean | undefined; /** * Header content of the column. */ diff --git a/packages/primevue/src/datatable/HeaderCell.vue b/packages/primevue/src/datatable/HeaderCell.vue index a8026d5f4d..16708e9bb5 100644 --- a/packages/primevue/src/datatable/HeaderCell.vue +++ b/packages/primevue/src/datatable/HeaderCell.vue @@ -16,13 +16,13 @@ @drop="onDrop" v-bind="{ ...getColumnPT('root'), ...getColumnPT('headerCell') }" :data-p-sortable-column="columnProp('sortable')" - :data-p-resizable-column="resizableColumns" + :data-p-resizable-column="isResizable" :data-p-sorted="isColumnSorted()" :data-p-filter-column="filterColumn" :data-p-frozen-column="columnProp('frozen')" :data-p-reorderable-column="reorderableColumns" > - +
{{ columnProp('header') }} @@ -222,7 +222,7 @@ export default { index: this.index, sortable: this.columnProp('sortable') === '' || this.columnProp('sortable'), sorted: this.isColumnSorted(), - resizable: this.resizableColumns, + resizable: this.isResizable, size: this.$parentInstance?.$parentInstance?.size, showGridlines: this.$parentInstance?.$parentInstance?.showGridlines || false } @@ -364,6 +364,11 @@ export default { } else { return null; } + }, + isResizable() { + const rsz = this.columnProp('resizable'); + + return rsz || (this.resizableColumns && !(rsz === false || this.columnProp('frozen'))); } }, components: { diff --git a/packages/primevue/src/datatable/style/DataTableStyle.js b/packages/primevue/src/datatable/style/DataTableStyle.js index 39806ee873..6c0023daac 100644 --- a/packages/primevue/src/datatable/style/DataTableStyle.js +++ b/packages/primevue/src/datatable/style/DataTableStyle.js @@ -73,7 +73,7 @@ const theme = ({ dt }) => ` white-space: nowrap; } -.p-datatable-resizable-table > .p-datatable-thead > tr > th.p-datatable-resizable-column:not(.p-datatable-frozen-column) { +.p-datatable-resizable-table > .p-datatable-thead > tr > th.p-datatable-resizable-column { background-clip: padding-box; position: relative; } diff --git a/packages/primevue/src/treetable/HeaderCell.vue b/packages/primevue/src/treetable/HeaderCell.vue index 4340cac0ea..21137790c7 100644 --- a/packages/primevue/src/treetable/HeaderCell.vue +++ b/packages/primevue/src/treetable/HeaderCell.vue @@ -9,11 +9,11 @@ role="columnheader" v-bind="{ ...getColumnPT('root'), ...getColumnPT('headerCell') }" :data-p-sortable-column="columnProp('sortable')" - :data-p-resizable-column="resizableColumns" + :data-p-resizable-column="isResizable" :data-p-sorted="isColumnSorted()" :data-p-frozen-column="columnProp('frozen')" > - +
{{ columnProp('header') }} @@ -26,8 +26,8 @@