I'm currently designing a bootstrap table in reactjs, complete with a filter beneath each column header.
Take a look at the code snippet below:
<table className="table table-striped">
<thead>
<tr>
<th>#</th>
<th onClick={() => this.handleColumnSort("id")}><b>Id</b> <i className={`fa fa-fw ${this.handleColumnSortCss("id")}`}></i></th>
<th onClick={() => this.handleColumnSort("name")}><b>Name</b> <i className={`fa fa-fw ${this.handleColumnSortCss("name")}`}></i></th>
<th onClick={() => this.handleColumnSort("munit")}><b>Munit</b> <i className={`fa fa-fw ${this.handleColumnSortCss("munit")}`}></i></th>
<th onClick={() => this.handleColumnSort("rate")}><b>Rate</b> <i className={`fa fa-fw ${this.handleColumnSortCss("rate")}`}></i></th>
</tr>
<tr>
<th></th>
<th><input type="text" onChange={(e) => this.onChangeHandler("id",e)}/></th>
<th><input type="text" onChange={(e) => this.onChangeHandler("name",e)}/></th>
<th><input type="text" onChange={(e) => this.onChangeHandler("munit",e)}/></th>
<th><input type="text" onChange={(e) => this.onChangeHandler("rate",e)}/></th>
</tr>
</thead>
<tbody>
{this.props.items.filtereditems.map((item,index) => (
<tr key={index} >
<th> {(index+1)+((this.props.page_number-1)*(this.props.page_size))}</th>
<td> {item.id}</td>
<td> {item.name}</td>
<td> {item.munit}</td>
<td> {item.rate}</td>
</tr>
))}
</tbody>
</table>
Here is the resulting output: https://i.sstatic.net/U9CA2.png
However, it has been observed that the input elements affect the layout negatively. They tend to expand and do not fit properly within their designated space.
https://i.sstatic.net/IJlY8.png
Is there a way to retain the intended layout while preventing the input fields from expanding too much?