From 95990dcae55652078324802ce9d539d5d4665a11 Mon Sep 17 00:00:00 2001 From: cagataycivici Date: Thu, 30 May 2019 13:56:19 +0300 Subject: [PATCH] Fixed #884 - Use dataKey for expandedRows --- src/components/datatable/DataTable.js | 2 +- src/components/datatable/TableBody.js | 50 ++++++++++++++----- src/showcase/datatable/DataTableDemo.js | 14 ++++-- .../datatable/DataTableRowExpansionDemo.js | 14 +++--- 4 files changed, 56 insertions(+), 24 deletions(-) diff --git a/src/components/datatable/DataTable.js b/src/components/datatable/DataTable.js index 177491d207..c5dd3234fc 100644 --- a/src/components/datatable/DataTable.js +++ b/src/components/datatable/DataTable.js @@ -136,7 +136,7 @@ export class DataTable extends Component { frozenHeaderColumnGroup: PropTypes.any, frozenFooterColumnGroup: PropTypes.any, rowExpansionTemplate: PropTypes.func, - expandedRows: PropTypes.array, + expandedRows: PropTypes.oneOfType([PropTypes.array,PropTypes.object]), onRowToggle: PropTypes.func, responsive: PropTypes.bool, resizableColumns: PropTypes.bool, diff --git a/src/components/datatable/TableBody.js b/src/components/datatable/TableBody.js index d88141dae1..5d4083026f 100644 --- a/src/components/datatable/TableBody.js +++ b/src/components/datatable/TableBody.js @@ -244,24 +244,43 @@ export class TableBody extends Component { } onRowToggle(event) { - let expandedRowIndex = this.findExpandedRowIndex(event.data); - let expandedRows = this.props.expandedRows ? [...this.props.expandedRows] : []; + let expandedRows; - if(expandedRowIndex !== -1) { - expandedRows = expandedRows.filter((val,i) => i !== expandedRowIndex); + if (this.props.dataKey) { + let dataKeyValue = String(ObjectUtils.resolveFieldData(event.data, this.props.dataKey)); + expandedRows = this.props.expandedRows ? {...this.props.expandedRows} : {}; - if(this.props.onRowCollapse) { - this.props.onRowCollapse({originalEvent: event, data: event.data}); + if (expandedRows[dataKeyValue] != null) { + delete expandedRows[dataKeyValue]; + if (this.props.onRowCollapse) { + this.props.onRowCollapse({originalEvent: event, data: event.data}); + } + } + else { + expandedRows[dataKeyValue] = true; + if (this.props.onRowExpand) { + this.props.onRowExpand({originalEvent: event, data: event.data}); + } } } else { - expandedRows.push(event.data); - - if(this.props.onRowExpand) { - this.props.onRowExpand({originalEvent: event, data: event.data}); + let expandedRowIndex = this.findExpandedRowIndex(event.data); + expandedRows = this.props.expandedRows ? [...this.props.expandedRows] : []; + + if (expandedRowIndex !== -1) { + expandedRows = expandedRows.filter((val,i) => i !== expandedRowIndex); + if (this.props.onRowCollapse) { + this.props.onRowCollapse({originalEvent: event, data: event.data}); + } + } + else { + expandedRows.push(event.data); + if (this.props.onRowExpand) { + this.props.onRowExpand({originalEvent: event, data: event.data}); + } } } - + this.props.onRowToggle({ data: expandedRows }); @@ -281,7 +300,14 @@ export class TableBody extends Component { } isRowExpanded(row) { - return this.findExpandedRowIndex(row) !== -1; + if (this.props.dataKey) { + let dataKeyValue = String(ObjectUtils.resolveFieldData(row, this.props.dataKey)); + + return this.props.expandedRows && this.props.expandedRows[dataKeyValue] != null; + } + else { + return this.findExpandedRowIndex(row) !== -1 + } } isSelectionEnabled() { diff --git a/src/showcase/datatable/DataTableDemo.js b/src/showcase/datatable/DataTableDemo.js index 03d94baf3b..d942e07221 100644 --- a/src/showcase/datatable/DataTableDemo.js +++ b/src/showcase/datatable/DataTableDemo.js @@ -1209,7 +1209,8 @@ export class DataTableContextMenuDemo extends Component {

Expandable Rows

Row expansion allows displaying detailed content for a particular row. To use this feature, add an expander column, define a rowExpansionTemplate as a function to return the expanded content and bind to - expandedRows property to read the expanded rows along with the onRowToggle property to update it.

+ expandedRows property to read the expanded rows along with the onRowToggle property to update it. expandedRows property either accepts an array of row data or a map whose key is the dataKey of the record. + Using expandable rows with a dataKey is suggested for better performance.

{` @@ -1217,7 +1218,10 @@ export class DataTableRowExpansionDemo extends Component { constructor() { super(); - this.state = {}; + this.state = { + cars: null, + expandedRows: null + }; this.carservice = new CarService(); this.rowExpansionTemplate = this.rowExpansionTemplate.bind(this); } @@ -1254,7 +1258,7 @@ export class DataTableRowExpansionDemo extends Component { render() { return ( this.setState({expandedRows:e.data})} - rowExpansionTemplate={this.rowExpansionTemplate}> + rowExpansionTemplate={this.rowExpansionTemplate} dataKey="vin"> @@ -1897,9 +1901,9 @@ export class DataTableStateDemo extends Component { expandedRows - array + array/object null - A collection of rows that are expanded. + A collection of rows or a map object row data keys that are expanded. responsive diff --git a/src/showcase/datatable/DataTableRowExpansionDemo.js b/src/showcase/datatable/DataTableRowExpansionDemo.js index a48fec9245..19fa62a32b 100644 --- a/src/showcase/datatable/DataTableRowExpansionDemo.js +++ b/src/showcase/datatable/DataTableRowExpansionDemo.js @@ -11,7 +11,8 @@ export class DataTableRowExpansionDemo extends Component { constructor() { super(); this.state = { - cars: [] + cars: [], + expandedRows: null }; this.carservice = new CarService(); this.rowExpansionTemplate = this.rowExpansionTemplate.bind(this); @@ -25,7 +26,7 @@ export class DataTableRowExpansionDemo extends Component { const src = "showcase/resources/demo/images/car/" + data.brand + ".png"; return ( -
+
{data.brand}/
@@ -62,7 +63,7 @@ export class DataTableRowExpansionDemo extends Component {
this.setState({expandedRows:e.data})} - rowExpansionTemplate={this.rowExpansionTemplate}> + rowExpansionTemplate={this.rowExpansionTemplate} dataKey="vin"> @@ -100,7 +101,8 @@ export class DataTableRowExpansionDemo extends Component { constructor() { super(); this.state = { - cars: [] + cars: [], + expandedRows: null }; this.carservice = new CarService(); this.rowExpansionTemplate = this.rowExpansionTemplate.bind(this); @@ -114,7 +116,7 @@ export class DataTableRowExpansionDemo extends Component { const src = "showcase/resources/demo/images/car/" + data.brand + ".png"; return ( -
+
{data.brand}/
@@ -149,7 +151,7 @@ export class DataTableRowExpansionDemo extends Component {
this.setState({expandedRows:e.data})} - rowExpansionTemplate={this.rowExpansionTemplate}> + rowExpansionTemplate={this.rowExpansionTemplate} dataKey="vin">