反应虚拟化表中的粘性页脚

Question

我基本上是想用 react-virtualized Table 来做到这一点： https://bvaughn.github.io/react-virtualized/?component=ScrollSync#/components/Table

制作带有可滚动表格主体的粘性页脚，如页眉。

我在 AutoSizer 中为页眉+正文和页脚创建了 2 个表格。但是当第一个表格滚动时，我的页脚宽度不正确：screenshot。我该如何解决？或者通过其他方式实现sticky footer

  <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，但您可以通过参考（例如 tableRef.state.scrollbarWidth）从 Table 获得测量值，然后只需 do what Table does 并在页脚 CSS 上设置 padding-right 的数量。