Skip to content

Commit

Permalink
Fixed #884 - Use dataKey for expandedRows
Browse files Browse the repository at this point in the history
  • Loading branch information
@cagataycivici
cagataycivici committed May 30, 2019
1 parent 9c4b395 commit 95990dc
Show file tree
Hide file tree
Showing 4 changed files with 56 additions and 24 deletions.
2 changes: 1 addition & 1 deletion src/components/datatable/DataTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
50 changes: 38 additions & 12 deletions src/components/datatable/TableBody.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
});
Expand All @@ -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() {
Expand Down
14 changes: 9 additions & 5 deletions src/showcase/datatable/DataTableDemo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1209,15 +1209,19 @@ export class DataTableContextMenuDemo extends Component {

<h3>Expandable Rows</h3>
<p>Row expansion allows displaying detailed content for a particular row. To use this feature, add an <i>expander</i> column, define a <i>rowExpansionTemplate</i> as a function to return the expanded content and bind to
<i>expandedRows</i> property to read the expanded rows along with the <i>onRowToggle</i> property to update it.</p>
<i>expandedRows</i> property to read the expanded rows along with the <i>onRowToggle</i> property to update it. <i>expandedRows</i> 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.</p>

<CodeHighlight className="language-javascript">
{`
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);
}
Expand Down Expand Up @@ -1254,7 +1258,7 @@ export class DataTableRowExpansionDemo extends Component {
render() {
return (
<DataTable value={this.state.cars} expandedRows={this.state.expandedRows} onRowToggle={(e) => this.setState({expandedRows:e.data})}
rowExpansionTemplate={this.rowExpansionTemplate}>
rowExpansionTemplate={this.rowExpansionTemplate} dataKey="vin">
<Column expander={true} style={{width: '2em'}} />
<Column field="vin" header="Vin" />
<Column field="year" header="Year" />
Expand Down Expand Up @@ -1897,9 +1901,9 @@ export class DataTableStateDemo extends Component {
</tr>
<tr>
<td>expandedRows</td>
<td>array</td>
<td>array/object</td>
<td>null</td>
<td>A collection of rows that are expanded.</td>
<td>A collection of rows or a map object row data keys that are expanded.</td>
</tr>
<tr>
<td>responsive</td>
Expand Down
14 changes: 8 additions & 6 deletions src/showcase/datatable/DataTableRowExpansionDemo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -25,7 +26,7 @@ export class DataTableRowExpansionDemo extends Component {
const src = "showcase/resources/demo/images/car/" + data.brand + ".png";

return (
<div className="p-grid p-fluid" style={{padding: '1em'}}>
<div className="p-grid p-fluid" style={{padding: '2em 1em 1em 1em'}}>
<div className="p-col-12 p-md-3" style={{textAlign:'center'}}>
<img src={src} alt={data.brand}/>
</div>
Expand Down Expand Up @@ -62,7 +63,7 @@ export class DataTableRowExpansionDemo extends Component {

<div className="content-section implementation">
<DataTable value={this.state.cars} expandedRows={this.state.expandedRows} onRowToggle={(e) => this.setState({expandedRows:e.data})}
rowExpansionTemplate={this.rowExpansionTemplate}>
rowExpansionTemplate={this.rowExpansionTemplate} dataKey="vin">
<Column expander={true} style={{width: '3em'}} />
<Column field="vin" header="Vin" />
<Column field="year" header="Year" />
Expand Down Expand Up @@ -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);
Expand All @@ -114,7 +116,7 @@ export class DataTableRowExpansionDemo extends Component {
const src = "showcase/resources/demo/images/car/" + data.brand + ".png";
return (
<div className="p-grid p-fluid" style={{padding: '1em'}}>
<div className="p-grid p-fluid" style={{padding: '2em 1em 1em 1em'}}>
<div className="p-col-12 p-md-3" style={{textAlign:'center'}}>
<img src={src} alt={data.brand}/>
</div>
Expand Down Expand Up @@ -149,7 +151,7 @@ export class DataTableRowExpansionDemo extends Component {
<div className="content-section implementation">
<DataTable value={this.state.cars} expandedRows={this.state.expandedRows} onRowToggle={(e) => this.setState({expandedRows:e.data})}
rowExpansionTemplate={this.rowExpansionTemplate}>
rowExpansionTemplate={this.rowExpansionTemplate} dataKey="vin">
<Column expander={true} style={{width: '2em'}} />
<Column field="vin" header="Vin" />
<Column field="year" header="Year" />
Expand Down

0 comments on commit 95990dc

Please sign in to comment.