diff --git a/components/doc/datatable/index.js b/components/doc/datatable/index.js
index 7625300f72..9f52af7da2 100644
--- a/components/doc/datatable/index.js
+++ b/components/doc/datatable/index.js
@@ -1109,6 +1109,18 @@ export const DataTableDemo = () => {
null |
Body content of the column. |
+
+ bodyStyle |
+ object |
+ null |
+ Inline style of the body. |
+
+
+ bodyClassName |
+ string | function |
+ null |
+ Style class of the body. If using a function must return a string. |
+
footer |
any |
@@ -1385,18 +1397,6 @@ export const DataTableDemo = () => {
null |
Configuration of the header tooltip, refer to the tooltip documentation for more information. |
-
- bodyStyle |
- object |
- null |
- Inline style of the body. |
-
-
- bodyClassName |
- string |
- null |
- Style class of the body. |
-
footerStyle |
object |
diff --git a/components/lib/column/column.d.ts b/components/lib/column/column.d.ts
index e00e544498..cad634cb81 100644
--- 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
index 425a630617..08da50b295 100644
--- 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
index 28537f1604..9b3e892f03 100644
--- 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
});