React-pivottable内でjqueryデータテーブルをレンダリングする

react-pivottablejQueryデータテーブルビューでデータセット全体を表示する方法があるかどうか知りたいだけで実装しました

つまり、以下のデータのすべてを表形式で表示したい列がいくつかあります。

[
 '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を表示させてください

すべての列を表示したわけではありませんが、追加の列を含めるように私の例を変更できるはずです。

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;