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

Posted 2023-02-19

【中文标题】React-Table 列固定宽度破坏了整个表格

【英文标题】：React-Table column fixed width spoils whole table

【发布时间】：2018-03-08 22:22:24

【问题描述】：

有人可以向我解释一下为什么我不能在 First Name 列上设置固定宽度吗？它设置了传递的宽度，但它破坏了整个表格。如果你修改（通过鼠标）其他列的列大小会出现。是flexbox的原因吗？我对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 添加到标签中，我会很高兴。

【参考方案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>

【讨论】：

这很奇怪，我确定我确实尝试过！也许我在编译结束之前刷新了页面。谢谢！

【参考方案2】：

我对@9​​87654321@了解不多，但是您可以通过将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>

【讨论】：

可以，但我希望其余列具有动态宽度，无论如何，谢谢。