Fix #3215: BodyClassName allow function with rowData (#3439)

primefaces · Oct 8, 2022 · 451c79a · 451c79a
1 parent d1fa32a
commit 451c79a
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 15 deletions.
diff --git a/components/doc/datatable/index.js b/components/doc/datatable/index.js
@@ -1109,6 +1109,18 @@ export const DataTableDemo = () => {
                                     <td>null</td>
                                     <td>Body content of the column.</td>
                                 </tr>
+                                <tr>
+                                    <td>bodyStyle</td>
+                                    <td>object</td>
+                                    <td>null</td>
+                                    <td>Inline style of the body.</td>
+                                </tr>
+                                <tr>
+                                    <td>bodyClassName</td>
+                                    <td>string | function</td>
+                                    <td>null</td>
+                                    <td>Style class of the body. If using a function must return a string.</td>
+                                </tr>
                                 <tr>
                                     <td>footer</td>
                                     <td>any</td>
@@ -1385,18 +1397,6 @@ export const DataTableDemo = () => {
                                     <td>null</td>
                                     <td>Configuration of the header tooltip, refer to the tooltip documentation for more information.</td>
                                 </tr>
-                                <tr>
-                                    <td>bodyStyle</td>
-                                    <td>object</td>
-                                    <td>null</td>
-                                    <td>Inline style of the body.</td>
-                                </tr>
-                                <tr>
-                                    <td>bodyClassName</td>
-                                    <td>string</td>
-                                    <td>null</td>
-                                    <td>Style class of the body.</td>
-                                </tr>
                                 <tr>
                                     <td>footerStyle</td>
                                     <td>object</td>

diff --git a/components/lib/column/column.d.ts b/components/lib/column/column.d.ts
@@ -5,6 +5,8 @@ type ColumnHeaderType = React.ReactNode | ((options: ColumnHeaderOptions) => Rea
 
 type ColumnBodyType = React.ReactNode | ((data: any, options: ColumnBodyOptions) => React.ReactNode);
 
+type ColumnBodyClassType = string | ((data: any, options: ColumnBodyOptions) => string);
+
 type ColumnFooterType = React.ReactNode | ((options: ColumnFooterOptions) => React.ReactNode);
 
 type ColumnEditorType = React.ReactNode | ((options: ColumnEditorOptions) => React.ReactNode);
@@ -184,7 +186,7 @@ export interface ColumnProps {
     alignFrozen?: ColumnAlignFrozenType;
     alignHeader?: ColumnAlignType;
     body?: ColumnBodyType;
-    bodyClassName?: string;
+    bodyClassName?: ColumnBodyClassType;
     bodyStyle?: object;
     cellEditValidatorEvent?: string;
     children?: React.ReactNode;

diff --git a/components/lib/datatable/BodyCell.js b/components/lib/datatable/BodyCell.js
@@ -510,7 +510,8 @@ export const BodyCell = React.memo((props) => {
         const align = getColumnProp('align');
         const value = resolveFieldData();
         const cellClassName = ObjectUtils.getPropValue(props.cellClassName, value, { props: props.tableProps, rowData: props.rowData, column: props.column });
-        const className = classNames(getColumnProp('bodyClassName'), getColumnProp('className'), cellClassName, {
+        const bodyClassName = ObjectUtils.getPropValue(getColumnProp('bodyClassName'), props.rowData, { column: props.column, field: field, rowIndex: props.rowIndex, frozenRow: props.frozenRow, props: props.tableProps });
+        const className = classNames(bodyClassName, getColumnProp('className'), cellClassName, {
             'p-selection-column': selectionMode !== null,
             'p-editable-column': editor,
             'p-cell-editing': editor && editingState,

diff --git a/components/lib/treetable/TreeTableBodyCell.js b/components/lib/treetable/TreeTableBodyCell.js
@@ -109,7 +109,8 @@ export const TreeTableBodyCell = (props) => {
         }
     });
 
-    const className = classNames(props.bodyClassName || props.className, {
+    const bodyClassName = ObjectUtils.getPropValue(props.bodyClassName, props.node.data, { field: props.field, rowIndex: props.rowIndex, props: props });
+    const className = classNames(bodyClassName || props.className, {
         'p-editable-column': props.editor,
         'p-cell-editing': props.editor ? editingState : false
     });