Reputation: 3828

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;

Upvotes: 0

Answers (4)

Tim E

Reputation: 11

I was able to solve this problem by including the following code in the index.js file. Not only did my table not have any formatting, my initial project did not as well.

import 'bootstrap/dist/css/bootstrap.min.css';

Upvotes: 1

Douglas G. Wright III

Reputation: 11

The snippets provided in the component examples fails to mention the need to install both the react-bootstrap module as well as bootstrap itself. Mentioned here: reactbootstrap getting started docs

TLDR: run npm install react-bootstrap bootstrap

Upvotes: 0