React fixed data table make responsive

Question

I have a table in a div as following:

<div className="second-row-container">

    <Table
        rowsCount={this.state.myTableData.length}
        rowHeight={50}
        headerHeight={50}
        width={9*150}
        height={(this.state.myTableData.length+1)*50}>
        <Column
            header={<Cell>Delivery</Cell>}
            cell={props => (
                <Cell {...props}>
                    {this.state.myTableData[props.rowIndex].delivery}
                </Cell>
            )}
            width={150}
        />
        <Column
            header={<Cell>Category</Cell>}
            cell={props => (
                <Cell {...props}>
                    {this.state.myTableData[props.rowIndex].age}
                </Cell>
            )}
            width={150}
        />
        <Column
            header={<Cell>Language</Cell>}
            cell={props => (
                <Cell {...props}>
                    {this.state.myTableData[props.rowIndex].language}
                </Cell>
            )}
            width={150}
        />
        <Column
            header={<Cell>Target market</Cell>}
            cell={props => (
                <Cell {...props}>
                    {this.state.myTableData[props.rowIndex].market}
                </Cell>
            )}
            width={150}
        />
        <Column
            header={<Cell>Valid from</Cell>}
            cell={props => (
                <Cell {...props}>
                    {this.state.myTableData[props.rowIndex].valid_from}
                </Cell>
            )}
            width={150}
        />
        <Column
            header={<Cell>Valid till</Cell>}
            cell={props => (
                <Cell {...props}>
                    {this.state.myTableData[props.rowIndex].valid_till}
                </Cell>
            )}
            width={150}
        />
        <Column
            header={<Cell>Visibility</Cell>}
            cell={props => (
                <Cell {...props}>
                    {this.state.myTableData[props.rowIndex].visibility}
                </Cell>
            )}
            width={150}
        />
        <Column
            header={<Cell></Cell>}
            cell={props => (
                <Cell {...props}>

                </Cell>
            )}
            width={150}
        />
        <Column
            header={<Cell></Cell>}
            cell={props => (
                <Cell {...props}>

                </Cell>
            )}
            width={150}
        />
    </Table>

</div>

And in css I have:

.second-row-container{
  height: 50vh;
  background-color: lightgray;
  padding: 0.5%;
  width: 100%;
}

I thought by making parent width 100% the table will always be shrinking when I shrink the screen, but it doesn't.

How can I make the table fit in the parent div and on small screens I would like columns 3,4,5 and 6 to hide. How can I achieve this?

`width: 100%` means that the div occupies 100% of the width of it's own parent container. `width: auto` would cause the div to stretch/shrink to accomodate the relative positioned children. However, I don't think this matters in your case, you have set widths and height properties on the children, and I'm assuming these are ultimately setting CSS width and height on the child elements, the dimensions of the child elements are inflexible, and won't change regardless of the screen dimensions. Have you considered using CSS flex-box to style your component(s) so that it is flexible? — Finbarr O'B, Jul 05 '17 at 14:40

score 1 · Answer 1 · answered Jul 05 '17 at 14:40

You can achieve by attaching resize event to window, see code below

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;

React fixed data table make responsive

1 Answers1