Responsive extension doesn't show ngTemplateRef column

[aolmez]

Hi,

When I use responsible extension and in responsible style , it only shows data field or render function.

      this.dtOptions = {
           pagingType: 'full_numbers',
           pageLength: 10,
           serverSide: true,
           responsive: true,
           autoWidth: false,
           language: this.dataTableLanguage, 
           ajax: (dataTablesParameters: any, callback) => {
               let params = {...dataTablesParameters}; 
               this.countryService.getPaged(params)
                   .subscribe({
                       next(response) {
                           callback({
                               recordsTotal: response.recordsTotal,
                               recordsFiltered: response.recordsTotal,
                               data: response.data
                           });
                       },
                       error(msg) {
                           callback({
                               recordsTotal: 0,
                               recordsFiltered: 0,
                               data: []
                           });
                           self.notifierService.notify('error', self.translateService.instant('translations.notifier.error.data-fetching-error'));
                       }
                   });
           },
           order: [
               [
                   0, 'asc'
               ]
           ],
           columns: [
               {
                   data: 'name',
                   orderable: true,
               },
               {
                   data: 'latinName',
                   orderable: true,
               },
               {
                   data: 'alphaCode2',
                   orderable: true,
               },
               /*
               {data: 'alphaCode3', orderable: true, width: '10%'},
               {data: 'currencyCode', orderable: true, width: '10%'},
               {data: 'phoneCode', orderable: true, width: '10%'},
               {data: 'numberCode', orderable: true, width: '5%'},
               {data: 'riskDegree', orderable: true, width: '5%'},
               */
               {
                   data: 'isDeleted',
                   orderable: true,
                   render: function (data: any, type: any, full: any) {
                       if (data) {
                           return '<span class="badge bg-soft-danger text-danger">' + self.translateService.instant('translations.country.index.grid.cell.delete-no') + '</span>';
                       } else {
                           return '<span class="badge bg-soft-success text-success">' + self.translateService.instant('translations.country.index.grid.cell.delete-yes') + '</span>';
                       }
                   }
               },
               {
                   data: null,
                   orderable: false,
                   defaultContent: '',
                   ngTemplateRef: {
                       ref: this.dtActions,
                       context: {
                           captureEvents: self.onCaptureEvent.bind(self)
                       }
                   }
               }
           ]
       };

:My Environment

angular-datatables version: 13.2.5

Thank you in advance for your help

[shanmukhateja]

Hi @aolmez ,

Can you provide link to StackBlitz or GitHub repo to investigate this?

[aolmez]

Hi @shanmukhateja ,

you can find sample code link following line.
https://github.com/aolmez/datatable-bug

[shanmukhateja]

Hello @aolmez

This is because Responsive plugin automatically determines what columns should be visible according to browser width.

You can learn more about this in the documentation here and here

FIX:

Inform Responsive plugin to show all columns in all breakpoints.

this.dtOptions = {
...,
columnDefs: [
  {  className: 'all',  targets: '_all' } // apply for all columns
],
}

BONUS:
You might want to enable scrollX (horizontall scrolling) depending on number of columns.

EDIT: Updated targets to set className for all columns.