我目前正在开展第一个使用电子反应和还原剂的项目。我动态地为传入的数据生成表。我的列宽度基于该列中最大的单元格动态地动态显示。
export default class myTable extends React.Component {
sortTable(col) {
const { tableHead } = this.props.tabledata
const { tableBody } = this.props.tabledata
const { DataType } = this.props.tabledata
const { length } = tableBody.allKeys
var str = col.target.id.split('_')
var isSorted = (toSort) =>{
for(let i = 0; i < length-1; i++ ){
if(tableBody.byKey[tableBody.allKeys[i]][tableHead.byCol[toSort].name]
> tableBody.byKey[tableBody.allKeys[i+1]][tableHead.byCol[toSort].name]){
return "INC"
break
}
}
return "DEC"
}
this.props.sortTable(str[0], str[1], isSorted(str[1]))
}
render(){
//Basic inline CSS Block
const th = {
backgroundColor: "#8c918d",
width: "auto",
whiteSpace: "nowrap"
}
//Pulling varibles needed out of this.props.tabledata
const { tableHead } = this.props.tabledata
const { tableBody } = this.props.tabledata
const { DataType } = this.props.tabledata
//filling thead with tableHeader data from store.state -- dynamicly
//if column != visible table head column will not be added
const cols = tableHead.allCols
const colItems = cols.map( (col) => {
if(tableHead.byCol[col].visibility){
let uid = DataType + '_' + col
return <th key ={col} id={uid} style={th} onClick={this.sortTable.bind(this)}> {tableHead.byCol[col].name} </th>
}
})
//filling the body with data from store.state
//if column != visible, col in body will not be added
const row = tableBody.allKeys.map((allKey) =>{
return(
<tr key={allKey}>
{
cols.map((col,i) => {
if(tableHead.byCol[col].visibility){
return <td key={i+1}>{tableBody.byKey[allKey][tableHead.byCol[col].name]}</td>
}
})
}
</tr>
)
})
//returning JSX dynamic generated Table
return(
<div>
<Table bordered striped inverse reflow>
<thead >
<tr >
{colItems}
</tr>
</thead>
<tbody>
{row}
</tbody>
</Table>
</div>
)
}
}
对于我的表我使用reactstrap和bootstrap 4 beta。所以现在我想让每个表的Header坚持到表的顶部,如果我在表内滚动。假设所有表的高度都是200px,我要显示的数据需要400px。所以我想把桌头贴到顶端。 在我当前的视图中,我在顶部显示一个标题,然后是一些元数据和3个动态创建的表。看起来很好,直到我向我的表添加如此多的数据,我必须滚动,我无法修复标题以坚持在顶部。 也许有人可以帮助我/给我一个想法。
答案 0 :(得分:0)
所以我已经说过我正在使用bootstrap4 Beta。在研究了文档之后,我发现了类粘性顶部,它可以做我想要的!因此,如果您有类似的问题,只需使用class =“sticky-top”!小心它不会在Edge和IE 11中工作