DataTable - Lazy Error

[Currotron]

Trying to develope an example with Datatable with onVirtualScroll event, I've got TypeError: this.props.columns.props.loadingBody is not a function error on screen:

TypeError: this.props.columns.props.loadingBody is not a function
renderRow
C:/Examples/ClientApp/node_modules/primereact/components/datatable/TableLoadingBody.js:49

46 | var cells = [];
47 |
48 | for (var i = 0; i < this.props.columns.length; i++) {
> 49 | cells.push(_react.default.createElement("td", {
| ^ 50 | key: i
51 | }, this.props.columns.props.loadingBody()));
52 | }



Her, my code is (similar official web site example):

Code: Select all

import React, { Component } from 'react';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';

import 'primereact/resources/primereact.css';

export class LAB extends Component {
    constructor(props) {
        super(props);

        this.state = {
            loading: true,
            cars: null,
            lazyCars: null,
            lazyTotalRecords: 0,
            frozenCars: null
        };

        this.load = this.load.bind(this);
        this.onVirtualScroll = this.onVirtualScroll.bind(this);
    }

    componentDidMount() {
        this.inmemoryData = [
            { "brand": "VW", "year": 2012, "color": "Orange" },
            { "brand": "Audi", "year": 2011, "color": "Black" },
            { "brand": "Renault", "year": 2005, "color": "Gray" },
            { "brand": "BMW", "year": 2003, "color": "Blue" },
            { "brand": "Mercedes", "year": 1995, "color": "Orange" },
            { "brand": "Volvo", "year": 2005, "color": "Black" },
            { "brand": "Honda", "year": 2012, "color": "Yellow" },
            { "brand": "Jaguar", "year": 2013, "color": "Orange" },
            { "brand": "Ford", "year": 2000, "color": "Black" },
            { "brand": "Fiat", "year": 2013, "color": "Red" },
            { "brand": "VW", "year": 2012, "color": "Orange" },
            { "brand": "Audi", "year": 2011, "color": "Black" },
            { "brand": "Renault", "year": 2005, "color": "Gray" },
            { "brand": "BMW", "year": 2003, "color": "Blue" },
            { "brand": "Mercedes", "year": 1995, "color": "Orange" },
            { "brand": "Volvo", "year": 2005, "color": "Black" },
            { "brand": "Honda", "year": 2012, "color": "Yellow" },
            { "brand": "Jaguar", "year": 2013, "color": "Orange" },
            { "brand": "Ford", "year": 2000, "color": "Black" },
            { "brand": "Fiat", "year": 2013, "color": "Red" },
            { "brand": "VW", "year": 2012, "color": "Orange" },
            { "brand": "Audi", "year": 2011, "color": "Black" },
            { "brand": "Renault", "year": 2005, "color": "Gray" },
            { "brand": "BMW", "year": 2003, "color": "Blue" },
            { "brand": "Mercedes", "year": 1995, "color": "Orange" },
            { "brand": "Volvo", "year": 2005, "color": "Black" },
            { "brand": "Honda", "year": 2012, "color": "Yellow" },
            { "brand": "Jaguar", "year": 2013, "color": "Orange" },
            { "brand": "Ford", "year": 2000, "color": "Black" },
            { "brand": "Fiat", "year": 2013, "color": "Red" },
            { "brand": "VW", "year": 2012, "color": "Orange" },
            { "brand": "Audi", "year": 2011, "color": "Black" },
            { "brand": "Renault", "year": 2005, "color": "Gray" },
            { "brand": "BMW", "year": 2003, "color": "Blue" },
            { "brand": "Mercedes", "year": 1995, "color": "Orange" },
            { "brand": "Volvo", "year": 2005, "color": "Black" },
            { "brand": "Honda", "year": 2012, "color": "Yellow" },
            { "brand": "Jaguar", "year": 2013, "color": "Orange" },
            { "brand": "Ford", "year": 2000, "color": "Black" },
            { "brand": "Fiat", "year": 2013, "color": "Red" }
        ];

        this.load();

    }

    load() {
        this.setState({ lazyCars: this.loadChunk(0, 40) });
    }


    loadChunk(index, length) {
        let chunk = [];
        for (let i = 0; i < length; i++) {
            chunk[i] = { ...this.inmemoryData[i], ...{ vin: (index + i) } };
        }

        return chunk;
    }

    onVirtualScroll(event) {
        //for demo purposes keep loading the same dataset
        //in a real production application, this data should come from server by building the query with LazyLoadEvent options
        setTimeout(() => {
            //last chunk
            if (event.first === 249980) {
                this.setState({
                    lazyCars: this.loadChunk(event.first, 20)
                });
            }
            else {
                this.setState({
                    lazyCars: this.loadChunk(event.first, event.rows)
                });
            }
        }, 250);
    }

    render() {
        return (<DataTable header="VirtualScroll with Lazy Loading" value={this.state.lazyCars} scrollable={true} scrollHeight="200px" virtualScroll={true} virtualRowHeight={30}
            rows={20} totalRecords={this.state.lazyTotalRecords} lazy={true} onVirtualScroll={this.onVirtualScroll} style={{ marginTop: '30px' }} loading={this.state.loading}>
            <Column field="vin" header="Vin" loadingBody={this.loadingText} />
            <Column field="year" header="Year" loadingBody={this.loadingText} />
            <Column field="brand" header="Brand" loadingBody={this.loadingText} />
            <Column field="color" header="Color" loadingBody={this.loadingText} />
        </DataTable>
        );
    }
}

Current version of primereact: 4.1.2

[IgnisMX]

I am not sure, but i think in this line lazyCars: this.loadChunk(event.first, 20). You are assigning a function to lazyCars instead execute the functions.
try this:
const cars = lazyCars: this.loadChunk(event.first, 20);
this.setState({
lazyCars: cars;
});

[Currotron]

Hi IgnisMX,
first of all, thanks for taking a look at the code.
The example above is taken from PrimeFaces support so I don't know...

Do you know of an example where I can use a Datatable component with dynamic columns, virtual scroll and lazy loading?