Last active
June 14, 2021 14:36
-
-
Save thomasmery/79563a36ec2de2e2642665884a21c4c3 to your computer and use it in GitHub Desktop.
Adding props to a React Virtualized custom row renderer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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; |
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
Hey Tomas
I must have a working example,
plssss send me the getColumns return value or a working example.
PLEASE.
tnx