I have implemented a React.js pivot table with a Laravel backend. It works fine in general, but for some data, when I try to expand rows, it keeps loading indefinitely and just shows the spinner. What could be the issue?
import './sync.css';
import React, { useEffect, useState, useRef, Fragment } from 'react';
import {
PivotViewComponent,
GroupingBar,
FieldList,
Inject,
CalculatedField,
DrillThrough,
ExcelExport,
NumberFormatting
} from '@syncfusion/ej2-react-pivotview';
import { Browser } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SwitchComponent } from '@syncfusion/ej2-react-buttons';
import { registerLicense } from '@syncfusion/ej2-base';
import Loading from "../../components/Loader-circle";
import {
axiosApi,
SYNCFUSION_LICENSE,
isUserLoggedIn
} from '../../components/helper';
registerLicense(SYNCFUSION_LICENSE);
function PartnerTypeDemoReport() {
const pivotRef = useRef(null);
const subpage = "partner_type_demo_report";
const [pivotData, setPivotData] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [monthOrder, setMonthOrder] = useState([]);
useEffect(() => {
if (isUserLoggedIn()) {
fetchReportData();
} else {
// navigate('/logout');
}
}, []);
let pivotObj;
const fetchReportData = async () => {
setIsLoading(true)
if (isUserLoggedIn()) {
axiosApi.post(`reports/${subpage}/select_pmsn/getPartnerTypeReportForDemoStatus`
).then((response) => {
if (response.data.status === 200 && response.data.result === true) {
const data = response.data.demopivotData;
const sortedMonths = generateSortedMonthOrder(data);
setPivotData(data)
setMonthOrder(sortedMonths);
setIsLoading(false)
}
}).catch((error) => {
console.log(error, "Error getting module wise ")
setIsLoading(false)
})
} else {
//navigate.push("/logout")
}
}
const generateSortedMonthOrder = (data) => {
const monthMap = {
Jan: 0, Feb: 1, Mar: 2, Apr: 3, May: 4, Jun: 5,
Jul: 6, Aug: 7, Sep: 8, Oct: 9, Nov: 10, Dec: 11
};
const uniqueMonths = [...new Set(data.map(item => item.DemoMonth))];
return uniqueMonths
.filter(m => typeof m === 'string' && m.includes("-")) // ✅ remove nulls & invalid
.map(m => {
const [mon, yr] = m.split("-");
const year = parseInt(yr.length === 2 ? `20${yr}` : yr); // handles '06' or '25' as '2006' or '2025'
return {
original: m,
date: new Date(year, monthMap[mon])
};
})
.sort((a, b) => a.date - b.date)
.map(obj => obj.original);
};
const dataSourceSettings = {
enableSorting: true,
dataSource: pivotData,
expandAll: false,
values: [{ name: "PartnerType" }],
rows: [
{ name: "DemoMonth" },
{ name: "PartnerType" },
{ name: "ClientName" }
],
columns: [],
sortSettings: [
{
name: "DemoMonth",
order: "Descending",
membersOrder: monthOrder
}
],
filters: [{ name: "PartnerType" }]
}
function drillThrough(args) {
}
function btnClick() {
pivotObj.excelExport();
}
function onChange() {
pivotObj.gridSettings.layout = pivotObj.gridSettings.layout === 'Compact' ? 'Tabular' : 'Compact';
}
return (
<div className="control-pane">
{
!isLoading ? (
<div className='control-section' style={{ overflow: 'initial' }}>
<div className="tabular-layout-switch">
<label id="layout-label" htmlFor="layout-switch">Classic Layout</label>
<SwitchComponent id="layout-switch" checked={true} cssClass="pivot-layout-switch" change={onChange}></SwitchComponent>
<ButtonComponent cssClass='e-primary' onClick={btnClick.bind(this)}>Export</ButtonComponent>
</div>
<div className="mb-6">
<span className="mb-2 font-extrabold">Total Count</span>
<PivotViewComponent
ref={(scope) => { pivotObj = scope; }}
id="PivotView"
showTooltip={true}
dataSourceSettings={dataSourceSettings}
showFieldList={true}
allowCalculatedField={true}
allowNumberFormatting={true}
allowDrillThrough={true}
drillThrough={drillThrough.bind(this)}
showValuesButton={true}
allowExcelExport={true}
allowDeferLayoutUpdate = {true}
width={'100%'} height={'450'}
gridSettings={{
columnWidth: Browser.isDevice ? 100 : 120,
layout: 'Tabular',
enableVirtualization: true
}}
>
<Inject services={[FieldList, CalculatedField, NumberFormatting, GroupingBar, DrillThrough, ExcelExport]} />
</PivotViewComponent>
</div>
</div>
) : <Loading />
}
</div>
);
}
export default PartnerTypeDemoReport;
Upon expanding a row using the expand icon, the loading spinner is displayed, but the screen becomes unresponsive.
sample data below
[
{
"LeadNo": "100283",
"LeadTitle": "Aweder PVT LTD",
"LeadStatus": "Win",
"LicenseType": "Fresh",
"BusinessType": "Prospect",
"SalesEng": "rt rerwer",
"DemoMonth": "Feb-21",
"PartnerType": "Sales Associates",
"ClientName": " erw ertrettrte"
},
{
"LeadNo": "203984",
"LeadTitle": "ewrrgrew4 SYSTEMS",
"LeadStatus": "Lost",
"LicenseType": "Fresh",
"BusinessType": null,
"SalesEng": "rt3e5345",
"DemoMonth": "Mar-20",
"PartnerType": "Solution Partner",
"ClientName": "tfgw t"
},
{
"LeadNo": "359182",
"LeadTitle": "WRWEWE ENTERPRISES",
"LeadStatus": "Win",
"LicenseType": "Fresh",
"BusinessType": null,
"SalesEng": "Wwe wewqr",
"DemoMonth": "Jun-21",
"PartnerType": "Premier Lead Referral",
"ClientName": "werewr eryrty"
},
{
"LeadNo": "872198",
"LeadTitle": "ETTEEF TECHNOPARK",
"LeadStatus": "Lost",
"LicenseType": "Fresh",
"BusinessType": "Prospect",
"SalesEng": "QQEwar",
"DemoMonth": "Apr-20",
"PartnerType": "Not Applicable",
"ClientName": "RWE wewer"
},
{
"LeadNo": "467821",
"LeadTitle": "REWEEW RW SOLUTIONS",
"LeadStatus": "Lost",
"LicenseType": "Fresh",
"BusinessType": null,
"SalesEng": "EQWRGT WR",
"DemoMonth": "May-20",
"PartnerType": "Solution Partner",
"ClientName": "RTWUYERs"
},
{
"LeadNo": "785920",
"LeadTitle": "WQQWQW PVT LTD",
"LeadStatus": "Win",
"LicenseType": "Fresh",
"BusinessType": null,
"SalesEng": "WGtTERr",
"DemoMonth": "Jul-20",
"PartnerType": "Sales Associates",
"ClientName": "EWEWE Pvt Ltd"
},
{
"LeadNo": "314578",
"LeadTitle": "YTTWEE INDUSTRIES",
"LeadStatus": "Lost",
"LicenseType": "Fresh",
"BusinessType": "Prospect",
"SalesEng": null,
"DemoMonth": "Aug-20",
"PartnerType": "Not Applicable",
"ClientName": "WQQQWQW Industries"
},
{
"LeadNo": "600981",
"LeadTitle": "YErwewe GROUP",
"LeadStatus": "Lost",
"LicenseType": "Fresh",
"BusinessType": null,
"SalesEng": "GWWWE",
"DemoMonth": "Sep-20",
"PartnerType": "Premier Lead Referral",
"ClientName": "GTRTERg Group"
},
{
"LeadNo": "118293",
"LeadTitle": "ItrtTRRerr LIMITED",
"LeadStatus": "Lost",
"LicenseType": "Fresh",
"BusinessType": null,
"SalesEng": "VSDDDS",
"DemoMonth": "Jun-20",
"PartnerType": "Premier Lead Referral",
"ClientName": "GEerere Private Limited"
},
{
"LeadNo": "912384",
"LeadTitle": "BDFSFF TECHNOLOGIES",
"LeadStatus": "Lost",
"LicenseType": "Fresh",
"BusinessType": null,
"SalesEng": null,
"DemoMonth": "May-21",
"PartnerType": "Solution Partner",
"ClientName": "ty rtertert"
}
]
my backend
function getPartnerTypeReportForDemoStatus(Request $request) {
$master_controller = new MasterController();
$getDataSQL = DB::select("SELECT leadmaster.LE_LeadID AS LeadNo,leadmaster.LE_Leadtitle AS LeadTitle,leadstatusMaster.MasterName AS LeadStatus,`LicenseMaster`.MasterName AS LicenseType,`BusinesMaster`.MasterName AS BusinessType,`saleseng`.user_name AS `SalesEng`, DATE_FORMAT(DATE(leadmaster.LE_Demo_Date),'%b-%y') AS `DemoMonth`,`partnerType`.MasterName AS `PartnerType`,clientmaster.CL_ClientName AS `ClientName` FROM leadmaster LEFT JOIN comm_masters `partnerType` ON leadmaster.LE_PartnerType = `partnerType`.ID LEFT JOIN clientmaster ON leadmaster.LE_CompanyID = clientmaster.ID LEFT JOIN partners ON leadmaster.LE_PartnerId = partners.PartnerID LEFT JOIN phpgen_users `saleseng` ON leadmaster.LE_SalesEng = `saleseng`.user_id LEFT JOIN comm_masters `LicenseMaster` ON leadmaster.LE_LIC_TYPE = `LicenseMaster`.ID LEFT JOIN comm_masters `BusinesMaster` ON leadmaster.LE_BussinessType = `BusinesMaster`.ID LEFT JOIN comm_masters `leadstatusMaster` ON leadmaster.LE_LeadStatus = `leadstatusMaster`.ID WHERE leadmaster.JunkLead='0' AND (LE_LeadValideStatus='114' OR LE_LeadValideStatus='0') AND leadmaster.LE_Demo_Status ='155' AND leadmaster.LE_PartnerType IS NOT NULL LIMIT 1000");
$cleanedData = [];
foreach ($getDataSQL as $row) {
$cleanedData[] = [
'LeadNo' => $master_controller->RemoveSpecialChar($row->LeadNo ?? 'NA'),
'LeadTitle' => $master_controller->RemoveSpecialChar($row->LeadTitle ?? 'NA'),
'LeadStatus' => $master_controller->RemoveSpecialChar($row->LeadStatus ?? 'NA'),
'LicenseType' => $master_controller->RemoveSpecialChar($row->LicenseType ?? 'NA'),
'BusinessType'=> $master_controller->RemoveSpecialChar($row->BusinessType ?? 'NA'),
'SalesEng' => $master_controller->RemoveSpecialChar($row->SalesEng ?? 'NA'),
'DemoMonth' => $master_controller->RemoveSpecialChar($row->DemoMonth ?? 'NA'),
'PartnerType' => $master_controller->RemoveSpecialChar($row->PartnerType ?? 'NA'),
'ClientName' => $master_controller->RemoveSpecialChar($row->ClientName ?? 'NA'),
];
}
return[
"status" => $master_controller->success_code,
"result" => true,
"demopivotData" => $cleanedData
];
}
There are no console or network errors, and the backend appears to return data as expected.
