React-virtualized: Expending Row on Click

[wieseljonas]

Hello guys,

I'm currently trying to find ways to implement a click to expend functionality to my react virtualized list. What are your suggestions. Up to now my issue is the following the click row expends but the remaining cells don't push down. See screenshot.

Thank you

[bvaughn]

Hey @wieseljonas. This sounds like a question rather than an issue. As the issues template suggests, questions should go to Stack Overflow or the project Slack channel. Try asking there! 😄

[wieseljonas]

    Alright thanks. Given I'm using the vanilla APIs rowHeight and onClick I assumed it was sort of an issue. 😬


    Get Outlook for iOS

On Thu, Mar 30, 2017 at 5:46 PM +0200, "Brian Vaughn" [e-mail] wrote:

Hey @wieseljonas. This sounds like a question rather than an issue. As the issues template suggests, questions should go to Stack Overflow or the project Slack channel. Try asking there! 😄

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[bvaughn]

Totally understandable 😄 It's a bit of a judgement call I guess, but it helps me to redirect questions to Stack Overflow and Slack rather than Github b'c (1) lots of open Github issues actively stress me out (probably my fault but still) and (2) even though I check both places several times a day for questions- sometimes others see them and respond first, which reduces workload for me (which I like) 😁 Thanks for understanding!

[wieseljonas]

:) Fair enough I'll do my research! And paste the solution here once I find it! Thanks

[bvaughn]

Your help is always appreciated 🙏 Thanks!

On Mar 31, 2017 7:08 AM, "Jonas Wiesel" [e-mail] wrote:

:) Fair enough I'll do my research! And paste the solution here once I
find it! Thanks

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/bvaughn/react-virtualized/issues/635#issuecomment-290721235,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AABznWRiwg5zp_Gr44U9ybjUm0eqQyTUks5rrQg4gaJpZM4MudOi
.

[wieseljonas]

@bvaughn You were right the answer was somewhere on Stock Overflow > http://stackoverflow.com/questions/41105564/react-virtualized-onclick-expand-rows-for-additional-details

please find bellow how i implemented it in my table.

getRowHeight({ index }) {
    if (index === this.props.activeIndex) {
      return EXPANDED_HEIGHT;
    } else {
      return COLLAPSED_HEIGHT;
    }
  }

onRowClick({ event, index, rowData }) {
    event.stopPropagation();
    if (index === this.props.activeIndex) {
      this.props.dispatch({
        type: 'TOGGLE_ROW',
        payload: {
          activeId: null,
          activeIndex: null,
        },
      });
    } else {
      this.props.dispatch({
        type: 'TOGGLE_AROW',
        payload: {
          activeId: rowData.id,
          activeIndex: index,
        },
      });
    }
    listRef.recomputeRowHeights();
  }

[bvaughn]

👍