React-Table列固定宽度破坏整个表

Question

有人可以向我解释为什么我不能在First Name列上设置固定宽度吗？它的设置是通过宽度但它会破坏整个表格。如果你修改大小（通过鼠标）列将出现其他列。这是由于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 ，我会很高兴的。

Answer 1

我对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> 

Answer 2

我对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>