DEV Community


Posted on

Looking for Ways to Style React Tables

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;
Enter fullscreen mode Exit fullscreen mode

import React, { Component} from 'react';
import axios from 'axios'
import Table from "./Table";

import './Table.css';

class DataModelViewComponent extends Component {

    constructor(props) {
        this.state = {
            users: [],
            loading: true

    async getUsersData() {

        var config = {
            method: 'get',
            url: '',
            headers: {
                'x-api-key': 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', 'Access-Control-Allow-Origin': '*'

        const res = await axios(config)
        this.setState({ loading: false, users: })

    componentDidMount() {

    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} />

export default DataModelViewComponent;
Enter fullscreen mode Exit fullscreen mode

Top comments (0)