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 });