im building a web app using a node js server with babel and react js.
in some pages im using the react-bootstrap-table tag in order to create a table (as shown below) that includes built-in filters of data, and i have 2 main problems: 1. the headers are misaligned with the data colums - bootstrap table tag transpiles into 2 html table tags which is what i think causes the problem in the first place. i've read some posts about the issue and it was supposed to be fixed in version 2.0.0 and im using version 2.9.0
- im using the built in filters for some of the columns, which generates 2 input scrollers that are supposed to appear one next to each other in the column header but instead shows one under the other. again i've tried to look around but didnt find something useful.
im adding the source-code of the html rendered and a screenshot showing the table (im sorry in advance but the text in the image is mostly hebrew but it doesnt matter much to get the idea)
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>
)
},
