反应表列固定宽度战利品整个表

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

来源

2017-09-27 Jan Ciołek

我不知道很多关于反应表，但尽量不使用引号

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>

来源

2017-09-27 12:59:05 x1x

多数民众赞成在奇怪的是，我确定我尝试了！也许我编译结束前刷新页面。谢谢！ –

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

来源

2017-09-27 12:36:05

这将做到这一点，但我想休息列有动态宽度，无论如何。 –

反应表列固定宽度战利品整个表

回答

相关问题