CODEWITHSUNDEEP
reactjsreact-bootstrap-table
tesicg
tesicg

Reputation: 4053

I don't have border on react-bootstrap-table-next

I use react-bootstrap-table-next in this way:

import React, { Component } from 'react';
import products from './data.js';
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
import BootstrapTable from 'react-bootstrap-table-next';

const columns = [{
  dataField: 'id',
  text: 'Product ID'
}, {
  dataField: 'name',
  text: 'Product Name'
}, {
  dataField: 'price',
  text: 'Product Price'
}];

class App extends Component {
  render() {
    return (
      <BootstrapTable keyField='id' data={ products } columns={ columns } />
    );
  }
}

export default App;

But, there is no border.

enter image description here

What I'm missing?

Upvotes: 5

Views: 5491

Answers (4)

Zip184
Zip184

Reputation: 1890

I had the exact same issue. It requires bootstrap CSS like others mentioned. In a typical react app, you'll want to install bootstrap via npm and then import the bootstrap CSS with this line.

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

Upvotes: 6

jedd
jedd

Reputation: 420

The bootstrap reference needs to be added to index.html as below:

https://getbootstrap.com/docs/4.0/getting-started/introduction/

Upvotes: 0

AllenFang
AllenFang

Reputation: 161

I'm the creator of react-bootstrap-table, please check https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/getting-started.html.

obviously, you are missing to add bootstrap css or there're some problem when you add bootstrap css.

Allen

Upvotes: 5

Krina Soni
Krina Soni

Reputation: 930

import React, { Component } from 'react';
import products from './data.js';
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
import BootstrapTable from 'react-bootstrap-table-next';

const columns = [{
  dataField: 'id',
  text: 'Product ID'
}, {
  dataField: 'name',
  text: 'Product Name'
}, {
  dataField: 'price',
  text: 'Product Price'
}];

class App extends Component {
  render() {
    return (
     <BootstrapTable
        keyField="id"
        data={ products }
        columns={ columns }
        striped
        hover
        condensed
     />
    );
  }
}

export default App;

Try this.

Upvotes: 0

Related Questions