Fixed #2160 - Add cellClassName property to DataTable

primefaces · Jul 5, 2021 · fa625dc · fa625dc
1 parent a3e4827
commit fa625dc
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 5 deletions.
diff --git a/api-generator/components/datatable.js b/api-generator/components/datatable.js
@@ -377,6 +377,12 @@ const DataTableProps = [
         default: 'null',
         description: `Function that takes the row data and <br/> returns an object in "&#123;'styleclass' : condition&#125;" format to define a classname for a particular now.`
     },
+    {
+        name: 'cellClassName',
+        type: 'function',
+        default: 'null',
+        description: `Function that takes the cell data and <br/> returns an object in "&#123;'styleclass' : condition&#125;" format to define a classname for a particular now.`
+    },
     {
         name: 'rowGroupHeaderTemplate',
         type: 'function',

diff --git a/src/components/datatable/BodyCell.js b/src/components/datatable/BodyCell.js
@@ -387,7 +387,14 @@ export class BodyCell extends Component {
     render() {
         let content, editorKeyHelper;
         let cellSelected = this.props.allowCellSelection && this.isSelected();
-        let cellClassName = classNames(this.props.bodyClassName || this.props.className, {
+        let cellClassName = null;
+
+        if (this.props.cellClassName) {
+            let cellData = ObjectUtils.resolveFieldData(this.props.rowData, this.props.field);
+            cellClassName = this.props.cellClassName(cellData, { ...this.props, ...{ rowData: this.props.rowData } });
+        }
+
+        let className = classNames(this.props.bodyClassName || this.props.className, cellClassName, {
             'p-selection-column': this.props.selectionMode,
             'p-selectable-cell': this.props.allowCellSelection,
             'p-highlight': cellSelected,
@@ -511,7 +518,7 @@ export class BodyCell extends Component {
         }
 
         return (
-            <td ref={(el) => { this.container = el; }} role="cell" tabIndex={tabIndex} className={cellClassName} style={this.props.bodyStyle || this.props.style} onClick={this.onClick} onKeyDown={this.onKeyDown}
+            <td ref={(el) => { this.container = el; }} role="cell" tabIndex={tabIndex} className={className} style={this.props.bodyStyle || this.props.style} onClick={this.onClick} onKeyDown={this.onKeyDown}
                 rowSpan={this.props.rowSpan} onBlur={this.onBlur} onMouseDown={this.onMouseDown} onMouseUp={this.onMouseUp}>
                 {editorKeyHelper}
                 {content}

diff --git a/src/components/datatable/BodyRow.js b/src/components/datatable/BodyRow.js
@@ -315,7 +315,8 @@ export class BodyRow extends Component {
             let cell = <BodyCell tableId={this.props.tableId} key={i} {...column.props} value={this.props.value} rowSpan={rowSpan} rowData={this.props.rowData} index={i} rowIndex={this.props.rowIndex} onRowToggle={this.props.onRowToggle} expanded={this.props.expanded}
                 onRadioClick={this.props.onRadioClick} onCheckboxClick={this.props.onCheckboxClick} selected={this.props.selected} selection={this.props.selection} selectOnEdit={this.props.selectOnEdit}
                 editMode={this.props.editMode} editing={editing} onRowEditInit={this.onRowEditInit} onRowEditSave={this.onRowEditSave} onRowEditCancel={this.onRowEditCancel} onMouseDown={this.props.onCellMouseDown} onMouseUp={this.props.onCellMouseUp}
-                showRowReorderElement={this.props.showRowReorderElement} showSelectionElement={this.props.showSelectionElement} allowCellSelection={this.props.allowCellSelection} onClick={this.props.onCellClick} onEditingCellChange={this.props.onEditingCellChange}/>;
+                showRowReorderElement={this.props.showRowReorderElement} showSelectionElement={this.props.showSelectionElement} allowCellSelection={this.props.allowCellSelection} onClick={this.props.onCellClick} onEditingCellChange={this.props.onEditingCellChange}
+                cellClassName={this.props.cellClassName} />;
 
             cells.push(cell);
         }

diff --git a/src/components/datatable/DataTable.d.ts b/src/components/datatable/DataTable.d.ts
@@ -231,6 +231,7 @@ export interface DataTableProps {
     rowExpansionTemplate?(data: any): React.ReactNode;
     onRowToggle?(e: DataTableRowToggleParams): void;
     rowClassName?(data: any): object;
+    cellClassName?(data: any, options: any): object;
     rowGroupHeaderTemplate?(data: any, index: number): React.ReactNode;
     rowGroupFooterTemplate?(data: any, index: number): React.ReactNode;
     onColumnResizeEnd?(e: DataTableColumnResizeEndParams): void;

diff --git a/src/components/datatable/DataTable.js b/src/components/datatable/DataTable.js
@@ -78,6 +78,7 @@ export class DataTable extends Component {
         rowGroupMode: null,
         autoLayout: false,
         rowClassName: null,
+        cellClassName: null,
         rowGroupHeaderTemplate: null,
         rowGroupFooterTemplate: null,
         loading: false,
@@ -196,6 +197,7 @@ export class DataTable extends Component {
         rowGroupMode: PropTypes.string,
         autoLayout: PropTypes.bool,
         rowClassName: PropTypes.func,
+        cellClassName: PropTypes.func,
         rowGroupHeaderTemplate: PropTypes.func,
         rowGroupFooterTemplate: PropTypes.func,
         loading: PropTypes.bool,
@@ -1407,7 +1409,7 @@ export class DataTable extends Component {
                         onRowExpand={this.props.onRowExpand} onRowCollapse={this.props.onRowCollapse} emptyMessage={this.props.emptyMessage}
                         virtualScroll={this.props.virtualScroll} virtualRowHeight={this.props.virtualRowHeight} loading={this.props.loading}
                         groupField={this.props.groupField} rowGroupMode={this.props.rowGroupMode} rowGroupHeaderTemplate={this.props.rowGroupHeaderTemplate} rowGroupFooterTemplate={this.props.rowGroupFooterTemplate}
-                        sortField={this.getSortField()} rowClassName={this.props.rowClassName} onRowReorder={this.props.onRowReorder}
+                        sortField={this.getSortField()} rowClassName={this.props.rowClassName} cellClassName={this.props.cellClassName} onRowReorder={this.props.onRowReorder}
                         editMode={this.props.editMode} editingRows={this.props.editingRows} rowEditorValidator={this.props.rowEditorValidator}
                         onRowEditInit={this.props.onRowEditInit} onRowEditSave={this.props.onRowEditSave} onRowEditCancel={this.props.onRowEditCancel} onRowEditChange={this.props.onRowEditChange}
                         expandableRowGroups={this.props.expandableRowGroups} showRowReorderElement={this.props.showRowReorderElement} showSelectionElement={this.props.showSelectionElement}

diff --git a/src/components/datatable/TableBody.js b/src/components/datatable/TableBody.js
@@ -796,7 +796,7 @@ export class TableBody extends Component {
                         let bodyRow = <BodyRow tableId={this.props.tableId} key={i} value={this.props.value} rowData={rowData} rowIndex={i} onClick={this.onRowClick} onDoubleClick={this.props.onRowDoubleClick}
                             onRightClick={this.onRowRightClick} onTouchEnd={this.onRowTouchEnd} onMouseDown={this.onRowMouseDown} onMouseUp={this.onRowMouseUp} onCellMouseDown={this.onCellMouseDown} onCellMouseUp={this.onCellMouseUp}
                             onRowToggle={this.onRowToggle} expanded={expanded} selectionMode={this.props.selectionMode} selectOnEdit={this.props.selectOnEdit}
-                            onRadioClick={this.onRadioClick} onCheckboxClick={this.onCheckboxClick} selected={selected} contextMenuSelected={contextMenuSelected} rowClassName={this.props.rowClassName}
+                            onRadioClick={this.onRadioClick} onCheckboxClick={this.onCheckboxClick} selected={selected} contextMenuSelected={contextMenuSelected} rowClassName={this.props.rowClassName} cellClassName={this.props.cellClassName}
                             sortField={this.props.sortField} rowGroupMode={this.props.rowGroupMode} groupRowSpan={groupRowSpan}
                             onDragStart={(e) => this.onRowDragStart(e, i)} onDragEnd={this.onRowDragEnd} onDragOver={(e) => this.onRowDragOver(e, i)} onDragLeave={this.onRowDragLeave}
                             onDrop={this.onRowDrop} virtualScroll={this.props.virtualScroll} virtualRowHeight={this.props.virtualRowHeight}

diff --git a/src/showcase/datatable/DataTableDoc.js b/src/showcase/datatable/DataTableDoc.js
@@ -2925,6 +2925,12 @@ const bodyTemplate = (data, props) => {
                             <td>null</td>
                             <td>Function that takes the row data and <br/> returns an object in "&#123;'styleclass' : condition&#125;" format to define a classname for a particular now.</td>
                         </tr>
+                        <tr>
+                            <td>cellClassName</td>
+                            <td>function</td>
+                            <td>null</td>
+                            <td>Function that takes the cell data and <br/> returns an object in "&#123;'styleclass' : condition&#125;" format to define a classname for a particular now.</td>
+                        </tr>
                         <tr>
                             <td>rowGroupHeaderTemplate</td>
                             <td>function</td>