Failed to create table?

W

Wood Walker2017-10-29 18:55:45

gulp.js

Wood Walker, 2017-10-29 18:55:45

I tried to create a table using the react-bootstrap-table library. But got the following

component code

import React, { Component } from 'react';
import './App.css';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
let products = [{
    id: 1,
    name: "Product1",
    price: 120
}, {
    id: 2,
    name: "Product2",
    price: 80
}];

class Table extends Component {
    render() {
        return (
            <BootstrapTable data={ products } borderd = {true}>
                <TableHeaderColumn dataField='id' isKey>Product ID</TableHeaderColumn>
                <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
                <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
            </BootstrapTable>
        );
    }
}

export default Table;

They advised me to import styles. I did so, imported to the component.

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

But it turned out like this

Reply

Answer the question

In order to leave comments, you need to log in

5 answer(s)

D

Danila, 2019-08-01
@Machinez

the function passed to watch should call a callback or return Promise.resolve(), browserSync.reload does nothing of the sort.
try

function reload(cb) {
    browserSync.reload();
    cb()
}

function watch() {
    gulp.watch('./index.html', reload)
}

S

Stockholm Syndrome, 2019-08-01
@StockholmSyndrome

try
instead of
gulp.watch('./index.html', browserSync.reload);

V

Vladislav Tokarev, 2021-08-08
@vlad_tokarev

The author is probably no longer relevant. But I just spent two hours on the same problem. As it turned out, the html file must contain<body>

W

Wood Walker, 2017-10-30
@dollar1610

In general, everything was decided by importing the styles bootstrap.min.css, and react-bootstrap-table-all.min.css

M

Maxim, 2017-10-29
@maxfarseer

I see in the documentation that you need to include more css.