DTColumnDefBuilder with option sWidth is not working properly. #287

DTColumnDefBuilder-with-option-sWidth-is-not-working-properly.-#287.markdown

DTColumnDefBuilder with option sWidth is not working properly. #287

This was to inspect an issue with datatables in an angular / bootstrap application, when applying options and formatting numbers with numeral.js. This gist does not contain the solution, which is wrapping the dtColumnDefs - definition in a $timeout. See discussion under l-lin/angular-datatables#287.

A Pen by ManfredK on CodePen.

Forked from Louis LIN's Pen Row Grouping in v0.4.0 #228.

License.

index.html

      <div ng-app="datatablesSampleApp">
         <div ng-controller="SimpleCtrl as showCase" class="code">
            <table datatable="ng" dt-options="showCase.dtOptions" dt-column-defs="showCase.dtColumnDefs" class="row-border hover">
               <thead>
                  <tr>
                     <th ng-repeat="col in showCase.dtColumnDefs">{{col.aTargets[0].sTitle}}
                  </tr>
               </thead>
               <tbody>
                  <tr ng-repeat="companies in showCase.companies">
                     <td ng-repeat="col in showCase.dtColumnDefs">{{ companies[col.sTitle] }}</td>
                  </tr>
               </tbody>
            </table>
         </div>
      </div>

      <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
      <script src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
      <script src="http://code.angularjs.org/1.3.13/angular.js"></script>
      <script src="http://code.angularjs.org/1.3.13/angular-resource.js"></script>
      <script src="https://rawgithub.com/l-lin/angular-datatables/dev/dist/angular-datatables.min.js"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/1.4.5/numeral.min.js"></script>

script.js

angular.module('datatablesSampleApp', ['datatables', 'ngResource'])
   .controller('SimpleCtrl', ['DTOptionsBuilder', 'DTColumnDefBuilder', 'DTInstances', '$resource', SimpleCtrl]);

function SimpleCtrl(DTOptionsBuilder, DTColumnDefBuilder, DTInstances, $resource) {

   numeral.language('de', {
      delimiters: {
         thousands: '.',
         decimal: ','
      },
      currency: {
         symbol: '€'
      }
   });
   numeral.language('de');

   var vm = this;
   vm.companies = [];
   vm.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers').withDisplayLength(5);
   vm.dtColumnDefs = [
      DTColumnDefBuilder.newColumnDef(0).withTitle('name')
      .withOption('className', 'text-left'),

      DTColumnDefBuilder.newColumnDef(1).withTitle('country')
      .withOption('className', 'text-left'),

      DTColumnDefBuilder.newColumnDef(2).withTitle('brandValue')
      .withOption('className', 'text-right')
      .renderWith(function(data, type, full) {
         return type == 'display' ? numeral(full[2]).format('0.0') : full[2];
      }),

      DTColumnDefBuilder.newColumnDef(3).withTitle('rating')
      .withOption('className', 'text-left'),

      DTColumnDefBuilder.newColumnDef(4).withTitle('capitalization')
      .withOption('className', 'text-right')
      .renderWith(function(data, type, full) {
         return type == 'display' ? numeral(full[4]).format('0,0.0') : full[2];
      })

      //.notSortable()
   ];

   $resource('https://rawgit.com/manfredk/angular-datatables/master/data2.json')
      .query().$promise.then(function(companies) {
         vm.companies = companies;
      });
}

style.css

.text-danger {
  color: #b4052c;
  font-weight: bold;
   text-align: left;
}
.text-left {
   text-align: left;
}
.text-right {
   text-align: right;
}