From 27042f0ff8d9f359a307a0c72998fe37edfd4e74 Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Fri, 22 Dec 2023 15:00:07 -0500
Subject: [PATCH] Fix #5460: Column dynamically evaluate rowEditor (#5641)

---
 components/doc/datatable/edit/roweditdoc.js | 44 +++++++++++++--------
 components/lib/datatable/BodyCell.js        |  2 +-
 2 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/components/doc/datatable/edit/roweditdoc.js b/components/doc/datatable/edit/roweditdoc.js
index 7e00b31127..0a292be287 100644
--- a/components/doc/datatable/edit/roweditdoc.js
+++ b/components/doc/datatable/edit/roweditdoc.js
@@ -72,6 +72,10 @@ export function RowEditDoc(props) {
         return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(rowData.price);
     };
 
+    const allowEdit = (rowData) => {
+        return rowData.name !== 'Blue Band';
+    };
+
     const code = {
         basic: `
 <DataTable value={products} editMode="row" dataKey="id" onRowEditComplete={onRowEditComplete} tableStyle={{ minWidth: '50rem' }}>
@@ -79,7 +83,7 @@ export function RowEditDoc(props) {
     <Column field="name" header="Name" editor={(options) => textEditor(options)} style={{ width: '20%' }}></Column>
     <Column field="inventoryStatus" header="Status" body={statusBodyTemplate} editor={(options) => statusEditor(options)} style={{ width: '20%' }}></Column>
     <Column field="price" header="Price" body={priceBodyTemplate} editor={(options) => priceEditor(options)} style={{ width: '20%' }}></Column>
-    <Column rowEditor headerStyle={{ width: '10%', minWidth: '8rem' }} bodyStyle={{ textAlign: 'center' }}></Column>
+    <Column rowEditor={allowEdit} headerStyle={{ width: '10%', minWidth: '8rem' }} bodyStyle={{ textAlign: 'center' }}></Column>
 </DataTable>
         `,
         javascript: `
@@ -155,6 +159,10 @@ export default function RowEditingDemo() {
         return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(rowData.price);
     };
 
+    const allowEdit = (rowData) => {
+        return rowData.name !== 'Blue Band';
+    };
+
     return (
         <div className="card p-fluid">
             <DataTable value={products} editMode="row" dataKey="id" onRowEditComplete={onRowEditComplete} tableStyle={{ minWidth: '50rem' }}>
@@ -162,7 +170,7 @@ export default function RowEditingDemo() {
                 <Column field="name" header="Name" editor={(options) => textEditor(options)} style={{ width: '20%' }}></Column>
                 <Column field="inventoryStatus" header="Status" body={statusBodyTemplate} editor={(options) => statusEditor(options)} style={{ width: '20%' }}></Column>
                 <Column field="price" header="Price" body={priceBodyTemplate} editor={(options) => priceEditor(options)} style={{ width: '20%' }}></Column>
-                <Column rowEditor headerStyle={{ width: '10%', minWidth: '8rem' }} bodyStyle={{ textAlign: 'center' }}></Column>
+                <Column rowEditor={allowEdit} headerStyle={{ width: '10%', minWidth: '8rem' }} bodyStyle={{ textAlign: 'center' }}></Column>
             </DataTable>
         </div>
     );
@@ -171,9 +179,9 @@ export default function RowEditingDemo() {
         typescript: `
 import React, { useEffect, useState } from 'react';
 import { DataTable, DataTableRowEditCompleteEvent } from 'primereact/datatable';
-import { Column } from 'primereact/column';
+import { Column, ColumnEditorOptions } from 'primereact/column';
 import { InputText } from 'primereact/inputtext';
-import { InputNumber, InputNumberChangeEvent } from 'primereact/inputnumber';
+import { InputNumber, InputNumberValueChangeEvent } from 'primereact/inputnumber';
 import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown';
 import { Tag } from 'primereact/tag';
 import { ProductService } from './service/ProductService';
@@ -192,7 +200,7 @@ interface Product {
 }
 
 export default function RowEditingDemo() {
-    const [products, setProducts] = useState<Product[] | null>(null);
+    const [products, setProducts] = useState<Product[]>();
     const [statuses] = useState<string[]>(['INSTOCK', 'LOWSTOCK', 'OUTOFSTOCK']);
 
     useEffect(() => {
@@ -219,21 +227,21 @@ export default function RowEditingDemo() {
         let _products = [...products];
         let { newData, index } = e;
 
-        _products[index] = newData;
+        _products[index] = newData as Product;
 
         setProducts(_products);
     };
 
-    const textEditor = (options) => {
-        return <InputText type="text" value={options.value} onChange={(e: React.ChangeEvent<HTMLInputElement>) => options.editorCallback(e.target.value)} />;
+    const textEditor = (options: ColumnEditorOptions) => {
+        return <InputText type="text" value={options.value} onChange={(e: React.ChangeEvent<HTMLInputElement>) => options.editorCallback!(e.target.value)} />;
     };
 
-    const statusEditor = (options) => {
+    const statusEditor = (options: ColumnEditorOptions) => {
         return (
             <Dropdown
                 value={options.value}
                 options={statuses}
-                onChange={(e: DropdownChangeEvent) => options.editorCallback(e.value)}
+                onChange={(e: DropdownChangeEvent) => options.editorCallback!(e.value)}
                 placeholder="Select a Status"
                 itemTemplate={(option) => {
                     return <Tag value={option} severity={getSeverity(option)}></Tag>;
@@ -242,18 +250,22 @@ export default function RowEditingDemo() {
         );
     };
 
-    const priceEditor = (options) => {
-        return <InputNumber value={options.value} onValueChange={(e: InputNumberChangeEvent) => options.editorCallback(e.value)} mode="currency" currency="USD" locale="en-US" />;
+    const priceEditor = (options: ColumnEditorOptions) => {
+        return <InputNumber value={options.value}  onValueChange={(e: InputNumberValueChangeEvent) => options.editorCallback!(e.value)} mode="currency" currency="USD" locale="en-US" />;
     };
 
-    const statusBodyTemplate = (rowData) => {
+    const statusBodyTemplate = (rowData: Product) => {
         return <Tag value={rowData.inventoryStatus} severity={getSeverity(rowData.inventoryStatus)}></Tag>;
     };
 
-    const priceBodyTemplate = (rowData) => {
+    const priceBodyTemplate = (rowData: Product) => {
         return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(rowData.price);
     };
 
+    const allowEdit = (rowData: Product) => {
+        return rowData.name !== 'Blue Band';
+    };
+
     return (
         <div className="card p-fluid">
             <DataTable value={products} editMode="row" dataKey="id" onRowEditComplete={onRowEditComplete} tableStyle={{ minWidth: '50rem' }}>
@@ -261,7 +273,7 @@ export default function RowEditingDemo() {
                 <Column field="name" header="Name" editor={(options) => textEditor(options)} style={{ width: '20%' }}></Column>
                 <Column field="inventoryStatus" header="Status" body={statusBodyTemplate} editor={(options) => statusEditor(options)} style={{ width: '20%' }}></Column>
                 <Column field="price" header="Price" body={priceBodyTemplate} editor={(options) => priceEditor(options)} style={{ width: '20%' }}></Column>
-                <Column rowEditor headerStyle={{ width: '10%', minWidth: '8rem' }} bodyStyle={{ textAlign: 'center' }}></Column>
+                <Column rowEditor={allowEdit} headerStyle={{ width: '10%', minWidth: '8rem' }} bodyStyle={{ textAlign: 'center' }}></Column>
             </DataTable>
         </div>
     );
@@ -298,7 +310,7 @@ export default function RowEditingDemo() {
                     <Column field="name" header="Name" editor={(options) => textEditor(options)} style={{ width: '20%' }}></Column>
                     <Column field="inventoryStatus" header="Status" body={statusBodyTemplate} editor={(options) => statusEditor(options)} style={{ width: '20%' }}></Column>
                     <Column field="price" header="Price" body={priceBodyTemplate} editor={(options) => priceEditor(options)} style={{ width: '20%' }}></Column>
-                    <Column rowEditor headerStyle={{ width: '10%', minWidth: '8rem' }} bodyStyle={{ textAlign: 'center' }}></Column>
+                    <Column rowEditor={allowEdit} headerStyle={{ width: '10%', minWidth: '8rem' }} bodyStyle={{ textAlign: 'center' }}></Column>
                 </DataTable>
             </div>
             <DocSectionCode code={code} service={['ProductService']} />
diff --git a/components/lib/datatable/BodyCell.js b/components/lib/datatable/BodyCell.js
index 2bad5bda5d..e2e6d3fb5a 100644
--- a/components/lib/datatable/BodyCell.js
+++ b/components/lib/datatable/BodyCell.js
@@ -564,7 +564,6 @@ export const BodyCell = React.memo((props) => {
         const tabIndex = getTabIndex(cellSelected);
         const selectionMode = getColumnProp('selectionMode');
         const rowReorder = getColumnProp('rowReorder');
-        const rowEditor = getColumnProp('rowEditor');
         const header = getColumnProp('header');
         const body = getColumnProp('body');
         const editor = getColumnProp('editor');
@@ -573,6 +572,7 @@ export const BodyCell = React.memo((props) => {
         const value = resolveFieldData();
         const columnBodyOptions = { column: props.column, field: field, rowIndex: props.rowIndex, frozenRow: props.frozenRow, props: props.tableProps };
         const expander = ObjectUtils.getPropValue(getColumnProp('expander'), props.rowData, columnBodyOptions);
+        const rowEditor = ObjectUtils.getPropValue(getColumnProp('rowEditor'), props.rowData, columnBodyOptions);
         const cellClassName = ObjectUtils.getPropValue(props.cellClassName, value, columnBodyOptions);
         const bodyClassName = ObjectUtils.getPropValue(getColumnProp('bodyClassName'), props.rowData, columnBodyOptions);
         const style = getStyle();