Skip to content

Instantly share code, notes, and snippets.

@parties

parties/responsive-fitted-table.jsx

Last active March 13, 2020 20:02
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save parties/a67c75c2ccc5ee6fe48a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save parties/a67c75c2ccc5ee6fe48a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. parties renamed this gist Mar 13, 2020. 1 changed file with 0 additions and 0 deletions.
    0 responsive-fitted-table.js → responsive-fitted-table.jsx
    View file
    File renamed without changes.
  2. parties renamed this gist Mar 13, 2020. 1 changed file with 0 additions and 0 deletions.
    0 responsive-fitted-table → responsive-fitted-table.js
    View file
    File renamed without changes.
  3. parties revised this gist Jun 4, 2015. 1 changed file with 1 addition and 6 deletions.
    7 changes: 1 addition & 6 deletions responsive-fitted-table
    View file
    Original file line number Diff line number Diff line change
    @@ -49,13 +49,8 @@ var FittedTable = React.createClass({
    },

    render() {
    let inline = {}
    if(this.props.maxHeight) {
    inline.maxHeight = this.props.maxHeight;
    }

    return (
    <div className="fitted-wrapper" style={inline}>
    <div className="fitted-wrapper">
    <Table {...this.props} width={this.state.tableWidth} height={this.state.tableHeight}>
    {this.props.children}
    </Table>
  4. parties created this gist Jun 4, 2015.
    67 changes: 67 additions & 0 deletions responsive-fitted-table
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,67 @@
    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() {
    let inline = {}
    if(this.props.maxHeight) {
    inline.maxHeight = this.props.maxHeight;
    }

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

    module.exports = FittedTable;