Skip to content

RowEnhancer Dynamic Content Causing Re-render #853

@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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions