React-virtualized: How to show Spinner / Loading icon when loading data into Table?

Created on 25 Dec 2019  路  1Comment  路  Source: bvaughn/react-virtualized

I cannot Google for it or find it here or in the docs.
How can I display a loading icon when Table is loading data? How to track its state?

Version: 9.21.0

UPDATE. Also, which is quite related: how to show no data row?

Most helpful comment

Answering to myself. Well, I missed the property doing exactly what I want. It's called noRowsRenderer and can be used like this:

<Table
    ...
    noRowsRenderer={() => <Loader/>

In my real code I use additional state propery - loading, which indicates whether the data request has been dispatched or not:

<Table
    ...
    noRowsRenderer={() => (loading ? <Loader/> : null)}

Its initial value is true, and initial data propery (rowGetter target) is [].
One the request is completed, I set loading to false.

>All comments

Answering to myself. Well, I missed the property doing exactly what I want. It's called noRowsRenderer and can be used like this:

<Table
    ...
    noRowsRenderer={() => <Loader/>

In my real code I use additional state propery - loading, which indicates whether the data request has been dispatched or not:

<Table
    ...
    noRowsRenderer={() => (loading ? <Loader/> : null)}

Its initial value is true, and initial data propery (rowGetter target) is [].
One the request is completed, I set loading to false.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

iChip picture iChip  路  3Comments

miraage picture miraage  路  4Comments

SBoudrias picture SBoudrias  路  3Comments

davidychow87 picture davidychow87  路  3Comments

djeeg picture djeeg  路  3Comments