[SalesForce] How to create tables Dynamically in a VisualForce

The expression value can be set in an Apex controller using a dynamiccomponent. Because the expression is built outside of Visualforce, it can be dynamically set based on a Custom Setting. Here's what I ended up with:

Visualforce

<apex:dynamicComponent componentValue="{!SectionsAndFields}"/>

Apex

public Component.Apex.OutputPanel getSectionsAndFields() 
{
    Component.Apex.PageBlockSection PageBlockSection 
        = new Component.Apex.PageBlockSection();

    PageBlockSection.title = 'Section';
    PageBlockSection.collapsible = false;

    for(Field__c f : Fields)
    {
        Component.Apex.InputField InputField = new Component.Apex.InputField();

        if(f.Lookup_sObject__c != null 
        && sObjectsByType.get(f.sObject__c).getSObject(f.Lookup_sObject__c) != null) 
        {
            // use dot notation to reference fields on an sObject
            // use brackets and escaped quotes around a key 
            //   to get a value from a map (sObjectsByType in this example)
            InputField.expressions.value = '{!sObjectsByType' 
                + '[\'' + f.sObject__c + '\']' 
                + '.' + f.Lookup_sObject__c + '.' + f.Field_API_Name__c + '}';

            PageBlockSection.childComponents.add(InputField);
        }

        if(f.Lookup_sObject__c == null) 
        {
            InputField.expressions.value = '{!sObjectsByType' 
                + '[\'' + f.sObject__c + '\']' 
                + '.' + f.Field_API_Name__c + '}';

            PageBlockSection.childComponents.add(InputField);
        }
    }

    return PageBlockSection;
}

This will produce the table:

<script>
var app = angular.module('main', ['ngTable'])
app.controller('DemoCtrl', function($scope, ngTableParams) {
    var data = [];
    Visualforce.remoting.Manager.invokeAction(
       '{!$RemoteAction. TableFormatContr.getAccount}',
       function(result, event) {
            if (event.status) {
                data = result;
                $scope.tableParams = new ngTableParams({
                    page: 1,            // show first page
                    count: 10           // count per page
                }, {
                    total: data.length, // length of data
                    getData: function($defer, params) {
                        $defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                    }
                });
                $scope.$apply();
            } else if (event.type === 'exception') {
                alert(event.message);
            }
        }, 
        {escape: true}
    );
});
</script>

A key point about this sort of JavaScript is that data is returned to the browser asynchronously by code such as Visualforce.remoting.Manager.invokeAction. That means that you cannot rely on any values until its callback function - the second argument - has executed. The easiest way to ensure that the values you need are available is to put the logic that needs the data in the callback function. (There are probably more elegant patterns but this is a pragmatic fix for your code.)

In many cases Angular can automatically notice changes to values in the scope and render the view accordingly. For cases where it can't, there is $scope.$apply() to tell Angular to do the render and that appears necessary in this case.

I strongly recommend that if you are going to use Angular that you invest time in learning more about it. I found the https://egghead.io/ videos very helpful for that - they cover key topics in 5 minutes or less.