Render jquery datatable in React-Pivottable


9

Ich habe implementiert, react-pivottablewollte nur wissen, ob es eine Möglichkeit gibt, den gesamten Datensatz in der jQuery-Datentabellenansicht anzuzeigen

Das heißt, ich habe einige Spalten, die alle in einer tabellarischen Ansicht für die folgenden Daten unten anzeigen möchten

[
 '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'
]

Tabellarische Ansicht mit allen Daten (Suchsortierung und Download-Option).

Bitte lassen Sie mich eine Option https://www.npmjs.com/package/pivottable anzeigen, bis ich sie anpassen sollte, um dies zu erreichen


2
Sie möchten React-Pivottable in JQuery Pivottable anzeigen? Können Sie versuchen, besser zu beschreiben, was Sie erreichen möchten?
tudor.gergely

Antworten:


0

Ich habe nicht alle Spalten angezeigt, aber Sie sollten in der Lage sein, mein Beispiel so zu ändern, dass es zusätzliche Spalten enthält.

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

Geben Sie hier die Bildbeschreibung ein

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;

danke sry ich habe nicht aktualisiert ich erreiche dies kann u bitte vorschlagen, wie man jquery datatable in Reaktionstabelle hinzufügt
dhana lakshmi
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.