Question

我基本上希望使用react-virtualized表来执行此操作： https://bvaughn.github.io/react-virtualized/?component=ScrollSync#/components/Table

使用可滚动的表体制作粘性页脚，如标题。

我在AutoSizer中创建了2个表，用于标题+正文和页脚。但是当第一个表有滚动时，我的页脚宽度不正确：screenshot。我该如何解决？或者通过另一种方式实现粘性页脚

  <AutoSizer>
{({ height, width }) => {
    const tableColumns = this.getColumns(columns, width);

    return (
        <div>
            <Table
                width={width}
                height={Math.min(height, HEADER_ROW_HEIGHT + BODY_ROW_HEIGHT * dataLength)}
                rowHeight={bodyRowHeight}
                onScroll={onScroll}
                rowRenderer={rowRenderer}
                rowCount={dataLength}
                rowGetter={({ index }) => data[index]}>
                {tableColumns}
            </Table>
            {total && <Table
                width={width}
                height={40}
                gridClassName={'has-footer'}
                disableHeader
                rowHeight={bodyRowHeight}
                rowRenderer={rowRenderer}
                rowCount={1}
                rowGetter={() => total}>
                {tableColumns}
            </Table> }
        </div>
    );
}}

更新

渲染方法

<AutoSizer>
{({ height, width }) => {
    const tableColumns = this.getColumns(columns, width);

    console.log('tableRef:', this.tableRef && this.tableRef.state);
    return (
        <div>
            <Table
                width={width}
                height={Math.min(height, HEADER_ROW_HEIGHT + BODY_ROW_HEIGHT * dataLength)}
                ref={this._setRef}
                headerClassName={headerClassName}
                headerHeight={headerRowHeight}
                rowHeight={bodyRowHeight}
                rowRenderer={rowRenderer}
                rowCount={dataLength}
                rowGetter={({ index }) => data[index]}>
                {tableColumns}
            </Table>
            {total &&
            <FooterComponent
                rowData={total}
                width={width - (this.tableRef && this.tableRef.state.scrollbarWidth || 0)}>
                {tableColumns}
            </FooterComponent>}
        </div>
    );
}}

_setRef = (ref) => {
        this.tableRef = ref;
    };

Answer 1

2个想法：

1）使用全新的Table作为粘性页脚是过度的。仅渲染标题会更有效（通过导入defaultTableHeaderRowRenderer或仅渲染自己的div）。

2）页脚上的宽度与滚动条的数量相同。它有点hacky，但你可以从Table通过参考（例如tableRef.state.scrollbarWidth）然后只是do what Table does获得测量结果并设置padding-right的数量在你的页脚CSS。

反应虚拟化

1 个答案: