Kết xuất dữ liệu jquery bên trong React-pivottable

Tôi đã triển khai react-pivottablechỉ muốn biết là có cách nào để hiển thị toàn bộ tập dữ liệu trong chế độ xem bảng dữ liệu jQuery

tức là, tôi có một vài cột muốn hiển thị tất cả chúng trong chế độ xem dạng bảng cho dữ liệu sau đây

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

Chế độ xem dạng bảng với tất cả dữ liệu (sắp xếp tìm kiếm và tùy chọn tải xuống).

Xin vui lòng cho tôi biết có tùy chọn https://www.npmjs.com/package/pivottable trong chế độ xem bằng cách tôi nên điều chỉnh để đạt được điều này

Tôi không hiển thị tất cả các cột, nhưng bạn sẽ có thể sửa đổi ví dụ của tôi để bao gồm các cột bổ sung.

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;