angular-ui-grid up-down arrows not displaying for column of type number

Question

When I set my column type to 'number', it does not render the default up/down arrows. It will only allow straight text editing. Is another grid option overriding it? The "Priority" column is the issue in my example.

Column with up/down arrows:

My column with the problem:

HTML:

       <div ui-grid="gridRecipeRules" ui-grid-expandable ui-grid-edit ui-grid-row-edit ui-grid-auto-resize ui-grid-selection class="grid" ng-style="getRecipeRuleTableHeight()"></div>

JS:

 $scope.gridRecipeRules = {
        data: 'recipeRules',
        multiSelect: false,
        enableFiltering: true,
        enableSorting: true,
        enableRowHeaderSelection: false, // We don't want to have to click a row header to select a row. We want to just click the row itself.
        enableHorizontalScrollbar: uiGridConstants.scrollbars.WHEN_NEEDED,
        rowEditWaitInterval: -1,
        selectedItems: $scope.selectedRules,
        columnDefs: [{ name: 'Priority', displayName: 'Priority', type: 'number', width: '8%'},
                     { field: 'Description', displayName: 'Name', width: '50%', resizable: true },
                     { field: 'Derating', displayName: 'Derate', width: '14%', type: 'number' },
                     { field: 'AttributeCode', displayName: 'AndOr', width: '14%', resizable: true },
                     { field: 'StopProcessingOnMatch', displayName: 'Stop', width: '12%', type: 'boolean' }],
        expandableRowHeight: 300,
        expandableRowTemplate: '<h3 style="margin-top: 10px;">Rule Evaluations</h3>' +
                               '<div ui-grid="row.entity.ruleEvaluations" style=" float:left; height:200px;width:50%;" ui-grid-edit ui-grid-row-edit></div>' +
                               '<div ui-grid="row.entity.ruleActions" style="float:left; height:200px;width:30%;"  ui-grid-edit ui-grid-row-edit> </div> '
    };