function MainComponent({ plans }) { const headers = [ 'GB', 'Docomo', 'AU', 'SoftBank' ]; const maxGb = Math.max(...plans.flatMap((provider)=>provider.plans.map((plan)=>plan.gb))); const rows = []; for(let gb = 1; gb <= maxGb; gb++){ const row = [ gb ]; plans.forEach((provider)=>{ const plan = provider.plans.find((plan)=>plan.gb === gb); row.push(plan ? plan.price : 'N/A'); }); rows.push(row); } return /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full text-center border-collapse border border-gray-300", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "bg-gray-200", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, headers.map((header)=>/*#__PURE__*/ React.createElement("th", { key: header, className: "px-4 py-2 border border-gray-300 font-semibold", __source: { fileName: "", lineNumber: 20, columnNumber: 15 }, __self: this }, header)))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, rows.map((row, index)=>{ const rowClass = index % 2 === 0 ? 'bg-white' : 'bg-gray-50'; return /*#__PURE__*/ React.createElement("tr", { key: index, className: rowClass, __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }, row.map((cell, cellIndex)=>/*#__PURE__*/ React.createElement("td", { key: cellIndex, className: "px-4 py-2 border border-gray-300", __source: { fileName: "", lineNumber: 30, columnNumber: 19 }, __self: this }, cell))); })))); } function StoryComponent() { const plans = [ { provider: 'Docomo', plans: [ { gb: 1, price: 2980 }, { gb: 3, price: 3980 }, { gb: 5, price: 4980 }, { gb: 10, price: 6980 } ] }, { provider: 'AU', plans: [ { gb: 1, price: 3000 }, { gb: 3, price: 4000 }, { gb: 5, price: 5000 }, { gb: 10, price: 7000 } ] }, { provider: 'SoftBank', plans: [ { gb: 1, price: 3100 }, { gb: 3, price: 4100 }, { gb: 5, price: 5100 }, { gb: 10, price: 7100 } ] } ]; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 73, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { plans: plans, __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this })); }

GB	Docomo	AU	SoftBank
1	2980	3000	3100
2	N/A	N/A	N/A
3	3980	4000	4100
4	N/A	N/A	N/A
5	4980	5000	5100
6	N/A	N/A	N/A
7	N/A	N/A	N/A
8	N/A	N/A	N/A
9	N/A	N/A	N/A
10	6980	7000	7100