Skip to content

Instantly share code, notes, and snippets.

@thomasmery
Last active June 14, 2021 14:36
Show Gist options
  • Save thomasmery/79563a36ec2de2e2642665884a21c4c3 to your computer and use it in GitHub Desktop.
Save thomasmery/79563a36ec2de2e2642665884a21c4c3 to your computer and use it in GitHub Desktop.
Adding props to a React Virtualized custom row renderer
/**
* 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;
@thomasmery
Copy link
Author

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

it is provided as is :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment