电子反应粘性表格标题答案

【问题标题】：electron-react sticky table header电子反应粘性表格标题
【发布时间】：2017-08-14 11:27:15
【问题描述】：

我目前正在使用电子反应和 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 beta。所以现在如果我在表格内滚动，我想让每个表格的标题都粘在表格的顶部。让我们假设所有表格的高度为 200 像素，而我要显示的数据将占用 400 像素。所以我想把表头粘在上面。在我当前的视图中，我在顶部显示一个标题，后跟一些元数据和 3 个动态创建的表格。看起来不错，直到我向我的表中添加了如此多的数据以至于我必须滚动并且我无法将标题固定在顶部。也许有人可以帮助我/给我一个想法。

【问题讨论】：

标签： css twitter-bootstrap reactjs electron jsx

【解决方案1】：

正如我已经说过的，我正在使用 bootstrap4 Beta。在对文档进行研究后，我发现类sticky-top可以满足我的要求！因此，如果您有类似的问题，只需使用 class="sticky-top"！小心它在 Edge 和 IE 11 中不起作用

【讨论】：