Responsive Wrapper for Facebook's Fixed Data Table

responsive-fitted-table.jsx

var React = require('react');
var {Table} = require('fixed-data-table');
var _ = require('lodash');

var FittedTable = React.createClass({  
  getInitialState() {
    return {
      tableWidth  : 400,
      tableHeight : 400
    };
  },
  
  componentDidMount() {    
    var win = window;
    if (win.addEventListener) {
      win.addEventListener('resize', _.throttle(this._update, 250), false);
    } else if (win.attachEvent) {
      win.attachEvent('onresize', _.throttle(this._update, 250));
    } else {
      win.onresize = this._update;
    }
    this._update();
  },

  componentWillReceiveProps(props) {
    this._update();
  },
  
  componentWillUnmount() {
    var win = window;
    if(win.removeEventListener) {
      win.removeEventListener('resize', _.throttle(this._update, 250), false);
    } else if(win.removeEvent) {
      win.removeEvent('onresize', _.throttle(this._update, 250), false);
    } else {
      win.onresize = null;
    }
  },

  _update() {
    if (this.isMounted()) {
      var node = this.getDOMNode();

      this.setState({
        tableWidth  : node.clientWidth,
        tableHeight : node.clientHeight
      });
    }
  },
  
  render() {
    return (
      <div className="fitted-wrapper">
        <Table {...this.props} width={this.state.tableWidth} height={this.state.tableHeight}>
          {this.props.children}
        </Table>
      </div>
    );
  },
});

module.exports = FittedTable;

Update for React 0.14+ (but the height doesn't work, it doesn't fit to the window.height)

var React = require('react');
var ReactDOM = require('react-dom');
var {Table} = require('fixed-data-table');
var _ = require('lodash');

var FittedTable = React.createClass({
    getInitialState() {
        return {
            tableWidth  : 400,
            tableHeight : 400
        };
    },

    componentDidMount() {
        var win = window;
        if (win.addEventListener) {
            win.addEventListener('resize', _.throttle(this._update, 250), false);
        } else if (win.attachEvent) {
            win.attachEvent('onresize', _.throttle(this._update, 250));
        } else {
            win.onresize = this._update;
        }
        this._update();
    },

    componentWillReceiveProps(props) {
        this._update();
    },

    componentWillUnmount() {
        var win = window;
        if(win.removeEventListener) {
            win.removeEventListener('resize', _.throttle(this._update, 250), false);
        } else if(win.removeEvent) {
            win.removeEvent('onresize', _.throttle(this._update, 250), false);
        } else {
            win.onresize = null;
        }
    },

    _update() {
        if (this.isMounted()) {
            var node = ReactDOM.findDOMNode(this);

            this.setState({
                tableWidth  : node.clientWidth,
                tableHeight : node.clientHeight
            });
        }
    },

    render() {
        return (
            <div className="fitted-wrapper">
                <Table {...this.props} width={this.state.tableWidth} height={this.state.tableHeight}>
                    {this.props.children}
                </Table>
            </div>
        );
    },
});

module.exports = FittedTable;