电子反应式粘桌头

Question

我目前正在使用电子反应和氧化还原进行我的第一个项目。 我根据传入数据动态生成表。 我的列宽度是根据该列中最大的单元格动态地确定的。

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。 因此，如果我在表格内滚动，我想使每个表格的页眉都贴在表格的顶部。 假设所有表格的高度为200px，要显示的数据为400px。 所以我想把桌子的头顶住。 在我当前的视图中，即时消息在顶部显示标题，然后显示一些元数据和3个动态创建的表。 看起来还不错，直到我向表中添加了太多数据以至于不得不滚动并且无法固定页眉才能停留在顶部。 也许有人可以帮我/给我一个主意。

Answer 1

正如我已经说过的，我正在使用bootstrap4 Beta。 在研究了文档之后，我发现了类sticky-top，它可以满足我的需求！ 因此，如果您遇到类似问题，只需使用class =“ sticky-top”！ 小心，它将无法在Edge和IE 11中使用