GriddleGriddle / Griddle

Simple Grid Component written in React
http://griddlegriddle.github.io/Griddle/
MIT License
2.5k stars 377 forks source link

RowEnhancer Dynamic Content Causing Re-render #853

Open Natas0007 opened 5 years ago

Natas0007 commented 5 years ago

Griddle version

1.13.1

Expected Behavior

No full re-render on row click.

Actual Behavior

Griddle seems to fully re-render when adding/removing state-based content with RowEnhancer. I am using LocalPlugin.

Steps to reproduce

First off, Griddle rocks! Using the below RowEnhancer in the components prop works perfectly except that Griddle seems to re-render each time a row is selected, or "expanded". I suspect this because any sort is reset to default when a row is selected. Granted, the "hidden" row is expanded as expected based on state...but the sort is reset. I'm thinking maybe there is a more preferred way for me to be showing/hiding rows. I have a feeling tracking sortProperties in state might solve this problem, but if there is a preferred way for me to be hiding/showing this per-row content, that would be great! Thx!

RowEnhancer: compose(
                  EnhanceWithRowData,
                  OriginalComponent =>
                    props => (
                      <>
                        <OriginalComponent
                          {...props}
                          onClick={() => this.handleRowClick(props.rowData.userId)}
                        />
                        {this.state.selectedUserId === props.rowData.userId ?
                          <tr className="griddle-row">
                            <td className="griddle-cell" colSpan="7">
                              ...
                            </td>
                          </tr>
                          : null}
                      </>
                    )
                )
Natas0007 commented 5 years ago

I have this working by fulling removing the default sortProperties...but as mentioned, if there is a preferred method of what I'm doing, any assistance would be much appreciated. Thank you!