I’ve developed a React net utility with a desk element to show information. It really works completely fantastic on Home windows, macOS, and Android gadgets, however I am encountering rendering points particularly on iOS gadgets.
On iOS gadgets, the desk information appears to be partially rendered or not rendered in any respect. This inconsistency is puzzling as a result of the identical codebase renders the desk completely on different platforms. I’ve ensured that there aren’t any syntax errors or device-specific code blocks that might be inflicting this subject.
<div key={1} ref={tableRef}>
{/* CSV obtain button for whole report */}
{financeData?.map((payPeriod, payIndex) => {
let grandTotal = 0;
let perDiemTotalAll = 0;
let payRateTotalAll = 0;
return (
<div
key={payIndex - payPeriod}
className="mt-12 shadow-sm border rounded-lg overflow-x-auto "
>
<div
key={2}
className="bg-gray-50 text-gray-600 font-medium py-3 px-6 mb-3 "
>
<p className="pl-6 py-3">
Pay Interval Begin: {formatDate(payPeriod.payPeriodStart)} |
Pay Interval Finish: {formatDate(payPeriod.payPeriodEnd)} | Pay
Date: {formatDate(payPeriod.payDataPeriod)}
</p>
</div>
<desk className="w-full table-auto text-sm text-left">
<thead className="bg-gray-50 text-gray-600 font-medium border-b">
<tr>
<th className="py-3 px-6">Nickname</th>
<th className="py-3 px-6">Merchandise Element</th>
<th className="py-3 px-6">Present</th>
<th className="py-3 px-6">Pay Price</th>
<th className="py-3 px-6">Per Diem</th>
<th className="py-3 px-6">Work Days</th>
<th className="py-3 px-6">Catering (Days)</th>
<th className="py-3 px-6">Per Diem Whole</th>
<th className="py-3 px-6">Pay Price Whole</th>
<th className="py-3 px-6">Remaining Pay</th>
</tr>
</thead>
<tbody className="text-gray-600 divide-y">
{nickPayData?.flatMap((merchandise, index) => {
const relevantROS = merchandise?.ros.filter((rosItem) => {
const rosStartDate = new Date(
formatDate2(rosItem.startDate)
);
const rosEndDate = new Date(
formatDate2(rosItem.endDate)
);
return (
rosStartDate <=
new Date(formatDate(payPeriod.payPeriodEnd)) &&
rosEndDate >=
new Date(formatDate(payPeriod.payPeriodStart))
);
});
return relevantROS?.map((rosItem, rosIndex) => {
const startDate = new Date(
formatDate2(rosItem.startDate)
);
const endDate = new Date(formatDate2(rosItem.endDate));
// Calculate work days inside the present pay interval
const workDays = calculateWorkDays(
startDate <
new Date(formatDate(payPeriod.payPeriodStart))
? new Date(formatDate(payPeriod.payPeriodStart))
: startDate, // Modify begin date if it falls earlier than pay interval begin
endDate > new Date(formatDate(payPeriod.payPeriodEnd))
? new Date(formatDate(payPeriod.payPeriodEnd))
: endDate // Modify finish date if it falls after pay interval finish
);
// Initialize catering days for begin and finish date
// let cateringDays = 0;
const cateringDays = calculateCateringDays(
startDate <=
new Date(formatDate(payPeriod.payPeriodStart))
? new Date(formatDate(payPeriod.payPeriodStart))
: startDate, // Modify begin date if it falls earlier than pay interval begin
endDate >=
new Date(formatDate(payPeriod.payPeriodEnd))
? new Date(formatDate(payPeriod.payPeriodEnd))
: endDate, // Modify finish date if it falls after pay interval finish
catering,
rosItem
);
const payRate =
rosItem?.itemDetail === "CS - SHOW DAY - OFF" ||
rosItem?.itemDetail === "CS - OFF UN-SCHEDULED"
? 0
: calcPayRate(
parseInt(
merchandise?.payRate?.substitute("$", "").trim()
),
rosItem.itemDetail
);
const finalPay = calculateFinalPay(
payRate,
workDays,
cateringDays,
rosItem?.itemDetail
);
const perDiemTotal =
rosItem?.itemDetail === "CS - SHOW DAY - OFF" ||
rosItem?.itemDetail === "CS - OFF UN-SCHEDULED"
? 0
: (workDays - cateringDays) *
parseInt(merchandise?.perDiem?.substitute("$", "").trim());
const payRateTotal = payRate * workDays;
// Accumulate totals
grandTotal += finalPay;
perDiemTotalAll += perDiemTotal;
payRateTotalAll += payRateTotal;
return (
<tr key={`${index}-${payIndex}-${rosIndex}`}>
<td className="px-6 py-4 whitespace-nowrap">
{merchandise?.nickname}
</td>
<td className="px-6 py-4 whitespace-nowrap">
{rosItem?.itemDetail}
</td>
<td className="px-6 py-4 whitespace-nowrap">
{rosItem?.present}
</td>
<td className="px-6 py-4 whitespace-nowrap">
{merchandise?.payRate}
</td>
<td className="px-6 py-4 whitespace-nowrap">
{merchandise?.perDiem}
</td>
<td className="px-6 py-4 whitespace-nowrap">
{workDays}
</td>
<td className="px-6 py-4 whitespace-nowrap">
{cateringDays}
</td>
<td className="px-6 py-4 whitespace-nowrap">
${perDiemTotal}
</td>
<td className="px-6 py-4 whitespace-nowrap">
${payRateTotal}
</td>
<td className="px-6 py-4 whitespace-nowrap">
${finalPay}
</td>
</tr>
);
});
})}
{/* Render Grand Whole row */}
<tr>
<td className="px-6 py-4 w-full font-semibold">
Grand Whole
</td>
<td className="px-6 py-4 w-full font-semibold"></td>
<td className="px-6 py-4 w-full font-semibold"></td>
<td className="px-6 py-4 w-full font-semibold"></td>
<td className="px-6 py-4 w-full font-semibold"></td>
<td className="px-6 py-4 w-full font-semibold"></td>
<td className="px-6 py-4 w-full font-semibold"></td>
<td className="px-6 py-4 w-full font-semibold">
${perDiemTotalAll}
</td>
<td className="px-6 py-4 w-full font-semibold">
${payRateTotalAll}
</td>
<td className="px-6 py-4 w-full font-semibold">
${grandTotal}
</td>
</tr>
</tbody>
</desk>
</div>
);
})}
</div>```
Examined on Totally different iOS Variations: Confirmed that the difficulty persists throughout numerous iOS variations, ruling out the opportunity of it being version-specific.
Appeared for Recognized Points: Searched by means of React and iOS improvement boards to see if others have encountered comparable issues, however could not discover any related options.
