React-data-grid: Play around with examples not working.

[rupav]

• Have you already searched for similar issues? Please help us out and double-check first!
  

  Yes

I'm submitting a ...

• [x] 🐛 Bug Report
• [ ] 💡 Feature Request

👋 Need general support? Not sure about how to use React itself, or how to get started with the Grid?
Please do not submit support request here. Instead see

https://github.com/adazzle/react-data-grid/blob/master/CONTRIBUTING.md

---

Issue Details

I am having problem with rowSelection prop in an opensource project, so I tried testing on your official documention, I tried using Play around with option in http://adazzle.github.io/react-data-grid/examples.html#/row-select to know more about this prop, but I while running in JSFiddle, I am getting few errors:

I tried running other examples in JSfiddle, but I am getting similar errors. Let me know how can I run the code successfully.

[jlbooker]

I think the Error: Cannot find module "./packages/react-data-grid/src/" is caused by a packaging problem.

Using the npm package version 4.0.5 (only a few hours old), I'm seeing a similar error with my Webpack build:
Module not found: Can't resolve './src' in './node_modules/react-data-grid'

The package's index.js has the following line:

module.exports = require('./src');

There is no src directory in the package, so this include fails. However, there is a dist directory, so changing this line to:

module.exports = require('./dist/react-data-grid.min.js');

fixed the problem for me. I suppose the package could also be re-published with the src/ directory included too.

[amanmahajan7]

We had some issues with the latest release. This issue has been fixed in 4.0.7.

[jlbooker]

Think that fixed it for me. Thanks!

@rupav You may want to try your jsfiddle again, with the latest release.

[rupav]

I will try ASAP, not with my laptop, thanks for the quick response.

On Mon, Apr 23, 2018, 10:58 PM Jeremy Booker [e-mail]
wrote:

Think that fixed it for me. Thanks!

@rupav https://github.com/rupav You may want to try your jsfiddle
again, with the latest release.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/adazzle/react-data-grid/issues/1172#issuecomment-383656374,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ATqz_FA04_sYZj05NKZRzl-oKEkXZa6Zks5trg8ogaJpZM4Teg2b
.

[rupav]

@jlbooker @amanmahajan7 on jsfiddle,
I am still getting errors,
Blocked loading mixed active content “http://reactjs.org/js/jsfiddle-integration-babel.js”
ReferenceError: React is not defined.
Her is the link to test: https://jsfiddle.net/f6mbnb8z/5/

[jlbooker]

@rupav Try this one: https://jsfiddle.net/eu9z6fj8/

I changed a few things.. I updated the dependencies/resources for including react & react-dom. It looks like npmcdn.com was serving them with the wrong MIME type, which was causing the browser not to load them (thus the "react is not defined" error).

I also updated the code to the latest ES6 modules/class format. The React.createClass(... method was removed in the latest version of React and has been deprecated for a while. Using the class Example extends React.Component {...} syntax means that the getInitialState() function has be changed into a constructor instead. The functions also don't get auto-bound to this anymore, so I added the bindings in the new constructor (e.g. this.rowGetter = this.rowGetter.bind(this);).

The formatting is still a little weird. It looks like you may need to add Bootstrap as well, but it runs now. :grinning:

[rupav]

Its working perfectly on jsfiddle, and I have understood your explanation. Thanks for explaining it too.

[rupav]

@jlbooker as I mentioned earlier, I was trying out this feature of rowSelection in an open-source project.
Now rowSelection as per documentation requires: type: shape[object, object]. https://github.com/adazzle/react-data-grid/blob/master/docs/markdowns/ReactDataGrid.md#rowselection .
But while using it, in ReactDataGrid component, I am getting an error of r.renderer is not a function (info: we are using webpack to bundle the js files).

In this project, I am importing using ES6 import method, import ReactDataGrid from 'react-data-grid'.
And react-data-grid version is: "react-data-grid": "^3.0.3",
"react-data-grid-addons": "^3.0.3",

Thats how we are calling ReactDataGrid component, I have identified that problem is with rowSelection prop only,
all other props are working fine (atleast not creating any error).

          <ReactDataGrid
             enableCellSelect={true}
                      columns={props.columns}
                    rowGetter={(index) => { return props.rows[index] }}
                    rowsCount={props.rows.length}
                 rowSelection={{
                  showCheckbox: true,
                   enableShiftSelect: true,
                      onRowsSelected: (rows) => {
                        rows.forEach((meta)  => {
                          const action = row.select(meta.rowIdx, meta.row)

                          props.dispatch(action)
                        })
                      },
                    onRowsDeselected: (rows) => {
                      rows.forEach((meta)  => {
                        const action = row.deselect(meta.rowIdx, meta.row)

                        props.dispatch(action)
                      })
                    },
                            selectBy: { isSelectedKey: 'selected' }
                 }}
            onGridRowsUpdated={({ fromRow, toRow, updated }) => {
              const action = row.update(fromRow, toRow, updated)

              props.dispatch(action)

              props.onChange({ columns: props.columns, rows: props.rows })
            }}/>

[rupav]

cc @malonecj @supamanda

[jlbooker]

I'd recommend upgrading to the latest version of the react-data-grid and react-data-grid-addons packages from NPM. The JS Fiddle above was using the latest version, which is 4.0.7.

You may want to create a new issue for any other problems you run into, as the original problem has been fixed (the cannot find module error).

[amanmahajan7]

Closing this issue as the original issue has been fixed. Feel free to continue the discussion

[rupav]

well @jibooker, even on updating, I am getting the same error. I also tried replacing the rowSelection={{......}} with enableRowSelect="multi" prop, but same error: r.props.renderer is not a function.
I will open the separate issue by evening. 👍