Visualforce Page like Excel Spreadsheet

Excel To VF

/** This visualforce page allows you to total up columns, total up rows, and total it all up, just like you would in excel! 

<apex:page StandardController="outfunds__Funding_Request__c"  lightningStylesheets="true">
<apex:slds />
   <apex:form id="form">
   <apex:outputText value="Voices for Healthy Kids Budget Planning Tool" id="header"/>
  <apex:panelGrid columns="4" id="theGrid">
  <apex:outputText value="" id="thefirst"/>
        <apex:outputText value="Non Lobbying" id="theSecond"/>
        <apex:outputText value="Lobbying" id="theThird"/>
         <apex:outputText value="Total" id="theforth"/>
         <apex:outputText value="Personnel" id="Personnel"/>
    <apex:inputField id="fieldPNL" value="{!outfunds__Funding_Request__c.Personnel_Non_Lobbying__c }" onchange="calculateTotal(),calculateTotal3(),calculateTotal5()" style="width:80%"></apex:inputField>
    <apex:inputField id="FieldPLob"  value="{! outfunds__Funding_Request__c.Personnel_Lobbying__c }" onchange="calculateTotal(),calculateTotal4(),calculateTotal5()" style="width:80%"></apex:inputField>
    <apex:inputField id="PTotal"  value="{! outfunds__Funding_Request__c.Personnel_Total__c }" onchange="calculateTotal(),calculateTotal5()" style="width:80%"></apex:inputField>
    
    <apex:outputText value="Office Operations" id="Office"/>
    <apex:inputField id="field1" value="{!outfunds__Funding_Request__c.Office_Operations_Non_Lobbying__c }" onchange="calculateTotal2(),calculateTotal3(),calculateTotal5()" style="width:80%"></apex:inputField>
    <apex:inputField id="field2"  value="{!outfunds__Funding_Request__c.Office_Operations_Lobbying__c }" onchange="calculateTotal2(),calculateTotal4(),calculateTotal5()" style="width:80%"></apex:inputField>
    <apex:inputField id="OTotal"  value="{!outfunds__Funding_Request__c.Office_Operations_Total__c }" onchange="calculateTotal2(),calculateTotal5()" style="width:80%"></apex:inputField>

 <apex:outputText value="Totals" id="totals"/>
 <apex:inputField value="{!outfunds__Funding_Request__c.Non_Lobbying_Total__c}" id="showTotal" onchange="calculateTotal3(),calculateTotal5()" style="width:80%"></apex:inputField>
 <apex:inputField value="{!outfunds__Funding_Request__c.Lobbying_Total__c}" id="LobbyingTotal" onchange="calculateTotal4(),calculateTotal5()" style="width:80%"></apex:inputField>
 <apex:inputField value="{!outfunds__Funding_Request__c.Total__c}" id="Total5" onchange="calculateTotal5()" style="width:80%"></apex:inputField>
 
 </apex:panelgrid>
 <apex:commandButton action="{!save}" value="Save"/>       
    
    </apex:form>
    
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script type="text/javascript">
        var calculateTotal = function() {
            $( "[id*='varCalTotal']" ).attr( "readonly", "true" );
            
            var fieldPNL  = $( "[id*='fieldPNL']" ).val();
            var FieldPLob    = $( "[id*='FieldPLob']" ).val();
            
            var total = parseFloat( fieldPNL ) + parseFloat( FieldPLob );
            if( !isNaN( total ) ) {
                $( "[id*='PTotal']" ).val( total );
            }
        };     
        calculateTotal();
        
            var calculateTotal2 = function() {
            $( "[id*='varCalTotal2']" ).attr( "readonly", "true" );
            
            var field1  = $( "[id*='field1']" ).val();
            var field2    = $( "[id*='field2']" ).val();
            
            var total = parseFloat( field1 ) + parseFloat( field2 );
            if( !isNaN( total ) ) {
                $( "[id*='OTotal']" ).val( total );
            }
        };
        
        calculateTotal2();
     
               var calculateTotal3 = function() {
            $( "[id*='varCalTotal3']" ).attr( "readonly", "true" );
            
            var fieldPNL  = $( "[id*='fieldPNL']" ).val();
            var field1    = $( "[id*='field1']" ).val();
            
            var total = parseFloat( field1 ) + parseFloat( fieldPNL );
            if( !isNaN( total ) ) {
                $( "[id*='showTotal']" ).val( total );
            }
        };
        
        calculateTotal3();  
        
        var calculateTotal4 = function() {
            $( "[id*='varCalTotal4']" ).attr( "readonly", "true" );
            
            var FieldPLob  = $( "[id*='FieldPLob']" ).val();
            var field2    = $( "[id*='field2']" ).val();
            
            var total = parseFloat( FieldPLob ) + parseFloat( field2 );
            if( !isNaN( total ) ) {
                $( "[id*='LobbyingTotal']" ).val( total );
            }
        };
        
        calculateTotal4();   
        
        var calculateTotal5 = function() {
            $( "[id*='varCalTotal5']" ).attr( "readonly", "true" );
            
            var PTotal  = $( "[id*='PTotal']" ).val();
            var OTotal    = $( "[id*='OTotal']" ).val();
            
            var total = parseFloat( PTotal ) + parseFloat( OTotal );
            if( !isNaN( total ) ) {
                $( "[id*='Total5']" ).val( total );
            }
        };
        
        calculateTotal5();   
    </script>
</apex:page>