react-bootstrap-table 过滤器显示错误且 headers 未与数据对齐

Question

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

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

版

我对某些列使用内置过滤器，这会生成 2 个输入滚动条，这些滚动条应该在 header 列中彼此相邻显示，但一个显示在另一个下方。我再次尝试环顾四周，但没有找到有用的东西。

我添加了 html 渲染的 source-code 和显示 table 的屏幕截图（我提前抱歉，但图像中的文本主要是希伯来语，但这并不重要得到这个想法）

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 = 'personal.firstName'
                    dataAlign = 'right'
                    dataSort = {true}
                    filter={ { type: 'TextFilter', placeholder:constantStrings.enterFirstName_string} }>
                    {constantStrings.firstName_string}
                </TableHeaderColumn>
                <TableHeaderColumn
                    dataField = 'personal.lastName'
                    dataAlign = 'right'
                    filter = { { type: 'TextFilter', placeholder:constantStrings.enterLastName_string} }>
                    {constantStrings.lastName_string}
                </TableHeaderColumn>
                <TableHeaderColumn
                    dataField = 'personal.sex'
                    dataAlign = 'right'
                    filterFormatted dataFormat={ helpers.enumFormatter } formatExtraData={ constantStrings.user_gender }
                    filter={ { type: 'SelectFilter', placeholder:constantStrings.selectGender_string, options: constantStrings.user_gender } }>
                {constantStrings.gender_string}
                </TableHeaderColumn>
                <TableHeaderColumn
                    dataField = 'jobDetails.userType'
                    dataAlign = 'right'
                    filterFormatted dataFormat={ helpers.enumFormatter } formatExtraData={ constantStrings.user_role }
                    filter={ { type: 'SelectFilter', placeholder:constantStrings.selectRole_string, options: constantStrings.user_role } }>
                    {constantStrings.role_string}
                </TableHeaderColumn>


                <TableHeaderColumn
                    dataField = 'startDate'
                    dataAlign = 'right'
                    dataFormat={ dateFormatter }
                    filter={ { type: 'DateFilter' ,placeholder:constantStrings.selectStartDate_string} }>
                    {constantStrings.startDate_string}
                </TableHeaderColumn>



                <TableHeaderColumn
                    dataAlign = 'right'
                    dataField = 'button'
                    dataFormat = {this.editButton}>
                    "Edit"
                </TableHeaderColumn>
                <TableHeaderColumn
                    dataAlign = 'right'
                    dataField = 'button'
                    dataFormat = {this.deleteButton}>
                    "Delete"
                </TableHeaderColumn>
            </BootstrapTable>
        </div>
    )
},

Answer 1

我也有这个问题..

这是 css 问题（文件未加载）。

如果您正在使用

react-bootstrap-table Getting Started

来自 here

你应该改变：

<link rel="stylesheet" src="https://npmcdn.com/react-bootstrap-table/dist/react-bootstrap-table-all.min.css">

至：

<link rel="stylesheet" href="https://npmcdn.com/react-bootstrap-table/dist/react-bootstrap-table-all.min.css">

（在 index.html 文件中）

react-bootstrap-table 过滤器显示错误且 headers 未与数据对齐

react-bootstrap-table filter shows bad and headers are not aligned to data

css

twitter-bootstrap

reactjs

webpack

react-bootstrap-table