angularjs UI grid - динамическое отображение столбцов

Вы можете динамически создавать столбцы внутри функции loadgridVatMakeRpt, например. вы, согласно вашей информации, можете перебирать количество столбцов, размещать фиксированный набор столбцов и добавлять один динамический столбец для каждой итерации до последней записи.

Также, при необходимости, найдите ссылку на документацию для дальнейшего динамического поведения.

Просто обратите внимание, что столбец должен иметь поле, с которым он должен отображаться.

$scope.gridOptionsVatMakeRpt = {
    enableFullRowSelection: true,
    enableRowHeaderSelection: false,
    paginationPageSizes: [20, 40, 60],
    paginationPageSize: 40,
    rowHeight: 53,
    enableFiltering: true,
    enableCellEdit: false,
    enableGridMenu: false,
    rowTemplate:
        '<div ng-class="{ \'grey\':grid.appScope.rowFormatter( row ) }">' +
        '  <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }"  ui-grid-cell></div>' +
        '</div>',
    columnDefs:  [
        {
            field: 'LineNumber', grouping: {
                groupPriority: 0
            },
            width: '10%', visible: true
        }
        , {
            field: 'AttributeName', grouping: {
                groupPriority: 1
            },
            width: '10%', visible: true
        }

        , { field: 'Source', width: '10%', visible: true }
        , { field: 'MIC', width: '10%', visible: true }
   }

    $scope.loadgridVatMakeRpt = function () {

    $scope.loading = true;

    console.log('loading grid');


        LRWService.getVatMakeRpt('1', '1221209', '100000028', '2020-05-08', '2020-05-08').success(function (data) {
        if (data === null || data.VatMakeRptList === null || data.VatMakeRptList.length === 0) {

            $scope.error = true;
            $scope.errorDescription = "No data found for selected criteria.";
        } else {
            $scope.gridOptionsVatMakeRpt.paginationPageSizes.push(
                data.VatMakeRptList.length
            );
            var VatMakeRptList = data.VatMakeRptList;
            

            var keysArray = [];
            keysArray = Object.keys(VatMakeRptList[0]);
             
            for (var i = 4;i<keysArray.length;i++) {
              $scope.gridOptionsVatMakeRpt.columnDefs.push({ name: keysArray[i], field: keysArray[i],width: <dynamic/fixed width>, visible: true});
            }

            $scope.gridOptionsVatMakeRpt.data = VatMakeRptList;
            $scope.renderfields();
            console.log(VatMakeRptList);
            $scope.error = false;
        }

    }).finally(function () { $scope.loading = false; });
};