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
+ + + + + + +