Tree table with angularJS and adapt-strap. Columns are "squeezed"

Question

Here is simple example tree table using adapt-strap. I have problem during adding new columns. I tried to add column with uppercase name:

jsfiddle:

http://jsfiddle.net/t2qafj81/

HTML:

<div ng-app="adaptv.adaptStrapDocs" ng-controller="treebrowserCtrl">
    <!-- ===== template files ===== -->
    <script type="text/ng-template" id="src/treebrowser/docs/treeHeader.html">
        <div>
            <span class="pull-left">Name</span>
            <span class="pull-left">Name uppercase</span>
            <span class="pull-right margin-right-lg">Price Range</span>
        </div>
    </script>
    <script type="text/ng-template" id="src/treebrowser/docs/treeNode.html">
        <div>
            <span class="pull-left">{{ item.name }}</span>
            <span class="pull-left">{{ item.name | uppercase }}</span>
            <span class="pull-right margin-right-lg">  <a href ng-click="open(item)">  
                {{ item.priceRange }}
                </a> </span>
        </div>
    </script>

    <!-- ===== Usage with border & header ===== -->
    <p>With Border &amp; header</p>
    <ad-tree-browser class="ad-border-default"
                     tree-name="treeDemoBordered"
                     row-ng-class="{added:item._selected}"
                     tree-root="root"
                     child-node="children"
                     children-padding="10"
                     bordered="true"
                     node-header-url="src/treebrowser/docs/treeHeader.html"
                     node-template-url="src/treebrowser/docs/treeNode.html">
    </ad-tree-browser>
    <hr>
    <!-- ===== Usage ===== -->
    <p>Simple tree without border</p>
    <ad-tree-browser class="ad-border-default"
         tree-name="treeDemo"
         row-ng-class="{added:item._selected}"
         tree-root="root"
         child-node="children"
         children-padding="15"
         node-template-url="src/treebrowser/docs/treeNode.html">
    </ad-tree-browser>
</div>

Java script:

// ========== initialize documentation app module ========== //
angular.module('adaptv.adaptStrapDocs', [
  'ngSanitize',
  'adaptv.adaptStrap'
])

// ========== controllers ========== //
.controller('treebrowserCtrl', ['$scope', function ($scope) {
    $scope.root = {
      children: [
           {
          name: 'Bmw',
          priceRange: '30k to 200k'
           },
        {
          name: 'Bmw',
          priceRange: '30k to 200k',
          children: [
            {
              name: '328i',
              priceRange: '30k to 40k'
            },
            {
              name: '335i',
              priceRange: '35k to 47k'
            },
            {
              name: '535i',
              priceRange: '40k to 50k'
            }
          ]
        },
        {
          name: 'Audi',
          priceRange: '30k to 200k',
          children: [
            {
              name: 'A4',
              priceRange: '30k to 55k',
              children: [
                {
                  name: 'Quattro premium plus',
                  priceRange: '35k to 49k'
                },
                {
                  name: 'Quattro Prestige',
                  priceRange: '45k to 55k'
                },
                {
                  name: 'FWD',
                  priceRange: '35k to 40k'
                }
              ]
            },
            {
              name: 'A6',
              priceRange: '45k to 60k'
            },
            {
              name: 'A8',
              priceRange: '60k to 80k'
            }
          ]
        },
        {
          name: 'Honda',
          priceRange: '15k to 50k',
          children: [
            {
              name: 'Civic',
              priceRange: '15k to 20k'
            },
            {
              name: 'Accord',
              priceRange: '25k to 35k'
            },
            {
              name: 'CRV',
              priceRange: '25k to 35k'
            }
          ]
        }
      ]
    };

    $scope.open = function(data){
        alert(data.name);
    }
  }
]);

How do I correctly define my template for table header and rows? (I would like to add more than 1 new column)

More information about adapt-strap and tree browser: http://adaptv.github.io/adapt-strap/##treebrowser

Answer 1

Tree is a complex UI structure to deal with.

In order to support multiple use cases, tree browser doesn't deal with spacing and margins of your cells. You simply apply classes to your cell and apply spacing/margins on your own.

Here is the updated fiddle: http://jsfiddle.net/t2qafj81/3/

<!-- in your css file -->
<style>
    .name-cell {
        width: 100px;
    }
    .upper-case-cell {
        margin-left: 30px;
    }
</style>

<!-- ===== template files ===== --> 
<script type="text/ng-template" id="src/treebrowser/docs/treeHeader.html">
    <div>
        <span class="pull-left name-cell">Name</span>
        <span class="pull-left upper-case-cell">Name uppercase</span>
        <span class="pull-right margin-right-lg">Price Range</span>
    </div>
</script>
<script type="text/ng-template" id="src/treebrowser/docs/treeNode.html">
    <div>
        <span class="pull-left name-cell">{{ item.name }}</span>
        <span class="pull-left upper-case-cell">{{ item.name | uppercase }}</span>
        <span class="pull-right margin-right-lg">  <a href ng-click="open(item)">  
            {{ item.priceRange }}
            </a> </span>
    </div>
</script>