【发布时间】：2017-07-16 05:26:57
【问题描述】：
我正在使用带有 babel 和 react js 的节点 js 服务器构建 Web 应用程序。
在某些页面中，我使用 react-bootstrap-table 标记来创建包含内置数据过滤器的表（如下所示），我有两个主要问题： 1. 标题与数据列未对齐 - 引导表标签转换为 2 个 html 表标签，这是我认为首先导致问题的原因。我已经阅读了一些关于这个问题的帖子，它应该在 2.0.0 版中得到修复，我使用的是 2.9.0 版
- 我对某些列使用了内置过滤器，这会生成 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>
)
},
【问题讨论】：
标签： css twitter-bootstrap reactjs webpack react-bootstrap-table