Skip to content

RowEnhancer Dynamic Content Causing Re-render #853

Open
@Natas0007

Description

@Natas0007

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}
                      </>
                    )
                )

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions