Fix #2918: RowExpander allow function using rowData

primefaces · Oct 8, 2022 · be9c2a7 · be9c2a7
1 parent 6b323ac
commit be9c2a7
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 18 deletions.
diff --git a/components/lib/column/column.d.ts b/components/lib/column/column.d.ts
@@ -7,6 +7,8 @@ type ColumnBodyType = React.ReactNode | ((data: any, options: ColumnBodyOptions)
 
 type ColumnBodyClassType = string | ((data: any, options: ColumnBodyOptions) => string);
 
+type ColumnExpanderType = boolean | ((data: any, options: ColumnBodyOptions) => boolean);
+
 type ColumnFooterType = React.ReactNode | ((options: ColumnFooterOptions) => React.ReactNode);
 
 type ColumnEditorType = React.ReactNode | ((options: ColumnEditorOptions) => React.ReactNode);
@@ -196,7 +198,7 @@ export interface ColumnProps {
     dataType?: ColumnDataType;
     editor?: ColumnEditorType;
     excludeGlobalFilter?: boolean;
-    expander?: boolean;
+    expander?: ColumnExpanderType;
     exportable?: boolean;
     field?: string;
     filter?: boolean;

diff --git a/components/lib/datatable/BodyCell.js b/components/lib/datatable/BodyCell.js
@@ -501,16 +501,17 @@ export const BodyCell = React.memo((props) => {
         const tabIndex = getTabIndex(cellSelected);
         const selectionMode = getColumnProp('selectionMode');
         const rowReorder = getColumnProp('rowReorder');
-        const expander = getColumnProp('expander');
         const rowEditor = getColumnProp('rowEditor');
         const header = getColumnProp('header');
         const body = getColumnProp('body');
         const editor = getColumnProp('editor');
         const frozen = getColumnProp('frozen');
         const align = getColumnProp('align');
         const value = resolveFieldData();
-        const cellClassName = ObjectUtils.getPropValue(props.cellClassName, value, { props: props.tableProps, rowData: props.rowData, column: props.column });
-        const bodyClassName = ObjectUtils.getPropValue(getColumnProp('bodyClassName'), props.rowData, { column: props.column, field: field, rowIndex: props.rowIndex, frozenRow: props.frozenRow, props: props.tableProps });
+        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 cellClassName = ObjectUtils.getPropValue(props.cellClassName, value, columnBodyOptions);
+        const bodyClassName = ObjectUtils.getPropValue(getColumnProp('bodyClassName'), props.rowData, columnBodyOptions);
         const className = classNames(bodyClassName, getColumnProp('className'), cellClassName, {
             'p-selection-column': selectionMode !== null,
             'p-editable-column': editor,

diff --git a/pages/datatable/rowexpand.js b/pages/datatable/rowexpand.js
@@ -1,15 +1,15 @@
-import React, { useState, useEffect, useRef, memo } from 'react';
-import { DataTable } from '../../components/lib/datatable/DataTable';
-import { Column } from '../../components/lib/column/Column';
-import { TabView } from '../../components/lib/tabview/TabView';
+import getConfig from 'next/config';
+import Head from 'next/head';
+import React, { memo, useEffect, useRef, useState } from 'react';
+import { DocActions } from '../../components/doc/common/docactions';
 import { useLiveEditorTabs } from '../../components/doc/common/liveeditor';
-import { ProductService } from '../../service/ProductService';
-import { Rating } from '../../components/lib/rating//Rating';
 import { Button } from '../../components/lib/button/Button';
+import { Column } from '../../components/lib/column/Column';
+import { DataTable } from '../../components/lib/datatable/DataTable';
+import { Rating } from '../../components/lib/rating//Rating';
+import { TabView } from '../../components/lib/tabview/TabView';
 import { Toast } from '../../components/lib/toast/Toast';
-import { DocActions } from '../../components/doc/common/docactions';
-import Head from 'next/head';
-import getConfig from 'next/config';
+import { ProductService } from '../../service/ProductService';
 
 const DataTableRowExpansionDemo = () => {
     const [products, setProducts] = useState([]);
@@ -84,6 +84,10 @@ const DataTableRowExpansionDemo = () => {
         return <span className={`product-badge status-${rowData.inventoryStatus.toLowerCase()}`}>{rowData.inventoryStatus}</span>;
     };
 
+    const allowExpansion = (rowData) => {
+        return rowData.orders.length > 0;
+    };
+
     const rowExpansionTemplate = (data) => {
         return (
             <div className="orders-subtable">
@@ -139,7 +143,7 @@ const DataTableRowExpansionDemo = () => {
                         dataKey="id"
                         header={header}
                     >
-                        <Column expander style={{ width: '3em' }} />
+                        <Column expander={allowExpansion} style={{ width: '3em' }} />
                         <Column field="name" header="Name" sortable />
                         <Column header="Image" body={imageBodyTemplate} />
                         <Column field="price" header="Price" sortable body={priceBodyTemplate} />
@@ -259,6 +263,10 @@ export class DataTableRowExpansionDemo extends Component {
         return <span className={\`product-badge status-\${rowData.inventoryStatus.toLowerCase()}\`}>{rowData.inventoryStatus}</span>;
     }
 
+    allowExpansion(rowData) {
+        return rowData.orders.length > 0;
+    };
+
     rowExpansionTemplate(data) {
         return (
             <div className="orders-subtable">
@@ -291,7 +299,7 @@ export class DataTableRowExpansionDemo extends Component {
                     <DataTable value={this.state.products} expandedRows={this.state.expandedRows} onRowToggle={(e) => this.setState({ expandedRows: e.data })}
                         onRowExpand={this.onRowExpand} onRowCollapse={this.onRowCollapse} responsiveLayout="scroll"
                         rowExpansionTemplate={this.rowExpansionTemplate} dataKey="id" header={header}>
-                        <Column expander style={{ width: '3em' }} />
+                        <Column expander={allowExpansion} style={{ width: '3em' }} />
                         <Column field="name" header="Name" sortable />
                         <Column header="Image" body={this.imageBodyTemplate} />
                         <Column field="price" header="Price" sortable body={this.priceBodyTemplate} />
@@ -388,6 +396,10 @@ const DataTableRowExpansionDemo = () => {
         return <span className={\`product-badge status-\${rowData.inventoryStatus.toLowerCase()}\`}>{rowData.inventoryStatus}</span>;
     }
 
+    const allowExpansion = (rowData) => {
+        return rowData.orders.length > 0;
+    };
+
     const rowExpansionTemplate = (data) => {
         return (
             <div className="orders-subtable">
@@ -419,7 +431,7 @@ const DataTableRowExpansionDemo = () => {
                 <DataTable value={products} expandedRows={expandedRows} onRowToggle={(e) => setExpandedRows(e.data)}
                     onRowExpand={onRowExpand} onRowCollapse={onRowCollapse} responsiveLayout="scroll"
                     rowExpansionTemplate={rowExpansionTemplate} dataKey="id" header={header}>
-                    <Column expander style={{ width: '3em' }} />
+                    <Column expander={allowExpansion} style={{ width: '3em' }} />
                     <Column field="name" header="Name" sortable />
                     <Column header="Image" body={imageBodyTemplate} />
                     <Column field="price" header="Price" sortable body={priceBodyTemplate} />
@@ -515,6 +527,10 @@ const DataTableRowExpansionDemo = () => {
         return <span className={\`product-badge status-\${rowData.inventoryStatus.toLowerCase()}\`}>{rowData.inventoryStatus}</span>;
     }
 
+    const allowExpansion = (rowData) => {
+        return rowData.orders.length > 0;
+    };
+
     const rowExpansionTemplate = (data) => {
         return (
             <div className="orders-subtable">
@@ -546,7 +562,7 @@ const DataTableRowExpansionDemo = () => {
                 <DataTable value={products} expandedRows={expandedRows} onRowToggle={(e) => setExpandedRows(e.data)}
                     onRowExpand={onRowExpand} onRowCollapse={onRowCollapse} responsiveLayout="scroll"
                     rowExpansionTemplate={rowExpansionTemplate} dataKey="id" header={header}>
-                    <Column expander style={{ width: '3em' }} />
+                    <Column expander={allowExpansion} style={{ width: '3em' }} />
                     <Column field="name" header="Name" sortable />
                     <Column header="Image" body={imageBodyTemplate} />
                     <Column field="price" header="Price" sortable body={priceBodyTemplate} />
@@ -654,6 +670,10 @@ const DataTableRowExpansionDemo = () => {
         return <span className={\`product-badge status-\${rowData.inventoryStatus.toLowerCase()}\`}>{rowData.inventoryStatus}</span>;
     }
 
+    const allowExpansion = (rowData) => {
+        return rowData.orders.length > 0;
+    };
+
     const rowExpansionTemplate = (data) => {
         return (
             <div className="orders-subtable">
@@ -685,7 +705,7 @@ const DataTableRowExpansionDemo = () => {
                 <DataTable value={products} expandedRows={expandedRows} onRowToggle={(e) => setExpandedRows(e.data)}
                     onRowExpand={onRowExpand} onRowCollapse={onRowCollapse} responsiveLayout="scroll"
                     rowExpansionTemplate={rowExpansionTemplate} dataKey="id" header={header}>
-                    <Column expander style={{ width: '3em' }} />
+                    <Column expander={allowExpansion} style={{ width: '3em' }} />
                     <Column field="name" header="Name" sortable />
                     <Column header="Image" body={imageBodyTemplate} />
                     <Column field="price" header="Price" sortable body={priceBodyTemplate} />