反应表列固定宽度战利品整个表
问题描述:
有人可以向我解释为什么我不能设置固定宽度为名字列?它的设置通过宽度,但它损坏整个表。如果你修改调整大小(鼠标)其他列将出现。这是由于flebox吗?我不熟悉flexbox。反应表列固定宽度战利品整个表
var ReactTable = ReactTable.default
class App extends React.Component {
constructor() {
super();
this.state = {
data: []
};
}
render() {
const { data } = this.state;
return (
<div>
<ReactTable
data={data}
columns={[
{
Header: "Name",
columns: [
{
width:'50',
Header: "First Name",
accessor: "firstName"
},
{
Header: "Last Name",
id: "lastName",
accessor: d => d.lastName
}
]
},
{
Header: "Info",
columns: [
{
Header: "Age",
accessor: "age"
},
{
Header: "Status",
accessor: "status"
}
]
},
{
Header: 'Stats',
columns: [
{
Header: "Visits",
accessor: "visits"
}
]
}
]}
defaultPageSize={10}
className="-striped -highlight"
/>
<br />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));
<link href="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.5.3/react-table.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.5.3/react-table.js"></script>
<div id="app"></div>
如果任何人都可以添加到react-table
标签我会很高兴。
答
我不知道很多关于反应表,但尽量不使用引号
var ReactTable = ReactTable.default
class App extends React.Component {
constructor() {
super();
this.state = {
data: []
};
}
render() {
const { data } = this.state;
return (
<div>
<ReactTable
data={data}
columns={[
{
Header: "Name",
columns: [
{
Header: "First Name",
accessor: "firstName",
width: 50
},
{
Header: "Last Name",
id: "lastName",
accessor: d => d.lastName
}
]
},
{
Header: "Info",
columns: [
{
Header: "Age",
accessor: "age"
},
{
Header: "Status",
accessor: "status"
}
]
},
{
Header: 'Stats',
columns: [
{
Header: "Visits",
accessor: "visits"
}
]
}
]}
defaultPageSize={10}
className="-striped -highlight"
/>
<br />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));
<link href="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.5.3/react-table.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.5.3/react-table.js"></script>
<div id="app"></div>
答
我对react-table
了解不多,但可以通过将width
设置为所有列来解决此问题。
var ReactTable = ReactTable.default
class App extends React.Component {
constructor() {
super();
this.state = {
data: []
};
}
render() {
const { data } = this.state;
return (
<div>
<ReactTable
data={data}
columns={[
{
Header: "Name",
columns: [
{
width:'50',
Header: "First Name",
accessor: "firstName"
},
{
width:'100',
Header: "Last Name",
id: "lastName",
accessor: d => d.lastName
}
]
},
{
Header: "Info",
columns: [
{
width:'100',
Header: "Age",
accessor: "age"
},
{
width:'100',
Header: "Status",
accessor: "status"
}
]
},
{
Header: 'Stats',
columns: [
{
width:'100',
Header: "Visits",
accessor: "visits"
}
]
}
]}
defaultPageSize={10}
className="-striped -highlight"
/>
<br />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));
<link href="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.5.3/react-table.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.5.3/react-table.js"></script>
<div id="app"></div>
+0
这将做到这一点,但我想休息列有动态宽度,无论如何。 –
多数民众赞成在奇怪的是,我确定我尝试了!也许我编译结束前刷新页面。谢谢! –