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

Question

我正在使用带有 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 = '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 入门

从这里

你应该改变：

<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 文件中）