Equivalent Single Html file with export options like Datatables

Question

I created a Single HTML - Table - With Export Options, Search, Pagination using Static Data using DataTables.

plnkr.co/edit/n3cbx8GrGoJtOpgbxE32?p=preview

is similar kind of example or working html available in angular-ui-grid

Datatable doesn't works well with huge records. Could you please kindly help with an equivalent html file using angular ui grid..thanks in advance for anything

Thanks.

Answer 1

From what it looks like, you are able to export CSV and PDF. I don't see any evidence of the Excel export working. I am not sure offhand on the print function, however, exporting the PDF and printing would be an option. I can look later if it's a deal breaker.

The JS code is pretty straight forward. I've added some options for the PDF configuration as well.

The code for the exporting function comes verbatim from UI-Grid.info: 312 Exporting Data With Custom UI. It could be converted to buttons if you wanted, but this provides the external export functionality. The little menu in the upper right corner also has these export options, so I've left it for your experimentation. Setting $scope.gridOptions.enableGridMenu to false will turn that off.

JS

$scope.gridOptions = {
    enableGridMenu: true,
    data: 'data',
    paginationPageSizes: [10],
    paginationPageSize: 10,

    exporterLinkLabel: 'get your csv here',
    exporterPdfDefaultStyle: {fontSize: 9},
    exporterPdfTableStyle: {margin: [10, 10, 10, 10]},
    exporterPdfTableHeaderStyle: {fontSize: 10, bold: true, italics: true, color: 'red'},
    exporterPdfOrientation: 'portrait',
    exporterPdfPageSize: 'LETTER',
    exporterPdfMaxGridWidth: 500,

    onRegisterApi: function(gridApi){
      $scope.gridApi = gridApi;
    },

  };

  // Verbatim: http://ui-grid.info/docs/#/tutorial/312_exporting_data_complex
  $scope.export = function(){
    if ($scope.export_format == 'csv') {
      var myElement = angular.element(document.querySelectorAll(".custom-csv-link-location"));
      $scope.gridApi.exporter.csvExport( $scope.export_row_type, $scope.export_column_type, myElement );
    } else if ($scope.export_format == 'pdf') {
      $scope.gridApi.exporter.pdfExport( $scope.export_row_type, $scope.export_column_type );
    }
  };

HTML

<!-- Verbatim: http://ui-grid.info/docs/#/tutorial/312_exporting_data_complex -->
<label>Which columns should we export?</label>
  <select ng-model="export_column_type"</select>
    <option value='all'>All</option>
    <option value='visible'>Visible</option>
  </select>
  <label>Which rows should we export?</label>
  <select ng-model="export_row_type"</select>
    <option value='all'>All</option>
    <option value='visible'>Visible</option>
    <option value='selected'>Selected</option>
  </select>
  <label>What format would you like?</label>
  <select ng-model="export_format"</select>
    <option value='csv'>CSV</option>
    <option value='pdf'>PDF</option>
  </select>
  <button ng-click="export()">Export</button>
  <div class="custom-csv-link-location">
    <label>Your CSV will show below:</label>
    <span class="ui-grid-exporter-csv-link">&nbsp</span>
  </div>

  <div ui-grid="gridOptions" class="grid" style="width:100%"
       ui-grid-selection ui-grid-exporter ui-grid-pagination></div>
  </div>

Example Plunk