How can I load and use jsgrid lib in React?

Question

I have problem with jsgrid lib. I try to load it to React project. I included libraries to project, like in instructions on npmjs.

My code loooks:
index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  </body>
</html>

app.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import * as JSGRID from 'jsgrid'



export default class App extends React.Component {
  componentDidMount() {

    window.$("#jsGrid").JSGRID.jsGrid({
      width: "100%",
      height: "400px",

      filtering: true,
      editing: true,
      sorting: true,
      paging: true,


      fields: [
          { name: "Name", type: "text", width: 150 },
          { name: "Age", type: "number", width: 50 },
          { name: "Address", type: "text", width: 200 },
          { name: "Country", type: "select", items: 0, valueField: "Id", textField: "Name" },
          { name: "Married", type: "checkbox", title: "Is Married", sorting: false },
          { type: "control" }
      ]
  });
  }


  render() {
    return (
      <div id="jsGrid">

      </div>
    );
    }
}

Still have some errors:

I wasted some time on it, Is any instructions how include jquery projects like this to React? Or maybe somebody faced with problem like this and know how to fix it.

That import statement is looking in the node modules dir, which is why it's failing. Check the docs for integrating with a 3rd party lib: https://reactjs.org/docs/integrating-with-other-libraries.html — jmargolisvt, Feb 19 '20 at 15:25
Are you using a react framework like `create-react-app`? Do you have access to the webpack config file? — Jackson, Feb 19 '20 at 15:33

Marek Kamiński · Answer 1 · 2020-02-19T15:46:01.570

1

dont use any prefix at all, just $("#jsGrid").jsGrid(...

and import jquery

import $ from 'jquery';

also, read this
How to use JQuery with ReactJS

edited Feb 19 '20 at 15:46

answered Feb 19 '20 at 15:39

Marek Kamiński

409
5
11

score 1 · Accepted Answer · answered Feb 19 '20 at 16:26

1

You need to remove JSGRID from the jQuery and should create a ref to reference the node instead of querying it.

// change to require
require("jsgrid");

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.gridRef = React.createRef();
  }
  componentDidMount() {
// remove JSGRID and use a ref
    window.jQuery(this.gridRef.current).jsGrid({
      width: "100%",
      height: "400px",

      filtering: true,
      editing: true,
      sorting: true,
      paging: true,

      fields: [
        { name: "Name", type: "text", width: 150 },
        { name: "Age", type: "number", width: 50 },
        { name: "Address", type: "text", width: 200 },
        {
          name: "Country",
          type: "select",
          items: 0,
          valueField: "Id",
          textField: "Name"
        },
        {
          name: "Married",
          type: "checkbox",
          title: "Is Married",
          sorting: false
        },
        { type: "control" }
      ]
    });
  }
  render() {
    return <div id="jsGrid" ref={this.gridRef} />;
  }
}

answered Feb 19 '20 at 16:26

Hoyen

2,511
1
12
13

Hey Hoyen, thanks for your solution. Now I have second question. I linked jquery lib in `index.html` -> ``. How Can I include it in my jsx file.I tried `require('jquery')` before `require("jsgrid")` I had error that jsgrid doesnt see jquery. – magnus250 Feb 19 '20 at 20:31
@magnus250 unfortunately you can't use 'jsgrid' without jQuery in the window scope. This isn't good practice but you can add something like this to your code: `import jQuery from 'jquery'; window.jQuery = window.jQuery || jQuery; require("jsgrid")` – Hoyen Feb 19 '20 at 20:37
Okay, I understand. Thanks you so much. I have last question, Do you know how to change edit event on jsgrid? Now it works when I just click on row, I need to change it to double click. – magnus250 Feb 19 '20 at 20:46
@magnus250 sorry, but you will probably need to look up how to implement double click event listener – Hoyen Feb 19 '20 at 20:48
import jquery from "jquery"; window.$ = window.jQuery = jquery; require("./js/jsgrid"); I am still getting jQuery not defined and jsGrid not defined.. any help? – san Feb 26 '21 at 03:52

How can I load and use jsgrid lib in React?

2 Answers2