16

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

4

2 回答 2

17

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

于 2017-09-27T12:59:05.907 回答
4

我不太了解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-27T12:36:05.393 回答