Make reactable compatible with ReactTransitionGroup / ReactCSSTransitionGroup

[cjtafoya]

I've been trying to implement a simple slide open/close animation utilizing the standard React animation library, but this has proven impossible with reactable. Even passing in the component type (ie component={Tr} or component={Table}) does not allow the component to render.

Are there any plans to enable transitions / animations with reactable?

[kmayer]

I added this to my component that wraps the Table component, and added a little css magic. It will highlight new entries, but not removals.

  // Highlight changed rows by marking them with an extra css class
  componentWillReceiveProps(nextProps) {
    if (this.state.initialRender) {
      this.setState({ initialRender: false });
      return;
    }

    let changedIds = _.pluck(_.difference(nextProps.users, this.props.users), 'id');
    let that = this;

    // non-destructive enqueue/dequeue
    let timer = setTimeout(function() { that.setState({ changedIds: that.state.changedIds.slice(1), }) }, 2500);

    this.setState({
      changedIds: this.state.changedIds.concat([changedIds]),
      timers: this.state.timers.concat(timer)
    });
  }

  componentWillUnmount() {
    this.state.timers.forEach(timer => clearTimeout(timer));
  }

  tbody > tr {
    transition: background-color .5s;

    &.has-changed {
      background-color: $pacer-pale-yellow;
    }
  }

[kmayer]

The reason Reactable won't work is that it requires that direct descendants to be one of it's own:

The only possible children of \<Table> are \<Thead>, \<Tr>, or one \<Tfoot>. (anonymous) @ table.js?435f:150

so this won't work (because ReactCSSTransitionGroup is not a Tr.

    return (
      <div>
        <Reactable.Table {...props}>
          <ReactCSSTransitionGroup transitionName="highlight" transitionEnterTimeout={2500} transitionLeaveTimeout={2500}>
          {renderRows.call(this)}
          </ReactCSSTransitionGroup>
        </Reactable.Table>
      </div>
    );

[kmayer]

I suppose if you could somehow wrap this line:

https://github.com/glittershark/reactable/blob/master/src/reactable/table.jsx#L506

in the ReactCSSTransitionGroup, then it might work. Then again, it adds another dependency to this component.