diff --git a/components/lib/column/column.d.ts b/components/lib/column/column.d.ts index b3e6a95632..4d82ba3eda 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 ColumExpanderType = 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?: ColumExpanderType; exportable?: boolean; field?: string; filter?: boolean; diff --git a/components/lib/datatable/BodyCell.js b/components/lib/datatable/BodyCell.js index 08da50b295..02a33ea20d 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,6 +508,7 @@ export const BodyCell = React.memo((props) => { const frozen = getColumnProp('frozen'); const align = getColumnProp('align'); const value = resolveFieldData(); + const expander = ObjectUtils.getPropValue(getColumnProp('expander'), props.rowData, { column: props.column, field: field, rowIndex: props.rowIndex, frozenRow: props.frozenRow, props: props.tableProps }); 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 className = classNames(bodyClassName, getColumnProp('className'), cellClassName, { 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 (