0
我目前正在研究我的第一個項目與電子反應和redux。我動態地在輸入數據上生成表格。我的列寬是立即基於該列中最大的單元格動態生成的。電子反應粘表標題
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測試版。所以現在我想把每個表格的標題放到表格的頂部。讓asume所有的表格都有200px的高度，我的數據要顯示400px。所以我想把桌子堅持到頂端。 在我當前的視圖中，im在頂部顯示一個標題，後面跟着一些元數據和3個動態創建的表格。看起來很好，直到我添加了很多數據到我的表格中，我必須滾動，並且我無法將標題固定在頂部。 也許有人可以幫助我/給我一個想法。