Blazor Spreadsheet Example - Overview
This overview sample demonstrates the core capabilities of the Blazor Spreadsheet component, offering a high-level view of its most essential features. It highlights how the component efficiently handles large datasets using virtual scrolling, while also showcasing key user interactions like formula editing, data entry, and cell formatting. This sample serves as a comprehensive introduction for users to explore the full potential of the Blazor Spreadsheet in real-world scenarios.
| A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z | AA | AB | AC | AD | AE | AF | AG | AH | AI | AJ | AK | AL | AM | AN |
|---|
| 1 |
| 2 |
| 3 |
| 4 |
| 5 |
| 6 |
| 7 |
| 8 |
| 9 |
| 10 |
| 11 |
| 12 |
| 13 |
| 14 |
| 15 |
| 16 |
| 17 |
| 18 |
| 19 |
| 20 |
| 21 |
| 22 |
| 23 |
| 24 |
| 25 |
| 26 |
| 27 |
| 28 |
| 29 |
| 30 |
| 31 |
| 32 |
| 33 |
| 34 |
| 35 |
| 36 |
| 37 |
| 38 |
| 39 |
| 40 |
| 41 |
| 42 |
| 43 |
| 44 |
| 45 |
| 46 |
| 47 |
| 48 |
| 49 |
| Month | Monthly EMI | Principal | Interest | Principal % in EMI | Interest % in EMI | Outstanding Loan | Loan % Paid Off | ||||||||||||||||||||||||||||||||
| 0 | - | - | - | - | - | $5,800,000.00 | 0.00% | ||||||||||||||||||||||||||||||||
| 1 | $50,333.75 | $9,250.41 | $41,083.33 | 18.38% | 81.62% | $5,790,749.59 | 0.16% | ||||||||||||||||||||||||||||||||
| 2 | $50,333.75 | $9,315.94 | $41,017.81 | 18.51% | 81.49% | $5,781,433.65 | 0.32% | ||||||||||||||||||||||||||||||||
| Home Loan Amount | $5,800,000.00 | 3 | $50,333.75 | $9,381.93 | $40,951.82 | 18.64% | 81.36% | $5,772,051.72 | 0.48% | ||||||||||||||||||||||||||||||
| Loan Interest Rate | 9% | 4 | $50,333.75 | $9,448.38 | $40,885.37 | 18.77% | 81.23% | $5,762,603.34 | 0.64% | ||||||||||||||||||||||||||||||
| Loan Tenure (Years) | 20 | 5 | $50,333.75 | $9,515.31 | $40,818.44 | 18.90% | 81.10% | $5,753,088.03 | 0.81% | ||||||||||||||||||||||||||||||
| 6 | $50,333.75 | $9,582.71 | $40,751.04 | 19.04% | 80.96% | $5,743,505.33 | 0.97% | ||||||||||||||||||||||||||||||||
| EMI | $50,333.75 | 7 | $50,333.75 | $9,650.58 | $40,683.16 | 19.17% | 80.83% | $5,733,854.74 | 1.14% | ||||||||||||||||||||||||||||||
| Principal Repayment | $5,800,000.00 | 8 | $50,333.75 | $9,718.94 | $40,614.80 | 19.31% | 80.69% | $5,724,135.80 | 1.31% | ||||||||||||||||||||||||||||||
| Total Payment | $12,080,099.41 | 9 | $50,333.75 | $9,787.79 | $40,545.96 | 19.45% | 80.55% | $5,714,348.01 | 1.48% | ||||||||||||||||||||||||||||||
| Total Interest Payment | $6,280,099.41 | 10 | $50,333.75 | $9,857.12 | $40,476.63 | 19.58% | 80.42% | $5,704,490.90 | 1.65% | ||||||||||||||||||||||||||||||
| Loan Interest Rate Per Month | 1% | 11 | $50,333.75 | $9,926.94 | $40,406.81 | 19.72% | 80.28% | $5,694,563.96 | 1.82% | ||||||||||||||||||||||||||||||
| EMI Payments(Months) | $240.00 | 12 | $50,333.75 | $9,997.25 | $40,336.49 | 19.86% | 80.14% | $5,684,566.71 | 1.99% | ||||||||||||||||||||||||||||||
| 13 | $50,333.75 | $10,068.07 | $40,265.68 | 20.00% | 80.00% | $5,674,498.64 | 2.16% | ||||||||||||||||||||||||||||||||
| 14 | $50,333.75 | $10,139.38 | $40,194.37 | 20.14% | 79.86% | $5,664,359.26 | 2.34% | ||||||||||||||||||||||||||||||||
| 15 | $50,333.75 | $10,211.20 | $40,122.54 | 20.29% | 79.71% | $5,654,148.06 | 2.51% | ||||||||||||||||||||||||||||||||
| 16 | $50,333.75 | $10,283.53 | $40,050.22 | 20.43% | 79.57% | $5,643,864.52 | 2.69% | ||||||||||||||||||||||||||||||||
| 17 | $50,333.75 | $10,356.37 | $39,977.37 | 20.58% | 79.42% | $5,633,508.15 | 2.87% | ||||||||||||||||||||||||||||||||
| 18 | $50,333.75 | $10,429.73 | $39,904.02 | 20.72% | 79.28% | $5,623,078.42 | 3.05% | ||||||||||||||||||||||||||||||||
| 19 | $50,333.75 | $10,503.61 | $39,830.14 | 20.87% | 79.13% | $5,612,574.81 | 3.23% | ||||||||||||||||||||||||||||||||
| 20 | $50,333.75 | $10,578.01 | $39,755.74 | 21.02% | 78.98% | $5,601,996.80 | 3.41% | ||||||||||||||||||||||||||||||||
| 21 | $50,333.75 | $10,652.94 | $39,680.81 | 21.16% | 78.84% | $5,591,343.86 | 3.60% | ||||||||||||||||||||||||||||||||
| 22 | $50,333.75 | $10,728.40 | $39,605.35 | 21.31% | 78.69% | $5,580,615.47 | 3.78% | ||||||||||||||||||||||||||||||||
| 23 | $50,333.75 | $10,804.39 | $39,529.36 | 21.47% | 78.53% | $5,569,811.08 | 3.97% | ||||||||||||||||||||||||||||||||
| 24 | $50,333.75 | $10,880.92 | $39,452.83 | 21.62% | 78.38% | $5,558,930.16 | 4.16% | ||||||||||||||||||||||||||||||||
| 25 | $50,333.75 | $10,957.99 | $39,375.76 | 21.77% | 78.23% | $5,547,972.17 | 4.35% | ||||||||||||||||||||||||||||||||
| 26 | $50,333.75 | $11,035.61 | $39,298.14 | 21.92% | 78.08% | $5,536,936.56 | 4.54% | ||||||||||||||||||||||||||||||||
| 27 | $50,333.75 | $11,113.78 | $39,219.97 | 22.08% | 77.92% | $5,525,822.78 | 4.73% | ||||||||||||||||||||||||||||||||
| 28 | $50,333.75 | $11,192.50 | $39,141.24 | 22.24% | 77.76% | $5,514,630.27 | 4.92% | ||||||||||||||||||||||||||||||||
| 29 | $50,333.75 | $11,271.78 | $39,061.96 | 22.39% | 77.61% | $5,503,358.49 | 5.11% | ||||||||||||||||||||||||||||||||
| 30 | $50,333.75 | $11,351.62 | $38,982.12 | 22.55% | 77.45% | $5,492,006.87 | 5.31% | ||||||||||||||||||||||||||||||||
| 31 | $50,333.75 | $11,432.03 | $38,901.72 | 22.71% | 77.29% | $5,480,574.83 | 5.51% | ||||||||||||||||||||||||||||||||
| 32 | $50,333.75 | $11,513.01 | $38,820.74 | 22.87% | 77.13% | $5,469,061.82 | 5.71% | ||||||||||||||||||||||||||||||||
| 33 | $50,333.75 | $11,594.56 | $38,739.19 | 23.04% | 76.96% | $5,457,467.27 | 5.91% | ||||||||||||||||||||||||||||||||
| 34 | $50,333.75 | $11,676.69 | $38,657.06 | 23.20% | 76.80% | $5,445,790.58 | 6.11% | ||||||||||||||||||||||||||||||||
| 35 | $50,333.75 | $11,759.40 | $38,574.35 | 23.36% | 76.64% | $5,434,031.18 | 6.31% | ||||||||||||||||||||||||||||||||
| 36 | $50,333.75 | $11,842.69 | $38,491.05 | 23.53% | 76.47% | $5,422,188.49 | 6.51% | ||||||||||||||||||||||||||||||||
| 37 | $50,333.75 | $11,926.58 | $38,407.17 | 23.69% | 76.31% | $5,410,261.91 | 6.72% | ||||||||||||||||||||||||||||||||
| 38 | $50,333.75 | $12,011.06 | $38,322.69 | 23.86% | 76.14% | $5,398,250.85 | 6.93% | ||||||||||||||||||||||||||||||||
| 39 | $50,333.75 | $12,096.14 | $38,237.61 | 24.03% | 75.97% | $5,386,154.71 | 7.14% | ||||||||||||||||||||||||||||||||
| 40 | $50,333.75 | $12,181.82 | $38,151.93 | 24.20% | 75.80% | $5,373,972.89 | 7.35% | ||||||||||||||||||||||||||||||||
| 41 | $50,333.75 | $12,268.11 | $38,065.64 | 24.37% | 75.63% | $5,361,704.79 | 7.56% | ||||||||||||||||||||||||||||||||
| 42 | $50,333.75 | $12,355.01 | $37,978.74 | 24.55% | 75.45% | $5,349,349.78 | 7.77% | ||||||||||||||||||||||||||||||||
| 43 | $50,333.75 | $12,442.52 | $37,891.23 | 24.72% | 75.28% | $5,336,907.26 | 7.98% | ||||||||||||||||||||||||||||||||
| 44 | $50,333.75 | $12,530.65 | $37,803.09 | 24.90% | 75.10% | $5,324,376.61 | 8.20% | ||||||||||||||||||||||||||||||||
| 45 | $50,333.75 | $12,619.41 | $37,714.33 | 25.07% | 74.93% | $5,311,757.19 | 8.42% | ||||||||||||||||||||||||||||||||
| 46 | $50,333.75 | $12,708.80 | $37,624.95 | 25.25% | 74.75% | $5,299,048.39 | 8.64% | ||||||||||||||||||||||||||||||||
| 47 | $50,333.75 | $12,798.82 | $37,534.93 | 25.43% | 74.57% | $5,286,249.57 | 8.86% |
In this sample, we have enabled drag selection for intuitive cell range selection, and implemented clipboard operations like cut, copy, and paste for seamless data manipulation. We have also included column and row resizing to support layout customization, and a footer to provide quick summary insights.
Interactive row and column headers allow for easy bulk selection. The formula bar is fully functional with syntax highlighting and autocomplete, enhancing formula entry and editing. Additionally, the sample demonstrates support for RTL mode and hyperlink interactions, emphasizing accessibility and interactivity. These implementations offer a practical and complete glimpse into the component's versatility and responsiveness.
Note: The AllowAutofill property is set to false in this sample, so the autofill handle will not be displayed when selecting a cell.
More information on the Blazor Spreadsheet can be found in this documentation section.