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。所以现在我想让每个表的Header坚持到表的顶部，如果我在表内滚动。假设所有表的高度都是200px，我要显示的数据需要400px。所以我想把桌头贴到顶端。在我当前的视图中，我在顶部显示一个标题，然后是一些元数据和3个动态创建的表。看起来很好，直到我向我的表添加如此多的数据，我必须滚动，我无法修复标题以坚持在顶部。也许有人可以帮助我/给我一个想法。

Answer 1

所以我已经说过我正在使用bootstrap4 Beta。在研究了文档之后，我发现了类粘性顶部，它可以做我想要的！因此，如果您有类似的问题，只需使用class =“sticky-top”！小心它不会在Edge和IE 11中工作

电子反应粘桌头

1 个答案: