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