react-autoresize-table
Autoresize table for React.
Install
npm install @doctolib/react-autoresize-table
Examples
Usage
React.createClass({
getInitialState() {
return {nbRows: 1};
},
renderRows() {
range(this.state.nbRows)
.map(index => (
<tr key={index}>
<td>{index}</td>
<th>Name #{index}</th>
</tr>
));
},
onNbVisibleRowsChange(nbRows) {
this.setState({nbRows});
},
render() {
return (
<AutoresizeTable onNbVisibleRowsChange={this.onNbVisibleRowsChange}>
<table>
<thead>
<tr>
<th>#</th>
<th>Name</th>
</tr>
</thead>
<tbody>{this.renderRows()}</tbody>
</table>
</AutoresizeTable>
}
})Properties
container
A DOM element that will be used as a container. Defaults to parentElement. If your parent is not in relative position, you can use container to specify a custom container.
<AutoresizeTable container={document}/>minRowsDisplayed
The minimal row displayed in the table. Defaults to 1.
<AutoresizeTable minRowsDisplayed={4}/>onNbVisibleRowsChange
Called when the number of visible rows changes.
<AutoresizeTable onNbVisibleRowsChange={nbRows => this.setState({nbRows})}/>rowHeight
The height of rows. By default it will try to get the height of the first row of your table tbody element.
<AutoresizeTable rowHeight={20}/>License
MIT