具有固定标题和可变列宽的反应虚拟化网格

Question

我正在尝试使用以下属性构建反应虚拟化网格：

• 固定标题（我正在使用List组件
• 可变列宽（在每列的columns.width属性中定义）

以下是代码：

import React, { Component } from "react";
import PropTypes from "prop-types";

import { Grid, List, AutoSizer, ScrollSync, ColumnSizer } from "react-virtualized";
import "react-virtualized/styles.css";

import moment from "moment";

import "./ReportGrid.css";

class ReportGrid extends Component {
    static propTypes = {
        columns: PropTypes.array.isRequired,
        rows: PropTypes.array.isRequired
    };

    getCellValue = (columnIndex, rowIndex) => {

        return ("TEST" + rowIndex + columnIndex);
    };

    cellRenderer = ({ columnIndex, key, rowIndex, style }) => {
        let val = this.getCellValue(columnIndex, rowIndex);

        if (rowIndex % 2 === 0)
            style.backgroundColor = "white";
        else 
            style.backgroundColor = "#f0f0f0";

        style.padding = 3;
        style.width = this.props.columns[columnIndex].width;
        style.borderLeftWidth = 1;
        style.borderRightWidth = 1;
        style.borderLeftStyle = "solid";
        style.borderRightStyle = "solid";
        style.borderLeftColor = "#f0f0f0";
        style.borderRightColor = "#f0f0f0";
        style.borderCollapse = "collapse";

        return (
            <div key={key} style={style}>
                {val}
            </div>
        );
    };

    rowRenderer = ({ key, rowIndex, style }) => {

        let cols = [];
        for (let i = 0; i < this.props.columns.length; i++) {
            let style = {};
            style.width = this.props.columns[i].width;
            style.textAlign = "center";
            style.borderLeftWidth = 1;
            style.borderRightWidth = 1;
            style.borderLeftStyle = "solid";
            style.borderRightStyle = "solid";
            style.borderLeftColor = "#f0f0f0";
            style.borderRightColor = "#f0f0f0";
            style.borderCollapse = "collapse";
            style.padding = 3;
            style.textTransform = "uppercase";

            cols.push(
                <div key={key + "col" + i} style={style}>
                    {"COLUMN" + i}
                </div>
            );
        }

        style.display = "flex";
        style.backgroundColor = "#b7cfea";

        return (
            <div key={key} style={style}>
                {cols}
            </div>
        );
    };

    render = () => {
        if (this.props.rows.length === 0) return <p>No data found.</p>;

        return (
            <div className="uxm-report-grid-container">
                <AutoSizer>
                    {({ height, width }) => (
                        <ScrollSync>
                            {({
                                clientHeight,
                                clientWidth,
                                onScroll,
                                scrollHeight,
                                scrollLeft,
                                scrollTop,
                                scrollWidth
                            }) => (
                                <div className="Table">
                                    <div className="LeftColumn">
                                        <List
                                            key={"List"}
                                            scrollTop={scrollTop}
                                            rowHeight={20}
                                            rowCount={1}
                                            width={100}
                                            height={20}
                                            width={width}
                                            rowRenderer={this.rowRenderer}
                                        />
                                    </div>
                                    <div className="RightColumn">
                                        <Grid
                                            key={"Grid"}
                                            onScroll={onScroll}
                                            cellRenderer={this.cellRenderer}
                                            columnCount={
                                                this.props.columns.length
                                            }
                                            columnWidth={100}
                                            height={500}
                                            width={width}
                                            rowHeight={20}
                                            rowCount={this.props.rows.length}
                                        />
                                    </div>
                                </div>
                            )}
                        </ScrollSync>
                    )}
                </AutoSizer>
            </div>
        );
    };
}

export default ReportGrid;

结果如下：

我遇到了以下问题：

一个。网格列未与列列对齐;

湾网格列间隔;

℃。网格可以水平滚动，List不是（固定）。

这是我第一次尝试使用react-virtualized。