Adding props to a React Virtualized custom row renderer

custom_row_renderer.jsx

/**
 * External dependencies
 */
import React, { PureComponent, PropTypes } from 'react';
import { AutoSizer, Table } from 'react-virtualized';

/**
* Internal dependencies
**/
import getDefaultColumns from './columns'; // some columns for RV Table

/**
 * Constants
 */
const ROW_HEIGHT = 86;

/**
* functional react component to be used in 
* custom row renderer function
* to allow to pass additional props
*/
export default function CustomRowRendererComponent({
  subRowStyle, // custom prop
  mySubRow, //custom prop

  // custom key  prop
  // as we're passing row renderer function props 'en masse'
  // except for the key which we have to pass separately as it's not a proper prop
  _key,

  // RV row renderer original function props
  className,
  columns,
  index,
  style
}) {

  return (
    <div
      className={className}
      key={_key}
      style={{ ...style, display: 'block' }}
    >
      <div style={style} }>
	{columns}
      </div>
      <div className="sub-row" style={subRowStyle}>{mySubRow}</div>
    </div >
  );
}

class MyTable extends PureComponent {

  static propTypes = {
    itemsIds: PropTypes.array,
    getColumns: PropTypes.func,
  };

  static defaultProps = {
    getColumns: getDefaultColumns,
  }

  constructor(props) {
    super(props);

    this._rowGetter = this._rowGetter.bind(this);

    this.state = {
      itemsIds: this.props.itemsIds,
    };
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.itemsIds !== this.props.itemsIds) {
      this.setState({ itemsIds: nextProps.itemsIds });
    }
  }

  /**
  * data
  ********/

  _getItem(index) {
    return this.state.itemsIds[index];
  }

  _rowGetter = ({ index }) => {
    return this._getItem(index);
  };

  /**
  * a custom function as the row renderer
  * returning a component to which we pass
  * - the props passed to the rowRenderer function used by RV Table
  * - any prop we need to consume in our custom row
  * @returns {React.element}
  */
  getRowRenderer = (props) => {
    const mySubRow = <SomeComponent />;
    return <CustomRowRendererComponent subRowStyle={{ height: ROW_HEIGHT }} mySubRow={mySubRow} _key={props.key} { ...props } />;
  }

  render() {
    const {
      className,
      style
    } = this.props;
    return (
      <div className={className} style={style}>
        <AutoSizer>
          {({ width, height }) => (
            <Table
              width={width}
              height={height}
              headerHeight={60}
              rowCount={this.state.itemsIds.length}
              rowHeight={ROW_HEIGHT}
              rowGetter={this._rowGetter}
              rowRenderer={this.getRowRenderer}
            >
              {this.props.getColumns()}
            </Table>
          )}
        </AutoSizer>
      </div>
    );
  }

}

export default MyTable;

Thanks for this! it was really helpful. There's a small syntax error, <div style={style} }> remove the extra } there. Other than that it's working great i was able to render my custom component.

Hey
how can I see the getColumns() return value?
tnx

Hey Tomas
I must have a working example,
plssss send me the getColumns return value or a working example.
PLEASE.
tnx

so sorry but this is a project I'm no longer using and can't help with it,

it is provided as is :)