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.