Argthtjtr

I am very new to react and am attempting to follow a basic table tutorial: (http://allenfang.github.io/react-bootstrap-table/example.html#basic)

I have installed react-bootstrap-table

npm install react-bootstrap-table --save

I have imported bootstrap-table

import {BootstrapTable, TableHeaderColumn} from
'react-bootstrap-table';

I have imported the css file:

import
'../../node_modules/react-bootstrap-table/dist/react-bootstrap-table-all.min.css';

With the above I am expecting a table to display as below:

However what I am seeing with my code is:

Why isn't the table appearing as in the example?

import React, { Component } from "react";

import './MenuButton.css';

import './MenuContainer.css';

import MenuButton from './MenuButton';

import Menu from './Menu';

import serverCall from "../api/ServerCall";

import {BootstrapTable,TableHeaderColumn} from 'react-bootstrap-table';

import '../../node_modules/react-bootstrap-table/css/react-bootstrap-table.css'





class MenuContainer extends Component {



    constructor(props, context) {

        super(props, context);

        this.state = {

            visible: false

        };

        this.handleMouseDown = this.handleMouseDown.bind(this);

        this.toggleMenu = this.toggleMenu.bind(this);



        this.getCustomers();

    }



    handleMouseDown(e) {

        this.toggleMenu();

        e.stopPropagation();

    }



    toggleMenu() {

        this.setState({

            visible: !this.state.visible

        });

    }



     getCustomers(){

              console.log("Getting Customers");

        serverCall(function(error, response) {

            if (error) {

                alert("Authorization Failed.")

            } else {

                console.log(response);



            }

        },"","customers.php");

    }



    render() {





        let products = [{

            id: 1,

            name: "Item name 1",

            price: 100

        },{

            id: 2,

            name: "Item name 2",

            price: 100

        }];



        return (



            <div>

                <div className="menu-container">

                    <div className="grid-item-hamburger-menu">

                        <MenuButton handleMouseDown={this.handleMouseDown}/>

                        <Menu handleMouseDown={this.handleMouseDown} menuVisibility={this.state.visible}/>

                    </div>



                    <div className="grid-item-dashboard-title">

                        Dashboard | Customers

                    </div>



                    <div className="grid-item-search">

                    </div>



                    <div className="grid-item-table">



                        <BootstrapTable data={ products }>

                            <TableHeaderColumn dataField='id' isKey>Product ID</TableHeaderColumn>

                            <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>

                            <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>

                        </BootstrapTable>

                </div>

                </div>

            </div>

        );

    }

}



export default MenuContainer;

try this line
import '../../node_modules/react-bootstrap-table/css/react-bootstrap-table.css'
in main entry components