Search code examples
javascriptreactjsjsgrid

How can I load and use jsgrid lib in React?

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

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:
enter image description here

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.

Solution

  • 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} />;
  }
}