Using the Grid component

Material-UI provides a Grid component that can be used to get a grid layout to your React app. We will use Grid to get New Item button and the Export CSV link on the same line.

Add the following import to the Carlist.js file to import the Grid component:

import Grid from '@material-ui/core/Grid';

Next, we wrap AddCar and CSVLink inside the Grid components. There are two types of Grid components—a container and an item. Both components are wrapped inside the item's Grid components. Then both items' Grid components are wrapped inside the container's Grid component:

// Carlist.js render() method
return (
<div className="App">
<Grid container>
<Grid item>
<AddCar addCar={this.addCar} fetchCars={this.fetchCars}/>
</Grid>
<Grid item style={{padding: 20}}>
<CSVLink data={this.state.cars} separator=";">Export CSV</CSVLink>
</Grid>
</Grid>

<ReactTable data={this.state.cars} columns={columns}
filterable={true} pageSize={10}/>
<ToastContainer autoClose={1500}/>
</div>
);

Now, your app should look like the following and the buttons are now placed in one row:

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
52.15.245.1