0

I am using React-Data-Grid to show my data in the table, but the copy functionality is not working.

Below is my Grid Component in React, In which I have connectd it to the Back end API as well as with React Redux Store.

Table Created using React-Data-Grid

import React, { Component, useState, useEffect } from "react";
import { connect } from "react-redux";
import ApiHelper from "../../api/ApiHelper";
import ReactDataGrid from "react-data-grid";
import { Toolbar, Data, Filters } from "react-data-grid-addons";
import JarvisSpinner from "../presentationalComponents/JarvisSpinner";
import { withRouter } from "react-router-dom";
import "../../css/styles.css";
import "../../css/JarvisGrid.css";

const JarvisGrid = props => {
  const [pagesize, setPageSize] = useState(15);
  const [data, setdata] = useState([]);
  const [filters, setFilters] = useState({
    filterfield: "Application Send",
    filtervalue: "Base"
  });
  const [sort, setSort] = useState({
    Field: "PublicOrderNumber",
    Direction: "desc"
  });
  const [loading, setloading] = useState(true);

  useEffect(() => {
    //Set data
    ReloadData();
  }, [props.uid, props.CalendarDates.fromDate, props.CalendarDates.toDate]);
  
  const ReloadData = () => {
    ApiHelper.GetGridQueryResult(
      props.uid,
      props.filterField,
      props.filterValue,
      props.CalendarDates.fromDate,
      props.CalendarDates.toDate
    )
      .then(response => {
        console.log("response");
        console.log(response);
        console.log(response.status);
        console.log("Checking the data");
        console.log(response.data.responses);
        setdata(response.data.responses);
        setloading(false);
      })
      .catch(error => {
        setdata([]);
        switch (error.response.status) {
          case 403:
            console.log("Error code --> " + 403);
            props.history.push("/unAuthorizedPage");
            break;
          default:
            console.log("Error String --->" + error);
        }
      });
  };

  return (
    <>
      {loading ? (
        <JarvisSpinner size="3x" />
      ) : (
        <div className="JarvisGrid">
          <ReactDataGrid
            columns={props.columns}
            rowGetter={i => data[i]}
            rowsCount={data.length}
            minHeight={500}
            uid={props.uid}
            enableRowSelect={null}
            enableCellSelect
            toolbar={<Toolbar enableFilter="true" />}
            onAddFilter={filter => {
              setFilters({
                filterfield: filter.column.key,
                filtervalue: filter.filterTerm
              });
            }}
            onClearFilters={() =>
              setFilters({
                filterfield: "OrderType",
                filtervalue: "Base"
              })
            }
            onGridSort={(sortColumn, sortDirection) => {
              setSort({ Field: sortColumn, Direction: sortDirection });
            }}
          />
        </div>
      )}
    </>
  );

 
};

function mapStateToProps(state) {
  return {
    CalendarDates: state.calendarDates
  };
}

export default withRouter(connect(mapStateToProps)(JarvisGrid));

Let me know if I need to pass any props to the React-data-grid that I might have missed

SHUBHAM DEKATE
  • 95
  • 3
  • 14
  • Could you provide some of your code or an online demo? Which may help others to catch up with the problem you are facing quickly. [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) – keikai Apr 06 '20 at 18:34
  • @keikai I have added my Grid Component Code – SHUBHAM DEKATE Apr 06 '20 at 21:36

0 Answers0