Custom data

Directive

<div ngc-table
    data="smalldata"
    left-column-number="3" left-column-widths="'40px'"
    center-column-number="10" center-column-widths="['40px']"
    right-column-number="2" right-column-widths="['40px']"
    header-row-number="2" header-row-heights="['15px', '15px']"
    row-number='15' row-heights="['15px', '15px']"
    footer-row-number="3" footer-row-heights="'15px'">

    <ngc-range top="0" bottom="10" left="0" right="6" format-fn="cellFormat"
            custom-trusted-html-fn="customTrustedHTMLFn"></ngc-range>

    <ngc-range top="10" bottom="20" left="6" right="20" format-fn="cellFormat"
            custom-html-fn="customHTMLFn"></ngc-range>
</div>

Controller

angular.module('ngcTableDirectiveTest', ['ngcTableDirective'])
.controller('TestCtrl', function($scope) {
    $scope.data = [];

    for (var row = 0; row < 42; row++) {
        var rowContent = [];
        for (var col = 0; col < 42; col++) {
            rowContent.push(row * col + col);
        }
        $scope.data.push(rowContent);
    }

    $scope.customTrustedHTMLFn = function(value, row, col) {
        return '<input style="width:30px" type="text"  value="' + value + '">';
    };

    $scope.customHTMLFn = function(value, row, col) {
        return '<input style="width:30px" type="text"  value="' + value + '"><span>Sanitized HTML</span>';
    };
});