标签: react-bootstrap-table

我在安装时收到错误npm install react-bootstrap-table-next --save。

我不明白它告诉我什么，也不明白如何解决，任何指导表示赞赏：

错误：

$ npm install react-bootstrap-table-next --save
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: frontend@0.1.0
npm ERR! node_modules/react
npm ERR!   react@"^17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.3.0" from react-bootstrap-table-next@4.0.3
npm ERR! node_modules/react-bootstrap-table-next
npm ERR!   react-bootstrap-table-next@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this …

Mongo数据库可以返回具有嵌套数据的数组.我想显示以下内容中包含的数据:{applications:{data:{description:'我的说明}}}

但它根本不起作用.你有关于怎么做的想法,我在doc或SO中都没有发现任何东西.

const Applications = (props) => (
  <div className="applications">
    {props.applications.length === 0 ?
      <div>Aucune candidature</div>
      : <BootstrapTable data={props.applications} striped={true} hover={true}>
        <TableHeaderColumn dataField="_id" isKey={true} dataAlign="center" dataSort={true}>Title</TableHeaderColumn>
        <TableHeaderColumn dataField="status">Candidat</TableHeaderColumn>
        <TableHeaderColumn dataField="data.description" dataSort={true}>description</TableHeaderColumn>
      </BootstrapTable>
    }
  </div>
)

谢谢你的帮助 ;)

我在我的代码中使用了这个简短的示例代码段

<BootstrapTable data={products}>
  <TableHeaderColumn dataField="id" isKey={true}>Product ID</TableHeaderColumn>
  <TableHeaderColumn dataField="name">Product Name</TableHeaderColumn>
  <TableHeaderColumn dataField="price">Product Price</TableHeaderColumn>
</BootstrapTable>

一切都很完美.有桌子,有数据.但是(!)我在Chrome控制台中看到了下一条警告消息:

而如果我使用自己的元素,就没有警告......出了
什么问题？怎么解决？

这是代码块：

const expandRow = {
    renderer: row => (
        <div>
            <BootstrapTable
                keyField='id'
                data={ row.data }
                columns={ columns1 }
            />
        </div>
    )
};

export default class MyPage extends Component {
    constructor(props, context) {
        super(props, context);
    }

    componentDidMount() {
        this.props.actions.fetchData().  // fetches in this.props.data
    }

    rowEvents = {
        onClick: (e, row, rowIndex) => {
            this.props.actions.fetchHistory(row.Id).   /* this is undefined */
        }
    }

    render() {

        return (
            <BootstrapTable
                keyField='Id'
                data={ this.props.data }
                columns={ columns }
                striped
                rowEvents={ this.rowEvents }
                expandRow={ expandRow }
            /> …

我正在使用反应引导表来显示存储在info数组中的一些数据。

<BootstrapTable data={info} striped={true} hover={true} search={true} condensed={true} selectRow={selectRowProp(onRowSelect, info, selected)}>
    <TableHeaderColumn isKey={true} dataField="name"> Name </TableHeaderColumn>
    <TableHeaderColumn dataField="class"> Class </TableHeaderColumn>
    <TableHeaderColumn dataFormat={myStyle} dataField="price"> Price </TableHeaderColumn>
</BootstrapTable>

某些行可能有一个额外的属性oldPrice，我想将其显示为显示价格的工具提示。我怎样才能做到这一点？

如何直接在浏览器页面上编辑表格并在重新加载页面后保存数据.该表是使用react bootstrap table.screenshot的项目在这里.编辑并保存在屏幕截图中

我的项目代码在这里.

onAfterSaveCell(value, name){
axios({
method:'post',
url:'https://something.something.com.somewhere/update_something',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'x-access-token':this.state.token
},
data:{
name:value[name]
}
})
.then((response)=>{
this .getCustomerData();
})
.catch((error)=>{
throw('error',error);
});
 }

反应引导就在这里

<BootstrapTable data={this.state.customer_data} search={true} cellEdit={ {
  mode: "click",
  blurToSave: true,
  afterSaveCell: this.onAfterSaveCell
 } } >
    <TableHeaderColumn dataField="tid" isKey = {true} dataSort={true} width="70">S.No</TableHeaderColumn>
    <TableHeaderColumn dataField="company_name" dataSort={true}>Company Name</TableHeaderColumn>
    <TableHeaderColumn dataField="contact_address" dataSort={true}>Contact Address</TableHeaderColumn>
    <TableHeaderColumn dataField="contact_person" dataSort={true}>Contact Person</TableHeaderColumn>
    <TableHeaderColumn dataField="contact_number" dataSort = {true}>Contact Number</TableHeaderColumn>
 </BootstrapTable>

我正在使用以下代码生成一个简单的UI,我正在尝试将其转换为使用Bootstrap.

这是我的原始代码(使用Skeleton);

render:function(){
        return (
            <div className="grocery-item row">
                <div className="six columns">
                    <h4 className={this.props.item.purchased ? "strikethrough" : "" }>
                        {this.props.item.name}
                    </h4>
                </div>
                <form onSubmit={this.togglePurchased} className="three columns">
                    <button className={this.props.item.purchased ? "btn btn-danger" : "button-primary"}>{this.props.item.purchased ? "unbuy" : "buy"}</button>
                </form>
                <form className="three columns" onSubmit={this.delete}>
                    <button>&times;</button>
                </form>
            </div>
        )
    }

我尝试过做这样的事情;

render:function(){
        return (        
          <table class="table table-striped">
            <thead>
              <tr>
                <th>Column 1</th>
                <th>Columan 2</th>
                <th>Columan 3</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <h4 className={this.props.item.purchased ? "strikethrough" : "" }>{this.props.item.name}</h4>
                <form onSubmit={this.togglePurchased} className="three columns">
                  <button className={this.props.item.purchased …

我正在使用react-bootstrap-table，我正在尝试更改背景颜色。该文档有点不清楚具体是什么类型的数据会进入条件渲染函数的实现，因此我无法收到正确的结果。我究竟做错了什么？

// Customization Function 
function rowClassNameFormat(row, rowIdx) {
  // row is whole row object
  // rowIdx is index of row
  return rowIdx % 2 === 0 ? 'backgroundColor: red' : 'backgroundColor: blue';
}

// Data
var products = [
  {
    id: '1',
    name: 'P1',
    price: '42'
  },
  {
    id: '2',
    name: 'P2',
    price: '42'
  },
  {
    id: '3',
    name: 'P3',
    price: '42'
  },
];

// Component
class TrClassStringTable extends React.Component {
  render() {
    return (
      <BootstrapTable data={ products } trClassName={this.rowClassNameFormat}> …

我以这种方式使用react-bootstrap-table-next：

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;

但是，没有边界。

我缺少什么？

我正在按照下面的示例来实现“逐列扩展”。

/* eslint max-len: 0 */
import React from 'react';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';

const products = [];

function addProducts(quantity) {
  const startId = products.length;
  for (let i = 0; i < quantity; i++) {
    const id = startId + i;
    if (i < 3) {
      products.push({
        id: id,
        name: 'Item name ' + id,
        price: 2100 + i,
        expand: [ {
          fieldA: 'test1',
          fieldB: (i + 1) * 99,
          fieldC: (i + 1) * Math.random() * …