调整反应表大小

Question

I'm trying to build a webpage with a React Table and I cannot figure out how to resize the table such that it does not take up the whole page. Is this something that needs to be done in CSS or can it be rendered in React? I'm using create-react-app. Thanks for the help. Here are my App.js and App.css files:

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

React table uses flex value 1. If you want to resize the table you need to override the default class or able to give props value. Please go through the documents to know more.

React Table Documentation

for example if you override class

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

Please be cautious and modify according to your need.