AngularJS: Create editable tables with dynamic columns

I was recently asked:

"[how do I] implement functionality for new/delete for arrays in AngularJS... [when] object structure is unknown until runtime execution."

There are lots of ways to do this using Metawidget, which is why Metawidget doesn't dictate one out-of-the-box. By default, AngularJS Metawidget will only render arrays as read-only:

Adding editing capabilities depends on your particular UI needs. Here's one approach. Essentially we:

• Create an Angular directive to render a simple <table> with editable rows. This directive is not specific to Metawidget
• Create a Metawidget WidgetBuilder that can instantiate and configure the editable table. This includes reading metadata at runtime to determine the table's columns

So you'll end up with something like this:

The important Metawidget bit looks like this:

$scope.metawidgetConfig = {

   ...custom WidgetBuilder...
   
   widgetBuilder: new metawidget.widgetbuilder.CompositeWidgetBuilder( [ function( elementName, attributes, mw ) {

      if ( attributes.type === 'array' ) {

         ...inspects array metadata...
         
         var inspectionResult = mw.inspect( mw.toInspect, typeAndNames.type, typeAndNames.names );
         
         ...creates editable table

         var widget = $( '<table>' ).attr( 'edit-table', '' )
               .attr( 'columns', columns ).attr( 'ng-model', mw.path + '.' + attributes.name );
         return widget[0];
      }

You can download a complete project here. Feedback welcome!