enable column resizable configuration for datatable and treetable per…

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',

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

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.
      */

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"
     >
-        <span v-if="resizableColumns && !columnProp('frozen')" :class="cx('columnResizer')" @mousedown="onResizeStart" v-bind="getColumnPT('columnResizer')"></span>
+        <span v-if="isResizable" :class="cx('columnResizer')" @mousedown="onResizeStart" v-bind="getColumnPT('columnResizer')"></span>
         <div :class="cx('columnHeaderContent')" v-bind="getColumnPT('columnHeaderContent')">
             <component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
             <span v-if="columnProp('header')" :class="cx('columnTitle')" v-bind="getColumnPT('columnTitle')">{{ columnProp('header') }}</span>
@@ -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: {

packages/primevue/src/datatable/style/DataTableStyle.js

@@ -616,7 +616,7 @@ const classes = {
                   'p-datatable-header-cell',
                   {
                       'p-datatable-sortable-column': instance.columnProp('sortable'),
-                      'p-datatable-resizable-column': instance.resizableColumns,
+                      'p-datatable-resizable-column': instance.isResizable, // instance.resizableColumns,
                       'p-datatable-column-sorted': instance.isColumnSorted(),
                       'p-datatable-frozen-column': instance.columnProp('frozen'),
                       'p-datatable-reorderable-column': props.reorderableColumns

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')"
     >
-        <span v-if="resizableColumns && !columnProp('frozen')" :class="cx('columnResizer')" @mousedown="onResizeStart" v-bind="getColumnPT('columnResizer')"></span>
+        <span v-if="isResizable" :class="cx('columnResizer')" @mousedown="onResizeStart" v-bind="getColumnPT('columnResizer')"></span>
         <div :class="cx('columnHeaderContent')" v-bind="getColumnPT('columnHeaderContent')">
             <component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
             <span v-if="columnProp('header')" :class="cx('columnTitle')" v-bind="getColumnPT('columnTitle')">{{ columnProp('header') }}</span>
@@ -26,8 +26,8 @@
 </template>
 
 <script>
+import { getAttribute, getIndex, getNextElementSibling, getOuterWidth, getPreviousElementSibling } from '@primeuix/utils/dom';
 import BaseComponent from '@primevue/core/basecomponent';
-import { getNextElementSibling, getPreviousElementSibling, getOuterWidth, getAttribute, getIndex } from '@primeuix/utils/dom';
 import { getVNodeProp } from '@primevue/core/utils';
 import SortAltIcon from '@primevue/icons/sortalt';
 import SortAmountDownIcon from '@primevue/icons/sortamountdown';
@@ -101,7 +101,7 @@ export default {
                     index: this.index,
                     sorted: this.isColumnSorted(),
                     frozen: this.$parentInstance.scrollable && this.columnProp('frozen'),
-                    resizable: this.resizableColumns,
+                    resizable: this.isResizable,
                     scrollable: this.$parentInstance.scrollable,
                     showGridlines: this.$parentInstance.showGridlines,
                     size: this.$parentInstance?.size
@@ -231,6 +231,11 @@ export default {
             } else {
                 return null;
             }
+        },
+        isResizable() {
+            const rsz = this.columnProp('resizable');
+
+            return rsz || (this.resizableColumns && !(rsz === false || this.columnProp('frozen')));
         }
     },
     components: {

packages/primevue/src/treetable/style/TreeTableStyle.js

@@ -71,7 +71,7 @@ const theme = ({ dt }) => `
     white-space: nowrap;
 }
 
-.p-treetable-resizable-table > .p-treetable-thead > tr > th.p-treetable-resizable-column:not(.p-treetable-frozen-column) {
+.p-treetable-resizable-table > .p-treetable-thead > tr > th.p-treetable-resizable-column {
     background-clip: padding-box;
     position: relative;
 }