Q:

React Bootstrap table not formatting

I am very new to react and am attempting to follow a basic table tutorial. 
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;

A:

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

