रिएक्ट-प्लिवटेबल के अंदर रेंडर जेकरी डेटेबल

मैंने यह react-pivottableजानना चाहा है कि jQuery डेटा टेबल व्यू में संपूर्ण डेटा सेट प्रदर्शित करने का एक तरीका है

यानी, नीचे दिए गए डेटा के लिए मेरे पास कुछ कॉलम हैं जो उन सभी को एक सारणीबद्ध दृश्य में प्रदर्शित करना चाहते हैं

[
 'SRN', 'MainSystemType', 'MagnetType', 'MagnetCoverType', 'MagnetRMMUType',
 'MagnetHighOrderShimPowerSupply', 'GradientAmplifierType', 
 'GradientInterfaceType', 'GradientSwitchType', 'RFSystemB1FieldSystem', 
 'RFSystemFrontendInterface', 'CabinetsDasCabinet', 
 'ReconstructorAvailableMemory', 'ReconstructorNumberOfProcessors', 
 'AcquisitionSystemBulkBoardType', 'CabinetsCoolersCabinet', 
 'AcquisitionSystemType', 'PatientSupportPatientSupportType', 
 'PatientInterfaceMiscellaneousBoxType', 'PatientInterfacePPUType', 
 'PatientInterfaceType', 'PatientInterfaceAudioModule', 
 'PatientInterfaceAudioSwitchType', 'PatientSupportPowerSupplyUnit', 
 'RFAmpType', 'IOP_Firmware', 'RFP_Firmware'
],
[
 108, 'WA15', 'WA_15T', 'Wide Aperture', 'MEU', 'NONE', '781', 'IGCIDNA', 
 'NONE', 'HIGH', 'TFINT', 'DACC', 65536, 1, 'NONE', 'LCC2B', 'DDAS', 
 'IMT', 'AIBo', 'NONE', 'wBTU', 'AM3 With E-Stop', null, 'PSU2', 
 'S35_64', 'IOP.NA', 'RFP.NA'
],
[
 121, 'T15', 'F2000', 'Achieva', 'MEU', 'NONE', '781', 'IGCIDNA', 'NONE', 
 'HIGH', 'CFINT', 'DACC', 65536, 1, 'NONE', 'LCC2B', 'DDAS', 'MT', 'AIBo', 
 'NONE', 'wBTU', 'AM3 With E-Stop', null, 'NONE', 'S35_64', 'IOP.NA', 
 'RFP.NA'
],
[
 117, 'T30', '3T_2', 'Achieva AmbiRing', 'MEU', '810_85893', '787', 'IGCI', 
 'Gradient Switchbox', 'HIGH', null, 'DACC', 65536, 1, null, 'LCC2A', 'CDAS', 
 'MT', null, 'NONE', 'wBTU', null, 'VERSION 2', null, '8134_128', 'IOP.NA', 
 'RFP.NA'
]

सभी डेटा (खोज क्रम और डाउनलोड विकल्प) के साथ सारणीबद्ध दृश्य।

कृपया मुझे वहाँ एक विकल्प है https://www.npmjs.com/package/pivottable इसे देखने के लिए मुझे इसे प्राप्त करने के लिए समायोजित करना चाहिए

— धना लक्ष्मी
स्रोत

आप jquery के अंदर प्रतिक्रिया-प्लिवोटेबल दिखाना चाहते हैं? क्या आप कोशिश कर सकते हैं और बेहतर वर्णन कर सकते हैं कि आप क्या हासिल करना चाहते हैं?

— tudor.gerprise

मैंने सभी कॉलम प्रदर्शित नहीं किए, लेकिन आपको अतिरिक्त कॉलम शामिल करने के लिए मेरे उदाहरण को संशोधित करने में सक्षम होना चाहिए।

https://codesandbox.io/s/vibrant-haze-f9nro

import React, { useEffect } from "react";
import PivotTable from "pivottable";
import $ from "jquery";
import "react-pivottable/pivottable.css";

const App = () => {
  useEffect(() => {
    $("#output").pivot(
      [
        {
          SRN: 108,
          MainSystemType: "WA15",
          MagnetCoverType: "WA_15T",
          MagnetRMMUType: "Wide Aperture"
        },
        {
          SRN: 121,
          MainSystemType: "T15",
          MagnetCoverType: "F2000",
          MagnetRMMUType: "Achieva"
        },
        {
          SRN: 117,
          MainSystemType: "T30",
          MagnetCoverType: "3T_2",
          MagnetRMMUType: "Achieva AmbiRing"
        }
      ],
      {
        rows: ["SRN", "MainSystemType"],
        cols: ["MagnetCoverType", "MagnetRMMUType"]
      }
    );
  }, []);

  return <div id="output" />;
};

export default App;

— teddybeard
स्रोत

धन्यवाद sry मैं अद्यतन नहीं किया मैं इसे प्राप्त कर सकते हैं यू कृपया सुझाव दे सकते हैं कि कैसे प्रतिक्रिया तालिका में jquery datatable जोड़ने के लिए

— धना लक्ष्मी