Angular ui-grid unable to set column width and doesn't show horizontal scrollbar

Question

I'm a newbie with AngularJS and ui-grid.

I want to show horizontal scrollbar, but it doesn't show and unable to change column width. The width of the grid is not altered and all the columns are shrinked to fit the grid.

1st. I did copy-paste from horizontal_scrolling tutorial to my Plunker. OK. It works.

It defines column width like below code.

$timeout( function() {
  // colCount=10;
  for (var colIndex = 0; colIndex < colCount; colIndex++) {
    $scope.gridOptions.columnDefs.push({ 
      name: 'col' + colIndex,
      width: 200
    });
  }
});

2nd. I changed a little. But it doen't work.... 2nd example Plunker

var arr = [{name:'col0', wigth: 200},
          {name:'col1', wigth: 200},
          {name:'col2', wigth: 200},
          {name:'col3', wigth: 200},
          {name:'col4', wigth: 200},
          {name:'col5', wigth: 200},
          {name:'col6', wigth: 200},
          {name:'col7', wigth: 200},
          {name:'col8', wigth: 200},
          {name:'col9', wigth: 200}];
$timeout( function() {
  // arr.length=10;
  for (var i = 0; i < arr.length; i++) {
    $scope.gridOptions.columnDefs.push(arr[i]);
  }
});

Why 2nd example doesn't alter column width and doesn't show horizontal scrollbar?

What's the difference between 1st and 2nd?

Answer 1

typo wigth

change all

var arr = [{name:'col0', wigth: 200},

to

var arr = [{name:'col0', width: 200},