I have created a table in AWS with an associated Lambda function and API gateway. I'm learning React so I have written a simple page to display the table data. A quick note on this I have not solved the CORS issue with the API gateway so I installed a plugin in Chrome to turn of the CORS security.
I'm trying to style the table but I can't seem to get anything to work....
Can somebody help?
.HeaderAge {
top: 0;
left: 0;
width: 100%;
position: fixed;
background: #521751;
height: 56px;
}
javascript
import React, { Component} from 'react';
import axios from 'axios'
import Table from "./Table";
import './Table.css';
class DataModelViewComponent extends Component {
constructor(props) {
super(props)
this.state = {
users: [],
loading: true
}
}
async getUsersData() {
var config = {
method: 'get',
url: 'https://execute-api.eu-west-1.amazonaws.com/Prod/v1/DataModel',
headers: {
'x-api-key': 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', 'Access-Control-Allow-Origin': '*'
}
};
const res = await axios(config)
console.log(res.data)
this.setState({ loading: false, users: res.data })
}
componentDidMount() {
this.getUsersData()
}
render() {
const columns = [
{
Header: 'First Name',
accessor: 'firstName',
},
{
Header: 'Last Name',
accessor: 'lastName',
},
{
Header: 'Age',
accessor: 'age',
className: 'HeaderAge',
}
]
return (
<div className="App">
<Table columns={columns} data={this.state.users} />
</div>
)
}
}
export default DataModelViewComponent;
'''
Top comments (0)