diff --git a/components/lib/column/column.d.ts b/components/lib/column/column.d.ts index b3e6a95632..2d5336c888 100644 --- 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 index 08da50b295..55281f7dab 100644 --- a/components/lib/datatable/BodyCell.js +++ b/components/lib/datatable/BodyCell.js @@ -501,7 +501,6 @@ 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'); @@ -509,8 +508,10 @@ export const BodyCell = React.memo((props) => { 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 index 11d65b4195..e10e9c076c 100644 --- 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 {rowData.inventoryStatus}; }; + const allowExpansion = (rowData) => { + return rowData.orders.length > 0; + }; + const rowExpansionTemplate = (data) => { return (
@@ -139,7 +143,7 @@ const DataTableRowExpansionDemo = () => { dataKey="id" header={header} > - + @@ -259,6 +263,10 @@ export class DataTableRowExpansionDemo extends Component { return {rowData.inventoryStatus}; } + allowExpansion(rowData) { + return rowData.orders.length > 0; + }; + rowExpansionTemplate(data) { return (
@@ -291,7 +299,7 @@ export class DataTableRowExpansionDemo extends Component { this.setState({ expandedRows: e.data })} onRowExpand={this.onRowExpand} onRowCollapse={this.onRowCollapse} responsiveLayout="scroll" rowExpansionTemplate={this.rowExpansionTemplate} dataKey="id" header={header}> - + @@ -388,6 +396,10 @@ const DataTableRowExpansionDemo = () => { return {rowData.inventoryStatus}; } + const allowExpansion = (rowData) => { + return rowData.orders.length > 0; + }; + const rowExpansionTemplate = (data) => { return (
@@ -419,7 +431,7 @@ const DataTableRowExpansionDemo = () => { setExpandedRows(e.data)} onRowExpand={onRowExpand} onRowCollapse={onRowCollapse} responsiveLayout="scroll" rowExpansionTemplate={rowExpansionTemplate} dataKey="id" header={header}> - + @@ -515,6 +527,10 @@ const DataTableRowExpansionDemo = () => { return {rowData.inventoryStatus}; } + const allowExpansion = (rowData) => { + return rowData.orders.length > 0; + }; + const rowExpansionTemplate = (data) => { return (
@@ -546,7 +562,7 @@ const DataTableRowExpansionDemo = () => { setExpandedRows(e.data)} onRowExpand={onRowExpand} onRowCollapse={onRowCollapse} responsiveLayout="scroll" rowExpansionTemplate={rowExpansionTemplate} dataKey="id" header={header}> - + @@ -654,6 +670,10 @@ const DataTableRowExpansionDemo = () => { return {rowData.inventoryStatus}; } + const allowExpansion = (rowData) => { + return rowData.orders.length > 0; + }; + const rowExpansionTemplate = (data) => { return (
@@ -685,7 +705,7 @@ const DataTableRowExpansionDemo = () => { setExpandedRows(e.data)} onRowExpand={onRowExpand} onRowCollapse={onRowCollapse} responsiveLayout="scroll" rowExpansionTemplate={rowExpansionTemplate} dataKey="id" header={header}> - +