diff --git a/api-generator/components/column.js b/api-generator/components/column.js
index 7bad3e0a52..9c99fb3912 100644
--- a/api-generator/components/column.js
+++ b/api-generator/components/column.js
@@ -278,8 +278,14 @@ const ColumnProps = [
{
name: 'reorderable',
type: 'boolean',
- default: 'null',
+ default: 'true',
description: 'Used to defined reorderableColumns per column when reorderableColumns of table is enabled, defaults to value of reorderableColumns.'
+ },
+ {
+ name: 'resizeable',
+ type: 'boolean',
+ default: 'true',
+ description: 'Used to defined resizeableColumns per column when resizeableColumns of table is enabled, defaults to value of resizeableColumns.'
}
];
diff --git a/components/doc/datatable/index.js b/components/doc/datatable/index.js
index eec1d03396..8b57839799 100644
--- a/components/doc/datatable/index.js
+++ b/components/doc/datatable/index.js
@@ -1503,6 +1503,12 @@ export const DataTableDemo = () => {
null |
Used to defined reorderableColumns per column when reorderableColumns of table is enabled, defaults to value of reorderableColumns. |
+
+ resizeable |
+ boolean |
+ null |
+ Used to defined resizeableColumns per column when resizeableColumns of table is enabled, defaults to value of resizeableColumns. |
+
@@ -2516,6 +2522,18 @@ export const DataTableRowExpansionDemo = () => {
`}
+
+
+ You can choose which columns are resizeable per column.
+
+{`
+
+
+
+
+
+
+`}
Column Reorder
diff --git a/components/lib/column/Column.d.ts b/components/lib/column/Column.d.ts
index f93486b5e6..aa630f7a99 100644
--- a/components/lib/column/Column.d.ts
+++ b/components/lib/column/Column.d.ts
@@ -235,6 +235,7 @@ export interface ColumnProps {
rowEditor?: boolean;
exportable?: boolean;
reorderable?: boolean;
+ resizeable?: boolean;
excludeGlobalFilter?: boolean;
onCellEditInit?(e: ColumnEventParams): void;
onCellEditComplete?(e: ColumnEventParams): void;
diff --git a/components/lib/column/Column.js b/components/lib/column/Column.js
index ba87ff01fb..90b5c69d18 100644
--- a/components/lib/column/Column.js
+++ b/components/lib/column/Column.js
@@ -75,5 +75,6 @@ Column.defaultProps = {
rowReorderIcon: 'pi pi-bars',
rowEditor: false,
exportable: true,
- reorderable: true
+ reorderable: true,
+ resizeable: true
}
diff --git a/components/lib/datatable/HeaderCell.js b/components/lib/datatable/HeaderCell.js
index 0af11f7566..f14e76a44d 100644
--- a/components/lib/datatable/HeaderCell.js
+++ b/components/lib/datatable/HeaderCell.js
@@ -271,7 +271,7 @@ export const HeaderCell = React.memo((props) => {
const align = getColumnProp('alignHeader') || getColumnProp('align');
const className = classNames(getColumnProp('headerClassName'), getColumnProp('className'), {
'p-sortable-column': getColumnProp('sortable'),
- 'p-resizable-column': props.resizableColumns,
+ 'p-resizable-column': props.resizableColumns && getColumnProp('resizeable'),
'p-highlight': sortMeta.sorted,
'p-frozen-column': getColumnProp('frozen'),
'p-selection-column': getColumnProp('selectionMode'),
diff --git a/components/lib/treetable/TreeTableHeader.js b/components/lib/treetable/TreeTableHeader.js
index 36f4733900..e6cc377bf1 100644
--- a/components/lib/treetable/TreeTableHeader.js
+++ b/components/lib/treetable/TreeTableHeader.js
@@ -142,6 +142,10 @@ export const TreeTableHeader = React.memo((props) => {
}
}
+ const getColumnProp = (...args) => {
+ return props.column ? typeof args[0] === 'string' ? props.column.props[args[0]] : (args[0] || props.column).props[args[1]] : null;
+ }
+
const createSortIcon = (column, sorted, sortOrder) => {
if (column.props.sortable) {
const sortIcon = sorted ? sortOrder < 0 ? 'pi-sort-amount-down' : 'pi-sort-amount-up-alt' : 'pi-sort-alt';
@@ -211,7 +215,7 @@ export const TreeTableHeader = React.memo((props) => {
const className = classNames(column.props.headerClassName || column.props.className, {
'p-sortable-column': column.props.sortable,
'p-highlight': sorted,
- 'p-resizable-column': props.resizableColumns
+ 'p-resizable-column': props.resizableColumns && getColumnProp('resizeable')
});
const resizer = createResizer(column);
diff --git a/pages/datatable/colresize.js b/pages/datatable/colresize.js
index 3013ae00ad..f89dca6a44 100644
--- a/pages/datatable/colresize.js
+++ b/pages/datatable/colresize.js
@@ -39,7 +39,7 @@ const DataTableColResizeDemo = () => {
-
+
@@ -53,6 +53,16 @@ const DataTableColResizeDemo = () => {
+
+
+
Choose Resizable Columns
+
+
+
+
+
+
+