angularjs UI grid - display columns dynamically

You can create columns dynamically inside the function loadgridVatMakeRpt eg. you as per your information you can iterate through the number of columns, post fixed set of columns and add one dynamic column for each iteration till the last entry.

Also find below documentation link for further dynamic behaviour if needed

Just note that, column should have field to which it should map to.

$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; });
};