标签: react-bootstrap-table

您好，我正在使用 react-bootstrap-table 模块在我的页面中显示一些数据，我想使用搜索功能按特定列过滤结果。这是我的渲染函数的一个片段：

render() {
    function showOSName(cell, row) {
      return cell.name;
    }

    function showBatteryCondition(cell, row) {
      return cell.condition;
    }

    var selectRowProp = {
      mode: "checkbox", 
      bgColor: "rgb(204, 230, 255)" 
    };  

    var tableOptions = {
        sizePerPage: 5,
        deleteText: "? Delete Selected",
        paginationSize: 3,
        clearSearch: true
    };

    return (
        <BootstrapTable
            data={this.state.data.systems}
            striped={true}
            hover={true}
            pagination={true}
            selectRow={selectRowProp}
            deleteRow={true}
            multiColumnSearch={true}
            search={true}
            ignoreSinglePage={true}
            options={tableOptions}
            >
          <TableHeaderColumn dataField="_id" isKey={true} dataAlign="center" 
            dataSort={true} searchable={false}>ID</TableHeaderColumn>
          <TableHeaderColumn dataField="model" dataAlign="center" 
            dataSort={true}>Model</TableHeaderColumn>
          <TableHeaderColumn dataField="serialnumber" dataAlign="center"
            searchable={false}>Serial Number</TableHeaderColumn>
          <TableHeaderColumn dataField="os" dataAlign="center" dataSort={true} 
            dataFormat={showOSName}>OS</TableHeaderColumn>
          <TableHeaderColumn …

我是 React 的新手，正在使用react-bootstrap 中的 Table 组件。

我想按“到期前的天数”列的升序对表格进行排序。

但是 Table 组件没有排序属性，有人知道我该怎么做吗？

我想在我的项目中使用React Bootstrap Table，但出现以下错误。

未捕获的 ReferenceError：参数未在 Object../node_modules/react-bootstrap-table2-toolkit/lib/src/search/SearchBar.js 中定义

以下是从他们的官方网站引用的导入内容。

import ToolkitProvider, {Search} from 'react-bootstrap-table2-toolkit';

const {SearchBar} = Search;

在此导入中无法找到搜索。

我正在使用带有 babel 和 react js 的节点 js 服务器构建 Web 应用程序。

在某些页面中，我使用 react-bootstrap-table 标签来创建一个包含内置数据过滤器的表（如下所示），我有两个主要问题：1. 标题与数据列未对齐 - bootstrap 表标签转换为 2 个 html 表标签，我认为这首先是导致问题的原因。我已经阅读了一些关于这个问题的帖子，它应该在 2.0.0 版中修复，我使用的是 2.9.0 版

2. 我对某些列使用内置过滤器，这会生成 2 个输入滚动条，这些滚动条应该在列标题中一个挨着一个出现，但在另一个下显示一个。我再次尝试环顾四周，但没有找到有用的东西。

我添加了呈现的 html 的源代码和显示表格的屏幕截图（我提前抱歉，但图像中的文本主要是希伯来语，但了解这个想法并不重要）

renderTable: function () {
    return (
        <div >
            <button className="w3-btn w3-theme-d5 w3-margin-top w3-round-xxlarge" onClick={this.onClickAddButton}> + </button>
            <BootstrapTable data={this.state.users} options={options} bordered={false} hover striped search searchPlaceholder={constantStrings.search_string}>
                <TableHeaderColumn
                    dataField = 'personal.id'
                    dataAlign = 'right'
                    dataSort = {true}
                    filter = { {type: 'TextFilter', placeholder:constantStrings.enterID_string} }
                    isKey = {true}>
                    {constantStrings.userID_string}
                </TableHeaderColumn>
                <TableHeaderColumn
                    dataField = …

React-bootstrap-table 中分页行的默认样式使用引导网格列大小调整类名称（例如“col-xs-6”）。我们使用与默认大小不同的网格（60 而不是 12），因此分页元素最终会被压缩成一直向左的小列。

将类名称设置为“col-xs-30”可以解决该问题。但我没有看到调整任何分页样式的选项。

我发现有一种方法可以完全自定义呈现分页元素。这是我唯一的选择吗？复制原件并仅更改列大小？

我试图让我的react-bootstrap-table桌子完全无边界 and have checked out all their docs and GitHub issues but haven't been able to get a fully borderless table. Here's what I have:

在我的 CSS 中：

.react-bs-container-header tr {
  border-bottom-style: hidden !important;
}
.react-bs-container-header {
  border-bottom-style: hidden !important;
  border-left-style: hidden !important;
  border-right-style: hidden !important;
}

.columnClassNameFormat1 {
  color: #4F58EA;
  border: none;

}

在我的 React 组件中：

<BootstrapTable data={this.state.data} version='4' options={ this.getOptions() }
              tableHeaderClass='columnClassNameFormat1'
              tableBodyClass='columnClassNameFormat1'
              containerClass='columnClassNameFormat1'
              tableContainerClass='columnClassNameFormat1'
              headerContainerClass='columnClassNameFormat1'
              bodyContainerClass='columnClassNameFormat1'
              trStyle = { this.rowClassNameFormat }
              >
              <TableHeaderColumn isKey …

我正在使用 react-bootstrap-table 并且我在格式化它时遇到了问题。主要问题是：

• 具有长名称的标题应显示 2 行文本，而不是像下图所示的一个和“...”：

• 此外，我无法设置表格单行的高度。每个文本都有很大的填充，因此表格不会太紧凑：

代码在这里：

<BootstrapTable
   data={this.props.sales}
   version="4"
   striped
   hover
   pagination
   keyField="Type"
>
  {tableHeaders.map((header, index) => (
     <TableHeaderColumn key={index} dataField={header.id} style={{ height: 10 }}>
        {header.name}
     </TableHeaderColumn>
  ))}
</BootstrapTable>

我是reactjs的新手并反应bootstrap表.我希望在数据显示之前在我的react组件中添加react-loading.因为数据显示这么久.但不起作用.

这是我的代码

import React, { Component } from 'react';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import PageHeader from 'react-bootstrap/lib/PageHeader';
import database from './database';
import root from 'window-or-global';
import Loading from 'react-loading';

class User extends Component {
    constructor(props) {
    super(props);
    this.state = {
      text:'',
      products: []
    };

   this.userRef = database.ref('users');
  }

  componentDidMount() {
    this.userRef.on('value', this.gotData, this.errData); 
  }


  gotData = (data) => {
    let newProducts = []
    const userdata = data.val();
    const keys = Object.keys(userdata);
    for (let i = 0; i …

我需要在表体中显示“没有可显示的数据”。

我现在使用react-bootstrap-table-next，它是react-bootstrap-table的高级版本

import BootstrapTable from 'react-bootstrap-table-next'
...
<BootstrapTable
    keyField="id"
    data={data}
    columns={columns}
    expandRow={expandRow}
    options={{ noDataText: 'There is no data to display' }}
/>

当没有数据时，它不会显示想要的文本。

任何帮助，将不胜感激。

提前致谢。

我正在尝试做一些简单的事情：在列上显示行号react-bootstrap-table。问题在于，似乎唯一可行的方法是添加一个带有索引的数据字段，如果打开了排序，则该索引会变得混乱。

理想情况下，应该有一种方法可以做到这一点，但我似乎找不到任何方法。

我正在使用“react-bootstrap-table”来渲染表格。某些列有很长的文本，其中有省略号。我已经设置了宽度=“一些数字”。我想将宽度设置为动态或列应根据文本的长度进行设置。有没有办法在不计算文本长度的情况下设置自动宽度，或者我们可以包装文本并删除省略号？

这是我的代码

<BootstrapTable
          data={products}
          pagination
          options={options}
          striped
          hover
          search
        >


          <TableHeaderColumn width="170" dataField="a1" dataSort columnTitle>some text</TableHeaderColumn>

          // Here i have set widht manually as '  width="160" '
          <TableHeaderColumn width="160" dataField="a2" dataSort columnTitle>some text</TableHeaderColumn>

          <TableHeaderColumn width="140" dataField="a3" dataSort>some text</TableHeaderColumn>


        </BootstrapTable>