Fix #1367/#1862: Column resizeable attribute (#2824)

* Fix #1367: Column resizeable attribute * Update column.js * Fix #1367: Column resizeable attribute * Update colresize.js
primefaces · May 12, 2022 · 66a2554 · 66a2554
1 parent ff3b87a
commit 66a2554
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 5 deletions.
diff --git 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
@@ -1503,6 +1503,12 @@ export const DataTableDemo = () => {
                                     <td>null</td>
                                     <td>Used to defined reorderableColumns per column when reorderableColumns of table is enabled, defaults to value of reorderableColumns.</td>
                                 </tr>
+                                <tr>
+                                    <td>resizeable</td>
+                                    <td>boolean</td>
+                                    <td>null</td>
+                                    <td>Used to defined resizeableColumns per column when resizeableColumns of table is enabled, defaults to value of resizeableColumns.</td>
+                                </tr>
                             </tbody>
                         </table>
                     </div>
@@ -2516,6 +2522,18 @@ export const DataTableRowExpansionDemo = () => {
     <Column field="quantity" header="Quantity" style={{width:'30%'}}></Column>
 </DataTable>
 `}
+</CodeHighlight>
+
+                    <p>You can choose which columns are <i>resizeable</i> per column.</p>
+<CodeHighlight>
+{`
+<DataTable value={products} resizableColumns>
+    <Column field="code" header="Code" style={{width:'20%'}}></Column>
+    <Column field="name" header="Name" style={{width:'40%'}}></Column>
+    <Column field="category" header="Category (not resizable)" style={{width:'20%'}} resizeable={false} />
+    <Column field="quantity" header="Quantity" style={{width:'30%'}}></Column>
+</DataTable>
+`}
 </CodeHighlight>
 
                     <h5>Column Reorder</h5>

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -39,7 +39,7 @@ const DataTableColResizeDemo = () => {
                     <DataTable value={products} resizableColumns columnResizeMode="fit" showGridlines responsiveLayout="scroll">
                         <Column field="code" header="Code" style={{width:'20%'}}/>
                         <Column field="name" header="Name" style={{width:'40%'}}/>
-                        <Column field="category" header="Category" style={{width:'20%'}}/>
+                        <Column field="category" header="Category" style={{width:'20%'}} />
                         <Column field="quantity" header="Quantity" style={{width:'20%'}}/>
                     </DataTable>
                 </div>
@@ -53,6 +53,16 @@ const DataTableColResizeDemo = () => {
                         <Column field="quantity" header="Quantity"></Column>
                     </DataTable>
                 </div>
+
+                <div className="card">
+                    <h5>Choose Resizable Columns</h5>
+                    <DataTable value={products} resizableColumns columnResizeMode="fit" showGridlines responsiveLayout="scroll">
+                        <Column field="code" header="Code" style={{width:'20%'}}/>
+                        <Column field="name" header="Name" style={{width:'40%'}}/>
+                        <Column field="category" header="Category (not resizable)" style={{width:'20%'}} resizeable={false} />
+                        <Column field="quantity" header="Quantity" style={{width:'20%'}}/>
+                    </DataTable>
+                </div>
             </div>
 
             <DataTableColResizeDemoDoc></DataTableColResizeDemoDoc>