Devextreme-reactive: cannot find demo-data/generator

[thepiyushrathi]

• [x] I have searched this repository's issues and believe that this is not a duplicate.

I'm using ...

• [x] React Grid
• [ ] React Chart
• [ ] Vue Grid

Current Behaviour

Expected Behaviour

Steps to Reproduce (for Bugs)

Environment

• devextreme-reactive: xxx
• react: xxx
• vue: xxx
• browser: xxx
• bootstrap: none
• react-bootstrap: none
• material-ui: none

[gsobolev]

Hi @thepiyushrathi,
 
It is unclear what issue you are facing and under what circumstances it happens. Can you describe it in greater detail or provide a sample demonstrating it?
 

[amimas]

I think what he means is that the example codes have a line import { generateRows } from '../../../demo-data/generator'; but he cannot find this "generator".

For instance, I'm trying to follow this example to create a "detail row" type table.
https://devexpress.github.io/devextreme-reactive/react/grid/docs/guides/detail-row/

I managed to get the basic component setup that renders the component with a table and each rows has an expand/collapse button to show details. But, the rows are not rendering the values of each cells. This is what my code snippet looks like:

import React, { Component } from 'react';
import Paper from '@material-ui/core/Paper';
import { RowDetailState } from '@devexpress/dx-react-grid';
import {
  Grid,
  Table,
  TableHeaderRow,
  TableRowDetail,
} from '@devexpress/dx-react-grid-material-ui';


class ReportTableByDay extends Component {

    constructor(props) {
        super(props);
        this.state = {
            rows: this.props.eventCountPerDay,
            columns: [
                { name: 'date', title: 'Event Date' },
                { name: 'totalEvents', title: 'Number of Events'}
            ]
        };
    }

    render() {
        const { rows, columns } = this.state;

        return (
            <Paper className="ReportTableByDay">
                <Grid rows={rows} columns={columns}>
                    <RowDetailState />
                    <Table />
                    <TableHeaderRow />
                    <TableRowDetail contentComponent={this.RowDetail}/>
                </Grid>
            </Paper>
        );
    }

    RowDetail = ({ row }) => (
        <div>Details for {row.date} for {row.eventCount}</div>
    );
}

export default ReportTableByDay;

The example in that link above is "generating rows" that is being imported here. Not sure what that does, but my data (this.props.eventCountPerDay) looks like this:

[
  { "date": "2018-07-10", "eventCount": 5},
  { "date": "2018-07-11", "eventCount": 4},
  { "date": "2018-07-12", "eventCount": 7},
]

[gsobolev]

Hi @amimas,
 
Right, generateRows is a helper function that we use to get data in our demos. E.g. in the demo you mention, it returns an array of 8 objects of the following structure.
 

{ name: string, sex: string, city: string, car: string }

 
As to your particular case, I have noticed that you define the totalEvents column in the columns config, but there is no such a field in the supplied data. So the "Number of Events" column will be empty.

[amimas]

Thanks @gsobolev for the explanation. Now I know how to use that component.

One more question on this topic. Is it necessary to make my component stateful? I'm receiving the data passed in from the parent component as properties. What I've learned so far is that it's not a good practice or standard to use states for storing info that is already available from properties.

[gsobolev]

@amimas, no, it is not. The Grid does not have any special requirements for this.

[Aparnaa1606]

I am facing the same problem. Can anyone tell where can I get this demo-data/generator folder?

[SergeyAlexeev]

It's here.

[Aparnaa1606]

@SergeyAlexeev ,Thank you so much for your help.

[Awwadovice]

@Aparnaa1606 @SergeyAlexeev
I am facing the same problem, could you please tell me how to fix it, I can't install the package of "import { generateRows } from '../../../demo-data/generator';"
I cloned the folder and I can't use "npm install" with it .

[SergeyAlexeev]

Hi,

Would you please clarify what you mean:

I can't install the package of "import { generateRows } from '../../../demo-data/generator';

We do not provide a separate package for the generateRows function. It's placed in a static file.

[Awwadovice]

@SergeyAlexeev Thank you very much m I have solved the problem by cloning this package dx-react-grid-demos and moving the "generator", "random" and "chart-data" to src folder.

[lock[bot]]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests.