Question

我正在尝试使用React Table构建网页，但我无法弄清楚如何调整表格的大小，以使其不会占用整个页面。这是需要在CSS中完成的事情还是可以在React中呈现？我正在使用create-react-app。谢谢您的帮助。这是我的App.js和App.css文件：

App.js：

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {

  const data = [{
    name: 'Tanner Linsley',
    age: 26,
    friend: {
      name: 'Jason Maurer',
      age: 23,
    }
  }]

  const columns = [{
    Header: 'Username/Email',
    accessor: 'name' // String-based value accessors!
  }, {
    Header: 'Risk Score',
    accessor: 'age',
    Cell: props => <span className='number'>{props.value}</span> // Custom cell components!
  }, 

  {
    id: 'friendName', // Required because our accessor is not a string
    Header: 'Location',
    accessor: d => d.friend.name // Custom value accessors!
  }]

  return <ReactTable
    data={data}
    columns={columns}
  />
  }
}

export default App;

App.css：

.App {
  text-align: center;
  label{
    font-size: 26px;
  }
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 40vmin;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

:local(.form) {
  font-size: 26px;
}

/*:local(.ReactTable) {
  border: 1px solid black; 
  overflow:auto;
}*/

Answer 1

反应表使用flex值1。如果要调整表的大小，则需要覆盖默认类或能够提供props值。请仔细阅读文件以了解更多信息。

React Table Documentation

例如，如果您覆盖类

.ReactTable.-striped.-highlight {
    width: 532px;
}

请谨慎操作，并根据需要进行修改。

调整React表的大小

1 个答案: