[Table] Table only renders the first 201 rows

[franciscofabian]

Bug report

Table only renders the first 201 rows, the remaining rows are not rendered but an empty space for them is created.

[llorca]

@franciscofabian please provide details about your setup, show what your code looks like and maybe share a screenshot if possible. Thank you!

[cmslewis]

@franciscofabian Table renders only the cells in view (virtualized rendering), so it needs to manage its own scrolling and impose a limit on the number of rows it's willing to render at one time (the limit is arbitrarily 200, because that's more than would ever fit in on a screen 99%+ of the time). Make sure you're not overriding the table's CSS positioning rules.

[franciscofabian]

It happens for me with any table, for example expanding this simple one

import React, { Component } from "react";
import "normalize.css/normalize.css";
import "@blueprintjs/core/dist/blueprint.css";
import "@blueprintjs/table/dist/table.css";
import { Cell, Column, Table } from "@blueprintjs/table";
export class TableExample extends Component {
    render() {
        return (
            <Table numRows={220}>
                <Column name="Test" renderCell={rowIndex => <Cell>{rowIndex}</Cell>} />
            </Table>
)}}
export default TableExample;

See the screenshot.

[cmslewis]

Show me your CSS? Your Table looks fine, but it needs to be in a fixed-height container if it contains more than a screen's worth of rows (~50). That will trigger scrolling.

As is, I suspect you're rendering the whole table inline without a height bound, so it's hitting the default 200-row cutoff.

[franciscofabian]

Yes, it works if it's bounded in a fixed height element. But it doesn't work if I have it for example in a element with maxHeight instead of height.

This works fine:

<div style={{height: "500px"}}>
    <Table .../>
</div>

but this doesn't:

<div style={{maxHeight: "500px"}}>
    <Table .../>
</div>

I would expect it to work in both cases.

[giladgray]

set explicit height in CSS.