我在div中有一个表格如下:
<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>
在css中我有:
.second-row-container{
height: 50vh;
background-color: lightgray;
padding: 0.5%;
width: 100%;
}
我认为通过使父宽度为100%,当我缩小屏幕时,表格将一直在缩小,但事实并非如此。
如何使表格适合父div和小屏幕我希望隐藏第3,4,5和6列。我怎样才能做到这一点?
答案 0 :(得分:1)
您可以通过将resize
事件附加到window
来实现,请参阅下面的代码
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;