Looking for Ways to Style React Tables

Madaxe — Wed, 07 Apr 2021 15:12:59 +0000

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;
'''

DEV Community: Madaxe

Looking for Ways to Style React Tables